We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Drag Drop

Thread ID:

Created:

Updated:

Platform:

Replies:

130562 May 18,2017 04:55 AM May 19,2017 04:47 AM ASP.NET Core 1
loading
Tags: Grid
tamil
Asked On May 18, 2017 04:55 AM


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


thanks.

Jayaprakash Kamaraj [Syncfusion]
Replied On May 19, 2017 04:47 AM

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. 



@{ 
    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> 


Regards, 

Jayaprakash K. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;