KENDO GRID DRAG AND DROP

[Anto (DLL Version : 2008.3.1314.35)]

Hi Everybody,


     I have downloaded KendoUI v 2012.2.710  trial version and trying out few samples.
    
     My Requirement is as follows:

    1. I have two Kendo UI grids.
        a. Left Grid contains data from database.
        b. Right grid Empty.
        c. A button in between two grids.

   Scenario 1:

   I need to drag rows from left grid and drop in right grid,
   on right grid drop, the dropped data should be available only in the right grid, and should not be available in the left grid.

 Scenario 2:
 
  select multiple rows in the left grid.
  Click on the button between the two grids should populate the right grid and the selected data should not be available in the left grid.

Scenario 3:

  on double clicking a row in left grid the data should be moved to the right grid.

And the same should be done right to left also.

Is this possible using kendo grid?
Please give me suggestions ASAP.

Thank You,
Kalidhas.P
KendoUI v 2012.2.710

[Samuel]

I have this same problem. Did you find any solutions?

[Rachael]

I know I'm late to the game on this one, but I had the same problem and like you both, couldn't find a solution through a strictly Kendo implementation. However, I was able to get this to work using JQuery UI Sortable (http://jqueryui.com/sortable/#connect-lists), which gets added by default when you create an MVC project in VS 2012. The code below requires you to use the jqueryui bundle that gets generated as part of the project creation.

Here's my Kendo MVC Grid:

@(Html.Kendo().Grid(Model.TreeNodes)
    .Name("tree-grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.Name);
        columns.Bound(e => e.Id)
            .Title("")
            .HeaderHtmlAttributes(new { @class = "iconColumn" });
        columns.Bound(e => e.Id)
            .Title("")
            .HeaderHtmlAttributes(new { @class = "iconColumn" });
        columns.Bound(e => e.Id)
            .Title("")
            .HeaderHtmlAttributes(new { @class = "iconColumn" });
        columns.Bound(e => e.Id)
            .Title("")
            .HeaderHtmlAttributes(new { @class = "iconColumn" });
        columns.Bound(e => e.DocumentDate)
            .Title("doc date")
            .HeaderHtmlAttributes(new { @class = "dateColumn" });
    })
    .ClientRowTemplate(
        "<tr id='#: Id#' class='#: CssClass#' data-index='#: Index#' data-sortable='#: IsSortable#'>" +
            "<td>#= Name#</td>" +
            "<td class='iconColumn'><a href='/Admin/Document/View/#: Id#'><img src='/images/admin/_view.gif' /></a></td>" +
            "<td class='iconColumn'><a href='/Admin/Document/Add/#: Id#'><img src='/images/admin/_add.gif' /></a></td>" +
            "<td class='iconColumn'><a href='/Admin/Document/Delete/#: Id#' onclick='return confirm(\"Are you sure you want to delete this document and all of its children?\");'><img src='/images/admin/_bin.gif' /></a></td>" +
            "<td class='iconColumn'><input type='checkbox' /></td>" +
            "<td class='dateColumn'>#= kendo.toString(DocumentDate, 'MM/dd/yyyy')#</td>" +
         "</tr>"
    )
    .Scrollable(scrolling => scrolling.Enabled(false))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetTree", "Document", new { area = "Admin" }))
        .Model(model => model.Id(p => p.Id))
        .Destroy(update => update.Action("Delete", "Document"))
    )
)

Note: the reason I used a .ClientRowTemplate was so that I could have complete control over the attributes in the <tr> tag. You'll see why in the Javascript, which is below.

<script type="text/javascript">
    var fixHelperModified = function (e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function (index) {
            $(this).width($originals.eq(index).width());
        });
        return $helper;
    };

    var sortUpdate = function (event, ui) {
        var destinationIndex = $(ui.item).index();

        if ($(ui.item).attr('id') < ($(ui.item).index() + 1)) {
            confirmationText = confirmationText + ' below ';
        }
        else {
            confirmationText = confirmationText + ' above ';
        }
        var destination = $("#tree-grid tbody tr[data-index='" + (destinationIndex + 1) + "']");
        confirmationText = confirmationText + $(destination).find(">:first-child").text() + '?';

        if (confirm(confirmationText)) {
           //THIS IS WHERE YOU WOULD DO YOUR AJAX CALL TO UPDATE YOUR DATABASE
        }

        // Refresh regardless of confirmation to pull down clean set of data
        var grid = $("#tree-grid").data("kendoGrid");
        grid.refresh();
        configureSortableRows();
    };

    function configureSortableRows() {
        $("#tree-grid tr[data-sortable='1']").hover(function () {
            $(this).css('cursor', 'move');
        });
    }

    $(function () {
        configureSortableRows();

        $("#tree-grid tbody").sortable({
            items: 'tr[data-sortable="1"]',
            update: sortUpdate
        }).disableSelection();
    });
</script>

JQueryUI Sortable supports dragging and dropping  between two grids using the class and the "connectWith" method. The link above should provide guidance for how to do this.

I hope this helps someone out!