Grids
Example of Search in ASP.NET Core Tree Grid Control
This sample demonstrates the TreeGrid searching feature. In this sample, use the search box from toolbar to search TreeGrid records and the hierarchy mode of searching can be changed using property panel.
Task ID | Task Name | Duration | Priority | Progress |
|---|---|---|---|---|
| 1 | Planning | 5 | Normal | 100 |
| 2 | Plan timeline | 5 | Normal | 100 |
| 3 | Plan budget | 5 | Low | 100 |
| 4 | Allocate resources | 5 | Critical | 100 |
| 5 | Planning complete | 1 | Low | 1 |
| 6 | Design | 3 | High | 86 |
| 7 | Software Specification | 3 | Normal | 60 |
| 8 | Develop prototype | 3 | Critical | 100 |
| 9 | Get approval from customer | 2 | Low | 100 |
| 10 | Design complete | 1 | Normal | 1 |
Properties
| Hierarchy Mode |
The TreeGrid has an option to search its content using the search method with search key as the parameter.
The tree grid supports different types of search mode through the searchSettings.hierarchyMode property.
The following are the types of search modes available in the tree grid.
-
Parent- This is the default search hierarchy mode in the tree grid. It displays a searched record with its parent records. If the searched records do not have any parent record, it displays only the searched record. -
Child- Displays the searched record with its child record. If the searched records do not have any child record, it displays only the searched record. -
Both- Displays the searched record with both its parent and child records. If the searched records do not have any parent and child records, it displays only the searched record. None- Displays only the searched record.
In this demo, The TreeGrid toolbar provides an option to search the TreeGrid's records. The user can type the text box in the toolbar and click search button or press Enter key to perform search operation.
More information on the data binding can be found in this documentation section.