Issue while adding row reordering in kendoTreeList using Sortable

2 posts, 0 answers
  1. Samir
    Samir avatar
    2 posts
    Member since:
    Jan 2015

    Posted 30 Jan 2015 Link to this post

    I am trying to add row reordering functionality inkendoTreeList using kendoSortable using following code.

                    var grid =$('#scorecardTreeList').kendoTreeList({
                        dataSource: treedataSource,
                        columns: [
                            { field: "strategicName", title: "Strategic Name" },
                            { field: "Type", title: "Type" },
                            { field: "Name", title: "Name" }
                        selectable: true,
                        expanded: true

                    $($('#scorecardTreeList table')[1]).kendoSortable({
                        filter: ">tbody >tr",
                        hint: $.noop,
                        cursor: "move",
                        placeholder: function(element) {
                            return element.clone().addClass("k-state-hover").css("opacity", 0.65);
                        container: "#scorecardTreeList tbody",
                        change: function(e) {
                            var skip =0,
                                oldIndex = e.oldIndex + skip,
                                newIndex = e.newIndex + skip,
                                data =,
                                dataItem = treedataSource.getByUid("uid"));
                            grid.dataSource.insert(newIndex, dataItem);

    I am facing issue that the row next to desired row (which i want to move) appears below dragged row after reordering.
    e.g if I have following rows

    when I move Tiger below Orange the new order appears as 

    ABC1 which is unexpected.

    Please help.

  2. Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 03 Feb 2015 Link to this post

    Hi Samir,

    I am afraid that the scenario you would like to achieve is not supported out of the box. The Sortable widget will allow you to visually reorder the TreeList rows but updating the data in the TreeList DataSource will require a lot of additional logic. Current implementations fails because the Sortable's change event handler is not suitable for reordering items in a TreeList. It is suitable for reordering items in a DataSource with local data.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top