Column Menu
The TreeList provides a built-in option for triggering column operations through a menu.
To enable the Column Menu implementation, use columnMenu:true. As a result, the column headers of the TreeList render a column menu, which allows the user to sort, filter, reorder, or change the visibility of a column. The Column Menu also detects when a specific column operation is disabled through the column definition and does not render it. For a runnable example, refer to the demo on implementing a Column Menu in the TreeList.
When the
columnMenuconfiguration is set totrue, the TreeList fires thecolumnMenuInitandcolumnMenuOpenevents instead offilterMenuInitandfilterMenuOpen.
For more information about the available configuration properties, see the Column Menu API reference.
Column Reordering
As of Kendo UI R2 SP1 2023,the TreeList's Column Menu provides an option to change the position of the target column by using Move next and Move previous buttons.
<div id="treelist"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/EmployeeDirectory",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
parentId: "ReportsTo",
fields: {
EmployeeId: { type: "number", nullable: false },
ReportsTo: { nullable: true, type: "number" }
}
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
columnMenu: true,
reorderable:true,
columns: [
{ field: "FirstName", expandable: true, title: "First Name", width: 250 },
{ field: "LastName", title: "Last Name" },
{ field: "Position" },
{ field: "Extension", title: "Ext", format: "{0:#}", filterable: false }
]
});
});
</script>