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.
Syncfusion Feedback

Drag Drop

Thread ID:

Created:

Updated:

Platform:

Replies:

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


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 08:47 AM UTC

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.

Warning Icon 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.Close Icon

;