Issue while adding row reordering in kendoTreeList using Sortable

6 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
                    }).data("kendoTreeList");

                    $($('#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 = treedataSource.data(),
                                dataItem = treedataSource.getByUid(e.item.data("uid"));
                            grid.dataSource.remove(dataItem);
                            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
    Tiger
    Apple
    Meow
    Orange
    ABC1

    when I move Tiger below Orange the new order appears as 

    Meow
    Orange
    Tiger
    Apple
    ABC1 which is unexpected.

    Please help.

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2886 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.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. James
    James avatar
    7 posts
    Member since:
    Jan 2016

    Posted 07 Dec 2016 in reply to Alexander Valchev Link to this post

    So how exactly would one have the TreeList control do reordering and level changes like is possible with the TreeView?
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2886 posts

    Posted 09 Dec 2016 Link to this post

    Hello James,

    Please check this demo.

    Regards,
    Alexander Valchev
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  5. James
    James avatar
    7 posts
    Member since:
    Jan 2016

    Posted 09 Dec 2016 in reply to Alexander Valchev Link to this post

    That demo doesn't allow reorder, only re-parent.
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2886 posts

    Posted 13 Dec 2016 Link to this post

    Hi James,

    The reordering via drag and drop at the same level is not currently supported. I would not recommend using the Sortable widget as the dataSource update is not straightforward.

    I suggest to submit a feature request at Kendo UI Feedback portal. In this way the other users will be able to vote for this idea, if it became popular we will consider it for one of our future releases.

    Regards,
    Alexander Valchev
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Back to Top