Data Operations

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.

Configuration

To enable a specific data operation, follow the steps below:

1. Set the respective option of the TreeList. By default, all three data operations are disabled.

   TreeList Option	Accepted Values
   pageable	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.
   sortable	SortSettings—A configuration parameter which can be: boolean ColumnSortSettings
   filterable	FilterableSettings—A configuration parameter which can be: boolean 'row' 'menu' 'menu,row'

2. 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.

Using the Data Binding Directives

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:

• FlatBindingDirective—Suitable when the TreeList collection is flat. See more in the Binding to Flat Data article.

  html

  <kendo-treelist
      [kendoTreeListFlatBinding]="treelistData"
      ...
      [pageable]="true"
      [sortable]="true">
      <kendo-treelist-column field="name"></kendo-treelist-column>
  </kendo-treelist>

• HierarchyBindingDirective—Suitable when the TreeList collection is hierarchical. See more in the Binding to Hierarchical Data article.

  html

  <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.

Change Theme

Theme

Loading ...

Handling Data Operation Events

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 pageChange event.

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:

Method	Description	Arguments	Usage
process()	Applies the specified descriptors to provided data.	Array data to be processed State	process(data, state)
orderBy()	Orders the provided data according to the specified sort descriptors.	Array data to be ordered. SortDescriptor	orderBy(data, sortDescriptor)
filterBy()	Filters the provided data according to the specified filter descriptors.	Array data to be filtered. CompositeFilterDescriptor	filterBy(data, filtertDescriptor)

Once the 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.

Handling Single Data Operation

When you enable a single data operation, handle the event that the TreeList triggers for the selected data operation. Inside the handler, use the corresponding Data Query method.

The following example demonstrates how to enable filtering by handling the filterChange event and using the filterBy() method.

Change Theme

Theme

Loading ...

Handling Multiple Data Operations

When you enable multiple data operations, handle the dataStateChange to manipulate the data in a single event. Use the process() method of the Data Query package to apply the specified descriptor.

The following example demonstrates the dataStateChange event and process() method in action.

Change Theme

Theme

Loading ...

Suggested Links

• Data Query Overview
• API Reference of the TreeListComponent
• API Index of the TreeList