Issue while adding row reordering in kendoTreeList using Sortable

[Samir]

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.

[Alexander Valchev]

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

 

 

[James]

So how exactly would one have the TreeList control do reordering and level changes like is possible with the TreeView?

[Alexander Valchev]

Hello James,

Please check this demo.

Regards,
Alexander Valchev
Telerik by Progress

[James]

That demo doesn't allow reorder, only re-parent.

[Alexander Valchev]

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