Example of Toolbar Template in ASP.NET MVC Tree Grid Control
This sample explains the way of rendering custom template element Quick Filter in a
toolbar and while click on the Quick Filter button the column "Task Name" is filtered with the value "Testing".
Task ID | Task Name | Start Date | Duration | Progress | Priority |
|---|---|---|---|---|---|
| 1 | Planning | 6/7/2016 | 5 | 100 | Normal |
| 2 | Plan timeline | 6/7/2016 | 5 | 100 | Normal |
| 3 | Plan budget | 6/7/2016 | 5 | 100 | Critical |
| 4 | Allocate resources | 6/7/2016 | 5 | 100 | Critical |
| 5 | Planning complete | 8/25/2021 | 3 | 25 | Low |
| 6 | Design | 8/25/2021 | 3 | 86 | High |
| 7 | Software Specification | 8/25/2021 | 3 | 60 | Normal |
| 8 | Develop prototype | 8/25/2021 | 3 | 100 | Critical |
| 9 | Get approval from customer | 6/27/2024 | 2 | 100 | Critical |
| 10 | Design complete | 6/27/2024 | 3 | 25 | Normal |
| 11 | Implementation Phase | 2/17/2017 | 11 | 25 | Normal |
| 12 | Phase 1 | 2/17/2017 | 11 | 25 | High |
| 13 | Implementation Module 1 | 2/17/2017 | 11 | 25 | Normal |
| 14 | Development Task 1 | 2/17/2017 | 3 | 50 | High |
| 15 | Development Task 2 | 2/17/2017 | 3 | 50 | Low |
| 16 | Testing | 2/20/2017 | 2 | 25 | Normal |
| 17 | Bug fix | 2/24/2017 | 2 | 25 | Critical |
| 18 | Customer review meeting | 2/26/2017 | 2 | 25 | High |
| 19 | Phase 1 complete | 2/27/2017 | 2 | 25 | Low |
| 20 | Phase 2 | 2/17/2017 | 12 | 25 | High |
| 21 | Implementation Module 2 | 2/17/2017 | 12 | 25 | Critical |
| 22 | Development Task 1 | 2/17/2017 | 4 | 50 | Normal |
| 23 | Development Task 2 | 2/17/2017 | 4 | 50 | Critical |
| 24 | Testing | 2/21/2017 | 2 | 25 | High |
| 25 | Bug fix | 2/25/2017 | 2 | 25 | Low |
| 26 | Customer review meeting | 2/27/2017 | 2 | 25 | Critical |
| 27 | Phase 2 complete | 2/28/2017 | 2 | 25 | Normal |
| 28 | Phase 3 | 2/17/2017 | 11 | 25 | Normal |
| 29 | Implementation Module 3 | 2/17/2017 | 11 | 25 | High |
| 30 | Development Task 1 | 2/17/2017 | 3 | 50 | Low |
| 31 | Development Task 2 | 2/17/2017 | 3 | 50 | Normal |
| 32 | Testing | 2/20/2017 | 2 | 25 | Critical |
| 33 | Bug fix | 2/24/2017 | 2 | 25 | High |
| 34 | Customer review meeting | 2/26/2017 | 2 | 25 | Normal |
| 35 | Phase 3 complete | 2/27/2017 | 2 | 25 | Critical |
Custom toolbar items can be added by defining the toolbar as a collection of ItemModels. Actions for this customized toolbar items are defined in the toolbarClick event.
In this sample, rendered the custom template element Quick Filter along with predefined
toolbar items ExpandAll and CollapseAll.
While click on the Quick Filter button the column "Task Name" is filtered with the value "Testing".
More information on the Toolbar Template can be found in documentation section.