How to set column order by dragging Drop into Kendo UI TreeList widget?

I am using the Angularjs version of the Kendo UI tree list widget. Below is the code I'm using

HTML

 <div id="treeview" kendo-tree-list="treelist" 
 k-options="TreeViewOptions" style="margin-top: 5px" class="trade_show">
 </div>

Code to bind a list of trees

 var treeDataSource = new kendo.data.TreeListDataSource({
    data: [
        { id: 1, Name: "Main Menu", Icon: "", View: "", parentId: null },
        { id: 5, Name: "Sub Menu 1", Icon: "", View: "", parentId: 1 },
        { id: 6, Name: "Sub Menu 2", Icon: "", View: "", parentId: 1 },
        { id: 7, Name: "Sub Menu 3", Icon: "", View: "", parentId: 1 },
    ],
    schema: {
        model: {
            id: "id",
            expanded: true
        }
    }
});

$scope.TreeViewOptions = {
    dataSource: treeDataSource,
    height: 540,
    editable: {
        move: true
    },
    sortable: true,
    columns: [
         { field: "Name" },
        { field: "Icon" },
        { field: "View" }
    ]
};

Everything works fine, but I can't get the columns to be ordered. Essentially, I need to be able to drag and drop rows to set the display order.

This feature exists in Kendo UI TreeView widgets. Is this feature supported in Kendo UI tree list widgets? If not, is there a workaround to make it work?

+4
source share

All Articles