The data operations represent the TreeList features that help the user modify the displayed data set through the UI.
The TreeList supports the following data operations:
Paging—Splits the data into pages and renders a pager control at the bottom of the TreeList.
Sorting—Allows you to order the TreeList data by single or multiple fields.
Filtering—Allows you to filter the data by one or more fields. The filter functionality renders different filter controls based on the concrete field type.
To enable a specific data operation, follow the steps below:
Set the respective option of the TreeList. By default, all three data operations are disabled.
TreeList Option Accepted Values
boolean—If set to
true, the TreeList will display a default responsive pager with up to 10 numeric buttons, prev/next buttons, and current page information.
PagerSettings—Allows manual customization of each pager section.
SortSettings—A configuration parameter which can be:
FilterableSettings—A configuration parameter which can be:
Depending on the concrete requirements, handle the data operations. You can achieve this in two ways:
- By using the data binding directives—Allows you to perform the desired data operations automatically without manually processing the data in event handlers. This approach is faster for implementation because the directive encapsulates the repetitive boilerplate code.
- By handling data operation events—Provides full control over the data processing. The developer needs to manually handle all relevant events and process the data. This approach is suitable for scenarios involving custom logic alongside the data operations.
The built-in data binding directives encapsulate the logic for handling data operations. This significantly reduces the repetitive boilerplate code and helps you to implement complex TreeLists with less manual coding.
The available data-binding directives are:
<kendo-treelist [kendoTreeListFlatBinding]="treelistData" ... [pageable]="true" [sortable]="true"> <kendo-treelist-column field="name"></kendo-treelist-column> </kendo-treelist>
<kendo-treelist [kendoTreeListHierarchyBinding]="treelistData" ... [pageable]="true" [sortable]="true"> <kendo-treelist-column field="name"></kendo-treelist-column> </kendo-treelist>
The following example demonstrates the
kendoTreeListFlatBinding directive in action.
Each time when a user interacts with the TreeList, a corresponding event is triggered. These events provide the information necessary to process the TreeList data and configure the data operations. By handling these events, you can apply custom logic as necessary.
If you work with a scenario that involves a single data operation, handle only the corresponding event:
pageChange—Triggers when the page is changed.
sortChange—Triggers when the sorting of the data is changed.
filterChange—Triggers when the built-in filter UI controls are used to filter the data.
For example, if your application requires only paging with no sorting or filtering, then handle only the
When the application requires you to enable multiple data operations, handle the
dataStateChange event. The
dataStateChange event triggers after each data operation. This allows you to manipulate the data in a single event handler instead of handling all events separately.
To process the TreeList data according to the applied data operation, use the built-in functions of the
Data Query package. After handling the necessary event, use any of the following built-in methods:
|Applies the specified descriptors to provided data.|
|Orders the provided data according to the specified sort descriptors.|
|Filters the provided data according to the specified filter descriptors.|
Data Query methods process the data, update the TreeList through the respective input properties:
pageSize—Defines how many items will be rendered per page.
skip—Defines the number of records that the pager must skip, that is, the items from the previous pages.
sort—Binds a collection of descriptors by which the TreeList orders the data.
filter—Binds a collection of descriptors by which the TreeList filters the data.
The following example demonstrates the
dataStateChange event and
process() method in action.