Start Building Professional
Web Apps Today

drag row and drop on form element

Dear Team,

I'm using the DHTMLX Grid Component version 1.6.

What I'm trying to do is drag some value from a row in my grid to a text element in my form. I use the following code (taken from examples from this knowledge base and examples from the component):

    <table width="600px">
        <tr>
<td>
                <div id="gridbox2" width="270px" height="250px" style="background-color:white;"></div>
</td>
            <td>
                <div style='float:right'> <input type="text" width="120px" id="sInput"></div>
            </td>
        </tr>
    </table>


<script>
    mygrid2 = new dhtmlXGridObject('gridbox2');
    mygrid2.selMultiRows = true;
    mygrid2.setImagePath("imgs/");
    var flds = "Alpha,Betta";
    mygrid2.setHeader(flds);
    mygrid2.setInitWidths("100,150")
    mygrid2.setColAlign("right,left")
    mygrid2.setColTypes("ed,ed");
    mygrid2.setColSorting("int,str");
    mygrid2.setColumnColor("white,#d5f1ff");
    mygrid2.setMultiLine(false);
    mygrid2.enableDragAndDrop(true);
    mygrid2.init();
    mygrid2.loadXML("grid.xml");
    
    
    var sinput=document.getElementById('sInput');
    
    function s_control(){
        this._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
            targetHtmlObject.style.backgroundColor="";
            //targetHtmlObject.value=sourceHtmlObject.parentObject.label;
            //How do we get the row_id of selected/dragged row...
            targetHtmlObject.value=mygrid2.cells(id,0).getValue(); //400??
        }
    
        this._dragIn=function(htmlObject,shtmlObject){
            htmlObject.style.backgroundColor="#fffacd";
            return htmlObject;
        }
    
        this._dragOut=function(htmlObject){
            htmlObject.style.backgroundColor="";
            return this;
        }
    }
    
    mygrid2.dragger.addDragLanding(sinput, new s_control);
</script>

When I use this I only get the value 400 (??)
Could you please tell/show me how I can drag a value from my grid to my text field just like this example http://dhtmlx.com/docs/products/dhtmlxTree/samples/drag_n_drop/pro_drag_out.html?un=1210588860000 ?

While d-n-d
    grid._dragged - array of dragged row objects
    grid._dndExtra - index of column, from which drag operation started

    function s_control(){
        this._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
            targetHtmlObject.style.backgroundColor="";
//            targetHtmlObject.value=mygrid2.cells(id,0).getValue(); //400??
           targetHtmlObject.value=mygrid2.cells(mygrid2._dragged[0].idd,0).getValue();
        }

Works like a charm!

mygrid2._dragged[0].idd that was just what I was missing as I got weird id's in the targetfield.

Thank you