Example of Checkbox Column in Javascript Tree Grid Control

All Controls
/
Tree Grid
/
Checkbox Column

This sample demonstrates the checkbox column selection functionality of Tree Grid. Click on any parent record checkbox then the child record checkboxes will get selected and parent record checkbox will get selected while checking all of its child items.

More Details...

1
Planning
2/3/20172/7/20175100
2
Plan timeline
2/3/20172/7/20175100
3
Plan budget
2/3/20172/7/20175100
4
Allocate resources
2/3/20172/7/20175100
5
Planning complete
2/7/20172/7/201700
6
Design
2/10/20172/14/2017386
7
Software Specification
2/10/20172/12/2017360
8
Develop prototype
2/10/20172/12/20173100
9
Get approval from customer
2/13/20172/14/20172100
10
Design Documentation
2/13/20172/14/20172100
11
Design complete
2/14/20172/14/201700
12
Implementation Phase
2/17/20172/27/20171166
13
Phase 1
2/17/20172/27/20171150
14
Implementation Module 1
2/17/20172/27/20171110
15
Development Task 1
2/17/20172/19/2017350
16
Development Task 2
2/17/20172/19/2017350
17
Testing
2/20/20172/21/201720
18
Bug fix
2/24/20172/25/201720
19
Customer review meeting
2/26/20172/27/201720
20
Phase 1 complete
2/27/20172/27/2017050
21
Phase 2
2/17/20172/28/20171260
22
Implementation Module 2
2/17/20172/28/20171290
23
Development Task 1
2/17/20172/20/2017450
24
Development Task 2
2/17/20172/20/2017450
25
Testing
2/21/20172/24/201720
26
Bug fix
2/25/20172/26/201720
27
Customer review meeting
2/27/20172/28/201720
28
Phase 2 complete
2/28/20172/28/2017050
29
Phase 3
2/17/20172/27/20171130
30
Implementation Module 3
2/17/20172/27/20171160
31
Development Task 1
2/17/20172/19/2017350
32
Development Task 2
2/17/20172/19/2017350
33
Testing
2/20/20172/21/201720
34
Bug fix
2/24/20172/25/201720
35
Customer review meeting
2/26/20172/27/201720
36
Phase 3 complete
2/27/20172/27/2017050
Description

The Tree Grid component can be rendered with checkbox on existing column and also this can be enabled by showCheckbox property as true in columns API. For hierarchy selection between the records, we need to enable the autoCheckHierarchy property. While using Tree Grid in a touch device, you have an option to select the checkboxes by tapping on the checkbox. More information on the checkbox selection configuration can be found in this documentation section.