Drag Drop

[tamil]

hi,

        Drag one cell from the grid and drop in to Another grid in a particular cell. so please give idea.

thanks.

[Jayaprakash Kamaraj]

Hi Tamil, 

 

Thank you for contacting Syncfusion support. 

 

we can drag and dop the cell by using ejDragable and ejDroppable controls and the dragged cell value replaced into the dropped target by using “setCellText” method of Grid control. Please refer to the below online api reference link, code example and sample. 

https://help.syncfusion.com/api/js/ejdraggable   

https://help.syncfusion.com/api/js/ejdroppable   

https://help.syncfusion.com/api/js/ejgrid#methods:setcelltext 

@{ 

    ViewData["Title"] = "Home Page"; 

} 

<div style="float:left;width:50%"> 

<ej-grid id="Grid" allow-paging="true" datasource="ViewBag.data" databound="databound" > 

     <e-columns> 

        <e-column field="OrderID" is-primary-key="true" header-text="Order ID" text-align="Right" width="70" ></e-column> 

..        

    </e-columns> 

    <e-selection-settings selection-mode="@(new List<string>(){"cell"})"></e-selection-settings> 

</ej-grid> 

    </div> 

<div style="float:right;width:49%"> 

<ej-grid id="DestGrid" allow-paging="true" datasource="ViewBag.data" databound="databound1"> 

    <e-columns> 

        <e-column field="OrderID" is-primary-key="true" header-text="Order ID" text-align="Right" width="70" ></e-column> 

        <e-column field="CustomerID" header-text="Customer ID" width="80" ></e-column> 

        <e-column field="EmployeeID" header-text="Employee ID"  text-align="Left" width="75"></e-column> 

        <e-column field="Freight" header-text="Freight" text-align="Right" format="{0:C2}" width="75"></e-column> 

    </e-columns> 

    <e-selection-settings selection-mode="@(new List<string>(){"cell"})"></e-selection-settings> 

</ej-grid> 

    </div> 

<script type="text/javascript"> 

    function databound(args) { 

        var $draganddropEle = $(this.getRows()).find("td"); 

        var proxy = this; 

        $draganddropEle.ejDraggable({ 

            cursorAt: { top: -8, left: -8 }, 

            helper: function (event, ui) { 

                this.clone = true; 

                var td = $(event.element), $td = td.clone(); 

                var $visualElement = ej.buildTag('div.e-cloneproperties e-draganddrop e-grid', "", { 'height': 'auto', 'z-index': 2, 'position': 'absolute', 'width': 'auto' }); 

                $visualElement.append($td).append("<td style='display:none'>" + proxy._id + "</td>"); 

                return $visualElement.addClass("e-dragclone").appendTo(proxy.element); 

            }, 

            dragStop: function (args) { 

                if (!args.element.dropped) { 

                    $(".e-dragclone").remove(); 

                } 

            } 

        }); 

        $draganddropEle.ejDroppable({ 

            accept: $draganddropEle, 

            drop: function (event, ui) { 

                var $target = $(event.target), srcControl, rowIndex, cellIndex, selectedCellTxt = ui.helper.find("td").first().text(); 

                rowIndex = $target.closest("tr").index(); 

                cellIndex = $target.index(); 

                srcControl = $("#" + proxy._id).ejGrid("instance"); 

                srcControl.setCellText(rowIndex, cellIndex, selectedCellTxt); 

            } 

        }); 

 

    } 

    function databound1(args) { 

        var $draganddropEle1 = $(this.getRows()).find("td"); 

        var proxy = this; 

        $draganddropEle1.ejDraggable({ 

       .. 

 

       }); 

        $draganddropEle1.ejDroppable({ 

            .. 

 

               srcControl.setCellText(rowIndex, cellIndex, selectedCellTxt); 

            } 

        }); 

 

    } 

</script> 

Sample: http://www.syncfusion.com/downloads/support/forum/130562/ze/WebApplication8-1185202237 

Regards, 

Jayaprakash K.