Scribd
Upload
41 views2,330 pages

Syncfusion Ej2 React Part9

Uploaded by

ranjanagirish30
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
41 views2,330 pages

Syncfusion Ej2 React Part9

Uploaded by

ranjanagirish30
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2330

Essential Studio

for EJ2 React


Version - v25.1.35 | Release Date - March 15, 2024
Toolbar ........................................................................................................................................................ 16
Getting Started........................................................................................................................................ 16
Dependencies...................................................................................................................................... 16
Setup for Local Development.............................................................................................................. 16
Adding Syncfusion packages ............................................................................................................... 17
Adding CSS reference .......................................................................................................................... 17
Initialize the Toolbar with commands ................................................................................................ 17
Initialize the Toolbar using HTML elements ....................................................................................... 18
See Also ............................................................................................................................................... 20
Item configuration in React Toolbar component ................................................................................... 20
Button ................................................................................................................................................. 20
Separator............................................................................................................................................. 21
Input .................................................................................................................................................... 27
See Also ............................................................................................................................................... 43
Responsive mode in React Toolbar component ..................................................................................... 43
Scrollable ............................................................................................................................................. 43
Popup .................................................................................................................................................. 51
Template configuration in React Toolbar component ............................................................................ 58
Stateless template .............................................................................................................................. 64
Popup customization .......................................................................................................................... 68
Integrate menu component ................................................................................................................ 75
Accessibility in React Toolbar component .............................................................................................. 79
ARIA attributes .................................................................................................................................... 80
Keyboard interaction .......................................................................................................................... 81
Ensuring accessibility .......................................................................................................................... 81
See also ............................................................................................................................................... 81
Style in React Toolbar component .......................................................................................................... 81
Customizing Toolbar ........................................................................................................................... 81
Customizing the Toolbar items ........................................................................................................... 82
Customizing Toolbar's item icon ......................................................................................................... 82
Customizing the hover state of Toolbar control ................................................................................. 82
Customizing selected item of Toolbar control .................................................................................... 83
How To .................................................................................................................................................... 83
Set command customization in React Toolbar component ................................................................ 83
Set tool tip to the commands in React Toolbar component............................................................... 89
Set item wise custom template in React Toolbar component ........................................................... 95
Add toggle button in React Toolbar component ................................................................................ 98
How to customize toolbar scroll step in React Toolbar component ................................................ 104
Add link to toolbar item in React Toolbar component ..................................................................... 113
Render other components in toolbar using template in React Toolbar component ....................... 115
Ej1 api migration in React Toolbar component .................................................................................... 117
Accessibility and Localization ............................................................................................................ 117
DataSource ........................................................................................................................................ 117
Items ................................................................................................................................................. 118
Common ............................................................................................................................................ 121
Tooltip ....................................................................................................................................................... 123
Getting Started...................................................................................................................................... 123
Dependencies.................................................................................................................................... 123
Installation and configuration ........................................................................................................... 123
Adding Syncfusion packages ............................................................................................................. 124
Adding CSS Reference ....................................................................................................................... 124
Initialize the Tooltip on a single element .......................................................................................... 124
Run the application ........................................................................................................................... 125
Initialize Tooltip within a container .................................................................................................. 127
See Also ............................................................................................................................................. 129
Setting dimension in React Tooltip component ................................................................................... 129
Height and width............................................................................................................................... 129
Content in React Tooltip component.................................................................................................... 131
Template content.............................................................................................................................. 131
Dynamic content via Fetch................................................................................................................ 133
Position in React Tooltip component.................................................................................................... 135
Tip pointer positioning ...................................................................................................................... 137
Dynamic positioning.......................................................................................................................... 137
Mouse trailing ................................................................................................................................... 139
Setting offset values.......................................................................................................................... 140
Open mode in React Tooltip component.............................................................................................. 141
Custom open mode........................................................................................................................... 144
Sticky mode ....................................................................................................................................... 145
Open/Close Tooltip with delay ......................................................................................................... 146
Animation in React Tooltip component ................................................................................................ 147
Animation effects .............................................................................................................................. 148
Animating via open/close methods .................................................................................................. 148
Apply transition ................................................................................................................................. 149
Customization in React Tooltip component ......................................................................................... 152
Tip pointer customization ................................................................................................................. 152
Tooltip customization ....................................................................................................................... 153
Style in React Tooltip component ......................................................................................................... 153
Customizing the tooltip ..................................................................................................................... 153
Customizing the tooltip popup ......................................................................................................... 154
Customizing the tooltip content ....................................................................................................... 154
Customizing the tooltip arrow tip ..................................................................................................... 154
Customizing the tooltip inner tip ...................................................................................................... 155
Customizing the tooltip outer tip...................................................................................................... 155
Accessibility in React Tooltip component ............................................................................................. 156
WAI-ARIA attributes .......................................................................................................................... 157
Keyboard interaction ........................................................................................................................ 158
Ensuring accessibility ........................................................................................................................ 158
See also ............................................................................................................................................. 158
Ej1 api migration in React Tooltip component ..................................................................................... 158
How To .................................................................................................................................................. 160
Show tooltip on disabled elements and disable tooltip in React Tooltip component ...................... 160
Dynamic tooltip content with html elements in React Tooltip component ..................................... 164
Tooltip open or display modes in React Tooltip component ............................................................ 167
Fancy tooltip customization in React Tooltip component ................................................................ 174
Display tooltip on svg and canvas elements in React Tooltip component ....................................... 182
Create and show tooltip on multiple targets in React Tooltip component ...................................... 192
TreeGrid .................................................................................................................................................... 197
Getting Started...................................................................................................................................... 197
Getting started .................................................................................................................................. 197
Getting Started with the TreeGrid Component in the Preact Framework ....................................... 248
Data Binding .......................................................................................................................................... 253
Data binding in React Treegrid component ...................................................................................... 253
Local data in React Treegrid component .......................................................................................... 272
Remote data in React Treegrid component...................................................................................... 275
Immutable mode in React Treegrid component................................................................................... 305
Limitations......................................................................................................................................... 696
Module in React Treegrid component .................................................................................................. 696
Columns ................................................................................................................................................ 697
Columns in React Treegrid component ............................................................................................ 697
Headers in React Treegrid component ............................................................................................. 709
Column template in React Treegrid component .............................................................................. 712
Complex data binding in React Treegrid component ....................................................................... 716
Auto fit columns in React Treegrid component ................................................................................ 717
Column reorder in React Treegrid component ................................................................................. 718
Column resizing in React Treegrid component ................................................................................. 720
Column menu in React Treegrid component .................................................................................... 724
Responsive columns in React Treegrid component .......................................................................... 725
Row ....................................................................................................................................................... 726
Row in React Treegrid component ................................................................................................... 726
Row height in React Treegrid component ........................................................................................ 729
Row template in React Treegrid component .................................................................................... 731
Detail template in React Treegrid component ................................................................................. 736
Row drag and drop in React Treegrid component ............................................................................ 738
Indent in React Treegrid component ................................................................................................ 744
Cell ........................................................................................................................................................ 747
Cell in React Treegrid component..................................................................................................... 747
Content in React Treegrid component ............................................................................................. 751
Auto wrap in React Treegrid component.......................................................................................... 752
Clip mode in React Treegrid component .......................................................................................... 753
Editing ................................................................................................................................................... 754
Edit in React Treegrid component .................................................................................................... 754
Edit types in React Treegrid component........................................................................................... 762
Cell editing in React Treegrid component......................................................................................... 767
Row editing in React Treegrid component ....................................................................................... 768
Dialog editing in React Treegrid component .................................................................................... 770
Batch editing in React Treegrid component ..................................................................................... 771
Template editing in React Treegrid component ............................................................................... 772
Command column editing in React Treegrid component ................................................................. 780
Validation in React Treegrid component .......................................................................................... 784
Persisting data in server in React Treegrid component .................................................................... 788
Sorting in React Treegrid component ................................................................................................... 795
Initial Sort .......................................................................................................................................... 796
Sorting Events ................................................................................................................................... 797
Custom sort comparer ...................................................................................................................... 798
Touch Interaction .............................................................................................................................. 800
Filtering ................................................................................................................................................. 800
Filtering in React Treegrid component ............................................................................................. 800
Filter bar in React Treegrid component ............................................................................................ 806
Filter menu in React Treegrid component ........................................................................................ 810
Excel like filter in React Treegrid component ................................................................................... 814
Searching in React Treegrid component ............................................................................................... 816
Initial search ...................................................................................................................................... 817
Search operators ............................................................................................................................... 819
Search by external button................................................................................................................. 819
Search Specific Columns ................................................................................................................... 821
Paging in React Treegrid component .................................................................................................... 822
Page Size Mode ................................................................................................................................. 823
Template ........................................................................................................................................... 824
Pager with Page Size Dropdown ....................................................................................................... 826
How to render Pager at the Top of the TreeGrid.............................................................................. 827
Selection................................................................................................................................................ 829
Selection in React Treegrid component ............................................................................................ 829
Cell selection in React Treegrid component ..................................................................................... 831
Row selection in React Treegrid component .................................................................................... 833
Check box selection in React Treegrid component........................................................................... 838
Scrolling in React Treegrid component ................................................................................................. 841
Set width and height ......................................................................................................................... 841
Responsive with parent container .................................................................................................... 842
Scroll to selected row........................................................................................................................ 843
Frozen in React Treegrid component.................................................................................................... 845
Frozen rows and columns ................................................................................................................. 845
Virtual scroll in React Treegrid component .......................................................................................... 849
Row virtualization ............................................................................................................................. 849
Column virtualization ........................................................................................................................ 850
Limitations for virtualization ............................................................................................................. 853
Infinite scroll in React Treegrid component ......................................................................................... 854
InitialBlocks ....................................................................................................................................... 855
Cache Mode ...................................................................................................................................... 856
Limitations for Infinite Scrolling ........................................................................................................ 858
Aggregates ............................................................................................................................................ 858
Aggregates in React Treegrid component ........................................................................................ 858
Footer aggregate in React Treegrid component ............................................................................... 860
Custom aggregate in React Treegrid component ............................................................................. 863
Print in React Treegrid component ....................................................................................................... 866
Page setup ......................................................................................................................................... 867
Print using an external button .......................................................................................................... 867
Print the visible page......................................................................................................................... 868
Print large number of columns ......................................................................................................... 869
Show or Hide columns while Printing ............................................................................................... 870
Limitations of Printing Large Data..................................................................................................... 872
Adaptive in React Treegrid component ................................................................................................ 872
Render adaptive dialogs.................................................................................................................... 872
Loading animation in React Treegrid component ................................................................................ 875
State Persistence................................................................................................................................... 877
State persistence in React Treegrid component ............................................................................... 877
Get or set local storage value in React Treegrid component ........................................................... 877
Tool Bar ................................................................................................................................................. 877
Tool bar in React Treegrid component ............................................................................................. 877
Tool bar items in React Treegrid component ................................................................................... 878
Pdf Export.............................................................................................................................................. 885
Pdf export in React Treegrid component .......................................................................................... 885
Pdf export options in React Treegrid component............................................................................. 888
Pdf cell style customization in React Treegrid component............................................................... 928
Adding header and footer in React Treegrid component ................................................................. 932
Exporting tree grid in server in React Tree Grid component ............................................................ 941
Excel Export ........................................................................................................................................... 945
Excel export in React Treegrid component ....................................................................................... 945
Excel export options in React Treegrid component .......................................................................... 949
Excel cell style customization in React Treegrid component ............................................................ 954
Adding header and footer in React Treegrid component ................................................................. 958
Exporting tree grid in Server in React Tree Grid Component ........................................................... 961
Global local in React Treegrid component ............................................................................................ 966
Localization ....................................................................................................................................... 966
Internationalization........................................................................................................................... 971
Right to left (RTL) .............................................................................................................................. 975
See Also ............................................................................................................................................. 977
Accessibility in React Treegrid component ........................................................................................... 977
WAI-ARIA attributes .......................................................................................................................... 978
Keyboard interaction ........................................................................................................................ 979
Ensuring accessibility ........................................................................................................................ 980
See also ............................................................................................................................................. 980
Clipboard in React Treegrid component ............................................................................................... 980
Copy to clipboard by external buttons ............................................................................................. 981
Copy Hierarchy Modes ...................................................................................................................... 983
AutoFill .............................................................................................................................................. 985
Paste.................................................................................................................................................. 987
Context menu in React Treegrid component........................................................................................ 988
Custom context menu items ............................................................................................................. 990
Enable and disable context menu items dynamically ....................................................................... 993
Treegrid styling in React Treegrid component...................................................................................... 996
How To .................................................................................................................................................. 997
Refresh the data source in React Treegrid component .................................................................... 997
Enable disable treegrid and its actions in React Treegrid component ........................................... 1038
Change header text dynamically in React Treegrid component ..................................................... 1079
Customize column styles in React Treegrid component................................................................. 1119
Custom tool tip for columns in React Treegrid component ........................................................... 1159
Change orientation of header text in React Treegrid component.................................................. 1199
Render react component in column in React Treegrid component ............................................... 1241
Customize the icon for column menu in React Treegrid component ............................................. 1281
Customize the edit dialog in React Treegrid component ............................................................... 1321
Cascading drop down list with treegrid editing in React Treegrid component .............................. 1364
Provide custom data source and enabling filtering to drop down list in React Treegrid component
........................................................................................................................................................ 1406
Use wizard like dialog editing in React Treegrid component ......................................................... 1447
Using tab inside the dialog editing in React Treegrid component .................................................. 1492
Disable editing for particular row cell in React Treegrid component ............................................. 1537
Display null values at bottom in React Treegrid component .......................................................... 1581
Restrict decimal points while treegrid editing in React Treegrid component ................................ 1621
Exporting filtered data in React Treegrid component .................................................................... 1664
Exporting selected data in React Treegrid component .................................................................. 1705
Show spinner while exporting in React Treegrid component......................................................... 1745
Passing parameter to server exporting in React Treegrid component ........................................... 1786
Customize pager drop down in React Treegrid component ........................................................... 1827
Add params for filtering in React Treegrid component .................................................................. 1865
TreeMap .................................................................................................................................................. 1905
Getting Started.................................................................................................................................... 1905
Dependencies.................................................................................................................................. 1905
Installation and configuration ......................................................................................................... 1905
Module injection ............................................................................................................................. 1907
Render TreeMap ............................................................................................................................. 1908
Apply color mapping ....................................................................................................................... 1910
Enable legend.................................................................................................................................. 1914
Add labels ........................................................................................................................................ 1917
Enable tooltip .................................................................................................................................. 1920
Data binding in React Treemap component ....................................................................................... 1924
Populate data .................................................................................................................................. 1924
Layout in React Treemap component ................................................................................................. 1928
Types of layout ................................................................................................................................ 1928
Leaf item in React Treemap component ............................................................................................ 1932
Leaf label ......................................................................................................................................... 1932
Item gap .......................................................................................................................................... 1936
Levels in React Treemap component .................................................................................................. 1937
Group path ...................................................................................................................................... 1938
Group gap........................................................................................................................................ 1940
Header format and Alignment ........................................................................................................ 1942
Header height and style .................................................................................................................. 1945
Header template and position ........................................................................................................ 1947
Color mapping in React Treemap component .................................................................................... 1950
Range color mapping ...................................................................................................................... 1950
Equal color mapping ....................................................................................................................... 1951
Desaturation color mapping ........................................................................................................... 1953
Palette color mapping ..................................................................................................................... 1955
Desaturation with multiple colors .................................................................................................. 1956
Color for items excluded from color mapping ................................................................................ 1957
Data label in React Treemap component ........................................................................................... 1959
Format ............................................................................................................................................. 1959
Template ......................................................................................................................................... 1960
InterSectAction ............................................................................................................................... 1961
Legend in React Treemap component ................................................................................................ 1962
Position and alignment ................................................................................................................... 1962
Legend mode................................................................................................................................... 1966
Legend size ...................................................................................................................................... 1970
Legend for items excluded from color mapping ............................................................................. 1974
Hide desired legend items .............................................................................................................. 1975
Hide legend items based data source value ................................................................................... 1977
Bind legend item text from data source ......................................................................................... 1979
Hide duplicate legend items ........................................................................................................... 1980
Drilldown in React Treemap component ............................................................................................ 1982
Perform drill-down action ............................................................................................................... 1982
Tooltip in React Treemap component ................................................................................................ 1984
Default tooltip ................................................................................................................................. 1984
Format tooltip ................................................................................................................................. 1986
Tooltip template ............................................................................................................................. 1987
Selection and highlight in React Treemap component ....................................................................... 1988
Selection.......................................................................................................................................... 1988
Highlight .......................................................................................................................................... 1991
Print and export in React Treemap component ................................................................................. 1994
Print ................................................................................................................................................. 1994
Export .............................................................................................................................................. 1995
Accessibility in React TreeMap component ........................................................................................ 2001
WAI-ARIA attributes ........................................................................................................................ 2002
Screen reading in TreeMap ............................................................................................................. 2002
Ensuring accessibility ...................................................................................................................... 2003
See also ........................................................................................................................................... 2003
Internationalization in React Treemap component ............................................................................ 2003
Globalization ................................................................................................................................... 2003
Ej1 api migration in React Treemap component ................................................................................ 2005
Data Binding .................................................................................................................................... 2005
Appearance ..................................................................................................................................... 2005
Leaf Items ........................................................................................................................................ 2006
Legend ............................................................................................................................................. 2007
Levels............................................................................................................................................... 2009
Selection.......................................................................................................................................... 2011
Highlight .......................................................................................................................................... 2011
Range ColorMapping....................................................................................................................... 2012
Desaturation ColorMapping ........................................................................................................... 2013
Tooltip ............................................................................................................................................. 2013
Drilldown ......................................................................................................................................... 2014
Methods .......................................................................................................................................... 2014
Events .............................................................................................................................................. 2015
How To ................................................................................................................................................ 2017
Drilldown in React Treemap component ........................................................................................ 2017
Drilldown with label in React Treemap component ....................................................................... 2031
Treeview.................................................................................................................................................. 2034
Getting Started.................................................................................................................................... 2034
Getting started ................................................................................................................................ 2034
Getting Started with the React TreeView Component in the Preact Framework .......................... 2061
Data binding in React Treeview component....................................................................................... 2067
Local data ........................................................................................................................................ 2067
Remote data.................................................................................................................................... 2072
Check box in React Treeview component ........................................................................................... 2073
Checked nodes ................................................................................................................................ 2075
See Also ........................................................................................................................................... 2077
Node editing in React Treeview component ...................................................................................... 2078
See Also ........................................................................................................................................... 2082
Multiple selection in React Treeview component .............................................................................. 2082
Selected nodes ................................................................................................................................ 2084
See Also ........................................................................................................................................... 2086
Drag and drop in React Treeview component .................................................................................... 2086
Multiple-node drag and drop.......................................................................................................... 2089
See Also ........................................................................................................................................... 2092
Template in React Treeview component ............................................................................................ 2092
See Also ........................................................................................................................................... 2094
Accessibility in React TreeView component ....................................................................................... 2094
WAI-ARIA attributes ........................................................................................................................ 2095
Keyboard interaction ...................................................................................................................... 2095
Ensuring accessibility ...................................................................................................................... 2096
See also ........................................................................................................................................... 2096
How To ................................................................................................................................................ 2096
Customize the expand and collapse icons in React Treeview component ..................................... 2096
Process the tree node operations using context menu in React Treeview component................. 2100
Check uncheck the checkbox on clicking the tree node text in React Treeview component......... 2106
Validate the text when renaming the tree node in React Treeview component ........................... 2111
Customize the tree nodes based on levels in React Treeview component .................................... 2116
Restrict the drag and drop for particular tree nodes in React Treeview component .................... 2120
Accordion tree in React Treeview component ............................................................................... 2124
Auto hide show expand collapse icon in React Treeview component ........................................... 2127
Filtering tree nodes in React Treeview component ........................................................................ 2130
Set tool tip for tree nodes in React Treeview component .............................................................. 2134
Sorting treeview level wise in React Treeview component ............................................................ 2139
Remove parent checkbox in React Treeview component .............................................................. 2143
Get dynamic icon in React Treeview component ........................................................................... 2145
Hover multi line tree node in React Treeview component ............................................................. 2147
Select one child in React Treeview component .............................................................................. 2151
Get all child nodes in React Treeview component ......................................................................... 2154
Disable checkbox of the tree node in React Treeview component ................................................ 2157
Ej1 api migration in React Treeview component ................................................................................ 2160
Add nodes ....................................................................................................................................... 2160
Common .......................................................................................................................................... 2161
CheckBox ......................................................................................................................................... 2167
Drag and Drop ................................................................................................................................. 2169
Expand/Collapse nodes ................................................................................................................... 2170
Node Editing.................................................................................................................................... 2172
Node Selection ................................................................................................................................ 2173
Template ......................................................................................................................................... 2175
Uploader ................................................................................................................................................. 2175
Getting Started.................................................................................................................................... 2175
Getting Started................................................................................................................................ 2175
Getting Started with the Uploader Component in the Preact Framework .................................... 2185
Async in React Uploader component.................................................................................................. 2188
Multiple file upload ......................................................................................................................... 2188
Single file upload ............................................................................................................................. 2190
Save action ...................................................................................................................................... 2192
Remove action ................................................................................................................................ 2195
Auto upload..................................................................................................................................... 2197
Sequential upload ........................................................................................................................... 2199
Preload files..................................................................................................................................... 2201
Adding additional HTTP headers with upload action...................................................................... 2203
See Also ........................................................................................................................................... 2204
Chunk upload in React Uploader component ..................................................................................... 2204
Additional configurations................................................................................................................ 2206
Resumable upload .......................................................................................................................... 2209
Cancel upload.................................................................................................................................. 2211
Server-Side configurations .............................................................................................................. 2213
File source in React Uploader component .......................................................................................... 2217
Paste to upload ............................................................................................................................... 2217
Directory upload ............................................................................................................................. 2220
Drag and drop ................................................................................................................................. 2222
See Also ........................................................................................................................................... 2228
Validation in React Uploader component........................................................................................... 2228
File type ........................................................................................................................................... 2229
File size ............................................................................................................................................ 2230
Maximum files count ...................................................................................................................... 2232
Duplicate files.................................................................................................................................. 2235
See Also ........................................................................................................................................... 2238
Form support in React Uploader component ..................................................................................... 2238
Template in React Uploader component ............................................................................................ 2248
File list template.............................................................................................................................. 2248
Custom template ............................................................................................................................ 2257
See Also ........................................................................................................................................... 2269
Localization in React Uploader component ........................................................................................ 2269
Accessibility in React Uploader component ....................................................................................... 2273
Keyboard interaction ...................................................................................................................... 2274
Ensuring accessibility ...................................................................................................................... 2276
See also ........................................................................................................................................... 2276
Style appearance in React Uploader component ............................................................................... 2276
Customizing the appearance of File Upload wrapper element ...................................................... 2276
Customizing the File Upload browse button .................................................................................. 2277
Customizing the File Upload content .............................................................................................. 2277
Customizing the uploaded file container in File Upload ................................................................. 2277
See Also ........................................................................................................................................... 2277
How To ................................................................................................................................................ 2278
Hide default drop area in React Uploader component .................................................................. 2278
Preview images before uploading in React Uploader component ................................................. 2279
Achieve invisible upload in React Uploader component ................................................................ 2280
Customize progressbar in React Uploader component .................................................................. 2282
Sort the selected files in React Uploader component .................................................................... 2284
Get the total size of selected files in React Uploader component ................................................. 2286
Customize button with html element in React Uploader component ........................................... 2288
Add confirm dialog to remove the files in React Uploader component ......................................... 2290
Add additional data on upload in React Uploader component ...................................................... 2292
Validate image on drop in React Uploader component ................................................................. 2294
Determine whether uploader has file input in React Uploader component .................................. 2296
Achieve file upload programmatically in React Uploader component ........................................... 2301
Check file size before uploading it in React Uploader component ................................................. 2303
Check the mime type of file before upload it in React Uploader component ................................ 2304
Trigger click event of input file from external button in React Uploader component ................... 2305
Open and edit the uploaded files in React Uploader component .................................................. 2307
Resize images before uploading it to the server in Uploader component ..................................... 2310
dropArea progress { ........................................................................................................................ 2321
Convert image into binary format after uploading in React Uploader component ....................... 2322
Ej1 api migration in React Uploader component ................................................................................ 2323
Accessibility ..................................................................................................................................... 2323
File List ............................................................................................................................................ 2323
File selection ................................................................................................................................... 2324
Upload action .................................................................................................................................. 2325
Chunk Upload.................................................................................................................................. 2327
Remove action ................................................................................................................................ 2328
Buttons ............................................................................................................................................ 2329
Drag and Drop ................................................................................................................................. 2329
Common .......................................................................................................................................... 2329
Toolbar Getting Started

Toolbar
Getting Started
This section explains you the steps required to create a simple Toolbar and demonstrate the basic usage
of the Toolbar control.
Dependencies
Below is the list of minimum dependencies required to use the Toolbar component.
`javascript
|-- @syncfusion/ej2-react-navigations
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-react-base
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-popups
`
Setup for Local Development
To set-up a React application, choose any of the following ways. The best and easiest way is to use the
create-react-app. It sets up your development environment in JavaScript and improvise your application
for production. Refer to the installation instructions of create-react-app.
`bash
npx create-react-app my-app
cd my-app
npm start
`
or
`bash
yarn create react-app my-app
cd my-app
yarn start
`
To set-up a React application in TypeScript environment, run the following command.
`bash
npx create-react-app my-app --template typescript
cd my-app
npm start

Copyright © 2001 -2024 Syncfusion Inc. 16


Toolbar Getting Started

`
Besides using the npx package runner tool, also create an application from the npm init. To begin with
the npm init, upgrade the npm version to npm 6+.
`bash
npm init react-app my-app
cd my-app
npm start
Adding Syncfusion packages
All the available Essential JS 2 packages are published in npmjs.com public registry.
To install Accordion component, use the following command
`
npm install @syncfusion/ej2-react-navigations --save
`
Adding CSS reference
Add components style as given below in src/App.css.
`css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-react-navigations/styles/material.css';
`
To refer App.css in the application then import it in the src/App.tsx file.
Initialize the Toolbar with commands
The Toolbar can be rendered by defining an array of items. An item is rendered with text by defining the
default item type as a Button. For more information about item configuration, refer the Item
Configuration section.

• Import the Toolbar component to your src/App.tsx file using following code.

`ts
import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
const ReactApp = () => {
return (
<ToolbarComponent id='toolbar'>
<ItemsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 17


Toolbar Getting Started

<ItemDirective text="Cut" />


<ItemDirective text="Copy" />
<ItemDirective text="Paste" />
<ItemDirective type="Separator" />
<ItemDirective text="Bold" />
<ItemDirective text="Italic" />
<ItemDirective text="Underline" />
</ItemsDirective>
</ToolbarComponent>
);
}
export default ReactApp;
`

• Now, run the application in the browser using the following command.

`bash
npm start
`
Initialize the Toolbar using HTML elements
The Toolbar component can be rendered based on the given HTML element using
<ToolbarComponent>. You need to follow the below structure of HTML elements to render the
Toolbar inside the <ToolbarComponent> tag.
`
<ToolbarComponent> --> Root Toolbar Element
<div> --> Toolbar Items Container
<div> --> Toolbar Item Element
</div>
</div>
</ToolbarComponent>
`
INDEX.JSX
import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from 'react-dom';
const ReactApp = () => {
return (<ToolbarComponent>

Copyright © 2001 -2024 Syncfusion Inc. 18


Toolbar Getting Started

<div>
<div><button className='e-btn e-tbar-btn'>Cut</button> </div>
<div><button className='e-btn e-tbar-btn'>Copy</button> </div>
<div><button className='e-btn e-tbar-btn'>Paste</button> </div>
<div className='e-separator'> </div>
<div><button className='e-btn e-tbar-btn'>Bold</button> </div>
<div><button className='e-btn e-tbar-btn'>Italic</button> </div>
</div>
</ToolbarComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from 'react-dom';
const ReactApp = () => {
return (
<ToolbarComponent>
<div>
<div><button className='e-btn e-tbar-btn'>Cut</button> </div>
<div><button className='e-btn e-tbar-btn'>Copy</button> </div>
<div><button className='e-btn e-tbar-btn'>Paste</button> </div>
<div className='e-separator'> </div>
<div><button className='e-btn e-tbar-btn'>Bold</button> </div>
<div><button className='e-btn e-tbar-btn'>Italic</button> </div>
</div>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;

Copyright © 2001 -2024 Syncfusion Inc. 19


Toolbar Item configuration in React Toolbar component

left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom_bold .e-tbar-btn-text {
font-weight: 900;
}
.custom_italic .e-tbar-btn-text {
font-style: italic;
}
.custom_underline .e-tbar-btn-text {
text-decoration: underline red;
}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>

See Also

• How to add Toggle Button

Note: You can refer to our React Toolbar feature tour page for its groundbreaking feature
representations. You can also explore our React Toolbar Example that shows you how to render the
Toolbar in React.
Item configuration in React Toolbar component
The Toolbar can be rendered by defining an array of items. Items can be constructed with the following
built-in command types or item template.
Button
Button is the default command type, and it can be rendered by using the text property.
Properties of the button command type:
Property | Description
text | The text to be displayed for button.

Copyright © 2001 -2024 Syncfusion Inc. 20


Toolbar Item configuration in React Toolbar component

id | The ID of the button to be rendered. If the ID is not given, auto ID is generated.


prefixIcon | Defines the class used to specify an icon for the button. The icon is positioned before the
text if text is available or the icon alone button is rendered.
suffixIcon | Defines the class used to specify an icon for the button. The icon is positioned after the
text if text is available. If both prefixIcon and suffixIcon are specified, only prefixIcon is considered.
width | Used to set the width of the button.
align | Specifies the location for aligning Toolbar items.
Separator
The Separator type adds a vertical separation between the Toolbar single/multiple commands.
INDEX.JSX
import { ItemDirective, ItemsDirective, ToolbarComponent } from
'@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
return (<ToolbarComponent>
<ItemsDirective>
<ItemDirective text="Cut"/>
<ItemDirective text="Copy"/>
<ItemDirective type="Separator"/>
<ItemDirective text="Paste"/>
<ItemDirective type="Separator"/>
<ItemDirective text="Undo"/>
<ItemDirective text="Redo"/>
</ItemsDirective>
</ToolbarComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import { ItemDirective, ItemsDirective, ToolbarComponent } from
'@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
return (
<ToolbarComponent >
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
<ItemDirective type="Separator" />
<ItemDirective text="Paste" />
<ItemDirective type="Separator" />
<ItemDirective text="Undo" />
<ItemDirective text="Redo" />
</ItemsDirective>
</ToolbarComponent>
);

Copyright © 2001 -2024 Syncfusion Inc. 21


Toolbar Item configuration in React Toolbar component

}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<link
href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component
.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom_bold .e-tbar-btn-text {
font-weight: 900;
}
.custom_italic .e-tbar-btn-text {
font-style: italic;
}
.custom_underline .e-tbar-btn-text {
text-decoration: underline red;
}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
@font-face {
font-family: 'Material_toolbar';

Copyright © 2001 -2024 Syncfusion Inc. 22


Toolbar Item configuration in React Toolbar component

src: url(data:application/x-font-ttf;charset=utf-
8;base64,AAEAAAAKAIAAAwAgT1MvMj1tShMAAAEoAAAAVmNtYXDoMOjqAAACDAAAAHhnbHlmIuy
19QAAAswAACNMaGVhZA6okZMAAADQAAAANmhoZWEIUQQkAAAArAAAACRobXR4jAAAAAAAAYAAAAC
MbG9jYYc0kUIAAAKEAAAASG1heHABOwG8AAABCAAAACBuYW1lx/RZbQAAJhgAAAKRcG9zdJZeEVU
AACisAAACGAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAIwABAAAAAQAAAQsu/F8
PPPUACwQAAAAAANXLJlEAAAAA1csmUQAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAjAbAADgAAAAA
AAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnIQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAA
EAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQ
AAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAA
AAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGQAAAAEAAQAAQAA5yH//wA
A5wD//wAAAAEABAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABY
AFwAYABkAGgAbABwAHQAeAB8AIAAhACIAAAAAADIAjgFwAfgCIAKYAxIDSAO2BRYFMAVcBnIGugb
2ByoHQgguCNYJRgn6CiQKiAquCsgMFgzADOYNzg7WDvAQyBEyEaYABwAAAAAD9APzAAMABwAKAA4
AEgAVABkAADchNSElITUhJTkBBSE1ITUhNSEFFxEnITUhDAPo/BgBtgIy/c7+SgG2AjL9zgIy/c7
+Svr6A+j8GAxefV67Pl19Xvr6AfScXgAAAAIAAAAAA/QD9AAEAEgAACUhNxc3AREfDyE/DxEvDyE
PDgOF/PbDisP9gQEBAwQEBgYICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsL/PYLCwsKCgkICAgGBgQEAwGz+qf6AYX89gsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsLAwoLCwsKCgkICAgGBgQEAwEBAQEDBAQGBggICAkKCgsLAAACAAAAAAPzA/QAQAC/AAABFQ8
PLw8/Dx8OAQ8ELwErAQ8FFR8FBxcPAxUfBzsBNx8LOwI/Cx8BOwE/Bj0BLwQ/Aic/BC8HKwEHLws
rAg8FArIBAgUGBwkKDAwODxAQERITEhIREQ8PDgwMCgkHBgUCAQECBQYHCQoMDA4PDxEREhITEhE
QEA8ODAwKCQcGBQL+zxUWFhUWfwUFBAUDBANqAgEBAgIDbgMDbwMCAQEBAmkDBAQEBQSEFBYWFxQ
CAgIDBAQEBcwFBAQEAwICAhQXFRYVgAQFBQQEAwNoAgEBAgIDcAEBAQNvAgIBAQEBA2gDBAQFBAW
DFBYWFxIBAgMDAwQFBcwFBAQDBAICAgAJCRIQEBAODgwLCgkHBgQDAQEDBAYHCQoLDA4OEBAQEhI
SEhAQEA4ODAsKCQcGBAMBAQMEBgcJCgsMDg4QEBASAc6ECwwNDjIBAQICA7QEBQQFBAMEUjIyVgM
EBAQFBAWwAwICATMODQwLhAQEBAMCAgECAgIDBAMEhAsMDQ4yAQECAgOwBAQFBAUEAwRSDAwaMlY
DBAQEBQQFsAMCAgEzDg0MC4QEAwQDAgICAgICAwQDAAAAAAMAAAAAA/MD2AAyADUAaQAAJRUfDTs
BPw41LwgPBwMhAScXAQ8GHQEfBQEfBjsBPwYBPwYvBwEDFgIDBAQGBgcICQkKCgsLCwsLCwoKCQg
ICAYGBAQDAQEDBAcMCQoLFCMtFQoJCQcFBHv96gEL04X+4gYFBAQCAgICAgIEBAUBNwcHBwgHCAc
IBwgHCAgHBwYBOAUEAwMCAQEBAQIDAwQFBv4PlwsLCwoKCQkIBwYGBAQDAgIDBAQGBgcICQkKCgs
LCwcPEBAYEBAPHCk3HRAQEBAQEAEIAQrThf7iBgcIBwgHCAgICAgHBwcH/skGBQQEAwIBAQIDBAQ
FBgE3BwcHBwgICAgHCAgHCAcGAfEABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITchNSEnITUhNyE
1ISchNSEMA+j8GN4CLP3U3gPo/BjeAiz91N4D6PwYDF6AW5xefVqAXgAAAAAEAAAAAAP0A/QACQA
TABcAWwAAAQcVMzcXMzUjLwEjFTMbATM1IwElESERBxEfDyE/DxEvDyEPDgFro8ObnnROxOp0nZv
qTij+8AGW/NReAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgo
LCwv89gsLCwoKCQgICAYGBAQDAQENAyOWliO4BSUBK/7VJQFSffzUAywR/PYLCwsKCgkICAgGBgQ
EAwEBAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgoLCwAAAAA
CAAAAAAOWA/QAAwBpAAA3ITUhExUfHTsBPx01ESMRDw8vDxEjagMs/NRKAgIDAwUFBgcHCAkJCgs
LCwwNDQ0ODw4PEA8QERAREREREBEQDxAPDg8ODQ0NDAsLCwoJCQgHBwYFBQMDAgKLAQMFBggKCww
ODxARERMTFBQTExEREA8ODAsFCQcGBAKLDH0BsBEREREQEA8QDg8ODg0MDQsLCwoJCQgHBwYFBQQ
DAgEBAgMEBQUGBggICQkKCgsMDAwNDg4ODw8PEBAQERERAb7+RRQTEhIREA8NDQsKCAYFAwEBAwU
GCAoLDQ0PCBASEhMTAcUABQAAAAAD9APXAAIABQANABcAGgAAJTcjASM3ATM3MxczAyMFIQEVITU
hATUhJTMnAgJx4wG/vl/+/Fot+i1a3FD9RgEg/t4Bov7UAST+aAF/6XQobQET//47eHgCM07+XD5
NAaQ/UHMAAAAAAQAAAAAD9ALoAF8AABMhJz8PHxo3Lx8PDycMAbWyDQ0ODg8PDxAQEBERERIREhA
QEBAQDw8PDw4ODg0NDQwMFxYTEhAHBgYGBXUHBwgJCQoLCwwNDQ0PDg8QEBERERITEhMUExQVFBU
VFRgYFxcXFhYVFhQUFBMTEhGwARi6CwsJCggICAYGBgQEAwIBAQEBAgIDBAQFBQYHBwgICQkKFRY
YGhsODg8PDygUFBMTEhISERARDw8PDg0NDAsLCgoICAgGBgQEAwMBAQECAwQFBgcJCQoLDA0ODg+
6AAYAAAAAA/MD9AA/AGsAqwDrAO8BMwAAARUfDTsBPw09AS8ODw4lHwk7AT8IPQEvByMnByMPByU
fDz8PLw8PDiUfDz8OPQEvDSsBDw0lESERBxEfDyE/DxEvDyEPDgHhAgMFBQYHCAkKCgsLDA0NDA0
MCwsKCgkIBwYFBQMCAgMFBQYHCAkKCgsLDA0MDQ0MCwsKCgkIBwYFBQMC/scBAQEFBwgKCwYGBwY
GBgwKCAcFAQEBAQUHCAoMBgYGBwYGCwoIBwUBAQHzAQECBAQEBgYGCAcICQkJCgoJCQgJBwgGBgY
EBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCQgHCAYGBgQEBAIB/qgBAQMEBAYGBwgICQoKCgsLCws
LCgkJCQcHBwUFAwMCAgMDBQUHBwcJCQkKCwsLCwsKCgoJCAgHBgYEBAMBAlD81F4BAQMDBAUGBgc
HCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgYHBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwM
BAWQNDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA0NDAwLCwsJCQgHBwUEAwIBAQIDBAUHBwg
JCQsLCwwMMQYGBgsKCQcEAgEBAgQHCQoLBgYGBwYGCwoJBgUCAQECBQYJCgsGBvMJCgkICAgHBwY
FBQQDAwEBAQEDAwQFBQYHBwgICAkKCQoJCQkICAcGBwUFBAMCAQEBAQIDBAUFBwYHCAgJCQkGCws

Copyright © 2001 -2024 Syncfusion Inc. 23


Toolbar Item configuration in React Toolbar component

KCgoJCAgHBgYEBAMBAQEBAwQEBgYHCAgJCgoKCwsLCwsKCQkJBwcHBQUDAwICAwMFBQcHBwkJCQo
LC9/81AMsA/zaCgkJCQkIBwcGBgUEBAIBAQEBAgQEBQUHBwcICQkJCQoDJgoJCQkJCAcHBwUFBAQ
CAQEBAQIEBAUFBwcHCAkJCQkAAAAAAgAAAAADtQP0AAMACgAANyE1IQEjCQEjESFKA2z8lAEG7AG
cAZzs/qAMfQIK/mQBnAFhAAYAAAAAA/QD8wADAAcACwAPABIAFgAANyE1ISUhNSE1ITUhNSE1KQE
RNwMhNSEMA+j8GAG2AjL9zgIy/c4CMv3O/kr6+gPo/BgMXn1efV19Xv4M+gGWXgAFAAAAAAPzA/M
AJQBpAKgArADwAAABFT8bIw8GBR8PNSMvDT8CJw8OHw8TByMPDBc/AzsBHwUzHwYzLxcjJREhEQc
RHw8hPw8RLw8hDw4CKg8QDw8ODg4NDQwMDAwKCwoKCQgJDw0KCQQDAgLxBAUGBggJC/7WDQ0NDg4
PDw8PEA8QEBAQEAoKCQkJCQgIBgQEBAUDAQEDBKsKCQgIBwYGBQUDAwMBAQEBAQEDAwQEBQYHBwg
ICgoL9g4OHA4ODQ4NDg0NDQwNDKkLDA8HCAkJCAgICA4DEAUFBQMEAu4EBwkKDQ8REwoKCwsMDAw
NDQ4ODg4PDy8KAZP81F4BAQMDBAUGBgcHCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgY
HBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwMBAZz0AgMDBAQFBQYHBwgICQkJCgsLCwsYGhsbDw4PDwo
KCQgIBwaUDAsLCgkIBwcGBQQEAgIBAfEBAwMEBQYIBQcGBw8PEA8ODa0NDQ0ODg4ODw8PDw8PEA8
PEA8PEA8ODw8ODg0ODQ0MAj8BBAMDBAQFBgcHBwkJCqoGBQQBAQICBAMJEAcHCAgJCh0dHRsaGRc
XCgoKCQgICAcGBgYEBQMDBj781AMsA/zaCgkJCQkIBwcGBgUEAwMBAQEBAgQEBQYGBwcICQkJCQo
DJgoJCQkJCAcHBgYFBAQCAQEBAQIEBAUFBwcHCAkJCQkAAgAAAAAD8wPrAB8AMwAAEw8HHww/BBU
hNSEBNwkBPwcvCDYKCAcGBQMCAQECAwUGBwgKrwgJCgoKCgkINQKQ/Xv+20EBPAGOCgkHBgUDAgE
BAgMFBgcJCtMBoQsMDQ0NDg4ODg0ODQ0NDAuvBgUDAQECBAY0I14BJEH+xAGRCwwMDQ0ODg4ODg4
NDQwMC9QABgAAAAAD9AP0AAMADwATAB0AIQAnAAAlITUhIzMVIxUzFSMVMzUjNyE1ISMzBxUzNSM
3NSM3ITUhJzMVMzUjAQYC7v0S+n0/P328vPoC7v0S+nh4vHh4vPoC7v0S+j4/fWpeID4gPvrbXXw
/P3w/u14gvPoAAAAABQAAAAAD9APbAAIABQANABcAGgAAJTcjAyM3ATM3MxczAyMFIQEVITUhATU
hJzMnAgJx4x6+Xv76Wi39LF3fTwFlAST+3AGk/tIBJP5mw+l0JXMBGP/+N3h4AjRQ/lo+TQGpPk5
zAAABAAAAAAOsA/QACwAAATMDIxUhNSMTMzUhAXGd88gCPJ3zyP3EAx79xNbWAjzWAAAGAAAAAAP
0A9QAAwBDAEcAhwCLAMsAACUhNSEHFR8OPw49AS8ODw4TITUhBxUfDTsBPw09AS8ODw4TITUhBxU
fDj8OPQEvDg8OAQYC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgY
HBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQE
CAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgY
GBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAkpeLwgIBwcHBwYFBQUDBAICAQE
BAQICBAMFBQUGBwcHBwgICAgIBwcGBgYFBAQDAwIBAQEBAgMDBAQFBgYGBwcICAFgXS4ICAgHBwY
GBgUEBAMDAgEBAgMDBAQFBgYGBwcICAgICAcHBwcGBQUFAwQCAgEBAQECAgQDBQUFBgcHBwcIAUB
dLggICAcHBgYGBQQEAwMCAQEBAQIDAwQEBQYGBgcHCAgICAgHBwcHBgUFBQMEAgIBAQEBAgIEAwU
FBQYHBwcHCAAAAwAAAAADmQP0AAcAKACNAAABFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw0VERUfDTM
hMz8NNRE1Lw0rAS8OKwEPDQEdAcZb/YQBbAEDBAYHBwkJCQkHBwYEAwEBAwQGBwcJCQkJBwcGBAO
svwkJCQgICAcGBgYEBAMCAgICAwQEBgYGBwgICAkJCQJ8CQkJCAgIBwYGBgQEAwICAgIDBAQGBgY
HCAgICQkJvwMFBQYGBwgICQkJCgoKCwsLCwoKCgkJCQgIBwYGBQUDPoiI/SkC1y4FBQgIBwUEAwE
BAwQFBwgICgkICAcFBQIBAQIFBQcICCQCAgMEBAYGBgcICAgJCQn9KQkJCQgICAcGBgUFBAMCAgI
CAwQFBQYGBwgICAkJCQLXCQkJCAgIBwYGBgQEAwICCgkJCAgIBwYGBQQEAwICAgIDBAQFBgYHCAg
ICQkAAQAAAAAD9ALoAGAAAAExLw8PHxc/Gh8PByERA0QREhMTFBQUFRYWFhcXFxgYFRUVFBUUExQ
TEhMSEREREBAPDg8NDQ0MCwsKCQkIBwd1BQYGBgcQEhMWFwwMDQ0NDg4ODw8PDxAQEBAQEhESERE
QERAQDw8PDg4NDbIBtQIuDw4ODQwLCgkJBwYFBAMCAQEBAwMEBAYGCAgICgoLCwwNDQ4PDw8REBE
SEhITExQUKA8PDw4OGxoYFhUKCQkICAcHBgUFBAQDAgIBAQEBAgMEBAYGBggICAoJCwu6AdAAAAA
OAAAAAAP0A/MAAgAFAAgACwAQABQAFwAbAB4AIQApAC0AMQB1AAABETclFzUXNyMFNyETFQUhEQE
hJRMlMycFMSEnBzcnBxcRBRMDBSUDEy0BEQMlIwUDEQcRHw8hPw8RLw8hDw4CGcj+ZaG3MJb+wM7
+4jQBCv6EAy7+ggEKdP1S3JkBCwEjWemWlvrIATJ0dP7n/up3dwEWAZhy/vQ0/vZyXgEBAwQEBgY
ICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsL/PYLCwsKCgkICAgGBgQ
EAwEBxv7fWSQ730Bky8v+9QNxAYH+f28BHx2ZmcukmTgJywEeP/7n/ud3dwEZARl3Bv5xAR1ycv7
yAYAR/PYLCwsKCgkICAcHBQUEAwEBAQEDBAUFBwcICAkKCgsLCwMKCwsLCgoJCAgHBwUFBAMBAQE
BAwQEBgYIBwkJCgoLCwAAAAAFAAAAAAP0A/MAAwAHAAsADwATAAA3ITUhJSE1ISUhNSElITUhJSE
1IQwD6PwYAVgCkP1w/qgD6PwYAVgCkP1w/qgD6PwYDF6AW5xefV19XgAAAAAKAAAAAAP0A/MAAwA
HAAsADwATABcAGwAfACMARwAAARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1JxE
fByE/BxEvByEPBgOW+j7bP9oDLPo+2z/aAyz6Pts/2l4BAwUGAwgJCgOJCgkJBwYDBAIBAwUGAwg
JCvx3CgkJBwYFAwElvb27u7u7ARrb29vb29v6vLy8vLy8hvyCCwoJBwQGBAIBAwUHBwUJCgOECwo
JBwQGBAIBAwUGCAkKAAAAAAUAAAAAA/QD8wADAAcACwAPABMAADchNSE1ITUhNSE1ITUhNSE1ITU
hDAPo/BgCkP1wA+j8GAKQ/XAD6PwYDF6BV59efVqAXgAAAAADAAAAAAP0A00AAwAHAAsAADchNSE
1ITUhNSE1IQwD6PwYA+j8GAPo/Bizb6Zwpm8AAAAABQAAAAAD9AP0AD8AXwCfAKQBIgAAJQ8PLw8
/Dx8OExUPBSsBLwU9AT8FOwEfBQMPDy8PPw8fEAE1IwUVHw8zPwMXBy8FDw8fDz8PNS8DNwEzNQE
/BS8PDw4BOAEBAwMEBQYGBwgICQkKCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgo
KCgkJCAgHBgYFBAMDAeICAgMDBQUFBQUFAwMCAgICAwMFBQUFBQUDAwIC4QEBAwMEBQYGBwgICQk

Copyright © 2001 -2024 Syncfusion Inc. 24


Toolbar Item configuration in React Toolbar component

KCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAftkAV6W/K4
BAwUHCAoMDQ4PERETExQUCwsVFBN2dgkKCgoVFhQUExMREQ8ODQwKCAcFAwEBAwUHCAoMDQ4PERE
TExQUFBQTExERDw4NDAoIBwUDAQEEBgd2AV6W/ZYFBAMCAwEBAwUHCAoMDQ4PERETExQUFBQTExE
RDw4NDAoIBwUD1AoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgoKCgoKCQkICAcGBgUEAwM
BAQEBAwMEBQYGBwgICQkKCgEiBQUFAwMCAgICAwMFBQUFBQUDAwICAgIDAwUFAScKCgoJCQgIBwY
GBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgqgZAF
eMpYKChQTExERDw4NDAoIBwUDAQEEBgd2dgUEAwIDAQEDBQcICgwNDg8RERMTFBQUFBMTEREPDg0
MCggHBQMBAQMFBwgKDA0ODxERExMUFAsLFRQTdv6iMgJqCQoKChUWFBQTExERDw4NDAoIBwUDAQE
DBQcICgwNDg8RERMTFAADAAAAAANXA7UAIgBFAJMAAAEzHw4PDisBNRMzHw4PDisBNQMhPxEvDz8
PLxghAkgKCgkJCAgHBwYGBAQEAgEBAQEDAwQFBgYHBwgJCAkKCeDACgoJCQgIBwcGBgQEBAIBAQE
BAgQEBAYGBwcICAkJCgrAwAHDDQwMDBcWFRMSEQ8NDAoHBgQBAQIDBAYHBwkKCgsNDA4ODwsLCgo
KCAgIBgYFBQMDAQEBAQECAwQEBAUGDA8QEhQVFgwMDA0NDQ0N/nABogICAwQEBgYGBwgICQkKCQo
KCQgJBwgGBgUFBAMCArsBdwICAwQEBgYGCAcICQkKCQoKCQkIBwgGBgYEBAMCArv9MQEBAQIGCAo
MDg8REhQUFhcYGBERERAQEA4ODgwMDAoJCQcICQkKCgoLDAsMDAwMDQwNDQwNDQwMCwwLCxQUERA
ODQoFAwQDAgEBAQAABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITUhNSE1ITUhNSE1ITUhNSEMA+j
8GAPo/BgD6PwYA+j8GAPo/BgMXn1enF59XX1eAAAAAAEAAAAAA9QD1ADUAAATHx8/DxcRIRcPDy8
fPx8fDzMvHw8eKwECAwQFBggICQoMDA0ODhAQERISExQUFRUWFhcXGBgYGBgXFxcWFhUVFBQTEhI
REIr+ZrsMDA0ODg4PEBAQEBESERISEhIREhEQEQ8QDw8ODg0NDAwLCgoJCQgHBgYEBAQCAQEBAQI
EBAQGBgcICQkKCgsMDA0NDg4PDxAPERAREhESEhwcGxoaGBgWFRQSEQ8OCwp7BQYHCAgJCQoLCww
NDQ4ODg8QEBERERISEhMTFBMUFRQYGBgXFxYWFRUUFBMSEhEQEA4ODQwMCgkICAYFBAMCAgAYGBc
XFxYWFRUUFBMSEhEQEA4ODQ0LCgoICAYFBAMCAQECAwQFBggICgoLDQ0ODhCKAZq7DAsLCgkJCAc
HBQUEAwMBAQEBAgQEBAYGBwgICgkLCwwMDQ0ODg8PDxAREBESERISEhIREhEQERAPDw8ODg0NDAw
LCwkKCAgHBgYEBAQCAQECAwUICQsNDxASExUWFxgaExITERIREBAQDw8ODg0NDAsLCgoJCAcHBgY
EBAMCAQEBAgMEBQYICAoKCw0NDg4QEBESEhMUFBUVFhYXFxcYAAAAAgAAAAAD8gP0AGcA7gAAARU
PGC8YPQE/FzsBHxcFHx8/DxcVATcBIyc/Dj0BLx0rAQ8dAoABAgIDAwQFBQUNDxATExYLCwwMDAw
NDQ0NDQ0NDQwNDAsMCxUUEhAPDQUFBQQDAwMBAQEBAwMDBAUFBQ0PEBIUFQsMCwwNDA0NDQ0NDQ0
NDAwMDAsLFhMTEA8NBQUFBAMDAgIB/Y0BAQMDBAUGBggICQkLCwsNDA4ODg8QEBARERISEhMTExE
REBEQEBAQDw8ODg4ODA0OAR1W/uMuDgoKCQkIBwYGBgQEAwMCAQICAwQFBgcHCAkKCgsMDA0NDg8
PDxAREREREhMSExMTExMSEhIRERAQEA8ODg4MDQsLCwkJCAgGBgUEAwMBAoIODQ0MDQwMDAsLFRQ
SEQ4NBgUEBAQDAgEBAQEBAQIDBAQEBQYNDhESFBULCwwMDA0MDQ0ODQ0NDQwMDAwLCxUUEhEODQY
FBQQDAwICAQECAgMDBAUFBg0OERIUFQsLDAwMDA0NDQ0UEhMSEhIRERAQEA8ODg4NDAsLCwkJCAg
GBgUEBAIBAQEBAgIEBAUFBgcHCAgJCgoSLf7jVgEfDg0NDQ4ODg8PDxAQEBERERITExISEhIRERA
QEA8ODg4NDAwLCgoICQcHBQUEBAICAgIEBAUFBwcJCAoKCwwMDQ4ODg8QEBARERISEhITAAAAAgA
AAAADtQP0AAMACgAANyE1IRMzESERMwFKA2z8lA/zAWjz/lkMfQHN/p0BYwGeAAAAAAUAAAAAA/Q
D9AA/AH8AvwD/Aa8AAAEPDisBLw4/Dx8OBQ8OKwEvDj8PHw4lFQ8OLw49AT8OHw4FFQ8OLw49AT8
OHw4BHx8zPw09AS8MPQE/DjsBPx01Lx8PHgOFAQECAgQEBQUGBgcHCAgJCAkJCAcIBgcGBQUEAwM
CAQEBAQIDAwQFBQYHBggHCAkJCAkIBwgHBgYFBQQEAgIB/Z4BAQIDAwQFBQYGBwgHCAkJCAkIBwg
HBgYFBQQDAwIBAQEBAgMDBAUFBgYHCAcICQgJCQgHCAcGBgUFBAMDAgEBvQECAwQEBAYGBgcHCAg
ICQkICAgHBwcFBgQFAwMCAQECAwMFBAYFBwcHCAgICQkICAgHBwYGBgQEBAMCAf7qAQIDAwUEBgU
HBwcICAgJCQgICAcHBgYGBAQEAwIBAQIDBAQEBgYGBwcICAgJCQgICAcHBwUGBAUDAwIB/kQBAgM
EBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGgkICAgHBwYGBgQEBAMCAQECAwMEBAoEBAMDAgE
CAgIEBAUFBgYHBwgICAlkDg8NDg0ODA0MDAwLCwsKCQoICQcIBgYGBQQEAwMCAQECAwQGBwcJCws
MDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgJTCAk
ICAcHBgYFBQQEAgICAgICBAQFBQYGBwcICAkICQgJBwgGBwYFBQQDAwIBAQEBAgMDBAUFBgcGCAc
JCAkICQgIBwcGBgUFBAQCAgICAgIEBAUFBgYHBwgICQgJCAkHCAYHBgUFBAMDAgEBAQECAwMEBQU
GBwYIBwkI1gkJCAcIBgcGBQUEAwMCAQEBAQIDAwQFBQYHBggHCAkJCAkICAcHBgYFBQQEAgIBAQE
BAgIEBAUFBgYHBwgICQgJCQgHCAYHBgUFBAMDAgEBAQECAwMEBQUGBwYIBwgJCQgJCAgHBwYGBQU
EBAICAQEBAQICBAQFBQYGBwcICAn+xhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAgI
CBAQFBQYGBwcICAkICAgIBwcGBgsGBwYIBwgICQkIBwgGBwYFBQQDAwIBAQECAgMEBQUFBgcHCAg
JCQoKCwoMCwwNDA0NDg0ODg4XFxYWFRUVFBQTExIRERAPDw4NDQsLCgkIBwYFBAMBAQECAwQGBwc
JCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAgAAAAAD9AO1AAgAVAAAARchFSEHFzcnJREVHw4hPw4
9ASMVIREhFTM9AS8OIQ8OAtV1/k0BsHI/4OD8+AICAwQFBQYHBwcICQkJCQHPCQkJCQgHBwcGBQU
EAwICXP4xAc9cAgIDBAUFBgcHBwgJCQkJ/jEJCQkJCAcHBwYFBQQDAgICoHRYdD7e3oD9RAkJCAg
IBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwgICAkJzMwCvMzMCQkICAgHBwYGBQQEAwIBAQEBAgMEBAU
GBgcHCAgICQADAAAAAAOvA/QAAwBHAF0AAAERIREHERUfDTMhMz8OES8OIyEjDw0nETMRITUhIw8
NA1X+DFsCAgMEBQUGBgcICAgJCQkB9AkJCQgICAcGBgUFBAMCAQEBAQIDBAUFBgYHCAgICQkJ/gw
JCQkICAgHBgYFBQQDAgK2WQIT/e0JCQkIBwgHBgYFBAQDAgEC4/2EAnwF/YgJCQgJCAcHBgYGBAQ

Copyright © 2001 -2024 Syncfusion Inc. 25


Toolbar Item configuration in React Toolbar component

DAgICAgMEBAYGBgcHCAkICQkCeAkJCQgICAcGBgUFAwMDAQEDAwMFBQYGBwgICAkJsv2EAnxbAgI
DBAUFBgYHCAgICQkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAQAAEAAQAAAAAAAgAHABEAAQA
AAAAAAwAQABgAAQAAAAAABAAQACgAAQAAAAAABQALADgAAQAAAAAABgAQAEMAAQAAAAAACgAsAFM
AAQAAAAAACwASAH8AAwABBAkAAAACAJEAAwABBAkAAQAgAJMAAwABBAkAAgAOALMAAwABBAkAAwA
gAMEAAwABBAkABAAgAOEAAwABBAkABQAWAQEAAwABBAkABgAgARcAAwABBAkACgBYATcAAwABBAk
ACwAkAY8gdG9vbGJhci1tYXRlcmlhbFJlZ3VsYXJ0b29sYmFyLW1hdGVyaWFsdG9vbGJhci1tYXR
lcmlhbFZlcnNpb24gMS4wdG9vbGJhci1tYXRlcmlhbEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmN
mdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAdABvAG8AbABiAGEAcgAtAG0
AYQB0AGUAcgBpAGEAbABSAGUAZwB1AGwAYQByAHQAbwBvAGwAYgBhAHIALQBtAGEAdABlAHIAaQB
hAGwAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABWAGUAcgBzAGkAbwBuACAAMQAuADA
AdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdAB
lAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHU
AZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAjAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgE
TARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAAQVGV4dF9PdXRkZW50XzAwMQtQaWN
0dXJlXzAwMQxTZXR0aW5nc18wMDEQQ29sb3JfcGlja2VyXzAwMhBBbGlnbl9DZW50ZXJfMDA2CEx
pbmVfMDAxDVVuZGVybGluZV8wMDEMU29ydF9aLUFfMDAxCFVuZG9fMDAxEENoYXJ0X2J1YmJsZV8
wMDELRG93bmxvYWRfMDAPVGV4dF9pbmRlbnRfMDAxEkNoYXJ0X0RvdWdobnV0XzAwMQlDbGVhcl8
wMDINTnVtYmVyaW5nXzAwMQxTb3J0X0EtWl8wMDEKSXRhbGljXzAwMQtCdWxsZXRzXzAwMQlQYXN
0ZV8wMDEIUmVkb18wMDEPQ2hhcnRfcmFkYXJfMDAxD0FsaWduX1JpZ2h0XzAwMQlUYWJsZV8wMDE
OQWxpZ25fTGVmdF8wMDEITWVudV8wMDEHQ3V0XzAwMghCb2xkXzAwMRFBbGlnbl9KdXN0aWZ5XzA
wMQpSZWxvYWRfMDAxClNlYXJjaF8wMDEKVXBsb2FkXzAwMQpEZXNpZ25fMDA1CkV4cG9ydF8wMDE
IQ29weV8wMDIAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-bigger .e-tbar-btn .tb-icons {


font-size: 18px;
}
.e-cut-icon:before {
content: "\e719"
}
.e-copy-icon:before {
content: "\e721"
}
.e-paste-icon:before {
content: "\e712"
}
.e-color-icon:before {
content: "\e703";
}
.e-bold-icon:before {
content: "\e71a"
}
.e-underline-icon:before {
content: "\e706";
}
.e-clear-icon:before {
content: "\e70d"
}
.e-italic-icon:before {
content: "\e710"
}
.e-ascending-icon:before {
content: "\e70f";
}

Copyright © 2001 -2024 Syncfusion Inc. 26


Toolbar Item configuration in React Toolbar component

.e-descending-icon:before {
content: "\e707";
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>

If Separator is added as first or last item, it is not visible.


Input
The Input type is only applicable for adding template elements when the template property is defined
as an object. Input type creates an input element internally that acts as the container for Syncfusion
input based components.
Note: Set toolbar item type property value as Input only for Input components.
NumericTextBox
E.g. The following code explains about how to add NumericTextBox component to the Toolbar.

• The NumericTextBox component can be included by importing the NumericTextBox module


from ej2-inputs.
• Initialize the NumericTextBox in template property, in which the Toolbar item type set as
Input.
• Related NumericTextBox component properties are also can be configured like as below.

`javascript
new NumericTextBox( { format: 'c2' }))
`
DropDownList
E.g. The following code explains about how to add DropDownList component to the Toolbar.

• The DropDownList component can be included by importing the DropDownList module from
ej2-dropdowns.
• Initialize the DropDownList in template property, in which the Toolbar item type set as Input.
• Related DropDownList component properties are also can be configured like as below.

`javascript
new DropDownList({ width:100 })
`
CheckBox
E.g. The following code explains about how to add CheckBox component to the Toolbar.

Copyright © 2001 -2024 Syncfusion Inc. 27


Toolbar Item configuration in React Toolbar component

• The CheckBox component can be included by importing the CheckBox module from ej2-
buttons.
• Initialize the CheckBox in template property, in which the Toolbar item type set as Input.
• Related CheckBox component properties are also can be configured like as below.

`javascript
new CheckBox({ label: 'Checkbox', checked: true })
`
RadioButton
E.g. The following code explains about how to add RadioButton component to the Toolbar.

• The RadioButton component can be included by importing the RadioButton module from ej2-
buttons.
• Initialize the RadioButton in template property, in which the Toolbar item type set as Input.
• Related RadioButton component properties are also can be configured like as below.

`javascript
new RadioButton({ label: 'Radio', name: 'default', checked: true })
`
Above steps applicable for all 'Syncfusion' input based components.
INDEX.JSX
import { CheckBoxComponent, RadioButtonComponent } from '@syncfusion/ej2-
react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ItemDirective, ItemsDirective, ToolbarComponent } from
'@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
const data = ['Badminton', 'Basketball', 'Cricket', 'Golf', 'Hockey',
'Rugby'];
const dropDownList = () => {
return (<div>
<DropDownListComponent dataSource={data} width={120} index={2} />
</div>)
}
const numericText = () => {
return (<div>
<NumericTextBoxComponent format='c2'
value={1}></NumericTextBoxComponent>
</div>)
}
const checkBox = () => {
return (<div>
<CheckBoxComponent label='Checkbox'
checked={true}></CheckBoxComponent>

Copyright © 2001 -2024 Syncfusion Inc. 28


Toolbar Item configuration in React Toolbar component

</div>)
}
const radioButton = () => {
return (<div>
<RadioButtonComponent label='Radio' name='default'
checked={true}></RadioButtonComponent>
</div>)
}
return (
<ToolbarComponent >
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
<ItemDirective type="Separator" />
<ItemDirective text="Undo" />
<ItemDirective text="Redo" />
<ItemDirective type="Separator" />
<ItemDirective type="Input" template={numericText} />
<ItemDirective type="Input" template={dropDownList} />
<ItemDirective type="Input" template={checkBox} />
<ItemDirective type="Input" template={radioButton} />
</ItemsDirective>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import { CheckBoxComponent, RadioButtonComponent } from '@syncfusion/ej2-
react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ItemDirective, ItemsDirective, ToolbarComponent } from
'@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
const data: any = ['Badminton', 'Basketball', 'Cricket', 'Golf', 'Hockey',
'Rugby'];
const dropDownList = () => {
return (<div>
<DropDownListComponent dataSource={data} width={120} index={2} />
</div>)
}
const numericText = () => {
return (<div>
<NumericTextBoxComponent format='c2'
value={1}></NumericTextBoxComponent>
</div>)
}
const checkBox = () => {
return (<div>
<CheckBoxComponent label='Checkbox'
checked={true}></CheckBoxComponent>

Copyright © 2001 -2024 Syncfusion Inc. 29


Toolbar Item configuration in React Toolbar component

</div>)
}
const radioButton = () => {
return (<div>
<RadioButtonComponent label='Radio' name='default'
checked={true}></RadioButtonComponent>
</div>)
}
return (
<ToolbarComponent >
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
<ItemDirective type="Separator" />
<ItemDirective text="Undo" />
<ItemDirective text="Redo" />
<ItemDirective type="Separator" />
<ItemDirective type="Input" template={numericText} />
<ItemDirective type="Input" template={dropDownList} />
<ItemDirective type="Input" template={checkBox} />
<ItemDirective type="Input" template={radioButton} />
</ItemsDirective>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<link
href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component
.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;

Copyright © 2001 -2024 Syncfusion Inc. 30


Toolbar Item configuration in React Toolbar component

}
.custom_bold .e-tbar-btn-text {
font-weight: 900;
}
.custom_italic .e-tbar-btn-text {
font-style: italic;
}
.custom_underline .e-tbar-btn-text {
text-decoration: underline red;
}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
@font-face {
font-family: 'Material_toolbar';
src: url(data:application/x-font-ttf;charset=utf-
8;base64,AAEAAAAKAIAAAwAgT1MvMj1tShMAAAEoAAAAVmNtYXDoMOjqAAACDAAAAHhnbHlmIuy
19QAAAswAACNMaGVhZA6okZMAAADQAAAANmhoZWEIUQQkAAAArAAAACRobXR4jAAAAAAAAYAAAAC
MbG9jYYc0kUIAAAKEAAAASG1heHABOwG8AAABCAAAACBuYW1lx/RZbQAAJhgAAAKRcG9zdJZeEVU
AACisAAACGAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAIwABAAAAAQAAAQsu/F8
PPPUACwQAAAAAANXLJlEAAAAA1csmUQAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAjAbAADgAAAAA
AAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnIQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAA
EAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQ
AAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAA
AAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGQAAAAEAAQAAQAA5yH//wA
A5wD//wAAAAEABAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABY
AFwAYABkAGgAbABwAHQAeAB8AIAAhACIAAAAAADIAjgFwAfgCIAKYAxIDSAO2BRYFMAVcBnIGugb
2ByoHQgguCNYJRgn6CiQKiAquCsgMFgzADOYNzg7WDvAQyBEyEaYABwAAAAAD9APzAAMABwAKAA4
AEgAVABkAADchNSElITUhJTkBBSE1ITUhNSEFFxEnITUhDAPo/BgBtgIy/c7+SgG2AjL9zgIy/c7
+Svr6A+j8GAxefV67Pl19Xvr6AfScXgAAAAIAAAAAA/QD9AAEAEgAACUhNxc3AREfDyE/DxEvDyE
PDgOF/PbDisP9gQEBAwQEBgYICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsL/PYLCwsKCgkICAgGBgQEAwGz+qf6AYX89gsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsLAwoLCwsKCgkICAgGBgQEAwEBAQEDBAQGBggICAkKCgsLAAACAAAAAAPzA/QAQAC/AAABFQ8
PLw8/Dx8OAQ8ELwErAQ8FFR8FBxcPAxUfBzsBNx8LOwI/Cx8BOwE/Bj0BLwQ/Aic/BC8HKwEHLws
rAg8FArIBAgUGBwkKDAwODxAQERITEhIREQ8PDgwMCgkHBgUCAQECBQYHCQoMDA4PDxEREhITEhE
QEA8ODAwKCQcGBQL+zxUWFhUWfwUFBAUDBANqAgEBAgIDbgMDbwMCAQEBAmkDBAQEBQSEFBYWFxQ
CAgIDBAQEBcwFBAQEAwICAhQXFRYVgAQFBQQEAwNoAgEBAgIDcAEBAQNvAgIBAQEBA2gDBAQFBAW
DFBYWFxIBAgMDAwQFBcwFBAQDBAICAgAJCRIQEBAODgwLCgkHBgQDAQEDBAYHCQoLDA4OEBAQEhI
SEhAQEA4ODAsKCQcGBAMBAQMEBgcJCgsMDg4QEBASAc6ECwwNDjIBAQICA7QEBQQFBAMEUjIyVgM
EBAQFBAWwAwICATMODQwLhAQEBAMCAgECAgIDBAMEhAsMDQ4yAQECAgOwBAQFBAUEAwRSDAwaMlY
DBAQEBQQFsAMCAgEzDg0MC4QEAwQDAgICAgICAwQDAAAAAAMAAAAAA/MD2AAyADUAaQAAJRUfDTs
BPw41LwgPBwMhAScXAQ8GHQEfBQEfBjsBPwYBPwYvBwEDFgIDBAQGBgcICQkKCgsLCwsLCwoKCQg
ICAYGBAQDAQEDBAcMCQoLFCMtFQoJCQcFBHv96gEL04X+4gYFBAQCAgICAgIEBAUBNwcHBwgHCAc
IBwgHCAgHBwYBOAUEAwMCAQEBAQIDAwQFBv4PlwsLCwoKCQkIBwYGBAQDAgIDBAQGBgcICQkKCgs
LCwcPEBAYEBAPHCk3HRAQEBAQEAEIAQrThf7iBgcIBwgHCAgICAgHBwcH/skGBQQEAwIBAQIDBAQ
FBgE3BwcHBwgICAgHCAgHCAcGAfEABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITchNSEnITUhNyE
1ISchNSEMA+j8GN4CLP3U3gPo/BjeAiz91N4D6PwYDF6AW5xefVqAXgAAAAAEAAAAAAP0A/QACQA
TABcAWwAAAQcVMzcXMzUjLwEjFTMbATM1IwElESERBxEfDyE/DxEvDyEPDgFro8ObnnROxOp0nZv

Copyright © 2001 -2024 Syncfusion Inc. 31


Toolbar Item configuration in React Toolbar component

qTij+8AGW/NReAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgo
LCwv89gsLCwoKCQgICAYGBAQDAQENAyOWliO4BSUBK/7VJQFSffzUAywR/PYLCwsKCgkICAgGBgQ
EAwEBAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgoLCwAAAAA
CAAAAAAOWA/QAAwBpAAA3ITUhExUfHTsBPx01ESMRDw8vDxEjagMs/NRKAgIDAwUFBgcHCAkJCgs
LCwwNDQ0ODw4PEA8QERAREREREBEQDxAPDg8ODQ0NDAsLCwoJCQgHBwYFBQMDAgKLAQMFBggKCww
ODxARERMTFBQTExEREA8ODAsFCQcGBAKLDH0BsBEREREQEA8QDg8ODg0MDQsLCwoJCQgHBwYFBQQ
DAgEBAgMEBQUGBggICQkKCgsMDAwNDg4ODw8PEBAQERERAb7+RRQTEhIREA8NDQsKCAYFAwEBAwU
GCAoLDQ0PCBASEhMTAcUABQAAAAAD9APXAAIABQANABcAGgAAJTcjASM3ATM3MxczAyMFIQEVITU
hATUhJTMnAgJx4wG/vl/+/Fot+i1a3FD9RgEg/t4Bov7UAST+aAF/6XQobQET//47eHgCM07+XD5
NAaQ/UHMAAAAAAQAAAAAD9ALoAF8AABMhJz8PHxo3Lx8PDycMAbWyDQ0ODg8PDxAQEBERERIREhA
QEBAQDw8PDw4ODg0NDQwMFxYTEhAHBgYGBXUHBwgJCQoLCwwNDQ0PDg8QEBERERITEhMUExQVFBU
VFRgYFxcXFhYVFhQUFBMTEhGwARi6CwsJCggICAYGBgQEAwIBAQEBAgIDBAQFBQYHBwgICQkKFRY
YGhsODg8PDygUFBMTEhISERARDw8PDg0NDAsLCgoICAgGBgQEAwMBAQECAwQFBgcJCQoLDA0ODg+
6AAYAAAAAA/MD9AA/AGsAqwDrAO8BMwAAARUfDTsBPw09AS8ODw4lHwk7AT8IPQEvByMnByMPByU
fDz8PLw8PDiUfDz8OPQEvDSsBDw0lESERBxEfDyE/DxEvDyEPDgHhAgMFBQYHCAkKCgsLDA0NDA0
MCwsKCgkIBwYFBQMCAgMFBQYHCAkKCgsLDA0MDQ0MCwsKCgkIBwYFBQMC/scBAQEFBwgKCwYGBwY
GBgwKCAcFAQEBAQUHCAoMBgYGBwYGCwoIBwUBAQHzAQECBAQEBgYGCAcICQkJCgoJCQgJBwgGBgY
EBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCQgHCAYGBgQEBAIB/qgBAQMEBAYGBwgICQoKCgsLCws
LCgkJCQcHBwUFAwMCAgMDBQUHBwcJCQkKCwsLCwsKCgoJCAgHBgYEBAMBAlD81F4BAQMDBAUGBgc
HCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgYHBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwM
BAWQNDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA0NDAwLCwsJCQgHBwUEAwIBAQIDBAUHBwg
JCQsLCwwMMQYGBgsKCQcEAgEBAgQHCQoLBgYGBwYGCwoJBgUCAQECBQYJCgsGBvMJCgkICAgHBwY
FBQQDAwEBAQEDAwQFBQYHBwgICAkKCQoJCQkICAcGBwUFBAMCAQEBAQIDBAUFBwYHCAgJCQkGCws
KCgoJCAgHBgYEBAMBAQEBAwQEBgYHCAgJCgoKCwsLCwsKCQkJBwcHBQUDAwICAwMFBQcHBwkJCQo
LC9/81AMsA/zaCgkJCQkIBwcGBgUEBAIBAQEBAgQEBQUHBwcICQkJCQoDJgoJCQkJCAcHBwUFBAQ
CAQEBAQIEBAUFBwcHCAkJCQkAAAAAAgAAAAADtQP0AAMACgAANyE1IQEjCQEjESFKA2z8lAEG7AG
cAZzs/qAMfQIK/mQBnAFhAAYAAAAAA/QD8wADAAcACwAPABIAFgAANyE1ISUhNSE1ITUhNSE1KQE
RNwMhNSEMA+j8GAG2AjL9zgIy/c4CMv3O/kr6+gPo/BgMXn1efV19Xv4M+gGWXgAFAAAAAAPzA/M
AJQBpAKgArADwAAABFT8bIw8GBR8PNSMvDT8CJw8OHw8TByMPDBc/AzsBHwUzHwYzLxcjJREhEQc
RHw8hPw8RLw8hDw4CKg8QDw8ODg4NDQwMDAwKCwoKCQgJDw0KCQQDAgLxBAUGBggJC/7WDQ0NDg4
PDw8PEA8QEBAQEAoKCQkJCQgIBgQEBAUDAQEDBKsKCQgIBwYGBQUDAwMBAQEBAQEDAwQEBQYHBwg
ICgoL9g4OHA4ODQ4NDg0NDQwNDKkLDA8HCAkJCAgICA4DEAUFBQMEAu4EBwkKDQ8REwoKCwsMDAw
NDQ4ODg4PDy8KAZP81F4BAQMDBAUGBgcHCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgY
HBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwMBAZz0AgMDBAQFBQYHBwgICQkJCgsLCwsYGhsbDw4PDwo
KCQgIBwaUDAsLCgkIBwcGBQQEAgIBAfEBAwMEBQYIBQcGBw8PEA8ODa0NDQ0ODg4ODw8PDw8PEA8
PEA8PEA8ODw8ODg0ODQ0MAj8BBAMDBAQFBgcHBwkJCqoGBQQBAQICBAMJEAcHCAgJCh0dHRsaGRc
XCgoKCQgICAcGBgYEBQMDBj781AMsA/zaCgkJCQkIBwcGBgUEAwMBAQEBAgQEBQYGBwcICQkJCQo
DJgoJCQkJCAcHBgYFBAQCAQEBAQIEBAUFBwcHCAkJCQkAAgAAAAAD8wPrAB8AMwAAEw8HHww/BBU
hNSEBNwkBPwcvCDYKCAcGBQMCAQECAwUGBwgKrwgJCgoKCgkINQKQ/Xv+20EBPAGOCgkHBgUDAgE
BAgMFBgcJCtMBoQsMDQ0NDg4ODg0ODQ0NDAuvBgUDAQECBAY0I14BJEH+xAGRCwwMDQ0ODg4ODg4
NDQwMC9QABgAAAAAD9AP0AAMADwATAB0AIQAnAAAlITUhIzMVIxUzFSMVMzUjNyE1ISMzBxUzNSM
3NSM3ITUhJzMVMzUjAQYC7v0S+n0/P328vPoC7v0S+nh4vHh4vPoC7v0S+j4/fWpeID4gPvrbXXw
/P3w/u14gvPoAAAAABQAAAAAD9APbAAIABQANABcAGgAAJTcjAyM3ATM3MxczAyMFIQEVITUhATU
hJzMnAgJx4x6+Xv76Wi39LF3fTwFlAST+3AGk/tIBJP5mw+l0JXMBGP/+N3h4AjRQ/lo+TQGpPk5
zAAABAAAAAAOsA/QACwAAATMDIxUhNSMTMzUhAXGd88gCPJ3zyP3EAx79xNbWAjzWAAAGAAAAAAP
0A9QAAwBDAEcAhwCLAMsAACUhNSEHFR8OPw49AS8ODw4TITUhBxUfDTsBPw09AS8ODw4TITUhBxU
fDj8OPQEvDg8OAQYC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgY
HBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQE
CAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgY
GBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAkpeLwgIBwcHBwYFBQUDBAICAQE
BAQICBAMFBQUGBwcHBwgICAgIBwcGBgYFBAQDAwIBAQEBAgMDBAQFBgYGBwcICAFgXS4ICAgHBwY
GBgUEBAMDAgEBAgMDBAQFBgYGBwcICAgICAcHBwcGBQUFAwQCAgEBAQECAgQDBQUFBgcHBwcIAUB
dLggICAcHBgYGBQQEAwMCAQEBAQIDAwQEBQYGBgcHCAgICAgHBwcHBgUFBQMEAgIBAQEBAgIEAwU
FBQYHBwcHCAAAAwAAAAADmQP0AAcAKACNAAABFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw0VERUfDTM
hMz8NNRE1Lw0rAS8OKwEPDQEdAcZb/YQBbAEDBAYHBwkJCQkHBwYEAwEBAwQGBwcJCQkJBwcGBAO
svwkJCQgICAcGBgYEBAMCAgICAwQEBgYGBwgICAkJCQJ8CQkJCAgIBwYGBgQEAwICAgIDBAQGBgY
HCAgICQkJvwMFBQYGBwgICQkJCgoKCwsLCwoKCgkJCQgIBwYGBQUDPoiI/SkC1y4FBQgIBwUEAwE

Copyright © 2001 -2024 Syncfusion Inc. 32


Toolbar Item configuration in React Toolbar component

BAwQFBwgICgkICAcFBQIBAQIFBQcICCQCAgMEBAYGBgcICAgJCQn9KQkJCQgICAcGBgUFBAMCAgI
CAwQFBQYGBwgICAkJCQLXCQkJCAgIBwYGBgQEAwICCgkJCAgIBwYGBQQEAwICAgIDBAQFBgYHCAg
ICQkAAQAAAAAD9ALoAGAAAAExLw8PHxc/Gh8PByERA0QREhMTFBQUFRYWFhcXFxgYFRUVFBUUExQ
TEhMSEREREBAPDg8NDQ0MCwsKCQkIBwd1BQYGBgcQEhMWFwwMDQ0NDg4ODw8PDxAQEBAQEhESERE
QERAQDw8PDg4NDbIBtQIuDw4ODQwLCgkJBwYFBAMCAQEBAwMEBAYGCAgICgoLCwwNDQ4PDw8REBE
SEhITExQUKA8PDw4OGxoYFhUKCQkICAcHBgUFBAQDAgIBAQEBAgMEBAYGBggICAoJCwu6AdAAAAA
OAAAAAAP0A/MAAgAFAAgACwAQABQAFwAbAB4AIQApAC0AMQB1AAABETclFzUXNyMFNyETFQUhEQE
hJRMlMycFMSEnBzcnBxcRBRMDBSUDEy0BEQMlIwUDEQcRHw8hPw8RLw8hDw4CGcj+ZaG3MJb+wM7
+4jQBCv6EAy7+ggEKdP1S3JkBCwEjWemWlvrIATJ0dP7n/up3dwEWAZhy/vQ0/vZyXgEBAwQEBgY
ICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsL/PYLCwsKCgkICAgGBgQ
EAwEBxv7fWSQ730Bky8v+9QNxAYH+f28BHx2ZmcukmTgJywEeP/7n/ud3dwEZARl3Bv5xAR1ycv7
yAYAR/PYLCwsKCgkICAcHBQUEAwEBAQEDBAUFBwcICAkKCgsLCwMKCwsLCgoJCAgHBwUFBAMBAQE
BAwQEBgYIBwkJCgoLCwAAAAAFAAAAAAP0A/MAAwAHAAsADwATAAA3ITUhJSE1ISUhNSElITUhJSE
1IQwD6PwYAVgCkP1w/qgD6PwYAVgCkP1w/qgD6PwYDF6AW5xefV19XgAAAAAKAAAAAAP0A/MAAwA
HAAsADwATABcAGwAfACMARwAAARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1JxE
fByE/BxEvByEPBgOW+j7bP9oDLPo+2z/aAyz6Pts/2l4BAwUGAwgJCgOJCgkJBwYDBAIBAwUGAwg
JCvx3CgkJBwYFAwElvb27u7u7ARrb29vb29v6vLy8vLy8hvyCCwoJBwQGBAIBAwUHBwUJCgOECwo
JBwQGBAIBAwUGCAkKAAAAAAUAAAAAA/QD8wADAAcACwAPABMAADchNSE1ITUhNSE1ITUhNSE1ITU
hDAPo/BgCkP1wA+j8GAKQ/XAD6PwYDF6BV59efVqAXgAAAAADAAAAAAP0A00AAwAHAAsAADchNSE
1ITUhNSE1IQwD6PwYA+j8GAPo/Bizb6Zwpm8AAAAABQAAAAAD9AP0AD8AXwCfAKQBIgAAJQ8PLw8
/Dx8OExUPBSsBLwU9AT8FOwEfBQMPDy8PPw8fEAE1IwUVHw8zPwMXBy8FDw8fDz8PNS8DNwEzNQE
/BS8PDw4BOAEBAwMEBQYGBwgICQkKCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgo
KCgkJCAgHBgYFBAMDAeICAgMDBQUFBQUFAwMCAgICAwMFBQUFBQUDAwIC4QEBAwMEBQYGBwgICQk
KCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAftkAV6W/K4
BAwUHCAoMDQ4PERETExQUCwsVFBN2dgkKCgoVFhQUExMREQ8ODQwKCAcFAwEBAwUHCAoMDQ4PERE
TExQUFBQTExERDw4NDAoIBwUDAQEEBgd2AV6W/ZYFBAMCAwEBAwUHCAoMDQ4PERETExQUFBQTExE
RDw4NDAoIBwUD1AoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgoKCgoKCQkICAcGBgUEAwM
BAQEBAwMEBQYGBwgICQkKCgEiBQUFAwMCAgICAwMFBQUFBQUDAwICAgIDAwUFAScKCgoJCQgIBwY
GBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgqgZAF
eMpYKChQTExERDw4NDAoIBwUDAQEEBgd2dgUEAwIDAQEDBQcICgwNDg8RERMTFBQUFBMTEREPDg0
MCggHBQMBAQMFBwgKDA0ODxERExMUFAsLFRQTdv6iMgJqCQoKChUWFBQTExERDw4NDAoIBwUDAQE
DBQcICgwNDg8RERMTFAADAAAAAANXA7UAIgBFAJMAAAEzHw4PDisBNRMzHw4PDisBNQMhPxEvDz8
PLxghAkgKCgkJCAgHBwYGBAQEAgEBAQEDAwQFBgYHBwgJCAkKCeDACgoJCQgIBwcGBgQEBAIBAQE
BAgQEBAYGBwcICAkJCgrAwAHDDQwMDBcWFRMSEQ8NDAoHBgQBAQIDBAYHBwkKCgsNDA4ODwsLCgo
KCAgIBgYFBQMDAQEBAQECAwQEBAUGDA8QEhQVFgwMDA0NDQ0N/nABogICAwQEBgYGBwgICQkKCQo
KCQgJBwgGBgUFBAMCArsBdwICAwQEBgYGCAcICQkKCQoKCQkIBwgGBgYEBAMCArv9MQEBAQIGCAo
MDg8REhQUFhcYGBERERAQEA4ODgwMDAoJCQcICQkKCgoLDAsMDAwMDQwNDQwNDQwMCwwLCxQUERA
ODQoFAwQDAgEBAQAABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITUhNSE1ITUhNSE1ITUhNSEMA+j
8GAPo/BgD6PwYA+j8GAPo/BgMXn1enF59XX1eAAAAAAEAAAAAA9QD1ADUAAATHx8/DxcRIRcPDy8
fPx8fDzMvHw8eKwECAwQFBggICQoMDA0ODhAQERISExQUFRUWFhcXGBgYGBgXFxcWFhUVFBQTEhI
REIr+ZrsMDA0ODg4PEBAQEBESERISEhIREhEQEQ8QDw8ODg0NDAwLCgoJCQgHBgYEBAQCAQEBAQI
EBAQGBgcICQkKCgsMDA0NDg4PDxAPERAREhESEhwcGxoaGBgWFRQSEQ8OCwp7BQYHCAgJCQoLCww
NDQ4ODg8QEBERERISEhMTFBMUFRQYGBgXFxYWFRUUFBMSEhEQEA4ODQwMCgkICAYFBAMCAgAYGBc
XFxYWFRUUFBMSEhEQEA4ODQ0LCgoICAYFBAMCAQECAwQFBggICgoLDQ0ODhCKAZq7DAsLCgkJCAc
HBQUEAwMBAQEBAgQEBAYGBwgICgkLCwwMDQ0ODg8PDxAREBESERISEhIREhEQERAPDw8ODg0NDAw
LCwkKCAgHBgYEBAQCAQECAwUICQsNDxASExUWFxgaExITERIREBAQDw8ODg0NDAsLCgoJCAcHBgY
EBAMCAQEBAgMEBQYICAoKCw0NDg4QEBESEhMUFBUVFhYXFxcYAAAAAgAAAAAD8gP0AGcA7gAAARU
PGC8YPQE/FzsBHxcFHx8/DxcVATcBIyc/Dj0BLx0rAQ8dAoABAgIDAwQFBQUNDxATExYLCwwMDAw
NDQ0NDQ0NDQwNDAsMCxUUEhAPDQUFBQQDAwMBAQEBAwMDBAUFBQ0PEBIUFQsMCwwNDA0NDQ0NDQ0
NDAwMDAsLFhMTEA8NBQUFBAMDAgIB/Y0BAQMDBAUGBggICQkLCwsNDA4ODg8QEBARERISEhMTExE
REBEQEBAQDw8ODg4ODA0OAR1W/uMuDgoKCQkIBwYGBgQEAwMCAQICAwQFBgcHCAkKCgsMDA0NDg8
PDxAREREREhMSExMTExMSEhIRERAQEA8ODg4MDQsLCwkJCAgGBgUEAwMBAoIODQ0MDQwMDAsLFRQ
SEQ4NBgUEBAQDAgEBAQEBAQIDBAQEBQYNDhESFBULCwwMDA0MDQ0ODQ0NDQwMDAwLCxUUEhEODQY
FBQQDAwICAQECAgMDBAUFBg0OERIUFQsLDAwMDA0NDQ0UEhMSEhIRERAQEA8ODg4NDAsLCwkJCAg
GBgUEBAIBAQEBAgIEBAUFBgcHCAgJCgoSLf7jVgEfDg0NDQ4ODg8PDxAQEBERERITExISEhIRERA
QEA8ODg4NDAwLCgoICQcHBQUEBAICAgIEBAUFBwcJCAoKCwwMDQ4ODg8QEBARERISEhITAAAAAgA
AAAADtQP0AAMACgAANyE1IRMzESERMwFKA2z8lA/zAWjz/lkMfQHN/p0BYwGeAAAAAAUAAAAAA/Q

Copyright © 2001 -2024 Syncfusion Inc. 33


Toolbar Item configuration in React Toolbar component

D9AA/AH8AvwD/Aa8AAAEPDisBLw4/Dx8OBQ8OKwEvDj8PHw4lFQ8OLw49AT8OHw4FFQ8OLw49AT8
OHw4BHx8zPw09AS8MPQE/DjsBPx01Lx8PHgOFAQECAgQEBQUGBgcHCAgJCAkJCAcIBgcGBQUEAwM
CAQEBAQIDAwQFBQYHBggHCAkJCAkIBwgHBgYFBQQEAgIB/Z4BAQIDAwQFBQYGBwgHCAkJCAkIBwg
HBgYFBQQDAwIBAQEBAgMDBAUFBgYHCAcICQgJCQgHCAcGBgUFBAMDAgEBvQECAwQEBAYGBgcHCAg
ICQkICAgHBwcFBgQFAwMCAQECAwMFBAYFBwcHCAgICQkICAgHBwYGBgQEBAMCAf7qAQIDAwUEBgU
HBwcICAgJCQgICAcHBgYGBAQEAwIBAQIDBAQEBgYGBwcICAgJCQgICAcHBwUGBAUDAwIB/kQBAgM
EBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGgkICAgHBwYGBgQEBAMCAQECAwMEBAoEBAMDAgE
CAgIEBAUFBgYHBwgICAlkDg8NDg0ODA0MDAwLCwsKCQoICQcIBgYGBQQEAwMCAQECAwQGBwcJCws
MDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgJTCAk
ICAcHBgYFBQQEAgICAgICBAQFBQYGBwcICAkICQgJBwgGBwYFBQQDAwIBAQEBAgMDBAUFBgcGCAc
JCAkICQgIBwcGBgUFBAQCAgICAgIEBAUFBgYHBwgICQgJCAkHCAYHBgUFBAMDAgEBAQECAwMEBQU
GBwYIBwkI1gkJCAcIBgcGBQUEAwMCAQEBAQIDAwQFBQYHBggHCAkJCAkICAcHBgYFBQQEAgIBAQE
BAgIEBAUFBgYHBwgICQgJCQgHCAYHBgUFBAMDAgEBAQECAwMEBQUGBwYIBwgJCQgJCAgHBwYGBQU
EBAICAQEBAQICBAQFBQYGBwcICAn+xhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAgI
CBAQFBQYGBwcICAkICAgIBwcGBgsGBwYIBwgICQkIBwgGBwYFBQQDAwIBAQECAgMEBQUFBgcHCAg
JCQoKCwoMCwwNDA0NDg0ODg4XFxYWFRUVFBQTExIRERAPDw4NDQsLCgkIBwYFBAMBAQECAwQGBwc
JCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAgAAAAAD9AO1AAgAVAAAARchFSEHFzcnJREVHw4hPw4
9ASMVIREhFTM9AS8OIQ8OAtV1/k0BsHI/4OD8+AICAwQFBQYHBwcICQkJCQHPCQkJCQgHBwcGBQU
EAwICXP4xAc9cAgIDBAUFBgcHBwgJCQkJ/jEJCQkJCAcHBwYFBQQDAgICoHRYdD7e3oD9RAkJCAg
IBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwgICAkJzMwCvMzMCQkICAgHBwYGBQQEAwIBAQEBAgMEBAU
GBgcHCAgICQADAAAAAAOvA/QAAwBHAF0AAAERIREHERUfDTMhMz8OES8OIyEjDw0nETMRITUhIw8
NA1X+DFsCAgMEBQUGBgcICAgJCQkB9AkJCQgICAcGBgUFBAMCAQEBAQIDBAUFBgYHCAgICQkJ/gw
JCQkICAgHBgYFBQQDAgK2WQIT/e0JCQkIBwgHBgYFBAQDAgEC4/2EAnwF/YgJCQgJCAcHBgYGBAQ
DAgICAgMEBAYGBgcHCAkICQkCeAkJCQgICAcGBgUFAwMDAQEDAwMFBQYGBwgICAkJsv2EAnxbAgI
DBAUFBgYHCAgICQkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAQAAEAAQAAAAAAAgAHABEAAQA
AAAAAAwAQABgAAQAAAAAABAAQACgAAQAAAAAABQALADgAAQAAAAAABgAQAEMAAQAAAAAACgAsAFM
AAQAAAAAACwASAH8AAwABBAkAAAACAJEAAwABBAkAAQAgAJMAAwABBAkAAgAOALMAAwABBAkAAwA
gAMEAAwABBAkABAAgAOEAAwABBAkABQAWAQEAAwABBAkABgAgARcAAwABBAkACgBYATcAAwABBAk
ACwAkAY8gdG9vbGJhci1tYXRlcmlhbFJlZ3VsYXJ0b29sYmFyLW1hdGVyaWFsdG9vbGJhci1tYXR
lcmlhbFZlcnNpb24gMS4wdG9vbGJhci1tYXRlcmlhbEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmN
mdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAdABvAG8AbABiAGEAcgAtAG0
AYQB0AGUAcgBpAGEAbABSAGUAZwB1AGwAYQByAHQAbwBvAGwAYgBhAHIALQBtAGEAdABlAHIAaQB
hAGwAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABWAGUAcgBzAGkAbwBuACAAMQAuADA
AdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdAB
lAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHU
AZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAjAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgE
TARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAAQVGV4dF9PdXRkZW50XzAwMQtQaWN
0dXJlXzAwMQxTZXR0aW5nc18wMDEQQ29sb3JfcGlja2VyXzAwMhBBbGlnbl9DZW50ZXJfMDA2CEx
pbmVfMDAxDVVuZGVybGluZV8wMDEMU29ydF9aLUFfMDAxCFVuZG9fMDAxEENoYXJ0X2J1YmJsZV8
wMDELRG93bmxvYWRfMDAPVGV4dF9pbmRlbnRfMDAxEkNoYXJ0X0RvdWdobnV0XzAwMQlDbGVhcl8
wMDINTnVtYmVyaW5nXzAwMQxTb3J0X0EtWl8wMDEKSXRhbGljXzAwMQtCdWxsZXRzXzAwMQlQYXN
0ZV8wMDEIUmVkb18wMDEPQ2hhcnRfcmFkYXJfMDAxD0FsaWduX1JpZ2h0XzAwMQlUYWJsZV8wMDE
OQWxpZ25fTGVmdF8wMDEITWVudV8wMDEHQ3V0XzAwMghCb2xkXzAwMRFBbGlnbl9KdXN0aWZ5XzA
wMQpSZWxvYWRfMDAxClNlYXJjaF8wMDEKVXBsb2FkXzAwMQpEZXNpZ25fMDA1CkV4cG9ydF8wMDE
IQ29weV8wMDIAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-bigger .e-tbar-btn .tb-icons {


font-size: 18px;
}
.e-cut-icon:before {
content: "\e719"
}
.e-copy-icon:before {

Copyright © 2001 -2024 Syncfusion Inc. 34


Toolbar Item configuration in React Toolbar component

content: "\e721"
}
.e-paste-icon:before {
content: "\e712"
}
.e-color-icon:before {
content: "\e703";
}
.e-bold-icon:before {
content: "\e71a"
}
.e-underline-icon:before {
content: "\e706";
}
.e-clear-icon:before {
content: "\e70d"
}
.e-italic-icon:before {
content: "\e710"
}
.e-ascending-icon:before {
content: "\e70f";
}
.e-descending-icon:before {
content: "\e707";
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>

Enabling tab key navigation in Toolbar


The tabIndex property of a Toolbar item is used to enable tab key navigation for the item. By default,
the user can switch between items using the arrow keys, but the tabIndex property allows you to switch
between items using the Tab and Shift+Tab keys as well.
To use the tabIndex property, you need to set it for each Toolbar item that you want to enable tab key
navigation. The tabIndex property should be set to a positive integer value. A value of 0 or a negative
value will disable tab key navigation for the item.
For example, to enable tab key navigation for two Toolbar items, you can use the following code:
`ts
import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () {
return (

Copyright © 2001 -2024 Syncfusion Inc. 35


Toolbar Item configuration in React Toolbar component

<ToolbarComponent id='toolbar'>
<ItemsDirective>
<ItemDirective text="Item 1" tabIndex={1} />
<ItemDirective text="Item 2" tabIndex={2} />
</ItemsDirective>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);
`
With the above code, the user can switch between the two Toolbar items using the Tab and Shift+Tab
keys, in addition to using the arrow keys. The items will be navigated in the order specified by the
tabIndex values.
If you set the tabIndex value to 0 for all Toolbar items, tab key navigation will be based on the element
order rather than the tabIndex values. For example:
`ts
import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () {
return (
<ToolbarComponent id='toolbar'>
<ItemsDirective>
<ItemDirective text="Item 1" tabIndex={0} />
<ItemDirective text="Item 2" tabIndex={0} />
</ItemsDirective>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);
`

Copyright © 2001 -2024 Syncfusion Inc. 36


Toolbar Item configuration in React Toolbar component

In this case, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, and
the items will be navigated in the order in which they appear in the DOM.
Example:
Here is an example of how you can use the tabIndex property to enable tab key navigation for a Toolbar
component:
INDEX.JSX
import { ItemDirective, ItemsDirective, ToolbarComponent } from
'@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
return (<ToolbarComponent width="300" overflowMode="Scrollable">
<ItemsDirective>
<ItemDirective text="Cut" prefixIcon="e-cut-icon tb-icons"
tabIndex={0}/>
<ItemDirective text="Copy" prefixIcon="e-copy-icon tb-icons"
tabIndex={0}/>
<ItemDirective text="Paste" prefixIcon="e-paste-icon tb-icons"
tabIndex={0}/>
<ItemDirective type="Separator"/>
<ItemDirective text="Bold" prefixIcon="e-bold-icon tb-icons"
tabIndex={0}/>
<ItemDirective text="Underline" prefixIcon="e-underline-icon tb-
icons" tabIndex={0}/>
<ItemDirective text="Italic" prefixIcon="e-italic-icon tb-icons"
tabIndex={0}/>
<ItemDirective text="Color-Picker" prefixIcon="e-color-icon tb-
icons" tabIndex={0}/>
<ItemDirective type="Separator"/>
<ItemDirective text="A-Z Sort" prefixIcon="e-ascending-icon tb-
icons" tabIndex={0}/>
<ItemDirective text="Z-A Sort" prefixIcon="e-descending-icon tb-
icons" tabIndex={0}/>
<ItemDirective text="Clear" prefixIcon="e-clear-icon tb-icons"
tabIndex={0}/>
</ItemsDirective>
</ToolbarComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import { ItemDirective, ItemsDirective, ToolbarComponent } from
'@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
return (
<ToolbarComponent width="300" overflowMode="Scrollable">
<ItemsDirective>
<ItemDirective text="Cut" prefixIcon="e-cut-icon tb-icons"
tabIndex={0} />

Copyright © 2001 -2024 Syncfusion Inc. 37


Toolbar Item configuration in React Toolbar component

<ItemDirective text="Copy" prefixIcon="e-copy-icon tb-icons"


tabIndex={0} />
<ItemDirective text="Paste" prefixIcon="e-paste-icon tb-icons"
tabIndex={0} />
<ItemDirective type="Separator" />
<ItemDirective text="Bold" prefixIcon="e-bold-icon tb-icons"
tabIndex={0} />
<ItemDirective text="Underline" prefixIcon="e-underline-icon tb-
icons" tabIndex={0} />
<ItemDirective text="Italic" prefixIcon="e-italic-icon tb-icons"
tabIndex={0} />
<ItemDirective text="Color-Picker" prefixIcon="e-color-icon tb-
icons" tabIndex={0} />
<ItemDirective type="Separator" />
<ItemDirective text="A-Z Sort" prefixIcon="e-ascending-icon tb-
icons" tabIndex={0} />
<ItemDirective text="Z-A Sort" prefixIcon="e-descending-icon tb-
icons" tabIndex={0} />
<ItemDirective text="Clear" prefixIcon="e-clear-icon tb-icons"
tabIndex={0} />
</ItemsDirective>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<link
href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component
.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}

Copyright © 2001 -2024 Syncfusion Inc. 38


Toolbar Item configuration in React Toolbar component

.custom_bold .e-tbar-btn-text {
font-weight: 900;
}
.custom_italic .e-tbar-btn-text {
font-style: italic;
}
.custom_underline .e-tbar-btn-text {
text-decoration: underline red;
}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
@font-face {
font-family: 'Material_toolbar';
src: url(data:application/x-font-ttf;charset=utf-
8;base64,AAEAAAAKAIAAAwAgT1MvMj1tShMAAAEoAAAAVmNtYXDoMOjqAAACDAAAAHhnbHlmIuy
19QAAAswAACNMaGVhZA6okZMAAADQAAAANmhoZWEIUQQkAAAArAAAACRobXR4jAAAAAAAAYAAAAC
MbG9jYYc0kUIAAAKEAAAASG1heHABOwG8AAABCAAAACBuYW1lx/RZbQAAJhgAAAKRcG9zdJZeEVU
AACisAAACGAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAIwABAAAAAQAAAQsu/F8
PPPUACwQAAAAAANXLJlEAAAAA1csmUQAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAjAbAADgAAAAA
AAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnIQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAA
EAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQ
AAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAA
AAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGQAAAAEAAQAAQAA5yH//wA
A5wD//wAAAAEABAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABY
AFwAYABkAGgAbABwAHQAeAB8AIAAhACIAAAAAADIAjgFwAfgCIAKYAxIDSAO2BRYFMAVcBnIGugb
2ByoHQgguCNYJRgn6CiQKiAquCsgMFgzADOYNzg7WDvAQyBEyEaYABwAAAAAD9APzAAMABwAKAA4
AEgAVABkAADchNSElITUhJTkBBSE1ITUhNSEFFxEnITUhDAPo/BgBtgIy/c7+SgG2AjL9zgIy/c7
+Svr6A+j8GAxefV67Pl19Xvr6AfScXgAAAAIAAAAAA/QD9AAEAEgAACUhNxc3AREfDyE/DxEvDyE
PDgOF/PbDisP9gQEBAwQEBgYICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsL/PYLCwsKCgkICAgGBgQEAwGz+qf6AYX89gsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsLAwoLCwsKCgkICAgGBgQEAwEBAQEDBAQGBggICAkKCgsLAAACAAAAAAPzA/QAQAC/AAABFQ8
PLw8/Dx8OAQ8ELwErAQ8FFR8FBxcPAxUfBzsBNx8LOwI/Cx8BOwE/Bj0BLwQ/Aic/BC8HKwEHLws
rAg8FArIBAgUGBwkKDAwODxAQERITEhIREQ8PDgwMCgkHBgUCAQECBQYHCQoMDA4PDxEREhITEhE
QEA8ODAwKCQcGBQL+zxUWFhUWfwUFBAUDBANqAgEBAgIDbgMDbwMCAQEBAmkDBAQEBQSEFBYWFxQ
CAgIDBAQEBcwFBAQEAwICAhQXFRYVgAQFBQQEAwNoAgEBAgIDcAEBAQNvAgIBAQEBA2gDBAQFBAW
DFBYWFxIBAgMDAwQFBcwFBAQDBAICAgAJCRIQEBAODgwLCgkHBgQDAQEDBAYHCQoLDA4OEBAQEhI
SEhAQEA4ODAsKCQcGBAMBAQMEBgcJCgsMDg4QEBASAc6ECwwNDjIBAQICA7QEBQQFBAMEUjIyVgM
EBAQFBAWwAwICATMODQwLhAQEBAMCAgECAgIDBAMEhAsMDQ4yAQECAgOwBAQFBAUEAwRSDAwaMlY
DBAQEBQQFsAMCAgEzDg0MC4QEAwQDAgICAgICAwQDAAAAAAMAAAAAA/MD2AAyADUAaQAAJRUfDTs
BPw41LwgPBwMhAScXAQ8GHQEfBQEfBjsBPwYBPwYvBwEDFgIDBAQGBgcICQkKCgsLCwsLCwoKCQg
ICAYGBAQDAQEDBAcMCQoLFCMtFQoJCQcFBHv96gEL04X+4gYFBAQCAgICAgIEBAUBNwcHBwgHCAc
IBwgHCAgHBwYBOAUEAwMCAQEBAQIDAwQFBv4PlwsLCwoKCQkIBwYGBAQDAgIDBAQGBgcICQkKCgs
LCwcPEBAYEBAPHCk3HRAQEBAQEAEIAQrThf7iBgcIBwgHCAgICAgHBwcH/skGBQQEAwIBAQIDBAQ
FBgE3BwcHBwgICAgHCAgHCAcGAfEABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITchNSEnITUhNyE
1ISchNSEMA+j8GN4CLP3U3gPo/BjeAiz91N4D6PwYDF6AW5xefVqAXgAAAAAEAAAAAAP0A/QACQA
TABcAWwAAAQcVMzcXMzUjLwEjFTMbATM1IwElESERBxEfDyE/DxEvDyEPDgFro8ObnnROxOp0nZv
qTij+8AGW/NReAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgo

Copyright © 2001 -2024 Syncfusion Inc. 39


Toolbar Item configuration in React Toolbar component

LCwv89gsLCwoKCQgICAYGBAQDAQENAyOWliO4BSUBK/7VJQFSffzUAywR/PYLCwsKCgkICAgGBgQ
EAwEBAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgoLCwAAAAA
CAAAAAAOWA/QAAwBpAAA3ITUhExUfHTsBPx01ESMRDw8vDxEjagMs/NRKAgIDAwUFBgcHCAkJCgs
LCwwNDQ0ODw4PEA8QERAREREREBEQDxAPDg8ODQ0NDAsLCwoJCQgHBwYFBQMDAgKLAQMFBggKCww
ODxARERMTFBQTExEREA8ODAsFCQcGBAKLDH0BsBEREREQEA8QDg8ODg0MDQsLCwoJCQgHBwYFBQQ
DAgEBAgMEBQUGBggICQkKCgsMDAwNDg4ODw8PEBAQERERAb7+RRQTEhIREA8NDQsKCAYFAwEBAwU
GCAoLDQ0PCBASEhMTAcUABQAAAAAD9APXAAIABQANABcAGgAAJTcjASM3ATM3MxczAyMFIQEVITU
hATUhJTMnAgJx4wG/vl/+/Fot+i1a3FD9RgEg/t4Bov7UAST+aAF/6XQobQET//47eHgCM07+XD5
NAaQ/UHMAAAAAAQAAAAAD9ALoAF8AABMhJz8PHxo3Lx8PDycMAbWyDQ0ODg8PDxAQEBERERIREhA
QEBAQDw8PDw4ODg0NDQwMFxYTEhAHBgYGBXUHBwgJCQoLCwwNDQ0PDg8QEBERERITEhMUExQVFBU
VFRgYFxcXFhYVFhQUFBMTEhGwARi6CwsJCggICAYGBgQEAwIBAQEBAgIDBAQFBQYHBwgICQkKFRY
YGhsODg8PDygUFBMTEhISERARDw8PDg0NDAsLCgoICAgGBgQEAwMBAQECAwQFBgcJCQoLDA0ODg+
6AAYAAAAAA/MD9AA/AGsAqwDrAO8BMwAAARUfDTsBPw09AS8ODw4lHwk7AT8IPQEvByMnByMPByU
fDz8PLw8PDiUfDz8OPQEvDSsBDw0lESERBxEfDyE/DxEvDyEPDgHhAgMFBQYHCAkKCgsLDA0NDA0
MCwsKCgkIBwYFBQMCAgMFBQYHCAkKCgsLDA0MDQ0MCwsKCgkIBwYFBQMC/scBAQEFBwgKCwYGBwY
GBgwKCAcFAQEBAQUHCAoMBgYGBwYGCwoIBwUBAQHzAQECBAQEBgYGCAcICQkJCgoJCQgJBwgGBgY
EBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCQgHCAYGBgQEBAIB/qgBAQMEBAYGBwgICQoKCgsLCws
LCgkJCQcHBwUFAwMCAgMDBQUHBwcJCQkKCwsLCwsKCgoJCAgHBgYEBAMBAlD81F4BAQMDBAUGBgc
HCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgYHBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwM
BAWQNDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA0NDAwLCwsJCQgHBwUEAwIBAQIDBAUHBwg
JCQsLCwwMMQYGBgsKCQcEAgEBAgQHCQoLBgYGBwYGCwoJBgUCAQECBQYJCgsGBvMJCgkICAgHBwY
FBQQDAwEBAQEDAwQFBQYHBwgICAkKCQoJCQkICAcGBwUFBAMCAQEBAQIDBAUFBwYHCAgJCQkGCws
KCgoJCAgHBgYEBAMBAQEBAwQEBgYHCAgJCgoKCwsLCwsKCQkJBwcHBQUDAwICAwMFBQcHBwkJCQo
LC9/81AMsA/zaCgkJCQkIBwcGBgUEBAIBAQEBAgQEBQUHBwcICQkJCQoDJgoJCQkJCAcHBwUFBAQ
CAQEBAQIEBAUFBwcHCAkJCQkAAAAAAgAAAAADtQP0AAMACgAANyE1IQEjCQEjESFKA2z8lAEG7AG
cAZzs/qAMfQIK/mQBnAFhAAYAAAAAA/QD8wADAAcACwAPABIAFgAANyE1ISUhNSE1ITUhNSE1KQE
RNwMhNSEMA+j8GAG2AjL9zgIy/c4CMv3O/kr6+gPo/BgMXn1efV19Xv4M+gGWXgAFAAAAAAPzA/M
AJQBpAKgArADwAAABFT8bIw8GBR8PNSMvDT8CJw8OHw8TByMPDBc/AzsBHwUzHwYzLxcjJREhEQc
RHw8hPw8RLw8hDw4CKg8QDw8ODg4NDQwMDAwKCwoKCQgJDw0KCQQDAgLxBAUGBggJC/7WDQ0NDg4
PDw8PEA8QEBAQEAoKCQkJCQgIBgQEBAUDAQEDBKsKCQgIBwYGBQUDAwMBAQEBAQEDAwQEBQYHBwg
ICgoL9g4OHA4ODQ4NDg0NDQwNDKkLDA8HCAkJCAgICA4DEAUFBQMEAu4EBwkKDQ8REwoKCwsMDAw
NDQ4ODg4PDy8KAZP81F4BAQMDBAUGBgcHCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgY
HBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwMBAZz0AgMDBAQFBQYHBwgICQkJCgsLCwsYGhsbDw4PDwo
KCQgIBwaUDAsLCgkIBwcGBQQEAgIBAfEBAwMEBQYIBQcGBw8PEA8ODa0NDQ0ODg4ODw8PDw8PEA8
PEA8PEA8ODw8ODg0ODQ0MAj8BBAMDBAQFBgcHBwkJCqoGBQQBAQICBAMJEAcHCAgJCh0dHRsaGRc
XCgoKCQgICAcGBgYEBQMDBj781AMsA/zaCgkJCQkIBwcGBgUEAwMBAQEBAgQEBQYGBwcICQkJCQo
DJgoJCQkJCAcHBgYFBAQCAQEBAQIEBAUFBwcHCAkJCQkAAgAAAAAD8wPrAB8AMwAAEw8HHww/BBU
hNSEBNwkBPwcvCDYKCAcGBQMCAQECAwUGBwgKrwgJCgoKCgkINQKQ/Xv+20EBPAGOCgkHBgUDAgE
BAgMFBgcJCtMBoQsMDQ0NDg4ODg0ODQ0NDAuvBgUDAQECBAY0I14BJEH+xAGRCwwMDQ0ODg4ODg4
NDQwMC9QABgAAAAAD9AP0AAMADwATAB0AIQAnAAAlITUhIzMVIxUzFSMVMzUjNyE1ISMzBxUzNSM
3NSM3ITUhJzMVMzUjAQYC7v0S+n0/P328vPoC7v0S+nh4vHh4vPoC7v0S+j4/fWpeID4gPvrbXXw
/P3w/u14gvPoAAAAABQAAAAAD9APbAAIABQANABcAGgAAJTcjAyM3ATM3MxczAyMFIQEVITUhATU
hJzMnAgJx4x6+Xv76Wi39LF3fTwFlAST+3AGk/tIBJP5mw+l0JXMBGP/+N3h4AjRQ/lo+TQGpPk5
zAAABAAAAAAOsA/QACwAAATMDIxUhNSMTMzUhAXGd88gCPJ3zyP3EAx79xNbWAjzWAAAGAAAAAAP
0A9QAAwBDAEcAhwCLAMsAACUhNSEHFR8OPw49AS8ODw4TITUhBxUfDTsBPw09AS8ODw4TITUhBxU
fDj8OPQEvDg8OAQYC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgY
HBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQE
CAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgY
GBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAkpeLwgIBwcHBwYFBQUDBAICAQE
BAQICBAMFBQUGBwcHBwgICAgIBwcGBgYFBAQDAwIBAQEBAgMDBAQFBgYGBwcICAFgXS4ICAgHBwY
GBgUEBAMDAgEBAgMDBAQFBgYGBwcICAgICAcHBwcGBQUFAwQCAgEBAQECAgQDBQUFBgcHBwcIAUB
dLggICAcHBgYGBQQEAwMCAQEBAQIDAwQEBQYGBgcHCAgICAgHBwcHBgUFBQMEAgIBAQEBAgIEAwU
FBQYHBwcHCAAAAwAAAAADmQP0AAcAKACNAAABFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw0VERUfDTM
hMz8NNRE1Lw0rAS8OKwEPDQEdAcZb/YQBbAEDBAYHBwkJCQkHBwYEAwEBAwQGBwcJCQkJBwcGBAO
svwkJCQgICAcGBgYEBAMCAgICAwQEBgYGBwgICAkJCQJ8CQkJCAgIBwYGBgQEAwICAgIDBAQGBgY
HCAgICQkJvwMFBQYGBwgICQkJCgoKCwsLCwoKCgkJCQgIBwYGBQUDPoiI/SkC1y4FBQgIBwUEAwE
BAwQFBwgICgkICAcFBQIBAQIFBQcICCQCAgMEBAYGBgcICAgJCQn9KQkJCQgICAcGBgUFBAMCAgI

Copyright © 2001 -2024 Syncfusion Inc. 40


Toolbar Item configuration in React Toolbar component

CAwQFBQYGBwgICAkJCQLXCQkJCAgIBwYGBgQEAwICCgkJCAgIBwYGBQQEAwICAgIDBAQFBgYHCAg
ICQkAAQAAAAAD9ALoAGAAAAExLw8PHxc/Gh8PByERA0QREhMTFBQUFRYWFhcXFxgYFRUVFBUUExQ
TEhMSEREREBAPDg8NDQ0MCwsKCQkIBwd1BQYGBgcQEhMWFwwMDQ0NDg4ODw8PDxAQEBAQEhESERE
QERAQDw8PDg4NDbIBtQIuDw4ODQwLCgkJBwYFBAMCAQEBAwMEBAYGCAgICgoLCwwNDQ4PDw8REBE
SEhITExQUKA8PDw4OGxoYFhUKCQkICAcHBgUFBAQDAgIBAQEBAgMEBAYGBggICAoJCwu6AdAAAAA
OAAAAAAP0A/MAAgAFAAgACwAQABQAFwAbAB4AIQApAC0AMQB1AAABETclFzUXNyMFNyETFQUhEQE
hJRMlMycFMSEnBzcnBxcRBRMDBSUDEy0BEQMlIwUDEQcRHw8hPw8RLw8hDw4CGcj+ZaG3MJb+wM7
+4jQBCv6EAy7+ggEKdP1S3JkBCwEjWemWlvrIATJ0dP7n/up3dwEWAZhy/vQ0/vZyXgEBAwQEBgY
ICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsL/PYLCwsKCgkICAgGBgQ
EAwEBxv7fWSQ730Bky8v+9QNxAYH+f28BHx2ZmcukmTgJywEeP/7n/ud3dwEZARl3Bv5xAR1ycv7
yAYAR/PYLCwsKCgkICAcHBQUEAwEBAQEDBAUFBwcICAkKCgsLCwMKCwsLCgoJCAgHBwUFBAMBAQE
BAwQEBgYIBwkJCgoLCwAAAAAFAAAAAAP0A/MAAwAHAAsADwATAAA3ITUhJSE1ISUhNSElITUhJSE
1IQwD6PwYAVgCkP1w/qgD6PwYAVgCkP1w/qgD6PwYDF6AW5xefV19XgAAAAAKAAAAAAP0A/MAAwA
HAAsADwATABcAGwAfACMARwAAARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1JxE
fByE/BxEvByEPBgOW+j7bP9oDLPo+2z/aAyz6Pts/2l4BAwUGAwgJCgOJCgkJBwYDBAIBAwUGAwg
JCvx3CgkJBwYFAwElvb27u7u7ARrb29vb29v6vLy8vLy8hvyCCwoJBwQGBAIBAwUHBwUJCgOECwo
JBwQGBAIBAwUGCAkKAAAAAAUAAAAAA/QD8wADAAcACwAPABMAADchNSE1ITUhNSE1ITUhNSE1ITU
hDAPo/BgCkP1wA+j8GAKQ/XAD6PwYDF6BV59efVqAXgAAAAADAAAAAAP0A00AAwAHAAsAADchNSE
1ITUhNSE1IQwD6PwYA+j8GAPo/Bizb6Zwpm8AAAAABQAAAAAD9AP0AD8AXwCfAKQBIgAAJQ8PLw8
/Dx8OExUPBSsBLwU9AT8FOwEfBQMPDy8PPw8fEAE1IwUVHw8zPwMXBy8FDw8fDz8PNS8DNwEzNQE
/BS8PDw4BOAEBAwMEBQYGBwgICQkKCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgo
KCgkJCAgHBgYFBAMDAeICAgMDBQUFBQUFAwMCAgICAwMFBQUFBQUDAwIC4QEBAwMEBQYGBwgICQk
KCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAftkAV6W/K4
BAwUHCAoMDQ4PERETExQUCwsVFBN2dgkKCgoVFhQUExMREQ8ODQwKCAcFAwEBAwUHCAoMDQ4PERE
TExQUFBQTExERDw4NDAoIBwUDAQEEBgd2AV6W/ZYFBAMCAwEBAwUHCAoMDQ4PERETExQUFBQTExE
RDw4NDAoIBwUD1AoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgoKCgoKCQkICAcGBgUEAwM
BAQEBAwMEBQYGBwgICQkKCgEiBQUFAwMCAgICAwMFBQUFBQUDAwICAgIDAwUFAScKCgoJCQgIBwY
GBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgqgZAF
eMpYKChQTExERDw4NDAoIBwUDAQEEBgd2dgUEAwIDAQEDBQcICgwNDg8RERMTFBQUFBMTEREPDg0
MCggHBQMBAQMFBwgKDA0ODxERExMUFAsLFRQTdv6iMgJqCQoKChUWFBQTExERDw4NDAoIBwUDAQE
DBQcICgwNDg8RERMTFAADAAAAAANXA7UAIgBFAJMAAAEzHw4PDisBNRMzHw4PDisBNQMhPxEvDz8
PLxghAkgKCgkJCAgHBwYGBAQEAgEBAQEDAwQFBgYHBwgJCAkKCeDACgoJCQgIBwcGBgQEBAIBAQE
BAgQEBAYGBwcICAkJCgrAwAHDDQwMDBcWFRMSEQ8NDAoHBgQBAQIDBAYHBwkKCgsNDA4ODwsLCgo
KCAgIBgYFBQMDAQEBAQECAwQEBAUGDA8QEhQVFgwMDA0NDQ0N/nABogICAwQEBgYGBwgICQkKCQo
KCQgJBwgGBgUFBAMCArsBdwICAwQEBgYGCAcICQkKCQoKCQkIBwgGBgYEBAMCArv9MQEBAQIGCAo
MDg8REhQUFhcYGBERERAQEA4ODgwMDAoJCQcICQkKCgoLDAsMDAwMDQwNDQwNDQwMCwwLCxQUERA
ODQoFAwQDAgEBAQAABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITUhNSE1ITUhNSE1ITUhNSEMA+j
8GAPo/BgD6PwYA+j8GAPo/BgMXn1enF59XX1eAAAAAAEAAAAAA9QD1ADUAAATHx8/DxcRIRcPDy8
fPx8fDzMvHw8eKwECAwQFBggICQoMDA0ODhAQERISExQUFRUWFhcXGBgYGBgXFxcWFhUVFBQTEhI
REIr+ZrsMDA0ODg4PEBAQEBESERISEhIREhEQEQ8QDw8ODg0NDAwLCgoJCQgHBgYEBAQCAQEBAQI
EBAQGBgcICQkKCgsMDA0NDg4PDxAPERAREhESEhwcGxoaGBgWFRQSEQ8OCwp7BQYHCAgJCQoLCww
NDQ4ODg8QEBERERISEhMTFBMUFRQYGBgXFxYWFRUUFBMSEhEQEA4ODQwMCgkICAYFBAMCAgAYGBc
XFxYWFRUUFBMSEhEQEA4ODQ0LCgoICAYFBAMCAQECAwQFBggICgoLDQ0ODhCKAZq7DAsLCgkJCAc
HBQUEAwMBAQEBAgQEBAYGBwgICgkLCwwMDQ0ODg8PDxAREBESERISEhIREhEQERAPDw8ODg0NDAw
LCwkKCAgHBgYEBAQCAQECAwUICQsNDxASExUWFxgaExITERIREBAQDw8ODg0NDAsLCgoJCAcHBgY
EBAMCAQEBAgMEBQYICAoKCw0NDg4QEBESEhMUFBUVFhYXFxcYAAAAAgAAAAAD8gP0AGcA7gAAARU
PGC8YPQE/FzsBHxcFHx8/DxcVATcBIyc/Dj0BLx0rAQ8dAoABAgIDAwQFBQUNDxATExYLCwwMDAw
NDQ0NDQ0NDQwNDAsMCxUUEhAPDQUFBQQDAwMBAQEBAwMDBAUFBQ0PEBIUFQsMCwwNDA0NDQ0NDQ0
NDAwMDAsLFhMTEA8NBQUFBAMDAgIB/Y0BAQMDBAUGBggICQkLCwsNDA4ODg8QEBARERISEhMTExE
REBEQEBAQDw8ODg4ODA0OAR1W/uMuDgoKCQkIBwYGBgQEAwMCAQICAwQFBgcHCAkKCgsMDA0NDg8
PDxAREREREhMSExMTExMSEhIRERAQEA8ODg4MDQsLCwkJCAgGBgUEAwMBAoIODQ0MDQwMDAsLFRQ
SEQ4NBgUEBAQDAgEBAQEBAQIDBAQEBQYNDhESFBULCwwMDA0MDQ0ODQ0NDQwMDAwLCxUUEhEODQY
FBQQDAwICAQECAgMDBAUFBg0OERIUFQsLDAwMDA0NDQ0UEhMSEhIRERAQEA8ODg4NDAsLCwkJCAg
GBgUEBAIBAQEBAgIEBAUFBgcHCAgJCgoSLf7jVgEfDg0NDQ4ODg8PDxAQEBERERITExISEhIRERA
QEA8ODg4NDAwLCgoICQcHBQUEBAICAgIEBAUFBwcJCAoKCwwMDQ4ODg8QEBARERISEhITAAAAAgA
AAAADtQP0AAMACgAANyE1IRMzESERMwFKA2z8lA/zAWjz/lkMfQHN/p0BYwGeAAAAAAUAAAAAA/Q
D9AA/AH8AvwD/Aa8AAAEPDisBLw4/Dx8OBQ8OKwEvDj8PHw4lFQ8OLw49AT8OHw4FFQ8OLw49AT8

Copyright © 2001 -2024 Syncfusion Inc. 41


Toolbar Item configuration in React Toolbar component

OHw4BHx8zPw09AS8MPQE/DjsBPx01Lx8PHgOFAQECAgQEBQUGBgcHCAgJCAkJCAcIBgcGBQUEAwM
CAQEBAQIDAwQFBQYHBggHCAkJCAkIBwgHBgYFBQQEAgIB/Z4BAQIDAwQFBQYGBwgHCAkJCAkIBwg
HBgYFBQQDAwIBAQEBAgMDBAUFBgYHCAcICQgJCQgHCAcGBgUFBAMDAgEBvQECAwQEBAYGBgcHCAg
ICQkICAgHBwcFBgQFAwMCAQECAwMFBAYFBwcHCAgICQkICAgHBwYGBgQEBAMCAf7qAQIDAwUEBgU
HBwcICAgJCQgICAcHBgYGBAQEAwIBAQIDBAQEBgYGBwcICAgJCQgICAcHBwUGBAUDAwIB/kQBAgM
EBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGgkICAgHBwYGBgQEBAMCAQECAwMEBAoEBAMDAgE
CAgIEBAUFBgYHBwgICAlkDg8NDg0ODA0MDAwLCwsKCQoICQcIBgYGBQQEAwMCAQECAwQGBwcJCws
MDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgJTCAk
ICAcHBgYFBQQEAgICAgICBAQFBQYGBwcICAkICQgJBwgGBwYFBQQDAwIBAQEBAgMDBAUFBgcGCAc
JCAkICQgIBwcGBgUFBAQCAgICAgIEBAUFBgYHBwgICQgJCAkHCAYHBgUFBAMDAgEBAQECAwMEBQU
GBwYIBwkI1gkJCAcIBgcGBQUEAwMCAQEBAQIDAwQFBQYHBggHCAkJCAkICAcHBgYFBQQEAgIBAQE
BAgIEBAUFBgYHBwgICQgJCQgHCAYHBgUFBAMDAgEBAQECAwMEBQUGBwYIBwgJCQgJCAgHBwYGBQU
EBAICAQEBAQICBAQFBQYGBwcICAn+xhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAgI
CBAQFBQYGBwcICAkICAgIBwcGBgsGBwYIBwgICQkIBwgGBwYFBQQDAwIBAQECAgMEBQUFBgcHCAg
JCQoKCwoMCwwNDA0NDg0ODg4XFxYWFRUVFBQTExIRERAPDw4NDQsLCgkIBwYFBAMBAQECAwQGBwc
JCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAgAAAAAD9AO1AAgAVAAAARchFSEHFzcnJREVHw4hPw4
9ASMVIREhFTM9AS8OIQ8OAtV1/k0BsHI/4OD8+AICAwQFBQYHBwcICQkJCQHPCQkJCQgHBwcGBQU
EAwICXP4xAc9cAgIDBAUFBgcHBwgJCQkJ/jEJCQkJCAcHBwYFBQQDAgICoHRYdD7e3oD9RAkJCAg
IBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwgICAkJzMwCvMzMCQkICAgHBwYGBQQEAwIBAQEBAgMEBAU
GBgcHCAgICQADAAAAAAOvA/QAAwBHAF0AAAERIREHERUfDTMhMz8OES8OIyEjDw0nETMRITUhIw8
NA1X+DFsCAgMEBQUGBgcICAgJCQkB9AkJCQgICAcGBgUFBAMCAQEBAQIDBAUFBgYHCAgICQkJ/gw
JCQkICAgHBgYFBQQDAgK2WQIT/e0JCQkIBwgHBgYFBAQDAgEC4/2EAnwF/YgJCQgJCAcHBgYGBAQ
DAgICAgMEBAYGBgcHCAkICQkCeAkJCQgICAcGBgUFAwMDAQEDAwMFBQYGBwgICAkJsv2EAnxbAgI
DBAUFBgYHCAgICQkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAQAAEAAQAAAAAAAgAHABEAAQA
AAAAAAwAQABgAAQAAAAAABAAQACgAAQAAAAAABQALADgAAQAAAAAABgAQAEMAAQAAAAAACgAsAFM
AAQAAAAAACwASAH8AAwABBAkAAAACAJEAAwABBAkAAQAgAJMAAwABBAkAAgAOALMAAwABBAkAAwA
gAMEAAwABBAkABAAgAOEAAwABBAkABQAWAQEAAwABBAkABgAgARcAAwABBAkACgBYATcAAwABBAk
ACwAkAY8gdG9vbGJhci1tYXRlcmlhbFJlZ3VsYXJ0b29sYmFyLW1hdGVyaWFsdG9vbGJhci1tYXR
lcmlhbFZlcnNpb24gMS4wdG9vbGJhci1tYXRlcmlhbEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmN
mdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAdABvAG8AbABiAGEAcgAtAG0
AYQB0AGUAcgBpAGEAbABSAGUAZwB1AGwAYQByAHQAbwBvAGwAYgBhAHIALQBtAGEAdABlAHIAaQB
hAGwAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABWAGUAcgBzAGkAbwBuACAAMQAuADA
AdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdAB
lAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHU
AZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAjAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgE
TARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAAQVGV4dF9PdXRkZW50XzAwMQtQaWN
0dXJlXzAwMQxTZXR0aW5nc18wMDEQQ29sb3JfcGlja2VyXzAwMhBBbGlnbl9DZW50ZXJfMDA2CEx
pbmVfMDAxDVVuZGVybGluZV8wMDEMU29ydF9aLUFfMDAxCFVuZG9fMDAxEENoYXJ0X2J1YmJsZV8
wMDELRG93bmxvYWRfMDAPVGV4dF9pbmRlbnRfMDAxEkNoYXJ0X0RvdWdobnV0XzAwMQlDbGVhcl8
wMDINTnVtYmVyaW5nXzAwMQxTb3J0X0EtWl8wMDEKSXRhbGljXzAwMQtCdWxsZXRzXzAwMQlQYXN
0ZV8wMDEIUmVkb18wMDEPQ2hhcnRfcmFkYXJfMDAxD0FsaWduX1JpZ2h0XzAwMQlUYWJsZV8wMDE
OQWxpZ25fTGVmdF8wMDEITWVudV8wMDEHQ3V0XzAwMghCb2xkXzAwMRFBbGlnbl9KdXN0aWZ5XzA
wMQpSZWxvYWRfMDAxClNlYXJjaF8wMDEKVXBsb2FkXzAwMQpEZXNpZ25fMDA1CkV4cG9ydF8wMDE
IQ29weV8wMDIAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-bigger .e-tbar-btn .tb-icons {


font-size: 18px;
}
.e-cut-icon:before {
content: "\e719"
}
.e-copy-icon:before {
content: "\e721"

Copyright © 2001 -2024 Syncfusion Inc. 42


Toolbar Responsive mode in React Toolbar component

}
.e-paste-icon:before {
content: "\e712"
}
.e-color-icon:before {
content: "\e703";
}
.e-bold-icon:before {
content: "\e71a"
}
.e-underline-icon:before {
content: "\e706";
}
.e-clear-icon:before {
content: "\e70d"
}
.e-italic-icon:before {
content: "\e710"
}
.e-ascending-icon:before {
content: "\e70f";
}
.e-descending-icon:before {
content: "\e707";
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>

With the above code, the user can switch between the Toolbar items using the Tab and Shift+Tab keys,
and the items will be navigated based on the element order.
See Also

• How to set item wise custom template

Responsive mode in React Toolbar component


This section explains the supported display modes of the Toolbar when the content exceeds the viewing
area. Possible modes are:

• Scrollable
• Popup

Scrollable
The default overflow mode of the Toolbar is Scrollable. Scrollable display mode supports display of
commands in a single line with horizontal scrolling enabled when commands overflow to available
space.

Copyright © 2001 -2024 Syncfusion Inc. 43


Toolbar Responsive mode in React Toolbar component

• The right and left navigation arrows are added to the start and end of the Toolbar to navigate to
hidden commands.
• You can also see the hidden commands using touch swipe action.
• By default, if navigation icon in the left side is disabled, you can see the hidden commands by
moving to the right.
• By clicking the arrow or by holding the arrow continuously, hidden commands will become
visible.
• If device navigation icons are not available, you can touch swipe to see the hidden commands of
the Toolbar.

• Once the Toolbar reaches the last or first command, the corresponding navigation icon will be
disabled and you can move to the opposite direction.

• You can continuously scroll the Toolbar content by holding the navigation icon.

INDEX.JSX

Copyright © 2001 -2024 Syncfusion Inc. 44


Toolbar Responsive mode in React Toolbar component

import { ItemDirective, ItemsDirective, ToolbarComponent } from


'@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
return (<ToolbarComponent>
<ItemsDirective>
<ItemDirective text="Cut" prefixIcon="e-cut-icon tb-icons"/>
<ItemDirective text="Copy" prefixIcon="e-copy-icon tb-icons"/>
<ItemDirective text="Paste" prefixIcon="e-paste-icon"/>
<ItemDirective type="Separator"/>
<ItemDirective text="Bold" prefixIcon="e-bold-icon tb-icons"/>
<ItemDirective text="Underline" prefixIcon="e-underline-icon tb-
icons"/>
<ItemDirective text="Italic" prefixIcon="e-italic-icon tb-icons"/>
<ItemDirective text="Color-Picker" prefixIcon="e-color-icon tb-
icons"/>
<ItemDirective type="Separator"/>
<ItemDirective text="A-Z Sort" prefixIcon="e-ascending-icon tb-
icons"/>
<ItemDirective text="Z-A Sort" prefixIcon="e-descending-icon tb-
icons"/>
<ItemDirective text="Clear" prefixIcon="e-clear-icon tb-icons"/>
</ItemsDirective>
</ToolbarComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import { ItemDirective, ItemsDirective, ToolbarComponent } from
'@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
return (
<ToolbarComponent >
<ItemsDirective>
<ItemDirective text="Cut" prefixIcon="e-cut-icon tb-icons" />
<ItemDirective text="Copy" prefixIcon="e-copy-icon tb-icons" />
<ItemDirective text="Paste" prefixIcon="e-paste-icon" />
<ItemDirective type="Separator" />
<ItemDirective text="Bold" prefixIcon="e-bold-icon tb-icons" />
<ItemDirective text="Underline" prefixIcon="e-underline-icon tb-
icons" />
<ItemDirective text="Italic" prefixIcon="e-italic-icon tb-icons" />
<ItemDirective text="Color-Picker" prefixIcon="e-color-icon tb-
icons" />
<ItemDirective type="Separator" />
<ItemDirective text="A-Z Sort" prefixIcon="e-ascending-icon tb-
icons" />
<ItemDirective text="Z-A Sort" prefixIcon="e-descending-icon tb-
icons" />
<ItemDirective text="Clear" prefixIcon="e-clear-icon tb-icons" />
</ItemsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 45


Toolbar Responsive mode in React Toolbar component

</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<link
href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component
.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom_bold .e-tbar-btn-text {
font-weight: 900;
}
.custom_italic .e-tbar-btn-text {
font-style: italic;
}
.custom_underline .e-tbar-btn-text {
text-decoration: underline red;
}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
@font-face {

Copyright © 2001 -2024 Syncfusion Inc. 46


Toolbar Responsive mode in React Toolbar component

font-family: 'Material_toolbar';
src: url(data:application/x-font-ttf;charset=utf-
8;base64,AAEAAAAKAIAAAwAgT1MvMj1tShMAAAEoAAAAVmNtYXDoMOjqAAACDAAAAHhnbHlmIuy
19QAAAswAACNMaGVhZA6okZMAAADQAAAANmhoZWEIUQQkAAAArAAAACRobXR4jAAAAAAAAYAAAAC
MbG9jYYc0kUIAAAKEAAAASG1heHABOwG8AAABCAAAACBuYW1lx/RZbQAAJhgAAAKRcG9zdJZeEVU
AACisAAACGAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAIwABAAAAAQAAAQsu/F8
PPPUACwQAAAAAANXLJlEAAAAA1csmUQAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAjAbAADgAAAAA
AAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnIQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAA
EAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQ
AAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAA
AAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGQAAAAEAAQAAQAA5yH//wA
A5wD//wAAAAEABAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABY
AFwAYABkAGgAbABwAHQAeAB8AIAAhACIAAAAAADIAjgFwAfgCIAKYAxIDSAO2BRYFMAVcBnIGugb
2ByoHQgguCNYJRgn6CiQKiAquCsgMFgzADOYNzg7WDvAQyBEyEaYABwAAAAAD9APzAAMABwAKAA4
AEgAVABkAADchNSElITUhJTkBBSE1ITUhNSEFFxEnITUhDAPo/BgBtgIy/c7+SgG2AjL9zgIy/c7
+Svr6A+j8GAxefV67Pl19Xvr6AfScXgAAAAIAAAAAA/QD9AAEAEgAACUhNxc3AREfDyE/DxEvDyE
PDgOF/PbDisP9gQEBAwQEBgYICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsL/PYLCwsKCgkICAgGBgQEAwGz+qf6AYX89gsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsLAwoLCwsKCgkICAgGBgQEAwEBAQEDBAQGBggICAkKCgsLAAACAAAAAAPzA/QAQAC/AAABFQ8
PLw8/Dx8OAQ8ELwErAQ8FFR8FBxcPAxUfBzsBNx8LOwI/Cx8BOwE/Bj0BLwQ/Aic/BC8HKwEHLws
rAg8FArIBAgUGBwkKDAwODxAQERITEhIREQ8PDgwMCgkHBgUCAQECBQYHCQoMDA4PDxEREhITEhE
QEA8ODAwKCQcGBQL+zxUWFhUWfwUFBAUDBANqAgEBAgIDbgMDbwMCAQEBAmkDBAQEBQSEFBYWFxQ
CAgIDBAQEBcwFBAQEAwICAhQXFRYVgAQFBQQEAwNoAgEBAgIDcAEBAQNvAgIBAQEBA2gDBAQFBAW
DFBYWFxIBAgMDAwQFBcwFBAQDBAICAgAJCRIQEBAODgwLCgkHBgQDAQEDBAYHCQoLDA4OEBAQEhI
SEhAQEA4ODAsKCQcGBAMBAQMEBgcJCgsMDg4QEBASAc6ECwwNDjIBAQICA7QEBQQFBAMEUjIyVgM
EBAQFBAWwAwICATMODQwLhAQEBAMCAgECAgIDBAMEhAsMDQ4yAQECAgOwBAQFBAUEAwRSDAwaMlY
DBAQEBQQFsAMCAgEzDg0MC4QEAwQDAgICAgICAwQDAAAAAAMAAAAAA/MD2AAyADUAaQAAJRUfDTs
BPw41LwgPBwMhAScXAQ8GHQEfBQEfBjsBPwYBPwYvBwEDFgIDBAQGBgcICQkKCgsLCwsLCwoKCQg
ICAYGBAQDAQEDBAcMCQoLFCMtFQoJCQcFBHv96gEL04X+4gYFBAQCAgICAgIEBAUBNwcHBwgHCAc
IBwgHCAgHBwYBOAUEAwMCAQEBAQIDAwQFBv4PlwsLCwoKCQkIBwYGBAQDAgIDBAQGBgcICQkKCgs
LCwcPEBAYEBAPHCk3HRAQEBAQEAEIAQrThf7iBgcIBwgHCAgICAgHBwcH/skGBQQEAwIBAQIDBAQ
FBgE3BwcHBwgICAgHCAgHCAcGAfEABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITchNSEnITUhNyE
1ISchNSEMA+j8GN4CLP3U3gPo/BjeAiz91N4D6PwYDF6AW5xefVqAXgAAAAAEAAAAAAP0A/QACQA
TABcAWwAAAQcVMzcXMzUjLwEjFTMbATM1IwElESERBxEfDyE/DxEvDyEPDgFro8ObnnROxOp0nZv
qTij+8AGW/NReAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgo
LCwv89gsLCwoKCQgICAYGBAQDAQENAyOWliO4BSUBK/7VJQFSffzUAywR/PYLCwsKCgkICAgGBgQ
EAwEBAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgoLCwAAAAA
CAAAAAAOWA/QAAwBpAAA3ITUhExUfHTsBPx01ESMRDw8vDxEjagMs/NRKAgIDAwUFBgcHCAkJCgs
LCwwNDQ0ODw4PEA8QERAREREREBEQDxAPDg8ODQ0NDAsLCwoJCQgHBwYFBQMDAgKLAQMFBggKCww
ODxARERMTFBQTExEREA8ODAsFCQcGBAKLDH0BsBEREREQEA8QDg8ODg0MDQsLCwoJCQgHBwYFBQQ
DAgEBAgMEBQUGBggICQkKCgsMDAwNDg4ODw8PEBAQERERAb7+RRQTEhIREA8NDQsKCAYFAwEBAwU
GCAoLDQ0PCBASEhMTAcUABQAAAAAD9APXAAIABQANABcAGgAAJTcjASM3ATM3MxczAyMFIQEVITU
hATUhJTMnAgJx4wG/vl/+/Fot+i1a3FD9RgEg/t4Bov7UAST+aAF/6XQobQET//47eHgCM07+XD5
NAaQ/UHMAAAAAAQAAAAAD9ALoAF8AABMhJz8PHxo3Lx8PDycMAbWyDQ0ODg8PDxAQEBERERIREhA
QEBAQDw8PDw4ODg0NDQwMFxYTEhAHBgYGBXUHBwgJCQoLCwwNDQ0PDg8QEBERERITEhMUExQVFBU
VFRgYFxcXFhYVFhQUFBMTEhGwARi6CwsJCggICAYGBgQEAwIBAQEBAgIDBAQFBQYHBwgICQkKFRY
YGhsODg8PDygUFBMTEhISERARDw8PDg0NDAsLCgoICAgGBgQEAwMBAQECAwQFBgcJCQoLDA0ODg+
6AAYAAAAAA/MD9AA/AGsAqwDrAO8BMwAAARUfDTsBPw09AS8ODw4lHwk7AT8IPQEvByMnByMPByU
fDz8PLw8PDiUfDz8OPQEvDSsBDw0lESERBxEfDyE/DxEvDyEPDgHhAgMFBQYHCAkKCgsLDA0NDA0
MCwsKCgkIBwYFBQMCAgMFBQYHCAkKCgsLDA0MDQ0MCwsKCgkIBwYFBQMC/scBAQEFBwgKCwYGBwY
GBgwKCAcFAQEBAQUHCAoMBgYGBwYGCwoIBwUBAQHzAQECBAQEBgYGCAcICQkJCgoJCQgJBwgGBgY
EBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCQgHCAYGBgQEBAIB/qgBAQMEBAYGBwgICQoKCgsLCws
LCgkJCQcHBwUFAwMCAgMDBQUHBwcJCQkKCwsLCwsKCgoJCAgHBgYEBAMBAlD81F4BAQMDBAUGBgc
HCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgYHBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwM
BAWQNDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA0NDAwLCwsJCQgHBwUEAwIBAQIDBAUHBwg
JCQsLCwwMMQYGBgsKCQcEAgEBAgQHCQoLBgYGBwYGCwoJBgUCAQECBQYJCgsGBvMJCgkICAgHBwY

Copyright © 2001 -2024 Syncfusion Inc. 47


Toolbar Responsive mode in React Toolbar component

FBQQDAwEBAQEDAwQFBQYHBwgICAkKCQoJCQkICAcGBwUFBAMCAQEBAQIDBAUFBwYHCAgJCQkGCws
KCgoJCAgHBgYEBAMBAQEBAwQEBgYHCAgJCgoKCwsLCwsKCQkJBwcHBQUDAwICAwMFBQcHBwkJCQo
LC9/81AMsA/zaCgkJCQkIBwcGBgUEBAIBAQEBAgQEBQUHBwcICQkJCQoDJgoJCQkJCAcHBwUFBAQ
CAQEBAQIEBAUFBwcHCAkJCQkAAAAAAgAAAAADtQP0AAMACgAANyE1IQEjCQEjESFKA2z8lAEG7AG
cAZzs/qAMfQIK/mQBnAFhAAYAAAAAA/QD8wADAAcACwAPABIAFgAANyE1ISUhNSE1ITUhNSE1KQE
RNwMhNSEMA+j8GAG2AjL9zgIy/c4CMv3O/kr6+gPo/BgMXn1efV19Xv4M+gGWXgAFAAAAAAPzA/M
AJQBpAKgArADwAAABFT8bIw8GBR8PNSMvDT8CJw8OHw8TByMPDBc/AzsBHwUzHwYzLxcjJREhEQc
RHw8hPw8RLw8hDw4CKg8QDw8ODg4NDQwMDAwKCwoKCQgJDw0KCQQDAgLxBAUGBggJC/7WDQ0NDg4
PDw8PEA8QEBAQEAoKCQkJCQgIBgQEBAUDAQEDBKsKCQgIBwYGBQUDAwMBAQEBAQEDAwQEBQYHBwg
ICgoL9g4OHA4ODQ4NDg0NDQwNDKkLDA8HCAkJCAgICA4DEAUFBQMEAu4EBwkKDQ8REwoKCwsMDAw
NDQ4ODg4PDy8KAZP81F4BAQMDBAUGBgcHCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgY
HBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwMBAZz0AgMDBAQFBQYHBwgICQkJCgsLCwsYGhsbDw4PDwo
KCQgIBwaUDAsLCgkIBwcGBQQEAgIBAfEBAwMEBQYIBQcGBw8PEA8ODa0NDQ0ODg4ODw8PDw8PEA8
PEA8PEA8ODw8ODg0ODQ0MAj8BBAMDBAQFBgcHBwkJCqoGBQQBAQICBAMJEAcHCAgJCh0dHRsaGRc
XCgoKCQgICAcGBgYEBQMDBj781AMsA/zaCgkJCQkIBwcGBgUEAwMBAQEBAgQEBQYGBwcICQkJCQo
DJgoJCQkJCAcHBgYFBAQCAQEBAQIEBAUFBwcHCAkJCQkAAgAAAAAD8wPrAB8AMwAAEw8HHww/BBU
hNSEBNwkBPwcvCDYKCAcGBQMCAQECAwUGBwgKrwgJCgoKCgkINQKQ/Xv+20EBPAGOCgkHBgUDAgE
BAgMFBgcJCtMBoQsMDQ0NDg4ODg0ODQ0NDAuvBgUDAQECBAY0I14BJEH+xAGRCwwMDQ0ODg4ODg4
NDQwMC9QABgAAAAAD9AP0AAMADwATAB0AIQAnAAAlITUhIzMVIxUzFSMVMzUjNyE1ISMzBxUzNSM
3NSM3ITUhJzMVMzUjAQYC7v0S+n0/P328vPoC7v0S+nh4vHh4vPoC7v0S+j4/fWpeID4gPvrbXXw
/P3w/u14gvPoAAAAABQAAAAAD9APbAAIABQANABcAGgAAJTcjAyM3ATM3MxczAyMFIQEVITUhATU
hJzMnAgJx4x6+Xv76Wi39LF3fTwFlAST+3AGk/tIBJP5mw+l0JXMBGP/+N3h4AjRQ/lo+TQGpPk5
zAAABAAAAAAOsA/QACwAAATMDIxUhNSMTMzUhAXGd88gCPJ3zyP3EAx79xNbWAjzWAAAGAAAAAAP
0A9QAAwBDAEcAhwCLAMsAACUhNSEHFR8OPw49AS8ODw4TITUhBxUfDTsBPw09AS8ODw4TITUhBxU
fDj8OPQEvDg8OAQYC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgY
HBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQE
CAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgY
GBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAkpeLwgIBwcHBwYFBQUDBAICAQE
BAQICBAMFBQUGBwcHBwgICAgIBwcGBgYFBAQDAwIBAQEBAgMDBAQFBgYGBwcICAFgXS4ICAgHBwY
GBgUEBAMDAgEBAgMDBAQFBgYGBwcICAgICAcHBwcGBQUFAwQCAgEBAQECAgQDBQUFBgcHBwcIAUB
dLggICAcHBgYGBQQEAwMCAQEBAQIDAwQEBQYGBgcHCAgICAgHBwcHBgUFBQMEAgIBAQEBAgIEAwU
FBQYHBwcHCAAAAwAAAAADmQP0AAcAKACNAAABFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw0VERUfDTM
hMz8NNRE1Lw0rAS8OKwEPDQEdAcZb/YQBbAEDBAYHBwkJCQkHBwYEAwEBAwQGBwcJCQkJBwcGBAO
svwkJCQgICAcGBgYEBAMCAgICAwQEBgYGBwgICAkJCQJ8CQkJCAgIBwYGBgQEAwICAgIDBAQGBgY
HCAgICQkJvwMFBQYGBwgICQkJCgoKCwsLCwoKCgkJCQgIBwYGBQUDPoiI/SkC1y4FBQgIBwUEAwE
BAwQFBwgICgkICAcFBQIBAQIFBQcICCQCAgMEBAYGBgcICAgJCQn9KQkJCQgICAcGBgUFBAMCAgI
CAwQFBQYGBwgICAkJCQLXCQkJCAgIBwYGBgQEAwICCgkJCAgIBwYGBQQEAwICAgIDBAQFBgYHCAg
ICQkAAQAAAAAD9ALoAGAAAAExLw8PHxc/Gh8PByERA0QREhMTFBQUFRYWFhcXFxgYFRUVFBUUExQ
TEhMSEREREBAPDg8NDQ0MCwsKCQkIBwd1BQYGBgcQEhMWFwwMDQ0NDg4ODw8PDxAQEBAQEhESERE
QERAQDw8PDg4NDbIBtQIuDw4ODQwLCgkJBwYFBAMCAQEBAwMEBAYGCAgICgoLCwwNDQ4PDw8REBE
SEhITExQUKA8PDw4OGxoYFhUKCQkICAcHBgUFBAQDAgIBAQEBAgMEBAYGBggICAoJCwu6AdAAAAA
OAAAAAAP0A/MAAgAFAAgACwAQABQAFwAbAB4AIQApAC0AMQB1AAABETclFzUXNyMFNyETFQUhEQE
hJRMlMycFMSEnBzcnBxcRBRMDBSUDEy0BEQMlIwUDEQcRHw8hPw8RLw8hDw4CGcj+ZaG3MJb+wM7
+4jQBCv6EAy7+ggEKdP1S3JkBCwEjWemWlvrIATJ0dP7n/up3dwEWAZhy/vQ0/vZyXgEBAwQEBgY
ICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsL/PYLCwsKCgkICAgGBgQ
EAwEBxv7fWSQ730Bky8v+9QNxAYH+f28BHx2ZmcukmTgJywEeP/7n/ud3dwEZARl3Bv5xAR1ycv7
yAYAR/PYLCwsKCgkICAcHBQUEAwEBAQEDBAUFBwcICAkKCgsLCwMKCwsLCgoJCAgHBwUFBAMBAQE
BAwQEBgYIBwkJCgoLCwAAAAAFAAAAAAP0A/MAAwAHAAsADwATAAA3ITUhJSE1ISUhNSElITUhJSE
1IQwD6PwYAVgCkP1w/qgD6PwYAVgCkP1w/qgD6PwYDF6AW5xefV19XgAAAAAKAAAAAAP0A/MAAwA
HAAsADwATABcAGwAfACMARwAAARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1JxE
fByE/BxEvByEPBgOW+j7bP9oDLPo+2z/aAyz6Pts/2l4BAwUGAwgJCgOJCgkJBwYDBAIBAwUGAwg
JCvx3CgkJBwYFAwElvb27u7u7ARrb29vb29v6vLy8vLy8hvyCCwoJBwQGBAIBAwUHBwUJCgOECwo
JBwQGBAIBAwUGCAkKAAAAAAUAAAAAA/QD8wADAAcACwAPABMAADchNSE1ITUhNSE1ITUhNSE1ITU
hDAPo/BgCkP1wA+j8GAKQ/XAD6PwYDF6BV59efVqAXgAAAAADAAAAAAP0A00AAwAHAAsAADchNSE
1ITUhNSE1IQwD6PwYA+j8GAPo/Bizb6Zwpm8AAAAABQAAAAAD9AP0AD8AXwCfAKQBIgAAJQ8PLw8
/Dx8OExUPBSsBLwU9AT8FOwEfBQMPDy8PPw8fEAE1IwUVHw8zPwMXBy8FDw8fDz8PNS8DNwEzNQE
/BS8PDw4BOAEBAwMEBQYGBwgICQkKCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgo

Copyright © 2001 -2024 Syncfusion Inc. 48


Toolbar Responsive mode in React Toolbar component

KCgkJCAgHBgYFBAMDAeICAgMDBQUFBQUFAwMCAgICAwMFBQUFBQUDAwIC4QEBAwMEBQYGBwgICQk
KCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAftkAV6W/K4
BAwUHCAoMDQ4PERETExQUCwsVFBN2dgkKCgoVFhQUExMREQ8ODQwKCAcFAwEBAwUHCAoMDQ4PERE
TExQUFBQTExERDw4NDAoIBwUDAQEEBgd2AV6W/ZYFBAMCAwEBAwUHCAoMDQ4PERETExQUFBQTExE
RDw4NDAoIBwUD1AoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgoKCgoKCQkICAcGBgUEAwM
BAQEBAwMEBQYGBwgICQkKCgEiBQUFAwMCAgICAwMFBQUFBQUDAwICAgIDAwUFAScKCgoJCQgIBwY
GBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgqgZAF
eMpYKChQTExERDw4NDAoIBwUDAQEEBgd2dgUEAwIDAQEDBQcICgwNDg8RERMTFBQUFBMTEREPDg0
MCggHBQMBAQMFBwgKDA0ODxERExMUFAsLFRQTdv6iMgJqCQoKChUWFBQTExERDw4NDAoIBwUDAQE
DBQcICgwNDg8RERMTFAADAAAAAANXA7UAIgBFAJMAAAEzHw4PDisBNRMzHw4PDisBNQMhPxEvDz8
PLxghAkgKCgkJCAgHBwYGBAQEAgEBAQEDAwQFBgYHBwgJCAkKCeDACgoJCQgIBwcGBgQEBAIBAQE
BAgQEBAYGBwcICAkJCgrAwAHDDQwMDBcWFRMSEQ8NDAoHBgQBAQIDBAYHBwkKCgsNDA4ODwsLCgo
KCAgIBgYFBQMDAQEBAQECAwQEBAUGDA8QEhQVFgwMDA0NDQ0N/nABogICAwQEBgYGBwgICQkKCQo
KCQgJBwgGBgUFBAMCArsBdwICAwQEBgYGCAcICQkKCQoKCQkIBwgGBgYEBAMCArv9MQEBAQIGCAo
MDg8REhQUFhcYGBERERAQEA4ODgwMDAoJCQcICQkKCgoLDAsMDAwMDQwNDQwNDQwMCwwLCxQUERA
ODQoFAwQDAgEBAQAABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITUhNSE1ITUhNSE1ITUhNSEMA+j
8GAPo/BgD6PwYA+j8GAPo/BgMXn1enF59XX1eAAAAAAEAAAAAA9QD1ADUAAATHx8/DxcRIRcPDy8
fPx8fDzMvHw8eKwECAwQFBggICQoMDA0ODhAQERISExQUFRUWFhcXGBgYGBgXFxcWFhUVFBQTEhI
REIr+ZrsMDA0ODg4PEBAQEBESERISEhIREhEQEQ8QDw8ODg0NDAwLCgoJCQgHBgYEBAQCAQEBAQI
EBAQGBgcICQkKCgsMDA0NDg4PDxAPERAREhESEhwcGxoaGBgWFRQSEQ8OCwp7BQYHCAgJCQoLCww
NDQ4ODg8QEBERERISEhMTFBMUFRQYGBgXFxYWFRUUFBMSEhEQEA4ODQwMCgkICAYFBAMCAgAYGBc
XFxYWFRUUFBMSEhEQEA4ODQ0LCgoICAYFBAMCAQECAwQFBggICgoLDQ0ODhCKAZq7DAsLCgkJCAc
HBQUEAwMBAQEBAgQEBAYGBwgICgkLCwwMDQ0ODg8PDxAREBESERISEhIREhEQERAPDw8ODg0NDAw
LCwkKCAgHBgYEBAQCAQECAwUICQsNDxASExUWFxgaExITERIREBAQDw8ODg0NDAsLCgoJCAcHBgY
EBAMCAQEBAgMEBQYICAoKCw0NDg4QEBESEhMUFBUVFhYXFxcYAAAAAgAAAAAD8gP0AGcA7gAAARU
PGC8YPQE/FzsBHxcFHx8/DxcVATcBIyc/Dj0BLx0rAQ8dAoABAgIDAwQFBQUNDxATExYLCwwMDAw
NDQ0NDQ0NDQwNDAsMCxUUEhAPDQUFBQQDAwMBAQEBAwMDBAUFBQ0PEBIUFQsMCwwNDA0NDQ0NDQ0
NDAwMDAsLFhMTEA8NBQUFBAMDAgIB/Y0BAQMDBAUGBggICQkLCwsNDA4ODg8QEBARERISEhMTExE
REBEQEBAQDw8ODg4ODA0OAR1W/uMuDgoKCQkIBwYGBgQEAwMCAQICAwQFBgcHCAkKCgsMDA0NDg8
PDxAREREREhMSExMTExMSEhIRERAQEA8ODg4MDQsLCwkJCAgGBgUEAwMBAoIODQ0MDQwMDAsLFRQ
SEQ4NBgUEBAQDAgEBAQEBAQIDBAQEBQYNDhESFBULCwwMDA0MDQ0ODQ0NDQwMDAwLCxUUEhEODQY
FBQQDAwICAQECAgMDBAUFBg0OERIUFQsLDAwMDA0NDQ0UEhMSEhIRERAQEA8ODg4NDAsLCwkJCAg
GBgUEBAIBAQEBAgIEBAUFBgcHCAgJCgoSLf7jVgEfDg0NDQ4ODg8PDxAQEBERERITExISEhIRERA
QEA8ODg4NDAwLCgoICQcHBQUEBAICAgIEBAUFBwcJCAoKCwwMDQ4ODg8QEBARERISEhITAAAAAgA
AAAADtQP0AAMACgAANyE1IRMzESERMwFKA2z8lA/zAWjz/lkMfQHN/p0BYwGeAAAAAAUAAAAAA/Q
D9AA/AH8AvwD/Aa8AAAEPDisBLw4/Dx8OBQ8OKwEvDj8PHw4lFQ8OLw49AT8OHw4FFQ8OLw49AT8
OHw4BHx8zPw09AS8MPQE/DjsBPx01Lx8PHgOFAQECAgQEBQUGBgcHCAgJCAkJCAcIBgcGBQUEAwM
CAQEBAQIDAwQFBQYHBggHCAkJCAkIBwgHBgYFBQQEAgIB/Z4BAQIDAwQFBQYGBwgHCAkJCAkIBwg
HBgYFBQQDAwIBAQEBAgMDBAUFBgYHCAcICQgJCQgHCAcGBgUFBAMDAgEBvQECAwQEBAYGBgcHCAg
ICQkICAgHBwcFBgQFAwMCAQECAwMFBAYFBwcHCAgICQkICAgHBwYGBgQEBAMCAf7qAQIDAwUEBgU
HBwcICAgJCQgICAcHBgYGBAQEAwIBAQIDBAQEBgYGBwcICAgJCQgICAcHBwUGBAUDAwIB/kQBAgM
EBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGgkICAgHBwYGBgQEBAMCAQECAwMEBAoEBAMDAgE
CAgIEBAUFBgYHBwgICAlkDg8NDg0ODA0MDAwLCwsKCQoICQcIBgYGBQQEAwMCAQECAwQGBwcJCws
MDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgJTCAk
ICAcHBgYFBQQEAgICAgICBAQFBQYGBwcICAkICQgJBwgGBwYFBQQDAwIBAQEBAgMDBAUFBgcGCAc
JCAkICQgIBwcGBgUFBAQCAgICAgIEBAUFBgYHBwgICQgJCAkHCAYHBgUFBAMDAgEBAQECAwMEBQU
GBwYIBwkI1gkJCAcIBgcGBQUEAwMCAQEBAQIDAwQFBQYHBggHCAkJCAkICAcHBgYFBQQEAgIBAQE
BAgIEBAUFBgYHBwgICQgJCQgHCAYHBgUFBAMDAgEBAQECAwMEBQUGBwYIBwgJCQgJCAgHBwYGBQU
EBAICAQEBAQICBAQFBQYGBwcICAn+xhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAgI
CBAQFBQYGBwcICAkICAgIBwcGBgsGBwYIBwgICQkIBwgGBwYFBQQDAwIBAQECAgMEBQUFBgcHCAg
JCQoKCwoMCwwNDA0NDg0ODg4XFxYWFRUVFBQTExIRERAPDw4NDQsLCgkIBwYFBAMBAQECAwQGBwc
JCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAgAAAAAD9AO1AAgAVAAAARchFSEHFzcnJREVHw4hPw4
9ASMVIREhFTM9AS8OIQ8OAtV1/k0BsHI/4OD8+AICAwQFBQYHBwcICQkJCQHPCQkJCQgHBwcGBQU
EAwICXP4xAc9cAgIDBAUFBgcHBwgJCQkJ/jEJCQkJCAcHBwYFBQQDAgICoHRYdD7e3oD9RAkJCAg
IBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwgICAkJzMwCvMzMCQkICAgHBwYGBQQEAwIBAQEBAgMEBAU
GBgcHCAgICQADAAAAAAOvA/QAAwBHAF0AAAERIREHERUfDTMhMz8OES8OIyEjDw0nETMRITUhIw8
NA1X+DFsCAgMEBQUGBgcICAgJCQkB9AkJCQgICAcGBgUFBAMCAQEBAQIDBAUFBgYHCAgICQkJ/gw

Copyright © 2001 -2024 Syncfusion Inc. 49


Toolbar Responsive mode in React Toolbar component

JCQkICAgHBgYFBQQDAgK2WQIT/e0JCQkIBwgHBgYFBAQDAgEC4/2EAnwF/YgJCQgJCAcHBgYGBAQ
DAgICAgMEBAYGBgcHCAkICQkCeAkJCQgICAcGBgUFAwMDAQEDAwMFBQYGBwgICAkJsv2EAnxbAgI
DBAUFBgYHCAgICQkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAQAAEAAQAAAAAAAgAHABEAAQA
AAAAAAwAQABgAAQAAAAAABAAQACgAAQAAAAAABQALADgAAQAAAAAABgAQAEMAAQAAAAAACgAsAFM
AAQAAAAAACwASAH8AAwABBAkAAAACAJEAAwABBAkAAQAgAJMAAwABBAkAAgAOALMAAwABBAkAAwA
gAMEAAwABBAkABAAgAOEAAwABBAkABQAWAQEAAwABBAkABgAgARcAAwABBAkACgBYATcAAwABBAk
ACwAkAY8gdG9vbGJhci1tYXRlcmlhbFJlZ3VsYXJ0b29sYmFyLW1hdGVyaWFsdG9vbGJhci1tYXR
lcmlhbFZlcnNpb24gMS4wdG9vbGJhci1tYXRlcmlhbEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmN
mdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAdABvAG8AbABiAGEAcgAtAG0
AYQB0AGUAcgBpAGEAbABSAGUAZwB1AGwAYQByAHQAbwBvAGwAYgBhAHIALQBtAGEAdABlAHIAaQB
hAGwAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABWAGUAcgBzAGkAbwBuACAAMQAuADA
AdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdAB
lAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHU
AZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAjAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgE
TARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAAQVGV4dF9PdXRkZW50XzAwMQtQaWN
0dXJlXzAwMQxTZXR0aW5nc18wMDEQQ29sb3JfcGlja2VyXzAwMhBBbGlnbl9DZW50ZXJfMDA2CEx
pbmVfMDAxDVVuZGVybGluZV8wMDEMU29ydF9aLUFfMDAxCFVuZG9fMDAxEENoYXJ0X2J1YmJsZV8
wMDELRG93bmxvYWRfMDAPVGV4dF9pbmRlbnRfMDAxEkNoYXJ0X0RvdWdobnV0XzAwMQlDbGVhcl8
wMDINTnVtYmVyaW5nXzAwMQxTb3J0X0EtWl8wMDEKSXRhbGljXzAwMQtCdWxsZXRzXzAwMQlQYXN
0ZV8wMDEIUmVkb18wMDEPQ2hhcnRfcmFkYXJfMDAxD0FsaWduX1JpZ2h0XzAwMQlUYWJsZV8wMDE
OQWxpZ25fTGVmdF8wMDEITWVudV8wMDEHQ3V0XzAwMghCb2xkXzAwMRFBbGlnbl9KdXN0aWZ5XzA
wMQpSZWxvYWRfMDAxClNlYXJjaF8wMDEKVXBsb2FkXzAwMQpEZXNpZ25fMDA1CkV4cG9ydF8wMDE
IQ29weV8wMDIAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-bigger .e-tbar-btn .tb-icons {


font-size: 18px;
}
.e-cut-icon:before {
content: "\e719"
}
.e-copy-icon:before {
content: "\e721"
}
.e-paste-icon:before {
content: "\e712"
}
.e-color-icon:before {
content: "\e703";
}
.e-bold-icon:before {
content: "\e71a"
}
.e-underline-icon:before {
content: "\e706";
}
.e-clear-icon:before {
content: "\e70d"
}
.e-italic-icon:before {
content: "\e710"
}
.e-ascending-icon:before {
content: "\e70f";

Copyright © 2001 -2024 Syncfusion Inc. 50


Toolbar Responsive mode in React Toolbar component

}
.e-descending-icon:before {
content: "\e707";
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>

Popup
Popup is another type of overflowMode in which the Toolbar container holds the commands that can
be placed in the available space. The rest of the overflowing commands that do not fit within the
viewing area moves to the overflow popup container.
The commands placed in the popup can be viewed by opening the popup using the drop down icon
given at the end of the Toolbar.

If the popup content overflows the height of the page, then the rest of the commands will be hidden.
Priority of commands
Default popup priority is set as none and when the commands of Toolbar overflows, the ones that are
listed at last in it will be moved into the popup.
User can customize the priority of commands to be displayed in the Toolbar and popup by using the
overflow property.
Possible options:
Property | Description
Both | Button Text is visible in both Toolbar and Popup.
Overflow | Button Text is only visible in Popup.
Toolbar | Button Text is only visible in the Toolbar.
In below sample text only visible at popup container not in the Toolbar container.

Copyright © 2001 -2024 Syncfusion Inc. 51


Toolbar Responsive mode in React Toolbar component

INDEX.JSX
import { ItemDirective, ItemsDirective, ToolbarComponent } from
'@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
return (<ToolbarComponent width="330" overflowMode="Popup">
<ItemsDirective>
<ItemDirective text="Cut" prefixIcon="e-cut-icon tb-icons"
showTextOn="Overflow" overflow="Show"/>
<ItemDirective text="Copy" prefixIcon="e-copy-icon tb-icons"
showTextOn="Overflow" overflow="Show"/>
<ItemDirective text="Paste" prefixIcon="e-paste-icon tb-icons"
showTextOn="Overflow" overflow="Show"/>
<ItemDirective type="Separator"/>
<ItemDirective text="Bold" prefixIcon="e-bold-icon tb-icons"
showTextOn="Overflow" overflow="Show"/>
<ItemDirective text="Underline" prefixIcon="e-underline-icon tb-
icons" showTextOn="Overflow" overflow="Show"/>
<ItemDirective text="Italic" prefixIcon="e-italic-icon tb-icons"
showTextOn="Overflow" overflow="Show"/>
<ItemDirective text="Color-Picker" prefixIcon="e-color-icon tb-
icons" showTextOn="Overflow" overflow="Hide"/>
<ItemDirective type="Separator"/>
<ItemDirective text="A-Z Sort" prefixIcon="e-ascending-icon tb-
icons" showTextOn="Overflow" overflow="Show"/>
<ItemDirective text="Z-A Sort" prefixIcon="e-descending-icon tb-
icons" showTextOn="Overflow" overflow="Show"/>
<ItemDirective text="Clear" prefixIcon="e-clear-icon tb-icons"
showTextOn="Overflow" overflow="Hide"/>
</ItemsDirective>
</ToolbarComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import { ItemDirective, ItemsDirective, ToolbarComponent } from
'@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
return (
<ToolbarComponent width="330" overflowMode="Popup">
<ItemsDirective>
<ItemDirective text="Cut" prefixIcon="e-cut-icon tb-icons"
showTextOn="Overflow" overflow="Show" />
<ItemDirective text="Copy" prefixIcon="e-copy-icon tb-icons"
showTextOn="Overflow" overflow="Show" />
<ItemDirective text="Paste" prefixIcon="e-paste-icon tb-icons"
showTextOn="Overflow" overflow="Show" />
<ItemDirective type="Separator" />
<ItemDirective text="Bold" prefixIcon="e-bold-icon tb-icons"
showTextOn="Overflow" overflow="Show" />

Copyright © 2001 -2024 Syncfusion Inc. 52


Toolbar Responsive mode in React Toolbar component

<ItemDirective text="Underline" prefixIcon="e-underline-icon tb-


icons" showTextOn="Overflow" overflow="Show" />
<ItemDirective text="Italic" prefixIcon="e-italic-icon tb-icons"
showTextOn="Overflow" overflow="Show" />
<ItemDirective text="Color-Picker" prefixIcon="e-color-icon tb-
icons" showTextOn="Overflow" overflow="Hide" />
<ItemDirective type="Separator" />
<ItemDirective text="A-Z Sort" prefixIcon="e-ascending-icon tb-
icons" showTextOn="Overflow" overflow="Show" />
<ItemDirective text="Z-A Sort" prefixIcon="e-descending-icon tb-
icons" showTextOn="Overflow" overflow="Show" />
<ItemDirective text="Clear" prefixIcon="e-clear-icon tb-icons"
showTextOn="Overflow" overflow="Hide" />
</ItemsDirective>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<link
href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component
.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom_bold .e-tbar-btn-text {
font-weight: 900;
}
.custom_italic .e-tbar-btn-text {
font-style: italic;
}
.custom_underline .e-tbar-btn-text {

Copyright © 2001 -2024 Syncfusion Inc. 53


Toolbar Responsive mode in React Toolbar component

text-decoration: underline red;


}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
@font-face {
font-family: 'Material_toolbar';
src: url(data:application/x-font-ttf;charset=utf-
8;base64,AAEAAAAKAIAAAwAgT1MvMj1tShMAAAEoAAAAVmNtYXDoMOjqAAACDAAAAHhnbHlmIuy
19QAAAswAACNMaGVhZA6okZMAAADQAAAANmhoZWEIUQQkAAAArAAAACRobXR4jAAAAAAAAYAAAAC
MbG9jYYc0kUIAAAKEAAAASG1heHABOwG8AAABCAAAACBuYW1lx/RZbQAAJhgAAAKRcG9zdJZeEVU
AACisAAACGAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAIwABAAAAAQAAAQsu/F8
PPPUACwQAAAAAANXLJlEAAAAA1csmUQAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAjAbAADgAAAAA
AAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnIQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAA
EAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQ
AAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAA
AAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGQAAAAEAAQAAQAA5yH//wA
A5wD//wAAAAEABAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABY
AFwAYABkAGgAbABwAHQAeAB8AIAAhACIAAAAAADIAjgFwAfgCIAKYAxIDSAO2BRYFMAVcBnIGugb
2ByoHQgguCNYJRgn6CiQKiAquCsgMFgzADOYNzg7WDvAQyBEyEaYABwAAAAAD9APzAAMABwAKAA4
AEgAVABkAADchNSElITUhJTkBBSE1ITUhNSEFFxEnITUhDAPo/BgBtgIy/c7+SgG2AjL9zgIy/c7
+Svr6A+j8GAxefV67Pl19Xvr6AfScXgAAAAIAAAAAA/QD9AAEAEgAACUhNxc3AREfDyE/DxEvDyE
PDgOF/PbDisP9gQEBAwQEBgYICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsL/PYLCwsKCgkICAgGBgQEAwGz+qf6AYX89gsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsLAwoLCwsKCgkICAgGBgQEAwEBAQEDBAQGBggICAkKCgsLAAACAAAAAAPzA/QAQAC/AAABFQ8
PLw8/Dx8OAQ8ELwErAQ8FFR8FBxcPAxUfBzsBNx8LOwI/Cx8BOwE/Bj0BLwQ/Aic/BC8HKwEHLws
rAg8FArIBAgUGBwkKDAwODxAQERITEhIREQ8PDgwMCgkHBgUCAQECBQYHCQoMDA4PDxEREhITEhE
QEA8ODAwKCQcGBQL+zxUWFhUWfwUFBAUDBANqAgEBAgIDbgMDbwMCAQEBAmkDBAQEBQSEFBYWFxQ
CAgIDBAQEBcwFBAQEAwICAhQXFRYVgAQFBQQEAwNoAgEBAgIDcAEBAQNvAgIBAQEBA2gDBAQFBAW
DFBYWFxIBAgMDAwQFBcwFBAQDBAICAgAJCRIQEBAODgwLCgkHBgQDAQEDBAYHCQoLDA4OEBAQEhI
SEhAQEA4ODAsKCQcGBAMBAQMEBgcJCgsMDg4QEBASAc6ECwwNDjIBAQICA7QEBQQFBAMEUjIyVgM
EBAQFBAWwAwICATMODQwLhAQEBAMCAgECAgIDBAMEhAsMDQ4yAQECAgOwBAQFBAUEAwRSDAwaMlY
DBAQEBQQFsAMCAgEzDg0MC4QEAwQDAgICAgICAwQDAAAAAAMAAAAAA/MD2AAyADUAaQAAJRUfDTs
BPw41LwgPBwMhAScXAQ8GHQEfBQEfBjsBPwYBPwYvBwEDFgIDBAQGBgcICQkKCgsLCwsLCwoKCQg
ICAYGBAQDAQEDBAcMCQoLFCMtFQoJCQcFBHv96gEL04X+4gYFBAQCAgICAgIEBAUBNwcHBwgHCAc
IBwgHCAgHBwYBOAUEAwMCAQEBAQIDAwQFBv4PlwsLCwoKCQkIBwYGBAQDAgIDBAQGBgcICQkKCgs
LCwcPEBAYEBAPHCk3HRAQEBAQEAEIAQrThf7iBgcIBwgHCAgICAgHBwcH/skGBQQEAwIBAQIDBAQ
FBgE3BwcHBwgICAgHCAgHCAcGAfEABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITchNSEnITUhNyE
1ISchNSEMA+j8GN4CLP3U3gPo/BjeAiz91N4D6PwYDF6AW5xefVqAXgAAAAAEAAAAAAP0A/QACQA
TABcAWwAAAQcVMzcXMzUjLwEjFTMbATM1IwElESERBxEfDyE/DxEvDyEPDgFro8ObnnROxOp0nZv
qTij+8AGW/NReAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgo
LCwv89gsLCwoKCQgICAYGBAQDAQENAyOWliO4BSUBK/7VJQFSffzUAywR/PYLCwsKCgkICAgGBgQ
EAwEBAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgoLCwAAAAA
CAAAAAAOWA/QAAwBpAAA3ITUhExUfHTsBPx01ESMRDw8vDxEjagMs/NRKAgIDAwUFBgcHCAkJCgs
LCwwNDQ0ODw4PEA8QERAREREREBEQDxAPDg8ODQ0NDAsLCwoJCQgHBwYFBQMDAgKLAQMFBggKCww
ODxARERMTFBQTExEREA8ODAsFCQcGBAKLDH0BsBEREREQEA8QDg8ODg0MDQsLCwoJCQgHBwYFBQQ
DAgEBAgMEBQUGBggICQkKCgsMDAwNDg4ODw8PEBAQERERAb7+RRQTEhIREA8NDQsKCAYFAwEBAwU
GCAoLDQ0PCBASEhMTAcUABQAAAAAD9APXAAIABQANABcAGgAAJTcjASM3ATM3MxczAyMFIQEVITU

Copyright © 2001 -2024 Syncfusion Inc. 54


Toolbar Responsive mode in React Toolbar component

hATUhJTMnAgJx4wG/vl/+/Fot+i1a3FD9RgEg/t4Bov7UAST+aAF/6XQobQET//47eHgCM07+XD5
NAaQ/UHMAAAAAAQAAAAAD9ALoAF8AABMhJz8PHxo3Lx8PDycMAbWyDQ0ODg8PDxAQEBERERIREhA
QEBAQDw8PDw4ODg0NDQwMFxYTEhAHBgYGBXUHBwgJCQoLCwwNDQ0PDg8QEBERERITEhMUExQVFBU
VFRgYFxcXFhYVFhQUFBMTEhGwARi6CwsJCggICAYGBgQEAwIBAQEBAgIDBAQFBQYHBwgICQkKFRY
YGhsODg8PDygUFBMTEhISERARDw8PDg0NDAsLCgoICAgGBgQEAwMBAQECAwQFBgcJCQoLDA0ODg+
6AAYAAAAAA/MD9AA/AGsAqwDrAO8BMwAAARUfDTsBPw09AS8ODw4lHwk7AT8IPQEvByMnByMPByU
fDz8PLw8PDiUfDz8OPQEvDSsBDw0lESERBxEfDyE/DxEvDyEPDgHhAgMFBQYHCAkKCgsLDA0NDA0
MCwsKCgkIBwYFBQMCAgMFBQYHCAkKCgsLDA0MDQ0MCwsKCgkIBwYFBQMC/scBAQEFBwgKCwYGBwY
GBgwKCAcFAQEBAQUHCAoMBgYGBwYGCwoIBwUBAQHzAQECBAQEBgYGCAcICQkJCgoJCQgJBwgGBgY
EBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCQgHCAYGBgQEBAIB/qgBAQMEBAYGBwgICQoKCgsLCws
LCgkJCQcHBwUFAwMCAgMDBQUHBwcJCQkKCwsLCwsKCgoJCAgHBgYEBAMBAlD81F4BAQMDBAUGBgc
HCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgYHBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwM
BAWQNDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA0NDAwLCwsJCQgHBwUEAwIBAQIDBAUHBwg
JCQsLCwwMMQYGBgsKCQcEAgEBAgQHCQoLBgYGBwYGCwoJBgUCAQECBQYJCgsGBvMJCgkICAgHBwY
FBQQDAwEBAQEDAwQFBQYHBwgICAkKCQoJCQkICAcGBwUFBAMCAQEBAQIDBAUFBwYHCAgJCQkGCws
KCgoJCAgHBgYEBAMBAQEBAwQEBgYHCAgJCgoKCwsLCwsKCQkJBwcHBQUDAwICAwMFBQcHBwkJCQo
LC9/81AMsA/zaCgkJCQkIBwcGBgUEBAIBAQEBAgQEBQUHBwcICQkJCQoDJgoJCQkJCAcHBwUFBAQ
CAQEBAQIEBAUFBwcHCAkJCQkAAAAAAgAAAAADtQP0AAMACgAANyE1IQEjCQEjESFKA2z8lAEG7AG
cAZzs/qAMfQIK/mQBnAFhAAYAAAAAA/QD8wADAAcACwAPABIAFgAANyE1ISUhNSE1ITUhNSE1KQE
RNwMhNSEMA+j8GAG2AjL9zgIy/c4CMv3O/kr6+gPo/BgMXn1efV19Xv4M+gGWXgAFAAAAAAPzA/M
AJQBpAKgArADwAAABFT8bIw8GBR8PNSMvDT8CJw8OHw8TByMPDBc/AzsBHwUzHwYzLxcjJREhEQc
RHw8hPw8RLw8hDw4CKg8QDw8ODg4NDQwMDAwKCwoKCQgJDw0KCQQDAgLxBAUGBggJC/7WDQ0NDg4
PDw8PEA8QEBAQEAoKCQkJCQgIBgQEBAUDAQEDBKsKCQgIBwYGBQUDAwMBAQEBAQEDAwQEBQYHBwg
ICgoL9g4OHA4ODQ4NDg0NDQwNDKkLDA8HCAkJCAgICA4DEAUFBQMEAu4EBwkKDQ8REwoKCwsMDAw
NDQ4ODg4PDy8KAZP81F4BAQMDBAUGBgcHCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgY
HBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwMBAZz0AgMDBAQFBQYHBwgICQkJCgsLCwsYGhsbDw4PDwo
KCQgIBwaUDAsLCgkIBwcGBQQEAgIBAfEBAwMEBQYIBQcGBw8PEA8ODa0NDQ0ODg4ODw8PDw8PEA8
PEA8PEA8ODw8ODg0ODQ0MAj8BBAMDBAQFBgcHBwkJCqoGBQQBAQICBAMJEAcHCAgJCh0dHRsaGRc
XCgoKCQgICAcGBgYEBQMDBj781AMsA/zaCgkJCQkIBwcGBgUEAwMBAQEBAgQEBQYGBwcICQkJCQo
DJgoJCQkJCAcHBgYFBAQCAQEBAQIEBAUFBwcHCAkJCQkAAgAAAAAD8wPrAB8AMwAAEw8HHww/BBU
hNSEBNwkBPwcvCDYKCAcGBQMCAQECAwUGBwgKrwgJCgoKCgkINQKQ/Xv+20EBPAGOCgkHBgUDAgE
BAgMFBgcJCtMBoQsMDQ0NDg4ODg0ODQ0NDAuvBgUDAQECBAY0I14BJEH+xAGRCwwMDQ0ODg4ODg4
NDQwMC9QABgAAAAAD9AP0AAMADwATAB0AIQAnAAAlITUhIzMVIxUzFSMVMzUjNyE1ISMzBxUzNSM
3NSM3ITUhJzMVMzUjAQYC7v0S+n0/P328vPoC7v0S+nh4vHh4vPoC7v0S+j4/fWpeID4gPvrbXXw
/P3w/u14gvPoAAAAABQAAAAAD9APbAAIABQANABcAGgAAJTcjAyM3ATM3MxczAyMFIQEVITUhATU
hJzMnAgJx4x6+Xv76Wi39LF3fTwFlAST+3AGk/tIBJP5mw+l0JXMBGP/+N3h4AjRQ/lo+TQGpPk5
zAAABAAAAAAOsA/QACwAAATMDIxUhNSMTMzUhAXGd88gCPJ3zyP3EAx79xNbWAjzWAAAGAAAAAAP
0A9QAAwBDAEcAhwCLAMsAACUhNSEHFR8OPw49AS8ODw4TITUhBxUfDTsBPw09AS8ODw4TITUhBxU
fDj8OPQEvDg8OAQYC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgY
HBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQE
CAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgY
GBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAkpeLwgIBwcHBwYFBQUDBAICAQE
BAQICBAMFBQUGBwcHBwgICAgIBwcGBgYFBAQDAwIBAQEBAgMDBAQFBgYGBwcICAFgXS4ICAgHBwY
GBgUEBAMDAgEBAgMDBAQFBgYGBwcICAgICAcHBwcGBQUFAwQCAgEBAQECAgQDBQUFBgcHBwcIAUB
dLggICAcHBgYGBQQEAwMCAQEBAQIDAwQEBQYGBgcHCAgICAgHBwcHBgUFBQMEAgIBAQEBAgIEAwU
FBQYHBwcHCAAAAwAAAAADmQP0AAcAKACNAAABFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw0VERUfDTM
hMz8NNRE1Lw0rAS8OKwEPDQEdAcZb/YQBbAEDBAYHBwkJCQkHBwYEAwEBAwQGBwcJCQkJBwcGBAO
svwkJCQgICAcGBgYEBAMCAgICAwQEBgYGBwgICAkJCQJ8CQkJCAgIBwYGBgQEAwICAgIDBAQGBgY
HCAgICQkJvwMFBQYGBwgICQkJCgoKCwsLCwoKCgkJCQgIBwYGBQUDPoiI/SkC1y4FBQgIBwUEAwE
BAwQFBwgICgkICAcFBQIBAQIFBQcICCQCAgMEBAYGBgcICAgJCQn9KQkJCQgICAcGBgUFBAMCAgI
CAwQFBQYGBwgICAkJCQLXCQkJCAgIBwYGBgQEAwICCgkJCAgIBwYGBQQEAwICAgIDBAQFBgYHCAg
ICQkAAQAAAAAD9ALoAGAAAAExLw8PHxc/Gh8PByERA0QREhMTFBQUFRYWFhcXFxgYFRUVFBUUExQ
TEhMSEREREBAPDg8NDQ0MCwsKCQkIBwd1BQYGBgcQEhMWFwwMDQ0NDg4ODw8PDxAQEBAQEhESERE
QERAQDw8PDg4NDbIBtQIuDw4ODQwLCgkJBwYFBAMCAQEBAwMEBAYGCAgICgoLCwwNDQ4PDw8REBE
SEhITExQUKA8PDw4OGxoYFhUKCQkICAcHBgUFBAQDAgIBAQEBAgMEBAYGBggICAoJCwu6AdAAAAA
OAAAAAAP0A/MAAgAFAAgACwAQABQAFwAbAB4AIQApAC0AMQB1AAABETclFzUXNyMFNyETFQUhEQE
hJRMlMycFMSEnBzcnBxcRBRMDBSUDEy0BEQMlIwUDEQcRHw8hPw8RLw8hDw4CGcj+ZaG3MJb+wM7

Copyright © 2001 -2024 Syncfusion Inc. 55


Toolbar Responsive mode in React Toolbar component

+4jQBCv6EAy7+ggEKdP1S3JkBCwEjWemWlvrIATJ0dP7n/up3dwEWAZhy/vQ0/vZyXgEBAwQEBgY
ICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsL/PYLCwsKCgkICAgGBgQ
EAwEBxv7fWSQ730Bky8v+9QNxAYH+f28BHx2ZmcukmTgJywEeP/7n/ud3dwEZARl3Bv5xAR1ycv7
yAYAR/PYLCwsKCgkICAcHBQUEAwEBAQEDBAUFBwcICAkKCgsLCwMKCwsLCgoJCAgHBwUFBAMBAQE
BAwQEBgYIBwkJCgoLCwAAAAAFAAAAAAP0A/MAAwAHAAsADwATAAA3ITUhJSE1ISUhNSElITUhJSE
1IQwD6PwYAVgCkP1w/qgD6PwYAVgCkP1w/qgD6PwYDF6AW5xefV19XgAAAAAKAAAAAAP0A/MAAwA
HAAsADwATABcAGwAfACMARwAAARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1JxE
fByE/BxEvByEPBgOW+j7bP9oDLPo+2z/aAyz6Pts/2l4BAwUGAwgJCgOJCgkJBwYDBAIBAwUGAwg
JCvx3CgkJBwYFAwElvb27u7u7ARrb29vb29v6vLy8vLy8hvyCCwoJBwQGBAIBAwUHBwUJCgOECwo
JBwQGBAIBAwUGCAkKAAAAAAUAAAAAA/QD8wADAAcACwAPABMAADchNSE1ITUhNSE1ITUhNSE1ITU
hDAPo/BgCkP1wA+j8GAKQ/XAD6PwYDF6BV59efVqAXgAAAAADAAAAAAP0A00AAwAHAAsAADchNSE
1ITUhNSE1IQwD6PwYA+j8GAPo/Bizb6Zwpm8AAAAABQAAAAAD9AP0AD8AXwCfAKQBIgAAJQ8PLw8
/Dx8OExUPBSsBLwU9AT8FOwEfBQMPDy8PPw8fEAE1IwUVHw8zPwMXBy8FDw8fDz8PNS8DNwEzNQE
/BS8PDw4BOAEBAwMEBQYGBwgICQkKCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgo
KCgkJCAgHBgYFBAMDAeICAgMDBQUFBQUFAwMCAgICAwMFBQUFBQUDAwIC4QEBAwMEBQYGBwgICQk
KCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAftkAV6W/K4
BAwUHCAoMDQ4PERETExQUCwsVFBN2dgkKCgoVFhQUExMREQ8ODQwKCAcFAwEBAwUHCAoMDQ4PERE
TExQUFBQTExERDw4NDAoIBwUDAQEEBgd2AV6W/ZYFBAMCAwEBAwUHCAoMDQ4PERETExQUFBQTExE
RDw4NDAoIBwUD1AoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgoKCgoKCQkICAcGBgUEAwM
BAQEBAwMEBQYGBwgICQkKCgEiBQUFAwMCAgICAwMFBQUFBQUDAwICAgIDAwUFAScKCgoJCQgIBwY
GBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgqgZAF
eMpYKChQTExERDw4NDAoIBwUDAQEEBgd2dgUEAwIDAQEDBQcICgwNDg8RERMTFBQUFBMTEREPDg0
MCggHBQMBAQMFBwgKDA0ODxERExMUFAsLFRQTdv6iMgJqCQoKChUWFBQTExERDw4NDAoIBwUDAQE
DBQcICgwNDg8RERMTFAADAAAAAANXA7UAIgBFAJMAAAEzHw4PDisBNRMzHw4PDisBNQMhPxEvDz8
PLxghAkgKCgkJCAgHBwYGBAQEAgEBAQEDAwQFBgYHBwgJCAkKCeDACgoJCQgIBwcGBgQEBAIBAQE
BAgQEBAYGBwcICAkJCgrAwAHDDQwMDBcWFRMSEQ8NDAoHBgQBAQIDBAYHBwkKCgsNDA4ODwsLCgo
KCAgIBgYFBQMDAQEBAQECAwQEBAUGDA8QEhQVFgwMDA0NDQ0N/nABogICAwQEBgYGBwgICQkKCQo
KCQgJBwgGBgUFBAMCArsBdwICAwQEBgYGCAcICQkKCQoKCQkIBwgGBgYEBAMCArv9MQEBAQIGCAo
MDg8REhQUFhcYGBERERAQEA4ODgwMDAoJCQcICQkKCgoLDAsMDAwMDQwNDQwNDQwMCwwLCxQUERA
ODQoFAwQDAgEBAQAABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITUhNSE1ITUhNSE1ITUhNSEMA+j
8GAPo/BgD6PwYA+j8GAPo/BgMXn1enF59XX1eAAAAAAEAAAAAA9QD1ADUAAATHx8/DxcRIRcPDy8
fPx8fDzMvHw8eKwECAwQFBggICQoMDA0ODhAQERISExQUFRUWFhcXGBgYGBgXFxcWFhUVFBQTEhI
REIr+ZrsMDA0ODg4PEBAQEBESERISEhIREhEQEQ8QDw8ODg0NDAwLCgoJCQgHBgYEBAQCAQEBAQI
EBAQGBgcICQkKCgsMDA0NDg4PDxAPERAREhESEhwcGxoaGBgWFRQSEQ8OCwp7BQYHCAgJCQoLCww
NDQ4ODg8QEBERERISEhMTFBMUFRQYGBgXFxYWFRUUFBMSEhEQEA4ODQwMCgkICAYFBAMCAgAYGBc
XFxYWFRUUFBMSEhEQEA4ODQ0LCgoICAYFBAMCAQECAwQFBggICgoLDQ0ODhCKAZq7DAsLCgkJCAc
HBQUEAwMBAQEBAgQEBAYGBwgICgkLCwwMDQ0ODg8PDxAREBESERISEhIREhEQERAPDw8ODg0NDAw
LCwkKCAgHBgYEBAQCAQECAwUICQsNDxASExUWFxgaExITERIREBAQDw8ODg0NDAsLCgoJCAcHBgY
EBAMCAQEBAgMEBQYICAoKCw0NDg4QEBESEhMUFBUVFhYXFxcYAAAAAgAAAAAD8gP0AGcA7gAAARU
PGC8YPQE/FzsBHxcFHx8/DxcVATcBIyc/Dj0BLx0rAQ8dAoABAgIDAwQFBQUNDxATExYLCwwMDAw
NDQ0NDQ0NDQwNDAsMCxUUEhAPDQUFBQQDAwMBAQEBAwMDBAUFBQ0PEBIUFQsMCwwNDA0NDQ0NDQ0
NDAwMDAsLFhMTEA8NBQUFBAMDAgIB/Y0BAQMDBAUGBggICQkLCwsNDA4ODg8QEBARERISEhMTExE
REBEQEBAQDw8ODg4ODA0OAR1W/uMuDgoKCQkIBwYGBgQEAwMCAQICAwQFBgcHCAkKCgsMDA0NDg8
PDxAREREREhMSExMTExMSEhIRERAQEA8ODg4MDQsLCwkJCAgGBgUEAwMBAoIODQ0MDQwMDAsLFRQ
SEQ4NBgUEBAQDAgEBAQEBAQIDBAQEBQYNDhESFBULCwwMDA0MDQ0ODQ0NDQwMDAwLCxUUEhEODQY
FBQQDAwICAQECAgMDBAUFBg0OERIUFQsLDAwMDA0NDQ0UEhMSEhIRERAQEA8ODg4NDAsLCwkJCAg
GBgUEBAIBAQEBAgIEBAUFBgcHCAgJCgoSLf7jVgEfDg0NDQ4ODg8PDxAQEBERERITExISEhIRERA
QEA8ODg4NDAwLCgoICQcHBQUEBAICAgIEBAUFBwcJCAoKCwwMDQ4ODg8QEBARERISEhITAAAAAgA
AAAADtQP0AAMACgAANyE1IRMzESERMwFKA2z8lA/zAWjz/lkMfQHN/p0BYwGeAAAAAAUAAAAAA/Q
D9AA/AH8AvwD/Aa8AAAEPDisBLw4/Dx8OBQ8OKwEvDj8PHw4lFQ8OLw49AT8OHw4FFQ8OLw49AT8
OHw4BHx8zPw09AS8MPQE/DjsBPx01Lx8PHgOFAQECAgQEBQUGBgcHCAgJCAkJCAcIBgcGBQUEAwM
CAQEBAQIDAwQFBQYHBggHCAkJCAkIBwgHBgYFBQQEAgIB/Z4BAQIDAwQFBQYGBwgHCAkJCAkIBwg
HBgYFBQQDAwIBAQEBAgMDBAUFBgYHCAcICQgJCQgHCAcGBgUFBAMDAgEBvQECAwQEBAYGBgcHCAg
ICQkICAgHBwcFBgQFAwMCAQECAwMFBAYFBwcHCAgICQkICAgHBwYGBgQEBAMCAf7qAQIDAwUEBgU
HBwcICAgJCQgICAcHBgYGBAQEAwIBAQIDBAQEBgYGBwcICAgJCQgICAcHBwUGBAUDAwIB/kQBAgM
EBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGgkICAgHBwYGBgQEBAMCAQECAwMEBAoEBAMDAgE
CAgIEBAUFBgYHBwgICAlkDg8NDg0ODA0MDAwLCwsKCQoICQcIBgYGBQQEAwMCAQECAwQGBwcJCws

Copyright © 2001 -2024 Syncfusion Inc. 56


Toolbar Responsive mode in React Toolbar component

MDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgJTCAk
ICAcHBgYFBQQEAgICAgICBAQFBQYGBwcICAkICQgJBwgGBwYFBQQDAwIBAQEBAgMDBAUFBgcGCAc
JCAkICQgIBwcGBgUFBAQCAgICAgIEBAUFBgYHBwgICQgJCAkHCAYHBgUFBAMDAgEBAQECAwMEBQU
GBwYIBwkI1gkJCAcIBgcGBQUEAwMCAQEBAQIDAwQFBQYHBggHCAkJCAkICAcHBgYFBQQEAgIBAQE
BAgIEBAUFBgYHBwgICQgJCQgHCAYHBgUFBAMDAgEBAQECAwMEBQUGBwYIBwgJCQgJCAgHBwYGBQU
EBAICAQEBAQICBAQFBQYGBwcICAn+xhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAgI
CBAQFBQYGBwcICAkICAgIBwcGBgsGBwYIBwgICQkIBwgGBwYFBQQDAwIBAQECAgMEBQUFBgcHCAg
JCQoKCwoMCwwNDA0NDg0ODg4XFxYWFRUVFBQTExIRERAPDw4NDQsLCgkIBwYFBAMBAQECAwQGBwc
JCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAgAAAAAD9AO1AAgAVAAAARchFSEHFzcnJREVHw4hPw4
9ASMVIREhFTM9AS8OIQ8OAtV1/k0BsHI/4OD8+AICAwQFBQYHBwcICQkJCQHPCQkJCQgHBwcGBQU
EAwICXP4xAc9cAgIDBAUFBgcHBwgJCQkJ/jEJCQkJCAcHBwYFBQQDAgICoHRYdD7e3oD9RAkJCAg
IBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwgICAkJzMwCvMzMCQkICAgHBwYGBQQEAwIBAQEBAgMEBAU
GBgcHCAgICQADAAAAAAOvA/QAAwBHAF0AAAERIREHERUfDTMhMz8OES8OIyEjDw0nETMRITUhIw8
NA1X+DFsCAgMEBQUGBgcICAgJCQkB9AkJCQgICAcGBgUFBAMCAQEBAQIDBAUFBgYHCAgICQkJ/gw
JCQkICAgHBgYFBQQDAgK2WQIT/e0JCQkIBwgHBgYFBAQDAgEC4/2EAnwF/YgJCQgJCAcHBgYGBAQ
DAgICAgMEBAYGBgcHCAkICQkCeAkJCQgICAcGBgUFAwMDAQEDAwMFBQYGBwgICAkJsv2EAnxbAgI
DBAUFBgYHCAgICQkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAQAAEAAQAAAAAAAgAHABEAAQA
AAAAAAwAQABgAAQAAAAAABAAQACgAAQAAAAAABQALADgAAQAAAAAABgAQAEMAAQAAAAAACgAsAFM
AAQAAAAAACwASAH8AAwABBAkAAAACAJEAAwABBAkAAQAgAJMAAwABBAkAAgAOALMAAwABBAkAAwA
gAMEAAwABBAkABAAgAOEAAwABBAkABQAWAQEAAwABBAkABgAgARcAAwABBAkACgBYATcAAwABBAk
ACwAkAY8gdG9vbGJhci1tYXRlcmlhbFJlZ3VsYXJ0b29sYmFyLW1hdGVyaWFsdG9vbGJhci1tYXR
lcmlhbFZlcnNpb24gMS4wdG9vbGJhci1tYXRlcmlhbEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmN
mdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAdABvAG8AbABiAGEAcgAtAG0
AYQB0AGUAcgBpAGEAbABSAGUAZwB1AGwAYQByAHQAbwBvAGwAYgBhAHIALQBtAGEAdABlAHIAaQB
hAGwAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABWAGUAcgBzAGkAbwBuACAAMQAuADA
AdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdAB
lAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHU
AZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAjAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgE
TARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAAQVGV4dF9PdXRkZW50XzAwMQtQaWN
0dXJlXzAwMQxTZXR0aW5nc18wMDEQQ29sb3JfcGlja2VyXzAwMhBBbGlnbl9DZW50ZXJfMDA2CEx
pbmVfMDAxDVVuZGVybGluZV8wMDEMU29ydF9aLUFfMDAxCFVuZG9fMDAxEENoYXJ0X2J1YmJsZV8
wMDELRG93bmxvYWRfMDAPVGV4dF9pbmRlbnRfMDAxEkNoYXJ0X0RvdWdobnV0XzAwMQlDbGVhcl8
wMDINTnVtYmVyaW5nXzAwMQxTb3J0X0EtWl8wMDEKSXRhbGljXzAwMQtCdWxsZXRzXzAwMQlQYXN
0ZV8wMDEIUmVkb18wMDEPQ2hhcnRfcmFkYXJfMDAxD0FsaWduX1JpZ2h0XzAwMQlUYWJsZV8wMDE
OQWxpZ25fTGVmdF8wMDEITWVudV8wMDEHQ3V0XzAwMghCb2xkXzAwMRFBbGlnbl9KdXN0aWZ5XzA
wMQpSZWxvYWRfMDAxClNlYXJjaF8wMDEKVXBsb2FkXzAwMQpEZXNpZ25fMDA1CkV4cG9ydF8wMDE
IQ29weV8wMDIAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-bigger .e-tbar-btn .tb-icons {


font-size: 18px;
}
.e-cut-icon:before {
content: "\e719"
}
.e-copy-icon:before {
content: "\e721"
}
.e-paste-icon:before {
content: "\e712"
}
.e-color-icon:before {
content: "\e703";
}

Copyright © 2001 -2024 Syncfusion Inc. 57


Toolbar Template configuration in React Toolbar component

.e-bold-icon:before {
content: "\e71a"
}
.e-underline-icon:before {
content: "\e706";
}
.e-clear-icon:before {
content: "\e70d"
}
.e-italic-icon:before {
content: "\e710"
}
.e-ascending-icon:before {
content: "\e70f";
}
.e-descending-icon:before {
content: "\e707";
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>

Template configuration in React Toolbar component


The Toolbar can be rendered by item based collection and by HTML elements. To render it based on the
given HTML element, use id as the target property. To render the Toolbar, follow the below structure of
the HTML elements:
`
<div id='template_toolbar'> --> Root Toolbar Element
<div> --> Toolbar Items Container
<div> --> Toolbar Item Element
</div>
</div>
</div>
`
Here, the template ID, #template_toolbar is directly appended to the Toolbar.
INDEX.JSX
import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
return (<ToolbarComponent>
<div id='template_toolbar'>

Copyright © 2001 -2024 Syncfusion Inc. 58


Toolbar Template configuration in React Toolbar component

<div> <button className="e-btn e-tbar-btn">Cut</button> </div>


<div> <button className="e-btn e-tbar-btn">Copy</button> </div>
<div> <button className="e-btn e-tbar-btn">Paste</button> </div>
<div className="e-separator"/>
<div> <button className="e-btn e-tbar-btn">Bold</button> </div>
<div> <button className="e-btn e-tbar-btn">Italic</button> </div>
</div>
</ToolbarComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
return (
<ToolbarComponent>
<div id='template_toolbar'>
<div> <button className="e-btn e-tbar-btn">Cut</button> </div>
<div> <button className="e-btn e-tbar-btn">Copy</button> </div>
<div> <button className="e-btn e-tbar-btn">Paste</button> </div>
<div className="e-separator" />
<div> <button className="e-btn e-tbar-btn">Bold</button> </div>
<div> <button className="e-btn e-tbar-btn">Italic</button> </div>
</div>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<link
href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component
.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#loader {

Copyright © 2001 -2024 Syncfusion Inc. 59


Toolbar Template configuration in React Toolbar component

color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom_bold .e-tbar-btn-text {
font-weight: 900;
}
.custom_italic .e-tbar-btn-text {
font-style: italic;
}
.custom_underline .e-tbar-btn-text {
text-decoration: underline red;
}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
@font-face {
font-family: 'Material_toolbar';
src: url(data:application/x-font-ttf;charset=utf-
8;base64,AAEAAAAKAIAAAwAgT1MvMj1tShMAAAEoAAAAVmNtYXDoMOjqAAACDAAAAHhnbHlmIuy
19QAAAswAACNMaGVhZA6okZMAAADQAAAANmhoZWEIUQQkAAAArAAAACRobXR4jAAAAAAAAYAAAAC
MbG9jYYc0kUIAAAKEAAAASG1heHABOwG8AAABCAAAACBuYW1lx/RZbQAAJhgAAAKRcG9zdJZeEVU
AACisAAACGAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAIwABAAAAAQAAAQsu/F8
PPPUACwQAAAAAANXLJlEAAAAA1csmUQAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAjAbAADgAAAAA
AAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnIQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAA
EAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQ
AAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAA
AAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGQAAAAEAAQAAQAA5yH//wA
A5wD//wAAAAEABAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABY
AFwAYABkAGgAbABwAHQAeAB8AIAAhACIAAAAAADIAjgFwAfgCIAKYAxIDSAO2BRYFMAVcBnIGugb
2ByoHQgguCNYJRgn6CiQKiAquCsgMFgzADOYNzg7WDvAQyBEyEaYABwAAAAAD9APzAAMABwAKAA4
AEgAVABkAADchNSElITUhJTkBBSE1ITUhNSEFFxEnITUhDAPo/BgBtgIy/c7+SgG2AjL9zgIy/c7
+Svr6A+j8GAxefV67Pl19Xvr6AfScXgAAAAIAAAAAA/QD9AAEAEgAACUhNxc3AREfDyE/DxEvDyE
PDgOF/PbDisP9gQEBAwQEBgYICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsL/PYLCwsKCgkICAgGBgQEAwGz+qf6AYX89gsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsLAwoLCwsKCgkICAgGBgQEAwEBAQEDBAQGBggICAkKCgsLAAACAAAAAAPzA/QAQAC/AAABFQ8
PLw8/Dx8OAQ8ELwErAQ8FFR8FBxcPAxUfBzsBNx8LOwI/Cx8BOwE/Bj0BLwQ/Aic/BC8HKwEHLws
rAg8FArIBAgUGBwkKDAwODxAQERITEhIREQ8PDgwMCgkHBgUCAQECBQYHCQoMDA4PDxEREhITEhE
QEA8ODAwKCQcGBQL+zxUWFhUWfwUFBAUDBANqAgEBAgIDbgMDbwMCAQEBAmkDBAQEBQSEFBYWFxQ
CAgIDBAQEBcwFBAQEAwICAhQXFRYVgAQFBQQEAwNoAgEBAgIDcAEBAQNvAgIBAQEBA2gDBAQFBAW
DFBYWFxIBAgMDAwQFBcwFBAQDBAICAgAJCRIQEBAODgwLCgkHBgQDAQEDBAYHCQoLDA4OEBAQEhI
SEhAQEA4ODAsKCQcGBAMBAQMEBgcJCgsMDg4QEBASAc6ECwwNDjIBAQICA7QEBQQFBAMEUjIyVgM
EBAQFBAWwAwICATMODQwLhAQEBAMCAgECAgIDBAMEhAsMDQ4yAQECAgOwBAQFBAUEAwRSDAwaMlY
DBAQEBQQFsAMCAgEzDg0MC4QEAwQDAgICAgICAwQDAAAAAAMAAAAAA/MD2AAyADUAaQAAJRUfDTs
BPw41LwgPBwMhAScXAQ8GHQEfBQEfBjsBPwYBPwYvBwEDFgIDBAQGBgcICQkKCgsLCwsLCwoKCQg

Copyright © 2001 -2024 Syncfusion Inc. 60


Toolbar Template configuration in React Toolbar component

ICAYGBAQDAQEDBAcMCQoLFCMtFQoJCQcFBHv96gEL04X+4gYFBAQCAgICAgIEBAUBNwcHBwgHCAc
IBwgHCAgHBwYBOAUEAwMCAQEBAQIDAwQFBv4PlwsLCwoKCQkIBwYGBAQDAgIDBAQGBgcICQkKCgs
LCwcPEBAYEBAPHCk3HRAQEBAQEAEIAQrThf7iBgcIBwgHCAgICAgHBwcH/skGBQQEAwIBAQIDBAQ
FBgE3BwcHBwgICAgHCAgHCAcGAfEABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITchNSEnITUhNyE
1ISchNSEMA+j8GN4CLP3U3gPo/BjeAiz91N4D6PwYDF6AW5xefVqAXgAAAAAEAAAAAAP0A/QACQA
TABcAWwAAAQcVMzcXMzUjLwEjFTMbATM1IwElESERBxEfDyE/DxEvDyEPDgFro8ObnnROxOp0nZv
qTij+8AGW/NReAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgo
LCwv89gsLCwoKCQgICAYGBAQDAQENAyOWliO4BSUBK/7VJQFSffzUAywR/PYLCwsKCgkICAgGBgQ
EAwEBAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgoLCwAAAAA
CAAAAAAOWA/QAAwBpAAA3ITUhExUfHTsBPx01ESMRDw8vDxEjagMs/NRKAgIDAwUFBgcHCAkJCgs
LCwwNDQ0ODw4PEA8QERAREREREBEQDxAPDg8ODQ0NDAsLCwoJCQgHBwYFBQMDAgKLAQMFBggKCww
ODxARERMTFBQTExEREA8ODAsFCQcGBAKLDH0BsBEREREQEA8QDg8ODg0MDQsLCwoJCQgHBwYFBQQ
DAgEBAgMEBQUGBggICQkKCgsMDAwNDg4ODw8PEBAQERERAb7+RRQTEhIREA8NDQsKCAYFAwEBAwU
GCAoLDQ0PCBASEhMTAcUABQAAAAAD9APXAAIABQANABcAGgAAJTcjASM3ATM3MxczAyMFIQEVITU
hATUhJTMnAgJx4wG/vl/+/Fot+i1a3FD9RgEg/t4Bov7UAST+aAF/6XQobQET//47eHgCM07+XD5
NAaQ/UHMAAAAAAQAAAAAD9ALoAF8AABMhJz8PHxo3Lx8PDycMAbWyDQ0ODg8PDxAQEBERERIREhA
QEBAQDw8PDw4ODg0NDQwMFxYTEhAHBgYGBXUHBwgJCQoLCwwNDQ0PDg8QEBERERITEhMUExQVFBU
VFRgYFxcXFhYVFhQUFBMTEhGwARi6CwsJCggICAYGBgQEAwIBAQEBAgIDBAQFBQYHBwgICQkKFRY
YGhsODg8PDygUFBMTEhISERARDw8PDg0NDAsLCgoICAgGBgQEAwMBAQECAwQFBgcJCQoLDA0ODg+
6AAYAAAAAA/MD9AA/AGsAqwDrAO8BMwAAARUfDTsBPw09AS8ODw4lHwk7AT8IPQEvByMnByMPByU
fDz8PLw8PDiUfDz8OPQEvDSsBDw0lESERBxEfDyE/DxEvDyEPDgHhAgMFBQYHCAkKCgsLDA0NDA0
MCwsKCgkIBwYFBQMCAgMFBQYHCAkKCgsLDA0MDQ0MCwsKCgkIBwYFBQMC/scBAQEFBwgKCwYGBwY
GBgwKCAcFAQEBAQUHCAoMBgYGBwYGCwoIBwUBAQHzAQECBAQEBgYGCAcICQkJCgoJCQgJBwgGBgY
EBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCQgHCAYGBgQEBAIB/qgBAQMEBAYGBwgICQoKCgsLCws
LCgkJCQcHBwUFAwMCAgMDBQUHBwcJCQkKCwsLCwsKCgoJCAgHBgYEBAMBAlD81F4BAQMDBAUGBgc
HCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgYHBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwM
BAWQNDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA0NDAwLCwsJCQgHBwUEAwIBAQIDBAUHBwg
JCQsLCwwMMQYGBgsKCQcEAgEBAgQHCQoLBgYGBwYGCwoJBgUCAQECBQYJCgsGBvMJCgkICAgHBwY
FBQQDAwEBAQEDAwQFBQYHBwgICAkKCQoJCQkICAcGBwUFBAMCAQEBAQIDBAUFBwYHCAgJCQkGCws
KCgoJCAgHBgYEBAMBAQEBAwQEBgYHCAgJCgoKCwsLCwsKCQkJBwcHBQUDAwICAwMFBQcHBwkJCQo
LC9/81AMsA/zaCgkJCQkIBwcGBgUEBAIBAQEBAgQEBQUHBwcICQkJCQoDJgoJCQkJCAcHBwUFBAQ
CAQEBAQIEBAUFBwcHCAkJCQkAAAAAAgAAAAADtQP0AAMACgAANyE1IQEjCQEjESFKA2z8lAEG7AG
cAZzs/qAMfQIK/mQBnAFhAAYAAAAAA/QD8wADAAcACwAPABIAFgAANyE1ISUhNSE1ITUhNSE1KQE
RNwMhNSEMA+j8GAG2AjL9zgIy/c4CMv3O/kr6+gPo/BgMXn1efV19Xv4M+gGWXgAFAAAAAAPzA/M
AJQBpAKgArADwAAABFT8bIw8GBR8PNSMvDT8CJw8OHw8TByMPDBc/AzsBHwUzHwYzLxcjJREhEQc
RHw8hPw8RLw8hDw4CKg8QDw8ODg4NDQwMDAwKCwoKCQgJDw0KCQQDAgLxBAUGBggJC/7WDQ0NDg4
PDw8PEA8QEBAQEAoKCQkJCQgIBgQEBAUDAQEDBKsKCQgIBwYGBQUDAwMBAQEBAQEDAwQEBQYHBwg
ICgoL9g4OHA4ODQ4NDg0NDQwNDKkLDA8HCAkJCAgICA4DEAUFBQMEAu4EBwkKDQ8REwoKCwsMDAw
NDQ4ODg4PDy8KAZP81F4BAQMDBAUGBgcHCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgY
HBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwMBAZz0AgMDBAQFBQYHBwgICQkJCgsLCwsYGhsbDw4PDwo
KCQgIBwaUDAsLCgkIBwcGBQQEAgIBAfEBAwMEBQYIBQcGBw8PEA8ODa0NDQ0ODg4ODw8PDw8PEA8
PEA8PEA8ODw8ODg0ODQ0MAj8BBAMDBAQFBgcHBwkJCqoGBQQBAQICBAMJEAcHCAgJCh0dHRsaGRc
XCgoKCQgICAcGBgYEBQMDBj781AMsA/zaCgkJCQkIBwcGBgUEAwMBAQEBAgQEBQYGBwcICQkJCQo
DJgoJCQkJCAcHBgYFBAQCAQEBAQIEBAUFBwcHCAkJCQkAAgAAAAAD8wPrAB8AMwAAEw8HHww/BBU
hNSEBNwkBPwcvCDYKCAcGBQMCAQECAwUGBwgKrwgJCgoKCgkINQKQ/Xv+20EBPAGOCgkHBgUDAgE
BAgMFBgcJCtMBoQsMDQ0NDg4ODg0ODQ0NDAuvBgUDAQECBAY0I14BJEH+xAGRCwwMDQ0ODg4ODg4
NDQwMC9QABgAAAAAD9AP0AAMADwATAB0AIQAnAAAlITUhIzMVIxUzFSMVMzUjNyE1ISMzBxUzNSM
3NSM3ITUhJzMVMzUjAQYC7v0S+n0/P328vPoC7v0S+nh4vHh4vPoC7v0S+j4/fWpeID4gPvrbXXw
/P3w/u14gvPoAAAAABQAAAAAD9APbAAIABQANABcAGgAAJTcjAyM3ATM3MxczAyMFIQEVITUhATU
hJzMnAgJx4x6+Xv76Wi39LF3fTwFlAST+3AGk/tIBJP5mw+l0JXMBGP/+N3h4AjRQ/lo+TQGpPk5
zAAABAAAAAAOsA/QACwAAATMDIxUhNSMTMzUhAXGd88gCPJ3zyP3EAx79xNbWAjzWAAAGAAAAAAP
0A9QAAwBDAEcAhwCLAMsAACUhNSEHFR8OPw49AS8ODw4TITUhBxUfDTsBPw09AS8ODw4TITUhBxU
fDj8OPQEvDg8OAQYC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgY
HBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQE
CAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgY
GBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAkpeLwgIBwcHBwYFBQUDBAICAQE
BAQICBAMFBQUGBwcHBwgICAgIBwcGBgYFBAQDAwIBAQEBAgMDBAQFBgYGBwcICAFgXS4ICAgHBwY

Copyright © 2001 -2024 Syncfusion Inc. 61


Toolbar Template configuration in React Toolbar component

GBgUEBAMDAgEBAgMDBAQFBgYGBwcICAgICAcHBwcGBQUFAwQCAgEBAQECAgQDBQUFBgcHBwcIAUB
dLggICAcHBgYGBQQEAwMCAQEBAQIDAwQEBQYGBgcHCAgICAgHBwcHBgUFBQMEAgIBAQEBAgIEAwU
FBQYHBwcHCAAAAwAAAAADmQP0AAcAKACNAAABFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw0VERUfDTM
hMz8NNRE1Lw0rAS8OKwEPDQEdAcZb/YQBbAEDBAYHBwkJCQkHBwYEAwEBAwQGBwcJCQkJBwcGBAO
svwkJCQgICAcGBgYEBAMCAgICAwQEBgYGBwgICAkJCQJ8CQkJCAgIBwYGBgQEAwICAgIDBAQGBgY
HCAgICQkJvwMFBQYGBwgICQkJCgoKCwsLCwoKCgkJCQgIBwYGBQUDPoiI/SkC1y4FBQgIBwUEAwE
BAwQFBwgICgkICAcFBQIBAQIFBQcICCQCAgMEBAYGBgcICAgJCQn9KQkJCQgICAcGBgUFBAMCAgI
CAwQFBQYGBwgICAkJCQLXCQkJCAgIBwYGBgQEAwICCgkJCAgIBwYGBQQEAwICAgIDBAQFBgYHCAg
ICQkAAQAAAAAD9ALoAGAAAAExLw8PHxc/Gh8PByERA0QREhMTFBQUFRYWFhcXFxgYFRUVFBUUExQ
TEhMSEREREBAPDg8NDQ0MCwsKCQkIBwd1BQYGBgcQEhMWFwwMDQ0NDg4ODw8PDxAQEBAQEhESERE
QERAQDw8PDg4NDbIBtQIuDw4ODQwLCgkJBwYFBAMCAQEBAwMEBAYGCAgICgoLCwwNDQ4PDw8REBE
SEhITExQUKA8PDw4OGxoYFhUKCQkICAcHBgUFBAQDAgIBAQEBAgMEBAYGBggICAoJCwu6AdAAAAA
OAAAAAAP0A/MAAgAFAAgACwAQABQAFwAbAB4AIQApAC0AMQB1AAABETclFzUXNyMFNyETFQUhEQE
hJRMlMycFMSEnBzcnBxcRBRMDBSUDEy0BEQMlIwUDEQcRHw8hPw8RLw8hDw4CGcj+ZaG3MJb+wM7
+4jQBCv6EAy7+ggEKdP1S3JkBCwEjWemWlvrIATJ0dP7n/up3dwEWAZhy/vQ0/vZyXgEBAwQEBgY
ICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsL/PYLCwsKCgkICAgGBgQ
EAwEBxv7fWSQ730Bky8v+9QNxAYH+f28BHx2ZmcukmTgJywEeP/7n/ud3dwEZARl3Bv5xAR1ycv7
yAYAR/PYLCwsKCgkICAcHBQUEAwEBAQEDBAUFBwcICAkKCgsLCwMKCwsLCgoJCAgHBwUFBAMBAQE
BAwQEBgYIBwkJCgoLCwAAAAAFAAAAAAP0A/MAAwAHAAsADwATAAA3ITUhJSE1ISUhNSElITUhJSE
1IQwD6PwYAVgCkP1w/qgD6PwYAVgCkP1w/qgD6PwYDF6AW5xefV19XgAAAAAKAAAAAAP0A/MAAwA
HAAsADwATABcAGwAfACMARwAAARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1JxE
fByE/BxEvByEPBgOW+j7bP9oDLPo+2z/aAyz6Pts/2l4BAwUGAwgJCgOJCgkJBwYDBAIBAwUGAwg
JCvx3CgkJBwYFAwElvb27u7u7ARrb29vb29v6vLy8vLy8hvyCCwoJBwQGBAIBAwUHBwUJCgOECwo
JBwQGBAIBAwUGCAkKAAAAAAUAAAAAA/QD8wADAAcACwAPABMAADchNSE1ITUhNSE1ITUhNSE1ITU
hDAPo/BgCkP1wA+j8GAKQ/XAD6PwYDF6BV59efVqAXgAAAAADAAAAAAP0A00AAwAHAAsAADchNSE
1ITUhNSE1IQwD6PwYA+j8GAPo/Bizb6Zwpm8AAAAABQAAAAAD9AP0AD8AXwCfAKQBIgAAJQ8PLw8
/Dx8OExUPBSsBLwU9AT8FOwEfBQMPDy8PPw8fEAE1IwUVHw8zPwMXBy8FDw8fDz8PNS8DNwEzNQE
/BS8PDw4BOAEBAwMEBQYGBwgICQkKCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgo
KCgkJCAgHBgYFBAMDAeICAgMDBQUFBQUFAwMCAgICAwMFBQUFBQUDAwIC4QEBAwMEBQYGBwgICQk
KCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAftkAV6W/K4
BAwUHCAoMDQ4PERETExQUCwsVFBN2dgkKCgoVFhQUExMREQ8ODQwKCAcFAwEBAwUHCAoMDQ4PERE
TExQUFBQTExERDw4NDAoIBwUDAQEEBgd2AV6W/ZYFBAMCAwEBAwUHCAoMDQ4PERETExQUFBQTExE
RDw4NDAoIBwUD1AoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgoKCgoKCQkICAcGBgUEAwM
BAQEBAwMEBQYGBwgICQkKCgEiBQUFAwMCAgICAwMFBQUFBQUDAwICAgIDAwUFAScKCgoJCQgIBwY
GBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgqgZAF
eMpYKChQTExERDw4NDAoIBwUDAQEEBgd2dgUEAwIDAQEDBQcICgwNDg8RERMTFBQUFBMTEREPDg0
MCggHBQMBAQMFBwgKDA0ODxERExMUFAsLFRQTdv6iMgJqCQoKChUWFBQTExERDw4NDAoIBwUDAQE
DBQcICgwNDg8RERMTFAADAAAAAANXA7UAIgBFAJMAAAEzHw4PDisBNRMzHw4PDisBNQMhPxEvDz8
PLxghAkgKCgkJCAgHBwYGBAQEAgEBAQEDAwQFBgYHBwgJCAkKCeDACgoJCQgIBwcGBgQEBAIBAQE
BAgQEBAYGBwcICAkJCgrAwAHDDQwMDBcWFRMSEQ8NDAoHBgQBAQIDBAYHBwkKCgsNDA4ODwsLCgo
KCAgIBgYFBQMDAQEBAQECAwQEBAUGDA8QEhQVFgwMDA0NDQ0N/nABogICAwQEBgYGBwgICQkKCQo
KCQgJBwgGBgUFBAMCArsBdwICAwQEBgYGCAcICQkKCQoKCQkIBwgGBgYEBAMCArv9MQEBAQIGCAo
MDg8REhQUFhcYGBERERAQEA4ODgwMDAoJCQcICQkKCgoLDAsMDAwMDQwNDQwNDQwMCwwLCxQUERA
ODQoFAwQDAgEBAQAABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITUhNSE1ITUhNSE1ITUhNSEMA+j
8GAPo/BgD6PwYA+j8GAPo/BgMXn1enF59XX1eAAAAAAEAAAAAA9QD1ADUAAATHx8/DxcRIRcPDy8
fPx8fDzMvHw8eKwECAwQFBggICQoMDA0ODhAQERISExQUFRUWFhcXGBgYGBgXFxcWFhUVFBQTEhI
REIr+ZrsMDA0ODg4PEBAQEBESERISEhIREhEQEQ8QDw8ODg0NDAwLCgoJCQgHBgYEBAQCAQEBAQI
EBAQGBgcICQkKCgsMDA0NDg4PDxAPERAREhESEhwcGxoaGBgWFRQSEQ8OCwp7BQYHCAgJCQoLCww
NDQ4ODg8QEBERERISEhMTFBMUFRQYGBgXFxYWFRUUFBMSEhEQEA4ODQwMCgkICAYFBAMCAgAYGBc
XFxYWFRUUFBMSEhEQEA4ODQ0LCgoICAYFBAMCAQECAwQFBggICgoLDQ0ODhCKAZq7DAsLCgkJCAc
HBQUEAwMBAQEBAgQEBAYGBwgICgkLCwwMDQ0ODg8PDxAREBESERISEhIREhEQERAPDw8ODg0NDAw
LCwkKCAgHBgYEBAQCAQECAwUICQsNDxASExUWFxgaExITERIREBAQDw8ODg0NDAsLCgoJCAcHBgY
EBAMCAQEBAgMEBQYICAoKCw0NDg4QEBESEhMUFBUVFhYXFxcYAAAAAgAAAAAD8gP0AGcA7gAAARU
PGC8YPQE/FzsBHxcFHx8/DxcVATcBIyc/Dj0BLx0rAQ8dAoABAgIDAwQFBQUNDxATExYLCwwMDAw
NDQ0NDQ0NDQwNDAsMCxUUEhAPDQUFBQQDAwMBAQEBAwMDBAUFBQ0PEBIUFQsMCwwNDA0NDQ0NDQ0
NDAwMDAsLFhMTEA8NBQUFBAMDAgIB/Y0BAQMDBAUGBggICQkLCwsNDA4ODg8QEBARERISEhMTExE
REBEQEBAQDw8ODg4ODA0OAR1W/uMuDgoKCQkIBwYGBgQEAwMCAQICAwQFBgcHCAkKCgsMDA0NDg8

Copyright © 2001 -2024 Syncfusion Inc. 62


Toolbar Template configuration in React Toolbar component

PDxAREREREhMSExMTExMSEhIRERAQEA8ODg4MDQsLCwkJCAgGBgUEAwMBAoIODQ0MDQwMDAsLFRQ
SEQ4NBgUEBAQDAgEBAQEBAQIDBAQEBQYNDhESFBULCwwMDA0MDQ0ODQ0NDQwMDAwLCxUUEhEODQY
FBQQDAwICAQECAgMDBAUFBg0OERIUFQsLDAwMDA0NDQ0UEhMSEhIRERAQEA8ODg4NDAsLCwkJCAg
GBgUEBAIBAQEBAgIEBAUFBgcHCAgJCgoSLf7jVgEfDg0NDQ4ODg8PDxAQEBERERITExISEhIRERA
QEA8ODg4NDAwLCgoICQcHBQUEBAICAgIEBAUFBwcJCAoKCwwMDQ4ODg8QEBARERISEhITAAAAAgA
AAAADtQP0AAMACgAANyE1IRMzESERMwFKA2z8lA/zAWjz/lkMfQHN/p0BYwGeAAAAAAUAAAAAA/Q
D9AA/AH8AvwD/Aa8AAAEPDisBLw4/Dx8OBQ8OKwEvDj8PHw4lFQ8OLw49AT8OHw4FFQ8OLw49AT8
OHw4BHx8zPw09AS8MPQE/DjsBPx01Lx8PHgOFAQECAgQEBQUGBgcHCAgJCAkJCAcIBgcGBQUEAwM
CAQEBAQIDAwQFBQYHBggHCAkJCAkIBwgHBgYFBQQEAgIB/Z4BAQIDAwQFBQYGBwgHCAkJCAkIBwg
HBgYFBQQDAwIBAQEBAgMDBAUFBgYHCAcICQgJCQgHCAcGBgUFBAMDAgEBvQECAwQEBAYGBgcHCAg
ICQkICAgHBwcFBgQFAwMCAQECAwMFBAYFBwcHCAgICQkICAgHBwYGBgQEBAMCAf7qAQIDAwUEBgU
HBwcICAgJCQgICAcHBgYGBAQEAwIBAQIDBAQEBgYGBwcICAgJCQgICAcHBwUGBAUDAwIB/kQBAgM
EBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGgkICAgHBwYGBgQEBAMCAQECAwMEBAoEBAMDAgE
CAgIEBAUFBgYHBwgICAlkDg8NDg0ODA0MDAwLCwsKCQoICQcIBgYGBQQEAwMCAQECAwQGBwcJCws
MDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgJTCAk
ICAcHBgYFBQQEAgICAgICBAQFBQYGBwcICAkICQgJBwgGBwYFBQQDAwIBAQEBAgMDBAUFBgcGCAc
JCAkICQgIBwcGBgUFBAQCAgICAgIEBAUFBgYHBwgICQgJCAkHCAYHBgUFBAMDAgEBAQECAwMEBQU
GBwYIBwkI1gkJCAcIBgcGBQUEAwMCAQEBAQIDAwQFBQYHBggHCAkJCAkICAcHBgYFBQQEAgIBAQE
BAgIEBAUFBgYHBwgICQgJCQgHCAYHBgUFBAMDAgEBAQECAwMEBQUGBwYIBwgJCQgJCAgHBwYGBQU
EBAICAQEBAQICBAQFBQYGBwcICAn+xhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAgI
CBAQFBQYGBwcICAkICAgIBwcGBgsGBwYIBwgICQkIBwgGBwYFBQQDAwIBAQECAgMEBQUFBgcHCAg
JCQoKCwoMCwwNDA0NDg0ODg4XFxYWFRUVFBQTExIRERAPDw4NDQsLCgkIBwYFBAMBAQECAwQGBwc
JCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAgAAAAAD9AO1AAgAVAAAARchFSEHFzcnJREVHw4hPw4
9ASMVIREhFTM9AS8OIQ8OAtV1/k0BsHI/4OD8+AICAwQFBQYHBwcICQkJCQHPCQkJCQgHBwcGBQU
EAwICXP4xAc9cAgIDBAUFBgcHBwgJCQkJ/jEJCQkJCAcHBwYFBQQDAgICoHRYdD7e3oD9RAkJCAg
IBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwgICAkJzMwCvMzMCQkICAgHBwYGBQQEAwIBAQEBAgMEBAU
GBgcHCAgICQADAAAAAAOvA/QAAwBHAF0AAAERIREHERUfDTMhMz8OES8OIyEjDw0nETMRITUhIw8
NA1X+DFsCAgMEBQUGBgcICAgJCQkB9AkJCQgICAcGBgUFBAMCAQEBAQIDBAUFBgYHCAgICQkJ/gw
JCQkICAgHBgYFBQQDAgK2WQIT/e0JCQkIBwgHBgYFBAQDAgEC4/2EAnwF/YgJCQgJCAcHBgYGBAQ
DAgICAgMEBAYGBgcHCAkICQkCeAkJCQgICAcGBgUFAwMDAQEDAwMFBQYGBwgICAkJsv2EAnxbAgI
DBAUFBgYHCAgICQkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAQAAEAAQAAAAAAAgAHABEAAQA
AAAAAAwAQABgAAQAAAAAABAAQACgAAQAAAAAABQALADgAAQAAAAAABgAQAEMAAQAAAAAACgAsAFM
AAQAAAAAACwASAH8AAwABBAkAAAACAJEAAwABBAkAAQAgAJMAAwABBAkAAgAOALMAAwABBAkAAwA
gAMEAAwABBAkABAAgAOEAAwABBAkABQAWAQEAAwABBAkABgAgARcAAwABBAkACgBYATcAAwABBAk
ACwAkAY8gdG9vbGJhci1tYXRlcmlhbFJlZ3VsYXJ0b29sYmFyLW1hdGVyaWFsdG9vbGJhci1tYXR
lcmlhbFZlcnNpb24gMS4wdG9vbGJhci1tYXRlcmlhbEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmN
mdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAdABvAG8AbABiAGEAcgAtAG0
AYQB0AGUAcgBpAGEAbABSAGUAZwB1AGwAYQByAHQAbwBvAGwAYgBhAHIALQBtAGEAdABlAHIAaQB
hAGwAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABWAGUAcgBzAGkAbwBuACAAMQAuADA
AdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdAB
lAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHU
AZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAjAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgE
TARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAAQVGV4dF9PdXRkZW50XzAwMQtQaWN
0dXJlXzAwMQxTZXR0aW5nc18wMDEQQ29sb3JfcGlja2VyXzAwMhBBbGlnbl9DZW50ZXJfMDA2CEx
pbmVfMDAxDVVuZGVybGluZV8wMDEMU29ydF9aLUFfMDAxCFVuZG9fMDAxEENoYXJ0X2J1YmJsZV8
wMDELRG93bmxvYWRfMDAPVGV4dF9pbmRlbnRfMDAxEkNoYXJ0X0RvdWdobnV0XzAwMQlDbGVhcl8
wMDINTnVtYmVyaW5nXzAwMQxTb3J0X0EtWl8wMDEKSXRhbGljXzAwMQtCdWxsZXRzXzAwMQlQYXN
0ZV8wMDEIUmVkb18wMDEPQ2hhcnRfcmFkYXJfMDAxD0FsaWduX1JpZ2h0XzAwMQlUYWJsZV8wMDE
OQWxpZ25fTGVmdF8wMDEITWVudV8wMDEHQ3V0XzAwMghCb2xkXzAwMRFBbGlnbl9KdXN0aWZ5XzA
wMQpSZWxvYWRfMDAxClNlYXJjaF8wMDEKVXBsb2FkXzAwMQpEZXNpZ25fMDA1CkV4cG9ydF8wMDE
IQ29weV8wMDIAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-bigger .e-tbar-btn .tb-icons {

Copyright © 2001 -2024 Syncfusion Inc. 63


Toolbar Template configuration in React Toolbar component

font-size: 18px;
}
.e-cut-icon:before {
content: "\e719"
}
.e-copy-icon:before {
content: "\e721"
}
.e-paste-icon:before {
content: "\e712"
}
.e-color-icon:before {
content: "\e703";
}
.e-bold-icon:before {
content: "\e71a"
}
.e-underline-icon:before {
content: "\e706";
}
.e-clear-icon:before {
content: "\e70d"
}
.e-italic-icon:before {
content: "\e710"
}
.e-ascending-icon:before {
content: "\e70f";
}
.e-descending-icon:before {
content: "\e707";
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>

Stateless template
In React, a state is an object that contains data or information about the component. The component
state can be used in React component templates to determine a component’s behavior and render
information to the user. The state can change based on user input, data from a server, the result of a
calculation, or system-generated events.
Whenever the state changes, the component will automatically re-render to display the updated
information to the user. This allows for a dynamic and interactive user experience.
For specific needs of the application, users don’t want to re-render components during state updates.
This can be achieved using the statelessTemplates property.

Copyright © 2001 -2024 Syncfusion Inc. 64


Toolbar Template configuration in React Toolbar component

Toolbar template property are defined in ItemDirective tag of the toolbar component. So, you have to
pass the statelessTemplates property array value as directiveTemplates to prevent the toolbar
component from re-rendering while the state is being updated.
INDEX.JSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useState } from 'react';
import {
ItemDirective,
ItemsDirective,
MenuComponent,
ToolbarComponent,
} from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
const COLORS = ['Red', 'Orange', 'Blue', 'Yellow', 'Brown', 'Black'];
const ELECTRONICS = [
{
text: 'Appliances',
items: [
{
text: 'Kitchen',
items: [
{ text: 'Electric Cookers' },
{ text: 'Coffee Makers' },
{ text: 'Blenders' },
],
},
{
text: 'Washing Machine',
items: [{ text: 'Fully Automatic' }, { text: 'Semi Automatic' }],
},
{
text: 'Air Conditioners',
items: [
{ text: 'Inverter ACs' },
{ text: 'Split ACs' },
{ text: 'Window ACs' },
],
},
],
},
];
const App = () => {
const [counter, setCounter] = useState(0);
const colorsDropdown = new DropDownList({
dataSource: COLORS,
width: 50,
index: 2,
});
const electronicsMenu = () => {
return (<MenuComponent items={ELECTRONICS}></MenuComponent>);
}
return (
<div id='container'>

Copyright © 2001 -2024 Syncfusion Inc. 65


Toolbar Template configuration in React Toolbar component

<ButtonComponent onClick={() => setCounter(counter + 1)}>


Counter {counter}
</ButtonComponent>
<ToolbarComponent statelessTemplates={['directiveTemplates']}>
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
<ItemDirective text="Paste" />
<ItemDirective type="Separator" />
<ItemDirective type="Input" template={colorsDropdown} />
<ItemDirective template={electronicsMenu} />
</ItemsDirective>
</ToolbarComponent>
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

INDEX.TSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useState } from 'react';
import {
ItemDirective,
ItemsDirective,
MenuComponent,
ToolbarComponent,
} from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
const COLORS = ['Red', 'Orange', 'Blue', 'Yellow', 'Brown', 'Black'];
const ELECTRONICS = [
{
text: 'Appliances',
items: [
{
text: 'Kitchen',
items: [
{ text: 'Electric Cookers' },
{ text: 'Coffee Makers' },
{ text: 'Blenders' },
],
},
{
text: 'Washing Machine',
items: [{ text: 'Fully Automatic' }, { text: 'Semi Automatic' }],
},
{
text: 'Air Conditioners',
items: [
{ text: 'Inverter ACs' },
{ text: 'Split ACs' },
{ text: 'Window ACs' },
],

Copyright © 2001 -2024 Syncfusion Inc. 66


Toolbar Template configuration in React Toolbar component

},
],
},
];
const App = () => {
const [counter, setCounter] = useState(0);
const colorsDropdown = new DropDownList({
dataSource: COLORS,
width: 50,
index: 2,
});
const electronicsMenu = (): JSX.Element => {
return (<MenuComponent items={ELECTRONICS}></MenuComponent>);
}
return (
<div id='container'>
<ButtonComponent onClick={() => setCounter(counter + 1)}>
Counter {counter}
</ButtonComponent>
<ToolbarComponent statelessTemplates={['directiveTemplates']}>
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
<ItemDirective text="Paste" />
<ItemDirective type="Separator" />
<ItemDirective type="Input" template={colorsDropdown} />
<ItemDirective template={electronicsMenu} />
</ItemsDirective>
</ToolbarComponent>
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Tab</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/22.2.5/material.css"
rel="stylesheet" />
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<link href="index.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>

Copyright © 2001 -2024 Syncfusion Inc. 67


Toolbar Template configuration in React Toolbar component

</head>
<body>
<div id='container'>
<div id='element'>
<div id='loader'>Loading</div>
</div>
</div>
</body>
</html>

Popup customization
Popup is one of the supported responsive modes of the Toolbar. The Toolbar commands, popup mode
priority and button text mode customizations are achieved in the item based rendering through
property declaration. For more information on popup mode, refer here
The above behavior can also be achieved with template rendering by defining equivalent class names
instead of property declaration.
Equivalent class names listed below are needed to add the Toolbar items' div element.
Priority
Class | Description
e-popup-text | Button Text is only visible in the Popup.
e-toolbar-text | Button Text is only visible on the Toolbar.
INDEX.JSX
import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
return (<ToolbarComponent width="300" overflowMode="Popup">
<div>
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-cut-icon tb-icons e-icons e-btn-
icon"/><div className="e-tbar-btn-text">Cut</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-copy-icon tb-icons e-icons e-btn-
icon"/><div className="e-tbar-btn-text">Copy</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-paste-icon tb-icons e-icons e-btn-
icon"/><div className="e-tbar-btn-text">Paste</div></button> </div>
<div className="e-separator"/>
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-bold-icon tb-icons e-icons e-btn-
icon"/><div className="e-tbar-btn-text">Bold</div></button> </div>
<div className="e-overflow-hide e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-underline-icon tb-icons e-icons e-btn-
icon"/><div className="e-tbar-btn-text">Underline</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-italic-icon tb-icons e-icons e-btn-
icon"/><div className="e-tbar-btn-text">Italic</div></button> </div>

Copyright © 2001 -2024 Syncfusion Inc. 68


Toolbar Template configuration in React Toolbar component

<div className="e-overflow-show e-popup-text"><button className="e-


btn e-tbar-btn"><span className="e-ascending-icon tb-icons e-icons e-btn-
icon"/><div className="e-tbar-btn-text">A-Z Sort</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-descending-icon tb-icons e-icons e-btn-
icon"/><div className="e-tbar-btn-text">Z-A Sort</div></button> </div>
</div>
</ToolbarComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import { ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";
const ReactApp = () => {
return (
<ToolbarComponent width="300" overflowMode="Popup">
<div>
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-cut-icon tb-icons e-icons e-btn-icon"
/><div className="e-tbar-btn-text">Cut</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-copy-icon tb-icons e-icons e-btn-icon"
/><div className="e-tbar-btn-text">Copy</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-paste-icon tb-icons e-icons e-btn-icon"
/><div className="e-tbar-btn-text">Paste</div></button> </div>
<div className="e-separator" />
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-bold-icon tb-icons e-icons e-btn-icon"
/><div className="e-tbar-btn-text">Bold</div></button> </div>
<div className="e-overflow-hide e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-underline-icon tb-icons e-icons e-btn-
icon" /><div className="e-tbar-btn-text">Underline</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-italic-icon tb-icons e-icons e-btn-icon"
/><div className="e-tbar-btn-text">Italic</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-ascending-icon tb-icons e-icons e-btn-
icon" /><div className="e-tbar-btn-text">A-Z Sort</div></button> </div>
<div className="e-overflow-show e-popup-text"><button className="e-
btn e-tbar-btn"><span className="e-descending-icon tb-icons e-icons e-btn-
icon" /><div className="e-tbar-btn-text">Z-A Sort</div></button> </div>
</div>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>

Copyright © 2001 -2024 Syncfusion Inc. 69


Toolbar Template configuration in React Toolbar component

<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<link
href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component
.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom_bold .e-tbar-btn-text {
font-weight: 900;
}
.custom_italic .e-tbar-btn-text {
font-style: italic;
}
.custom_underline .e-tbar-btn-text {
text-decoration: underline red;
}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
@font-face {
font-family: 'Material_toolbar';
src: url(data:application/x-font-ttf;charset=utf-
8;base64,AAEAAAAKAIAAAwAgT1MvMj1tShMAAAEoAAAAVmNtYXDoMOjqAAACDAAAAHhnbHlmIuy
19QAAAswAACNMaGVhZA6okZMAAADQAAAANmhoZWEIUQQkAAAArAAAACRobXR4jAAAAAAAAYAAAAC
MbG9jYYc0kUIAAAKEAAAASG1heHABOwG8AAABCAAAACBuYW1lx/RZbQAAJhgAAAKRcG9zdJZeEVU
AACisAAACGAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAIwABAAAAAQAAAQsu/F8
PPPUACwQAAAAAANXLJlEAAAAA1csmUQAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAjAbAADgAAAAA
AAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnIQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAA
EAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQ

Copyright © 2001 -2024 Syncfusion Inc. 70


Toolbar Template configuration in React Toolbar component

AAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAA
AAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGQAAAAEAAQAAQAA5yH//wA
A5wD//wAAAAEABAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABY
AFwAYABkAGgAbABwAHQAeAB8AIAAhACIAAAAAADIAjgFwAfgCIAKYAxIDSAO2BRYFMAVcBnIGugb
2ByoHQgguCNYJRgn6CiQKiAquCsgMFgzADOYNzg7WDvAQyBEyEaYABwAAAAAD9APzAAMABwAKAA4
AEgAVABkAADchNSElITUhJTkBBSE1ITUhNSEFFxEnITUhDAPo/BgBtgIy/c7+SgG2AjL9zgIy/c7
+Svr6A+j8GAxefV67Pl19Xvr6AfScXgAAAAIAAAAAA/QD9AAEAEgAACUhNxc3AREfDyE/DxEvDyE
PDgOF/PbDisP9gQEBAwQEBgYICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsL/PYLCwsKCgkICAgGBgQEAwGz+qf6AYX89gsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsLAwoLCwsKCgkICAgGBgQEAwEBAQEDBAQGBggICAkKCgsLAAACAAAAAAPzA/QAQAC/AAABFQ8
PLw8/Dx8OAQ8ELwErAQ8FFR8FBxcPAxUfBzsBNx8LOwI/Cx8BOwE/Bj0BLwQ/Aic/BC8HKwEHLws
rAg8FArIBAgUGBwkKDAwODxAQERITEhIREQ8PDgwMCgkHBgUCAQECBQYHCQoMDA4PDxEREhITEhE
QEA8ODAwKCQcGBQL+zxUWFhUWfwUFBAUDBANqAgEBAgIDbgMDbwMCAQEBAmkDBAQEBQSEFBYWFxQ
CAgIDBAQEBcwFBAQEAwICAhQXFRYVgAQFBQQEAwNoAgEBAgIDcAEBAQNvAgIBAQEBA2gDBAQFBAW
DFBYWFxIBAgMDAwQFBcwFBAQDBAICAgAJCRIQEBAODgwLCgkHBgQDAQEDBAYHCQoLDA4OEBAQEhI
SEhAQEA4ODAsKCQcGBAMBAQMEBgcJCgsMDg4QEBASAc6ECwwNDjIBAQICA7QEBQQFBAMEUjIyVgM
EBAQFBAWwAwICATMODQwLhAQEBAMCAgECAgIDBAMEhAsMDQ4yAQECAgOwBAQFBAUEAwRSDAwaMlY
DBAQEBQQFsAMCAgEzDg0MC4QEAwQDAgICAgICAwQDAAAAAAMAAAAAA/MD2AAyADUAaQAAJRUfDTs
BPw41LwgPBwMhAScXAQ8GHQEfBQEfBjsBPwYBPwYvBwEDFgIDBAQGBgcICQkKCgsLCwsLCwoKCQg
ICAYGBAQDAQEDBAcMCQoLFCMtFQoJCQcFBHv96gEL04X+4gYFBAQCAgICAgIEBAUBNwcHBwgHCAc
IBwgHCAgHBwYBOAUEAwMCAQEBAQIDAwQFBv4PlwsLCwoKCQkIBwYGBAQDAgIDBAQGBgcICQkKCgs
LCwcPEBAYEBAPHCk3HRAQEBAQEAEIAQrThf7iBgcIBwgHCAgICAgHBwcH/skGBQQEAwIBAQIDBAQ
FBgE3BwcHBwgICAgHCAgHCAcGAfEABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITchNSEnITUhNyE
1ISchNSEMA+j8GN4CLP3U3gPo/BjeAiz91N4D6PwYDF6AW5xefVqAXgAAAAAEAAAAAAP0A/QACQA
TABcAWwAAAQcVMzcXMzUjLwEjFTMbATM1IwElESERBxEfDyE/DxEvDyEPDgFro8ObnnROxOp0nZv
qTij+8AGW/NReAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgo
LCwv89gsLCwoKCQgICAYGBAQDAQENAyOWliO4BSUBK/7VJQFSffzUAywR/PYLCwsKCgkICAgGBgQ
EAwEBAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgoLCwAAAAA
CAAAAAAOWA/QAAwBpAAA3ITUhExUfHTsBPx01ESMRDw8vDxEjagMs/NRKAgIDAwUFBgcHCAkJCgs
LCwwNDQ0ODw4PEA8QERAREREREBEQDxAPDg8ODQ0NDAsLCwoJCQgHBwYFBQMDAgKLAQMFBggKCww
ODxARERMTFBQTExEREA8ODAsFCQcGBAKLDH0BsBEREREQEA8QDg8ODg0MDQsLCwoJCQgHBwYFBQQ
DAgEBAgMEBQUGBggICQkKCgsMDAwNDg4ODw8PEBAQERERAb7+RRQTEhIREA8NDQsKCAYFAwEBAwU
GCAoLDQ0PCBASEhMTAcUABQAAAAAD9APXAAIABQANABcAGgAAJTcjASM3ATM3MxczAyMFIQEVITU
hATUhJTMnAgJx4wG/vl/+/Fot+i1a3FD9RgEg/t4Bov7UAST+aAF/6XQobQET//47eHgCM07+XD5
NAaQ/UHMAAAAAAQAAAAAD9ALoAF8AABMhJz8PHxo3Lx8PDycMAbWyDQ0ODg8PDxAQEBERERIREhA
QEBAQDw8PDw4ODg0NDQwMFxYTEhAHBgYGBXUHBwgJCQoLCwwNDQ0PDg8QEBERERITEhMUExQVFBU
VFRgYFxcXFhYVFhQUFBMTEhGwARi6CwsJCggICAYGBgQEAwIBAQEBAgIDBAQFBQYHBwgICQkKFRY
YGhsODg8PDygUFBMTEhISERARDw8PDg0NDAsLCgoICAgGBgQEAwMBAQECAwQFBgcJCQoLDA0ODg+
6AAYAAAAAA/MD9AA/AGsAqwDrAO8BMwAAARUfDTsBPw09AS8ODw4lHwk7AT8IPQEvByMnByMPByU
fDz8PLw8PDiUfDz8OPQEvDSsBDw0lESERBxEfDyE/DxEvDyEPDgHhAgMFBQYHCAkKCgsLDA0NDA0
MCwsKCgkIBwYFBQMCAgMFBQYHCAkKCgsLDA0MDQ0MCwsKCgkIBwYFBQMC/scBAQEFBwgKCwYGBwY
GBgwKCAcFAQEBAQUHCAoMBgYGBwYGCwoIBwUBAQHzAQECBAQEBgYGCAcICQkJCgoJCQgJBwgGBgY
EBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCQgHCAYGBgQEBAIB/qgBAQMEBAYGBwgICQoKCgsLCws
LCgkJCQcHBwUFAwMCAgMDBQUHBwcJCQkKCwsLCwsKCgoJCAgHBgYEBAMBAlD81F4BAQMDBAUGBgc
HCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgYHBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwM
BAWQNDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA0NDAwLCwsJCQgHBwUEAwIBAQIDBAUHBwg
JCQsLCwwMMQYGBgsKCQcEAgEBAgQHCQoLBgYGBwYGCwoJBgUCAQECBQYJCgsGBvMJCgkICAgHBwY
FBQQDAwEBAQEDAwQFBQYHBwgICAkKCQoJCQkICAcGBwUFBAMCAQEBAQIDBAUFBwYHCAgJCQkGCws
KCgoJCAgHBgYEBAMBAQEBAwQEBgYHCAgJCgoKCwsLCwsKCQkJBwcHBQUDAwICAwMFBQcHBwkJCQo
LC9/81AMsA/zaCgkJCQkIBwcGBgUEBAIBAQEBAgQEBQUHBwcICQkJCQoDJgoJCQkJCAcHBwUFBAQ
CAQEBAQIEBAUFBwcHCAkJCQkAAAAAAgAAAAADtQP0AAMACgAANyE1IQEjCQEjESFKA2z8lAEG7AG
cAZzs/qAMfQIK/mQBnAFhAAYAAAAAA/QD8wADAAcACwAPABIAFgAANyE1ISUhNSE1ITUhNSE1KQE
RNwMhNSEMA+j8GAG2AjL9zgIy/c4CMv3O/kr6+gPo/BgMXn1efV19Xv4M+gGWXgAFAAAAAAPzA/M
AJQBpAKgArADwAAABFT8bIw8GBR8PNSMvDT8CJw8OHw8TByMPDBc/AzsBHwUzHwYzLxcjJREhEQc
RHw8hPw8RLw8hDw4CKg8QDw8ODg4NDQwMDAwKCwoKCQgJDw0KCQQDAgLxBAUGBggJC/7WDQ0NDg4
PDw8PEA8QEBAQEAoKCQkJCQgIBgQEBAUDAQEDBKsKCQgIBwYGBQUDAwMBAQEBAQEDAwQEBQYHBwg
ICgoL9g4OHA4ODQ4NDg0NDQwNDKkLDA8HCAkJCAgICA4DEAUFBQMEAu4EBwkKDQ8REwoKCwsMDAw

Copyright © 2001 -2024 Syncfusion Inc. 71


Toolbar Template configuration in React Toolbar component

NDQ4ODg4PDy8KAZP81F4BAQMDBAUGBgcHCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgY
HBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwMBAZz0AgMDBAQFBQYHBwgICQkJCgsLCwsYGhsbDw4PDwo
KCQgIBwaUDAsLCgkIBwcGBQQEAgIBAfEBAwMEBQYIBQcGBw8PEA8ODa0NDQ0ODg4ODw8PDw8PEA8
PEA8PEA8ODw8ODg0ODQ0MAj8BBAMDBAQFBgcHBwkJCqoGBQQBAQICBAMJEAcHCAgJCh0dHRsaGRc
XCgoKCQgICAcGBgYEBQMDBj781AMsA/zaCgkJCQkIBwcGBgUEAwMBAQEBAgQEBQYGBwcICQkJCQo
DJgoJCQkJCAcHBgYFBAQCAQEBAQIEBAUFBwcHCAkJCQkAAgAAAAAD8wPrAB8AMwAAEw8HHww/BBU
hNSEBNwkBPwcvCDYKCAcGBQMCAQECAwUGBwgKrwgJCgoKCgkINQKQ/Xv+20EBPAGOCgkHBgUDAgE
BAgMFBgcJCtMBoQsMDQ0NDg4ODg0ODQ0NDAuvBgUDAQECBAY0I14BJEH+xAGRCwwMDQ0ODg4ODg4
NDQwMC9QABgAAAAAD9AP0AAMADwATAB0AIQAnAAAlITUhIzMVIxUzFSMVMzUjNyE1ISMzBxUzNSM
3NSM3ITUhJzMVMzUjAQYC7v0S+n0/P328vPoC7v0S+nh4vHh4vPoC7v0S+j4/fWpeID4gPvrbXXw
/P3w/u14gvPoAAAAABQAAAAAD9APbAAIABQANABcAGgAAJTcjAyM3ATM3MxczAyMFIQEVITUhATU
hJzMnAgJx4x6+Xv76Wi39LF3fTwFlAST+3AGk/tIBJP5mw+l0JXMBGP/+N3h4AjRQ/lo+TQGpPk5
zAAABAAAAAAOsA/QACwAAATMDIxUhNSMTMzUhAXGd88gCPJ3zyP3EAx79xNbWAjzWAAAGAAAAAAP
0A9QAAwBDAEcAhwCLAMsAACUhNSEHFR8OPw49AS8ODw4TITUhBxUfDTsBPw09AS8ODw4TITUhBxU
fDj8OPQEvDg8OAQYC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgY
HBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQE
CAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgY
GBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAkpeLwgIBwcHBwYFBQUDBAICAQE
BAQICBAMFBQUGBwcHBwgICAgIBwcGBgYFBAQDAwIBAQEBAgMDBAQFBgYGBwcICAFgXS4ICAgHBwY
GBgUEBAMDAgEBAgMDBAQFBgYGBwcICAgICAcHBwcGBQUFAwQCAgEBAQECAgQDBQUFBgcHBwcIAUB
dLggICAcHBgYGBQQEAwMCAQEBAQIDAwQEBQYGBgcHCAgICAgHBwcHBgUFBQMEAgIBAQEBAgIEAwU
FBQYHBwcHCAAAAwAAAAADmQP0AAcAKACNAAABFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw0VERUfDTM
hMz8NNRE1Lw0rAS8OKwEPDQEdAcZb/YQBbAEDBAYHBwkJCQkHBwYEAwEBAwQGBwcJCQkJBwcGBAO
svwkJCQgICAcGBgYEBAMCAgICAwQEBgYGBwgICAkJCQJ8CQkJCAgIBwYGBgQEAwICAgIDBAQGBgY
HCAgICQkJvwMFBQYGBwgICQkJCgoKCwsLCwoKCgkJCQgIBwYGBQUDPoiI/SkC1y4FBQgIBwUEAwE
BAwQFBwgICgkICAcFBQIBAQIFBQcICCQCAgMEBAYGBgcICAgJCQn9KQkJCQgICAcGBgUFBAMCAgI
CAwQFBQYGBwgICAkJCQLXCQkJCAgIBwYGBgQEAwICCgkJCAgIBwYGBQQEAwICAgIDBAQFBgYHCAg
ICQkAAQAAAAAD9ALoAGAAAAExLw8PHxc/Gh8PByERA0QREhMTFBQUFRYWFhcXFxgYFRUVFBUUExQ
TEhMSEREREBAPDg8NDQ0MCwsKCQkIBwd1BQYGBgcQEhMWFwwMDQ0NDg4ODw8PDxAQEBAQEhESERE
QERAQDw8PDg4NDbIBtQIuDw4ODQwLCgkJBwYFBAMCAQEBAwMEBAYGCAgICgoLCwwNDQ4PDw8REBE
SEhITExQUKA8PDw4OGxoYFhUKCQkICAcHBgUFBAQDAgIBAQEBAgMEBAYGBggICAoJCwu6AdAAAAA
OAAAAAAP0A/MAAgAFAAgACwAQABQAFwAbAB4AIQApAC0AMQB1AAABETclFzUXNyMFNyETFQUhEQE
hJRMlMycFMSEnBzcnBxcRBRMDBSUDEy0BEQMlIwUDEQcRHw8hPw8RLw8hDw4CGcj+ZaG3MJb+wM7
+4jQBCv6EAy7+ggEKdP1S3JkBCwEjWemWlvrIATJ0dP7n/up3dwEWAZhy/vQ0/vZyXgEBAwQEBgY
ICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsL/PYLCwsKCgkICAgGBgQ
EAwEBxv7fWSQ730Bky8v+9QNxAYH+f28BHx2ZmcukmTgJywEeP/7n/ud3dwEZARl3Bv5xAR1ycv7
yAYAR/PYLCwsKCgkICAcHBQUEAwEBAQEDBAUFBwcICAkKCgsLCwMKCwsLCgoJCAgHBwUFBAMBAQE
BAwQEBgYIBwkJCgoLCwAAAAAFAAAAAAP0A/MAAwAHAAsADwATAAA3ITUhJSE1ISUhNSElITUhJSE
1IQwD6PwYAVgCkP1w/qgD6PwYAVgCkP1w/qgD6PwYDF6AW5xefV19XgAAAAAKAAAAAAP0A/MAAwA
HAAsADwATABcAGwAfACMARwAAARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1JxE
fByE/BxEvByEPBgOW+j7bP9oDLPo+2z/aAyz6Pts/2l4BAwUGAwgJCgOJCgkJBwYDBAIBAwUGAwg
JCvx3CgkJBwYFAwElvb27u7u7ARrb29vb29v6vLy8vLy8hvyCCwoJBwQGBAIBAwUHBwUJCgOECwo
JBwQGBAIBAwUGCAkKAAAAAAUAAAAAA/QD8wADAAcACwAPABMAADchNSE1ITUhNSE1ITUhNSE1ITU
hDAPo/BgCkP1wA+j8GAKQ/XAD6PwYDF6BV59efVqAXgAAAAADAAAAAAP0A00AAwAHAAsAADchNSE
1ITUhNSE1IQwD6PwYA+j8GAPo/Bizb6Zwpm8AAAAABQAAAAAD9AP0AD8AXwCfAKQBIgAAJQ8PLw8
/Dx8OExUPBSsBLwU9AT8FOwEfBQMPDy8PPw8fEAE1IwUVHw8zPwMXBy8FDw8fDz8PNS8DNwEzNQE
/BS8PDw4BOAEBAwMEBQYGBwgICQkKCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgo
KCgkJCAgHBgYFBAMDAeICAgMDBQUFBQUFAwMCAgICAwMFBQUFBQUDAwIC4QEBAwMEBQYGBwgICQk
KCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAftkAV6W/K4
BAwUHCAoMDQ4PERETExQUCwsVFBN2dgkKCgoVFhQUExMREQ8ODQwKCAcFAwEBAwUHCAoMDQ4PERE
TExQUFBQTExERDw4NDAoIBwUDAQEEBgd2AV6W/ZYFBAMCAwEBAwUHCAoMDQ4PERETExQUFBQTExE
RDw4NDAoIBwUD1AoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgoKCgoKCQkICAcGBgUEAwM
BAQEBAwMEBQYGBwgICQkKCgEiBQUFAwMCAgICAwMFBQUFBQUDAwICAgIDAwUFAScKCgoJCQgIBwY
GBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgqgZAF
eMpYKChQTExERDw4NDAoIBwUDAQEEBgd2dgUEAwIDAQEDBQcICgwNDg8RERMTFBQUFBMTEREPDg0
MCggHBQMBAQMFBwgKDA0ODxERExMUFAsLFRQTdv6iMgJqCQoKChUWFBQTExERDw4NDAoIBwUDAQE
DBQcICgwNDg8RERMTFAADAAAAAANXA7UAIgBFAJMAAAEzHw4PDisBNRMzHw4PDisBNQMhPxEvDz8

Copyright © 2001 -2024 Syncfusion Inc. 72


Toolbar Template configuration in React Toolbar component

PLxghAkgKCgkJCAgHBwYGBAQEAgEBAQEDAwQFBgYHBwgJCAkKCeDACgoJCQgIBwcGBgQEBAIBAQE
BAgQEBAYGBwcICAkJCgrAwAHDDQwMDBcWFRMSEQ8NDAoHBgQBAQIDBAYHBwkKCgsNDA4ODwsLCgo
KCAgIBgYFBQMDAQEBAQECAwQEBAUGDA8QEhQVFgwMDA0NDQ0N/nABogICAwQEBgYGBwgICQkKCQo
KCQgJBwgGBgUFBAMCArsBdwICAwQEBgYGCAcICQkKCQoKCQkIBwgGBgYEBAMCArv9MQEBAQIGCAo
MDg8REhQUFhcYGBERERAQEA4ODgwMDAoJCQcICQkKCgoLDAsMDAwMDQwNDQwNDQwMCwwLCxQUERA
ODQoFAwQDAgEBAQAABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITUhNSE1ITUhNSE1ITUhNSEMA+j
8GAPo/BgD6PwYA+j8GAPo/BgMXn1enF59XX1eAAAAAAEAAAAAA9QD1ADUAAATHx8/DxcRIRcPDy8
fPx8fDzMvHw8eKwECAwQFBggICQoMDA0ODhAQERISExQUFRUWFhcXGBgYGBgXFxcWFhUVFBQTEhI
REIr+ZrsMDA0ODg4PEBAQEBESERISEhIREhEQEQ8QDw8ODg0NDAwLCgoJCQgHBgYEBAQCAQEBAQI
EBAQGBgcICQkKCgsMDA0NDg4PDxAPERAREhESEhwcGxoaGBgWFRQSEQ8OCwp7BQYHCAgJCQoLCww
NDQ4ODg8QEBERERISEhMTFBMUFRQYGBgXFxYWFRUUFBMSEhEQEA4ODQwMCgkICAYFBAMCAgAYGBc
XFxYWFRUUFBMSEhEQEA4ODQ0LCgoICAYFBAMCAQECAwQFBggICgoLDQ0ODhCKAZq7DAsLCgkJCAc
HBQUEAwMBAQEBAgQEBAYGBwgICgkLCwwMDQ0ODg8PDxAREBESERISEhIREhEQERAPDw8ODg0NDAw
LCwkKCAgHBgYEBAQCAQECAwUICQsNDxASExUWFxgaExITERIREBAQDw8ODg0NDAsLCgoJCAcHBgY
EBAMCAQEBAgMEBQYICAoKCw0NDg4QEBESEhMUFBUVFhYXFxcYAAAAAgAAAAAD8gP0AGcA7gAAARU
PGC8YPQE/FzsBHxcFHx8/DxcVATcBIyc/Dj0BLx0rAQ8dAoABAgIDAwQFBQUNDxATExYLCwwMDAw
NDQ0NDQ0NDQwNDAsMCxUUEhAPDQUFBQQDAwMBAQEBAwMDBAUFBQ0PEBIUFQsMCwwNDA0NDQ0NDQ0
NDAwMDAsLFhMTEA8NBQUFBAMDAgIB/Y0BAQMDBAUGBggICQkLCwsNDA4ODg8QEBARERISEhMTExE
REBEQEBAQDw8ODg4ODA0OAR1W/uMuDgoKCQkIBwYGBgQEAwMCAQICAwQFBgcHCAkKCgsMDA0NDg8
PDxAREREREhMSExMTExMSEhIRERAQEA8ODg4MDQsLCwkJCAgGBgUEAwMBAoIODQ0MDQwMDAsLFRQ
SEQ4NBgUEBAQDAgEBAQEBAQIDBAQEBQYNDhESFBULCwwMDA0MDQ0ODQ0NDQwMDAwLCxUUEhEODQY
FBQQDAwICAQECAgMDBAUFBg0OERIUFQsLDAwMDA0NDQ0UEhMSEhIRERAQEA8ODg4NDAsLCwkJCAg
GBgUEBAIBAQEBAgIEBAUFBgcHCAgJCgoSLf7jVgEfDg0NDQ4ODg8PDxAQEBERERITExISEhIRERA
QEA8ODg4NDAwLCgoICQcHBQUEBAICAgIEBAUFBwcJCAoKCwwMDQ4ODg8QEBARERISEhITAAAAAgA
AAAADtQP0AAMACgAANyE1IRMzESERMwFKA2z8lA/zAWjz/lkMfQHN/p0BYwGeAAAAAAUAAAAAA/Q
D9AA/AH8AvwD/Aa8AAAEPDisBLw4/Dx8OBQ8OKwEvDj8PHw4lFQ8OLw49AT8OHw4FFQ8OLw49AT8
OHw4BHx8zPw09AS8MPQE/DjsBPx01Lx8PHgOFAQECAgQEBQUGBgcHCAgJCAkJCAcIBgcGBQUEAwM
CAQEBAQIDAwQFBQYHBggHCAkJCAkIBwgHBgYFBQQEAgIB/Z4BAQIDAwQFBQYGBwgHCAkJCAkIBwg
HBgYFBQQDAwIBAQEBAgMDBAUFBgYHCAcICQgJCQgHCAcGBgUFBAMDAgEBvQECAwQEBAYGBgcHCAg
ICQkICAgHBwcFBgQFAwMCAQECAwMFBAYFBwcHCAgICQkICAgHBwYGBgQEBAMCAf7qAQIDAwUEBgU
HBwcICAgJCQgICAcHBgYGBAQEAwIBAQIDBAQEBgYGBwcICAgJCQgICAcHBwUGBAUDAwIB/kQBAgM
EBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGgkICAgHBwYGBgQEBAMCAQECAwMEBAoEBAMDAgE
CAgIEBAUFBgYHBwgICAlkDg8NDg0ODA0MDAwLCwsKCQoICQcIBgYGBQQEAwMCAQECAwQGBwcJCws
MDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgJTCAk
ICAcHBgYFBQQEAgICAgICBAQFBQYGBwcICAkICQgJBwgGBwYFBQQDAwIBAQEBAgMDBAUFBgcGCAc
JCAkICQgIBwcGBgUFBAQCAgICAgIEBAUFBgYHBwgICQgJCAkHCAYHBgUFBAMDAgEBAQECAwMEBQU
GBwYIBwkI1gkJCAcIBgcGBQUEAwMCAQEBAQIDAwQFBQYHBggHCAkJCAkICAcHBgYFBQQEAgIBAQE
BAgIEBAUFBgYHBwgICQgJCQgHCAYHBgUFBAMDAgEBAQECAwMEBQUGBwYIBwgJCQgJCAgHBwYGBQU
EBAICAQEBAQICBAQFBQYGBwcICAn+xhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAgI
CBAQFBQYGBwcICAkICAgIBwcGBgsGBwYIBwgICQkIBwgGBwYFBQQDAwIBAQECAgMEBQUFBgcHCAg
JCQoKCwoMCwwNDA0NDg0ODg4XFxYWFRUVFBQTExIRERAPDw4NDQsLCgkIBwYFBAMBAQECAwQGBwc
JCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAgAAAAAD9AO1AAgAVAAAARchFSEHFzcnJREVHw4hPw4
9ASMVIREhFTM9AS8OIQ8OAtV1/k0BsHI/4OD8+AICAwQFBQYHBwcICQkJCQHPCQkJCQgHBwcGBQU
EAwICXP4xAc9cAgIDBAUFBgcHBwgJCQkJ/jEJCQkJCAcHBwYFBQQDAgICoHRYdD7e3oD9RAkJCAg
IBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwgICAkJzMwCvMzMCQkICAgHBwYGBQQEAwIBAQEBAgMEBAU
GBgcHCAgICQADAAAAAAOvA/QAAwBHAF0AAAERIREHERUfDTMhMz8OES8OIyEjDw0nETMRITUhIw8
NA1X+DFsCAgMEBQUGBgcICAgJCQkB9AkJCQgICAcGBgUFBAMCAQEBAQIDBAUFBgYHCAgICQkJ/gw
JCQkICAgHBgYFBQQDAgK2WQIT/e0JCQkIBwgHBgYFBAQDAgEC4/2EAnwF/YgJCQgJCAcHBgYGBAQ
DAgICAgMEBAYGBgcHCAkICQkCeAkJCQgICAcGBgUFAwMDAQEDAwMFBQYGBwgICAkJsv2EAnxbAgI
DBAUFBgYHCAgICQkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAQAAEAAQAAAAAAAgAHABEAAQA
AAAAAAwAQABgAAQAAAAAABAAQACgAAQAAAAAABQALADgAAQAAAAAABgAQAEMAAQAAAAAACgAsAFM
AAQAAAAAACwASAH8AAwABBAkAAAACAJEAAwABBAkAAQAgAJMAAwABBAkAAgAOALMAAwABBAkAAwA
gAMEAAwABBAkABAAgAOEAAwABBAkABQAWAQEAAwABBAkABgAgARcAAwABBAkACgBYATcAAwABBAk
ACwAkAY8gdG9vbGJhci1tYXRlcmlhbFJlZ3VsYXJ0b29sYmFyLW1hdGVyaWFsdG9vbGJhci1tYXR
lcmlhbFZlcnNpb24gMS4wdG9vbGJhci1tYXRlcmlhbEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmN
mdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAdABvAG8AbABiAGEAcgAtAG0
AYQB0AGUAcgBpAGEAbABSAGUAZwB1AGwAYQByAHQAbwBvAGwAYgBhAHIALQBtAGEAdABlAHIAaQB

Copyright © 2001 -2024 Syncfusion Inc. 73


Toolbar Template configuration in React Toolbar component

hAGwAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABWAGUAcgBzAGkAbwBuACAAMQAuADA
AdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdAB
lAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHU
AZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAjAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgE
TARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAAQVGV4dF9PdXRkZW50XzAwMQtQaWN
0dXJlXzAwMQxTZXR0aW5nc18wMDEQQ29sb3JfcGlja2VyXzAwMhBBbGlnbl9DZW50ZXJfMDA2CEx
pbmVfMDAxDVVuZGVybGluZV8wMDEMU29ydF9aLUFfMDAxCFVuZG9fMDAxEENoYXJ0X2J1YmJsZV8
wMDELRG93bmxvYWRfMDAPVGV4dF9pbmRlbnRfMDAxEkNoYXJ0X0RvdWdobnV0XzAwMQlDbGVhcl8
wMDINTnVtYmVyaW5nXzAwMQxTb3J0X0EtWl8wMDEKSXRhbGljXzAwMQtCdWxsZXRzXzAwMQlQYXN
0ZV8wMDEIUmVkb18wMDEPQ2hhcnRfcmFkYXJfMDAxD0FsaWduX1JpZ2h0XzAwMQlUYWJsZV8wMDE
OQWxpZ25fTGVmdF8wMDEITWVudV8wMDEHQ3V0XzAwMghCb2xkXzAwMRFBbGlnbl9KdXN0aWZ5XzA
wMQpSZWxvYWRfMDAxClNlYXJjaF8wMDEKVXBsb2FkXzAwMQpEZXNpZ25fMDA1CkV4cG9ydF8wMDE
IQ29weV8wMDIAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-bigger .e-tbar-btn .tb-icons {


font-size: 18px;
}
.e-cut-icon:before {
content: "\e719"
}
.e-copy-icon:before {
content: "\e721"
}
.e-paste-icon:before {
content: "\e712"
}
.e-color-icon:before {
content: "\e703";
}
.e-bold-icon:before {
content: "\e71a"
}
.e-underline-icon:before {
content: "\e706";
}
.e-clear-icon:before {
content: "\e70d"
}
.e-italic-icon:before {
content: "\e710"
}
.e-ascending-icon:before {
content: "\e70f";
}
.e-descending-icon:before {
content: "\e707";
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>

Copyright © 2001 -2024 Syncfusion Inc. 74


Toolbar Template configuration in React Toolbar component

</body>
</html>

Integrate menu component


You can integrate menu component as toolbar item in Toolbar using template property. Menu can be
populated with items as needed.
INDEX.JSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ToolbarComponent, MenuComponent, ItemsDirective, ItemDirective }
from '@syncfusion/ej2-react-navigations';
const data = [
{
text: 'Appliances',
items: [
{
text: 'Kitchen',
items: [
{ text: 'Electric Cookers' },
{ text: 'Coffee Makers' },
{ text: 'Blenders' },
],
},
{
text: 'Washing Machine',
items: [{ text: 'Fully Automatic' }, { text: 'Semi
Automatic' }],
},
{
text: 'Air Conditioners',
items: [
{ text: 'Inverter ACs' },
{ text: 'Split ACs' },
{ text: 'Window ACs' },
],
},
],
},
{
text: 'Accessories',
items: [
{
text: 'Mobile',
items: [
{ text: 'Headphones' },
{ text: 'Memory Cards' },
{ text: 'Power Banks' },
],
},
{
text: 'Computer',
items: [
{ text: 'Pendrives' },
{ text: 'External Hard Disks' },

Copyright © 2001 -2024 Syncfusion Inc. 75


Toolbar Template configuration in React Toolbar component

{ text: 'Monitors' },
],
},
],
},
{
text: 'Fashion',
items: [
{
text: 'Men',
items: [
{ text: 'Shirts' },
{ text: 'Jackets' },
{ text: 'Track Suits' },
],
},
{
text: 'Women',
items: [{ text: 'Kurtas' }, { text: 'Salwars' }, { text:
'Sarees' }],
},
],
},
{
text: 'Home & Living',
items: [
{
text: 'Furniture',
items: [
{ text: 'Beds' },
{ text: 'Mattresses' },
{ text: 'Dining Tables' },
],
},
{
text: 'Decor',
items: [
{ text: 'Clocks' },
{ text: 'Wall Decals' },
{ text: 'Paintings' },
],
},
],
},
];
const App = () => {
const menuTemplate = () => {
return (<MenuComponent items={data}></MenuComponent>);
}
return (<div id='container'>
<ToolbarComponent id="toolbar">
<ItemsDirective>
<ItemDirective text="Cut"/>
<ItemDirective text="Copy"/>
<ItemDirective template={menuTemplate}/>
<ItemDirective text="Paste"/>
</ItemsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 76


Toolbar Template configuration in React Toolbar component

</ToolbarComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

INDEX.TSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ToolbarComponent, MenuComponent, ItemsDirective, ItemDirective }
from '@syncfusion/ej2-react-navigations';
const data = [
{
text: 'Appliances',
items: [
{
text: 'Kitchen',
items: [
{ text: 'Electric Cookers' },
{ text: 'Coffee Makers' },
{ text: 'Blenders' },
],
},
{
text: 'Washing Machine',
items: [{ text: 'Fully Automatic' }, { text: 'Semi Automatic' }],
},
{
text: 'Air Conditioners',
items: [
{ text: 'Inverter ACs' },
{ text: 'Split ACs' },
{ text: 'Window ACs' },
],
},
],
},
{
text: 'Accessories',
items: [
{
text: 'Mobile',
items: [
{ text: 'Headphones' },
{ text: 'Memory Cards' },
{ text: 'Power Banks' },
],
},
{
text: 'Computer',
items: [
{ text: 'Pendrives' },
{ text: 'External Hard Disks' },
{ text: 'Monitors' },
],

Copyright © 2001 -2024 Syncfusion Inc. 77


Toolbar Template configuration in React Toolbar component

},
],
},
{
text: 'Fashion',
items: [
{
text: 'Men',
items: [
{ text: 'Shirts' },
{ text: 'Jackets' },
{ text: 'Track Suits' },
],
},
{
text: 'Women',
items: [{ text: 'Kurtas' }, { text: 'Salwars' }, { text: 'Sarees'
}],
},
],
},
{
text: 'Home & Living',
items: [
{
text: 'Furniture',
items: [
{ text: 'Beds' },
{ text: 'Mattresses' },
{ text: 'Dining Tables' },
],
},
{
text: 'Decor',
items: [
{ text: 'Clocks' },
{ text: 'Wall Decals' },
{ text: 'Paintings' },
],
},
],
},
];
const App = () => {
const menuComponentTemplate = () => {
return (<MenuComponent items={data}></MenuComponent>);
}
return (
<div id='container'>
<ToolbarComponent id="toolbar">
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
<ItemDirective template={menuComponentTemplate} />
<ItemDirective text="Paste" />
</ItemsDirective>
</ToolbarComponent>

Copyright © 2001 -2024 Syncfusion Inc. 78


Toolbar Accessibility in React Toolbar component

</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Tab</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<link href="index.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='container'>
<div id='element'>
<div id='loader'>Loading</div>
</div>
</div>
</body>
</html>

Accessibility in React Toolbar component


The Toolbar component has been designed, keeping in mind the WAI-ARIA specifications, and applying
the WAI-ARIA roles, states, and properties along with keyboard support for people who use assistive
devices. WAI-ARIA accessibility support is achieved through attributes like aria-label, and aria-
orientation, It provides information about elements in a document for assistive technology. The
component implements keyboard navigation support by following the WAI-ARIA practices, and has been
tested in major screen readers.
The accessibility compliance for the Toolbar component is outlined below.
| Accessibility Criteria | Compatibility |
| -- | -- |
| WCAG 2.2 Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png"
alt="Yes"> |

Copyright © 2001 -2024 Syncfusion Inc. 79


Toolbar Accessibility in React Toolbar component

| Section 508 Support | <img


src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Screen Reader Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Right-To-Left Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png"
alt="Yes"> |
| Mobile Device Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Keyboard Navigation Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Accessibility Checker Validation | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Axe-core Accessibility Validation | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
<style>
.post .post-content img {
display: inline-block;
margin: 0.5em 0;
}
</style>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All
features of the component meet the requirement.</div>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png"
alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"
alt="No"> - The component does not meet the requirement.</div>
ARIA attributes
Toolbar component is designed by considering WAI-ARIA standard. Toolbar is supported with ARIA
Accessibility which is accessible by on-screen readers, and other assistive technology devices. The
following list of attributes are added in the Toolbar.
| Property | Functionalities |
| --- | --- |
| role="toolbar" | Attribute is set to the ToolBar element describes the actual role of the element. |
| aria-orientation | Attribute is set to the ToolBar element to indicates the ToolBar orientation. Default
value is horizontal. |
| aria-label | Attribute is set to ToolBar element describes the purpose of the set of toolbar. |

Copyright © 2001 -2024 Syncfusion Inc. 80


Toolbar Style in React Toolbar component

| aria-expanded | Attribute is set to the ToolBar Popup element to indicates the expanded state of the
popup.|
| aria-haspopup | Attribute is set to the popup element to indicates the popup mode of the Toolbar.
Default value is false. When popup mode is enabled, attribute value has to be changed to true. |
| aria-disabled | Attribute set to the ToolBar element to indicates the disabled state of the ToolBar. |
Keyboard interaction
Keyboard navigation is enabled by default. Possible keys are
| Key | Description |
|---------------|-------------------------------------------------------------------------------------|
| Left | Focuses the previous element. |
| Right | Focuses the next element. |
| Enter | When focused on a ToolBar command, clicking the key triggers the click of
Toolbar element. When popup drop-down icon is focused, the popup opens. |
| Esc(Escape) | Closes popup. |
| Down | Focuses the next popup element. |
| Up | Focuses the previous popup element. |
| Home | Moves focus to the first Toolbar. |
| End | Moves focus to the last Toolbar. |
| Tab | To Move focus through the interactive elements. |
| Shift + Tab | To Move focus through the interactive elements. |
Ensuring accessibility
The Toolbar component's accessibility levels are ensured through an accessibility-checker and axe-core
software tools during automated testing.
The accessibility compliance of the Toolbar component is shown in the following sample. Open the
sample in a new window to evaluate the accessibility of the Toolbar component with accessibility tools.
See also

• Accessibility in Syncfusion React components

Style in React Toolbar component


The following content provides the exact CSS structure that can be used to modify the control’s
appearance based on user preference.
Customizing Toolbar
Use the following CSS to customize the Toolbar.
`css
.e-toolbar {

Copyright © 2001 -2024 Syncfusion Inc. 81


Toolbar Style in React Toolbar component

border: 5px solid rgb(173, 255, 47);


}
`
Customizing the Toolbar items
Use the following CSS to customize the items of Toolbar.
`css
.e-toolbar .e-toolbar-item {
background: #add8e6;
border: 1px solid #5a70cc;
}
`
Use the following CSS to customize the button in the items of Toolbar.
`css
.e-toolbar .e-tbar-btn {
background: #add8e6;
border: 1px solid #5a70cc;
}
`
Customizing Toolbar's item icon
Use the following CSS to customize the item icon of Toolbar control.
`css
.e-toolbar .e-tbar-btn .e-icons {
background: #185655;
color: #d7f9d4;
}
`
Customizing the hover state of Toolbar control
Use the following CSS to customize the toolbar item when hovering.
`css
.e-toolbar .e-tbar-btn:hover {
background: #c0e3a1;
border: 1px solid green;
}
`

Copyright © 2001 -2024 Syncfusion Inc. 82


Toolbar How To

Customizing selected item of Toolbar control


Use the following CSS to customize the selected toolbar item.
`css
.e-toolbar .e-tbar-btn:focus {
background: #add8e6;
border: 1px solid #5a70cc;
}
`
How To
Set command customization in React Toolbar component
The htmlAttributes property of the Toolbar item is used to set the HTML attributes ('ID', 'class', 'style'
,'role') for the commands.
When style attributes are added, if the same attributes were already present, they will be replaced. This
is not so in the case of class attribute. Classes will be added to the element instead of replacing the
existing ones.
Single or multiple CSS classes can be added to the Toolbar commands using the Toolbar item cssClass
property.
INDEX.JSX
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';
const ReactApp = () => {
let boldAttribute = {
'class': 'custom_bold', 'id': 'itemId'
};
const italicAttribute = { 'class': 'custom_italic' };
const underAttribute = { 'class': 'custom_underline' };
return (<ToolbarComponent width="300">
<ItemsDirective>
<ItemDirective text="Bold" htmlAttributes={boldAttribute}/>
<ItemDirective text="Italic" htmlAttributes={italicAttribute}/>
<ItemDirective text="Underline" htmlAttributes={underAttribute}/>
<ItemDirective type="Separator"/>
<ItemDirective text="Uppercase" cssClass="e-txt-casing"/>
</ItemsDirective>
</ToolbarComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import * as React from "react";
import * as ReactDOM from "react-dom";

Copyright © 2001 -2024 Syncfusion Inc. 83


Toolbar How To

import { ToolbarComponent, ItemsDirective, ItemDirective } from


'@syncfusion/ej2-react-navigations';
const ReactApp = () => {
let boldAttribute: any = {
'class': 'custom_bold', 'id': 'itemId'
};
const italicAttribute: any = { 'class': 'custom_italic' };
const underAttribute: any = { 'class': 'custom_underline' };
return (
<ToolbarComponent width="300" >
<ItemsDirective>
<ItemDirective text="Bold" htmlAttributes={boldAttribute} />
<ItemDirective text="Italic" htmlAttributes={italicAttribute} />
<ItemDirective text="Underline" htmlAttributes={underAttribute} />
<ItemDirective type="Separator" />
<ItemDirective text="Uppercase" cssClass="e-txt-casing" />
</ItemsDirective>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<link
href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component
.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom_bold .e-tbar-btn-text {
font-weight: 900;
}
.custom_italic .e-tbar-btn-text {

Copyright © 2001 -2024 Syncfusion Inc. 84


Toolbar How To

font-style: italic;
}
.custom_underline .e-tbar-btn-text {
text-decoration: underline red;
}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
@font-face {
font-family: 'Material_toolbar';
src: url(data:application/x-font-ttf;charset=utf-
8;base64,AAEAAAAKAIAAAwAgT1MvMj1tShMAAAEoAAAAVmNtYXDoMOjqAAACDAAAAHhnbHlmIuy
19QAAAswAACNMaGVhZA6okZMAAADQAAAANmhoZWEIUQQkAAAArAAAACRobXR4jAAAAAAAAYAAAAC
MbG9jYYc0kUIAAAKEAAAASG1heHABOwG8AAABCAAAACBuYW1lx/RZbQAAJhgAAAKRcG9zdJZeEVU
AACisAAACGAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAIwABAAAAAQAAAQsu/F8
PPPUACwQAAAAAANXLJlEAAAAA1csmUQAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAjAbAADgAAAAA
AAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnIQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAA
EAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQ
AAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAA
AAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGQAAAAEAAQAAQAA5yH//wA
A5wD//wAAAAEABAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABY
AFwAYABkAGgAbABwAHQAeAB8AIAAhACIAAAAAADIAjgFwAfgCIAKYAxIDSAO2BRYFMAVcBnIGugb
2ByoHQgguCNYJRgn6CiQKiAquCsgMFgzADOYNzg7WDvAQyBEyEaYABwAAAAAD9APzAAMABwAKAA4
AEgAVABkAADchNSElITUhJTkBBSE1ITUhNSEFFxEnITUhDAPo/BgBtgIy/c7+SgG2AjL9zgIy/c7
+Svr6A+j8GAxefV67Pl19Xvr6AfScXgAAAAIAAAAAA/QD9AAEAEgAACUhNxc3AREfDyE/DxEvDyE
PDgOF/PbDisP9gQEBAwQEBgYICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsL/PYLCwsKCgkICAgGBgQEAwGz+qf6AYX89gsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsLAwoLCwsKCgkICAgGBgQEAwEBAQEDBAQGBggICAkKCgsLAAACAAAAAAPzA/QAQAC/AAABFQ8
PLw8/Dx8OAQ8ELwErAQ8FFR8FBxcPAxUfBzsBNx8LOwI/Cx8BOwE/Bj0BLwQ/Aic/BC8HKwEHLws
rAg8FArIBAgUGBwkKDAwODxAQERITEhIREQ8PDgwMCgkHBgUCAQECBQYHCQoMDA4PDxEREhITEhE
QEA8ODAwKCQcGBQL+zxUWFhUWfwUFBAUDBANqAgEBAgIDbgMDbwMCAQEBAmkDBAQEBQSEFBYWFxQ
CAgIDBAQEBcwFBAQEAwICAhQXFRYVgAQFBQQEAwNoAgEBAgIDcAEBAQNvAgIBAQEBA2gDBAQFBAW
DFBYWFxIBAgMDAwQFBcwFBAQDBAICAgAJCRIQEBAODgwLCgkHBgQDAQEDBAYHCQoLDA4OEBAQEhI
SEhAQEA4ODAsKCQcGBAMBAQMEBgcJCgsMDg4QEBASAc6ECwwNDjIBAQICA7QEBQQFBAMEUjIyVgM
EBAQFBAWwAwICATMODQwLhAQEBAMCAgECAgIDBAMEhAsMDQ4yAQECAgOwBAQFBAUEAwRSDAwaMlY
DBAQEBQQFsAMCAgEzDg0MC4QEAwQDAgICAgICAwQDAAAAAAMAAAAAA/MD2AAyADUAaQAAJRUfDTs
BPw41LwgPBwMhAScXAQ8GHQEfBQEfBjsBPwYBPwYvBwEDFgIDBAQGBgcICQkKCgsLCwsLCwoKCQg
ICAYGBAQDAQEDBAcMCQoLFCMtFQoJCQcFBHv96gEL04X+4gYFBAQCAgICAgIEBAUBNwcHBwgHCAc
IBwgHCAgHBwYBOAUEAwMCAQEBAQIDAwQFBv4PlwsLCwoKCQkIBwYGBAQDAgIDBAQGBgcICQkKCgs
LCwcPEBAYEBAPHCk3HRAQEBAQEAEIAQrThf7iBgcIBwgHCAgICAgHBwcH/skGBQQEAwIBAQIDBAQ
FBgE3BwcHBwgICAgHCAgHCAcGAfEABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITchNSEnITUhNyE
1ISchNSEMA+j8GN4CLP3U3gPo/BjeAiz91N4D6PwYDF6AW5xefVqAXgAAAAAEAAAAAAP0A/QACQA
TABcAWwAAAQcVMzcXMzUjLwEjFTMbATM1IwElESERBxEfDyE/DxEvDyEPDgFro8ObnnROxOp0nZv
qTij+8AGW/NReAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgo
LCwv89gsLCwoKCQgICAYGBAQDAQENAyOWliO4BSUBK/7VJQFSffzUAywR/PYLCwsKCgkICAgGBgQ
EAwEBAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgoLCwAAAAA
CAAAAAAOWA/QAAwBpAAA3ITUhExUfHTsBPx01ESMRDw8vDxEjagMs/NRKAgIDAwUFBgcHCAkJCgs
LCwwNDQ0ODw4PEA8QERAREREREBEQDxAPDg8ODQ0NDAsLCwoJCQgHBwYFBQMDAgKLAQMFBggKCww

Copyright © 2001 -2024 Syncfusion Inc. 85


Toolbar How To

ODxARERMTFBQTExEREA8ODAsFCQcGBAKLDH0BsBEREREQEA8QDg8ODg0MDQsLCwoJCQgHBwYFBQQ
DAgEBAgMEBQUGBggICQkKCgsMDAwNDg4ODw8PEBAQERERAb7+RRQTEhIREA8NDQsKCAYFAwEBAwU
GCAoLDQ0PCBASEhMTAcUABQAAAAAD9APXAAIABQANABcAGgAAJTcjASM3ATM3MxczAyMFIQEVITU
hATUhJTMnAgJx4wG/vl/+/Fot+i1a3FD9RgEg/t4Bov7UAST+aAF/6XQobQET//47eHgCM07+XD5
NAaQ/UHMAAAAAAQAAAAAD9ALoAF8AABMhJz8PHxo3Lx8PDycMAbWyDQ0ODg8PDxAQEBERERIREhA
QEBAQDw8PDw4ODg0NDQwMFxYTEhAHBgYGBXUHBwgJCQoLCwwNDQ0PDg8QEBERERITEhMUExQVFBU
VFRgYFxcXFhYVFhQUFBMTEhGwARi6CwsJCggICAYGBgQEAwIBAQEBAgIDBAQFBQYHBwgICQkKFRY
YGhsODg8PDygUFBMTEhISERARDw8PDg0NDAsLCgoICAgGBgQEAwMBAQECAwQFBgcJCQoLDA0ODg+
6AAYAAAAAA/MD9AA/AGsAqwDrAO8BMwAAARUfDTsBPw09AS8ODw4lHwk7AT8IPQEvByMnByMPByU
fDz8PLw8PDiUfDz8OPQEvDSsBDw0lESERBxEfDyE/DxEvDyEPDgHhAgMFBQYHCAkKCgsLDA0NDA0
MCwsKCgkIBwYFBQMCAgMFBQYHCAkKCgsLDA0MDQ0MCwsKCgkIBwYFBQMC/scBAQEFBwgKCwYGBwY
GBgwKCAcFAQEBAQUHCAoMBgYGBwYGCwoIBwUBAQHzAQECBAQEBgYGCAcICQkJCgoJCQgJBwgGBgY
EBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCQgHCAYGBgQEBAIB/qgBAQMEBAYGBwgICQoKCgsLCws
LCgkJCQcHBwUFAwMCAgMDBQUHBwcJCQkKCwsLCwsKCgoJCAgHBgYEBAMBAlD81F4BAQMDBAUGBgc
HCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgYHBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwM
BAWQNDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA0NDAwLCwsJCQgHBwUEAwIBAQIDBAUHBwg
JCQsLCwwMMQYGBgsKCQcEAgEBAgQHCQoLBgYGBwYGCwoJBgUCAQECBQYJCgsGBvMJCgkICAgHBwY
FBQQDAwEBAQEDAwQFBQYHBwgICAkKCQoJCQkICAcGBwUFBAMCAQEBAQIDBAUFBwYHCAgJCQkGCws
KCgoJCAgHBgYEBAMBAQEBAwQEBgYHCAgJCgoKCwsLCwsKCQkJBwcHBQUDAwICAwMFBQcHBwkJCQo
LC9/81AMsA/zaCgkJCQkIBwcGBgUEBAIBAQEBAgQEBQUHBwcICQkJCQoDJgoJCQkJCAcHBwUFBAQ
CAQEBAQIEBAUFBwcHCAkJCQkAAAAAAgAAAAADtQP0AAMACgAANyE1IQEjCQEjESFKA2z8lAEG7AG
cAZzs/qAMfQIK/mQBnAFhAAYAAAAAA/QD8wADAAcACwAPABIAFgAANyE1ISUhNSE1ITUhNSE1KQE
RNwMhNSEMA+j8GAG2AjL9zgIy/c4CMv3O/kr6+gPo/BgMXn1efV19Xv4M+gGWXgAFAAAAAAPzA/M
AJQBpAKgArADwAAABFT8bIw8GBR8PNSMvDT8CJw8OHw8TByMPDBc/AzsBHwUzHwYzLxcjJREhEQc
RHw8hPw8RLw8hDw4CKg8QDw8ODg4NDQwMDAwKCwoKCQgJDw0KCQQDAgLxBAUGBggJC/7WDQ0NDg4
PDw8PEA8QEBAQEAoKCQkJCQgIBgQEBAUDAQEDBKsKCQgIBwYGBQUDAwMBAQEBAQEDAwQEBQYHBwg
ICgoL9g4OHA4ODQ4NDg0NDQwNDKkLDA8HCAkJCAgICA4DEAUFBQMEAu4EBwkKDQ8REwoKCwsMDAw
NDQ4ODg4PDy8KAZP81F4BAQMDBAUGBgcHCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgY
HBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwMBAZz0AgMDBAQFBQYHBwgICQkJCgsLCwsYGhsbDw4PDwo
KCQgIBwaUDAsLCgkIBwcGBQQEAgIBAfEBAwMEBQYIBQcGBw8PEA8ODa0NDQ0ODg4ODw8PDw8PEA8
PEA8PEA8ODw8ODg0ODQ0MAj8BBAMDBAQFBgcHBwkJCqoGBQQBAQICBAMJEAcHCAgJCh0dHRsaGRc
XCgoKCQgICAcGBgYEBQMDBj781AMsA/zaCgkJCQkIBwcGBgUEAwMBAQEBAgQEBQYGBwcICQkJCQo
DJgoJCQkJCAcHBgYFBAQCAQEBAQIEBAUFBwcHCAkJCQkAAgAAAAAD8wPrAB8AMwAAEw8HHww/BBU
hNSEBNwkBPwcvCDYKCAcGBQMCAQECAwUGBwgKrwgJCgoKCgkINQKQ/Xv+20EBPAGOCgkHBgUDAgE
BAgMFBgcJCtMBoQsMDQ0NDg4ODg0ODQ0NDAuvBgUDAQECBAY0I14BJEH+xAGRCwwMDQ0ODg4ODg4
NDQwMC9QABgAAAAAD9AP0AAMADwATAB0AIQAnAAAlITUhIzMVIxUzFSMVMzUjNyE1ISMzBxUzNSM
3NSM3ITUhJzMVMzUjAQYC7v0S+n0/P328vPoC7v0S+nh4vHh4vPoC7v0S+j4/fWpeID4gPvrbXXw
/P3w/u14gvPoAAAAABQAAAAAD9APbAAIABQANABcAGgAAJTcjAyM3ATM3MxczAyMFIQEVITUhATU
hJzMnAgJx4x6+Xv76Wi39LF3fTwFlAST+3AGk/tIBJP5mw+l0JXMBGP/+N3h4AjRQ/lo+TQGpPk5
zAAABAAAAAAOsA/QACwAAATMDIxUhNSMTMzUhAXGd88gCPJ3zyP3EAx79xNbWAjzWAAAGAAAAAAP
0A9QAAwBDAEcAhwCLAMsAACUhNSEHFR8OPw49AS8ODw4TITUhBxUfDTsBPw09AS8ODw4TITUhBxU
fDj8OPQEvDg8OAQYC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgY
HBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQE
CAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgY
GBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAkpeLwgIBwcHBwYFBQUDBAICAQE
BAQICBAMFBQUGBwcHBwgICAgIBwcGBgYFBAQDAwIBAQEBAgMDBAQFBgYGBwcICAFgXS4ICAgHBwY
GBgUEBAMDAgEBAgMDBAQFBgYGBwcICAgICAcHBwcGBQUFAwQCAgEBAQECAgQDBQUFBgcHBwcIAUB
dLggICAcHBgYGBQQEAwMCAQEBAQIDAwQEBQYGBgcHCAgICAgHBwcHBgUFBQMEAgIBAQEBAgIEAwU
FBQYHBwcHCAAAAwAAAAADmQP0AAcAKACNAAABFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw0VERUfDTM
hMz8NNRE1Lw0rAS8OKwEPDQEdAcZb/YQBbAEDBAYHBwkJCQkHBwYEAwEBAwQGBwcJCQkJBwcGBAO
svwkJCQgICAcGBgYEBAMCAgICAwQEBgYGBwgICAkJCQJ8CQkJCAgIBwYGBgQEAwICAgIDBAQGBgY
HCAgICQkJvwMFBQYGBwgICQkJCgoKCwsLCwoKCgkJCQgIBwYGBQUDPoiI/SkC1y4FBQgIBwUEAwE
BAwQFBwgICgkICAcFBQIBAQIFBQcICCQCAgMEBAYGBgcICAgJCQn9KQkJCQgICAcGBgUFBAMCAgI
CAwQFBQYGBwgICAkJCQLXCQkJCAgIBwYGBgQEAwICCgkJCAgIBwYGBQQEAwICAgIDBAQFBgYHCAg
ICQkAAQAAAAAD9ALoAGAAAAExLw8PHxc/Gh8PByERA0QREhMTFBQUFRYWFhcXFxgYFRUVFBUUExQ
TEhMSEREREBAPDg8NDQ0MCwsKCQkIBwd1BQYGBgcQEhMWFwwMDQ0NDg4ODw8PDxAQEBAQEhESERE
QERAQDw8PDg4NDbIBtQIuDw4ODQwLCgkJBwYFBAMCAQEBAwMEBAYGCAgICgoLCwwNDQ4PDw8REBE

Copyright © 2001 -2024 Syncfusion Inc. 86


Toolbar How To

SEhITExQUKA8PDw4OGxoYFhUKCQkICAcHBgUFBAQDAgIBAQEBAgMEBAYGBggICAoJCwu6AdAAAAA
OAAAAAAP0A/MAAgAFAAgACwAQABQAFwAbAB4AIQApAC0AMQB1AAABETclFzUXNyMFNyETFQUhEQE
hJRMlMycFMSEnBzcnBxcRBRMDBSUDEy0BEQMlIwUDEQcRHw8hPw8RLw8hDw4CGcj+ZaG3MJb+wM7
+4jQBCv6EAy7+ggEKdP1S3JkBCwEjWemWlvrIATJ0dP7n/up3dwEWAZhy/vQ0/vZyXgEBAwQEBgY
ICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsL/PYLCwsKCgkICAgGBgQ
EAwEBxv7fWSQ730Bky8v+9QNxAYH+f28BHx2ZmcukmTgJywEeP/7n/ud3dwEZARl3Bv5xAR1ycv7
yAYAR/PYLCwsKCgkICAcHBQUEAwEBAQEDBAUFBwcICAkKCgsLCwMKCwsLCgoJCAgHBwUFBAMBAQE
BAwQEBgYIBwkJCgoLCwAAAAAFAAAAAAP0A/MAAwAHAAsADwATAAA3ITUhJSE1ISUhNSElITUhJSE
1IQwD6PwYAVgCkP1w/qgD6PwYAVgCkP1w/qgD6PwYDF6AW5xefV19XgAAAAAKAAAAAAP0A/MAAwA
HAAsADwATABcAGwAfACMARwAAARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1JxE
fByE/BxEvByEPBgOW+j7bP9oDLPo+2z/aAyz6Pts/2l4BAwUGAwgJCgOJCgkJBwYDBAIBAwUGAwg
JCvx3CgkJBwYFAwElvb27u7u7ARrb29vb29v6vLy8vLy8hvyCCwoJBwQGBAIBAwUHBwUJCgOECwo
JBwQGBAIBAwUGCAkKAAAAAAUAAAAAA/QD8wADAAcACwAPABMAADchNSE1ITUhNSE1ITUhNSE1ITU
hDAPo/BgCkP1wA+j8GAKQ/XAD6PwYDF6BV59efVqAXgAAAAADAAAAAAP0A00AAwAHAAsAADchNSE
1ITUhNSE1IQwD6PwYA+j8GAPo/Bizb6Zwpm8AAAAABQAAAAAD9AP0AD8AXwCfAKQBIgAAJQ8PLw8
/Dx8OExUPBSsBLwU9AT8FOwEfBQMPDy8PPw8fEAE1IwUVHw8zPwMXBy8FDw8fDz8PNS8DNwEzNQE
/BS8PDw4BOAEBAwMEBQYGBwgICQkKCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgo
KCgkJCAgHBgYFBAMDAeICAgMDBQUFBQUFAwMCAgICAwMFBQUFBQUDAwIC4QEBAwMEBQYGBwgICQk
KCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAftkAV6W/K4
BAwUHCAoMDQ4PERETExQUCwsVFBN2dgkKCgoVFhQUExMREQ8ODQwKCAcFAwEBAwUHCAoMDQ4PERE
TExQUFBQTExERDw4NDAoIBwUDAQEEBgd2AV6W/ZYFBAMCAwEBAwUHCAoMDQ4PERETExQUFBQTExE
RDw4NDAoIBwUD1AoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgoKCgoKCQkICAcGBgUEAwM
BAQEBAwMEBQYGBwgICQkKCgEiBQUFAwMCAgICAwMFBQUFBQUDAwICAgIDAwUFAScKCgoJCQgIBwY
GBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgqgZAF
eMpYKChQTExERDw4NDAoIBwUDAQEEBgd2dgUEAwIDAQEDBQcICgwNDg8RERMTFBQUFBMTEREPDg0
MCggHBQMBAQMFBwgKDA0ODxERExMUFAsLFRQTdv6iMgJqCQoKChUWFBQTExERDw4NDAoIBwUDAQE
DBQcICgwNDg8RERMTFAADAAAAAANXA7UAIgBFAJMAAAEzHw4PDisBNRMzHw4PDisBNQMhPxEvDz8
PLxghAkgKCgkJCAgHBwYGBAQEAgEBAQEDAwQFBgYHBwgJCAkKCeDACgoJCQgIBwcGBgQEBAIBAQE
BAgQEBAYGBwcICAkJCgrAwAHDDQwMDBcWFRMSEQ8NDAoHBgQBAQIDBAYHBwkKCgsNDA4ODwsLCgo
KCAgIBgYFBQMDAQEBAQECAwQEBAUGDA8QEhQVFgwMDA0NDQ0N/nABogICAwQEBgYGBwgICQkKCQo
KCQgJBwgGBgUFBAMCArsBdwICAwQEBgYGCAcICQkKCQoKCQkIBwgGBgYEBAMCArv9MQEBAQIGCAo
MDg8REhQUFhcYGBERERAQEA4ODgwMDAoJCQcICQkKCgoLDAsMDAwMDQwNDQwNDQwMCwwLCxQUERA
ODQoFAwQDAgEBAQAABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITUhNSE1ITUhNSE1ITUhNSEMA+j
8GAPo/BgD6PwYA+j8GAPo/BgMXn1enF59XX1eAAAAAAEAAAAAA9QD1ADUAAATHx8/DxcRIRcPDy8
fPx8fDzMvHw8eKwECAwQFBggICQoMDA0ODhAQERISExQUFRUWFhcXGBgYGBgXFxcWFhUVFBQTEhI
REIr+ZrsMDA0ODg4PEBAQEBESERISEhIREhEQEQ8QDw8ODg0NDAwLCgoJCQgHBgYEBAQCAQEBAQI
EBAQGBgcICQkKCgsMDA0NDg4PDxAPERAREhESEhwcGxoaGBgWFRQSEQ8OCwp7BQYHCAgJCQoLCww
NDQ4ODg8QEBERERISEhMTFBMUFRQYGBgXFxYWFRUUFBMSEhEQEA4ODQwMCgkICAYFBAMCAgAYGBc
XFxYWFRUUFBMSEhEQEA4ODQ0LCgoICAYFBAMCAQECAwQFBggICgoLDQ0ODhCKAZq7DAsLCgkJCAc
HBQUEAwMBAQEBAgQEBAYGBwgICgkLCwwMDQ0ODg8PDxAREBESERISEhIREhEQERAPDw8ODg0NDAw
LCwkKCAgHBgYEBAQCAQECAwUICQsNDxASExUWFxgaExITERIREBAQDw8ODg0NDAsLCgoJCAcHBgY
EBAMCAQEBAgMEBQYICAoKCw0NDg4QEBESEhMUFBUVFhYXFxcYAAAAAgAAAAAD8gP0AGcA7gAAARU
PGC8YPQE/FzsBHxcFHx8/DxcVATcBIyc/Dj0BLx0rAQ8dAoABAgIDAwQFBQUNDxATExYLCwwMDAw
NDQ0NDQ0NDQwNDAsMCxUUEhAPDQUFBQQDAwMBAQEBAwMDBAUFBQ0PEBIUFQsMCwwNDA0NDQ0NDQ0
NDAwMDAsLFhMTEA8NBQUFBAMDAgIB/Y0BAQMDBAUGBggICQkLCwsNDA4ODg8QEBARERISEhMTExE
REBEQEBAQDw8ODg4ODA0OAR1W/uMuDgoKCQkIBwYGBgQEAwMCAQICAwQFBgcHCAkKCgsMDA0NDg8
PDxAREREREhMSExMTExMSEhIRERAQEA8ODg4MDQsLCwkJCAgGBgUEAwMBAoIODQ0MDQwMDAsLFRQ
SEQ4NBgUEBAQDAgEBAQEBAQIDBAQEBQYNDhESFBULCwwMDA0MDQ0ODQ0NDQwMDAwLCxUUEhEODQY
FBQQDAwICAQECAgMDBAUFBg0OERIUFQsLDAwMDA0NDQ0UEhMSEhIRERAQEA8ODg4NDAsLCwkJCAg
GBgUEBAIBAQEBAgIEBAUFBgcHCAgJCgoSLf7jVgEfDg0NDQ4ODg8PDxAQEBERERITExISEhIRERA
QEA8ODg4NDAwLCgoICQcHBQUEBAICAgIEBAUFBwcJCAoKCwwMDQ4ODg8QEBARERISEhITAAAAAgA
AAAADtQP0AAMACgAANyE1IRMzESERMwFKA2z8lA/zAWjz/lkMfQHN/p0BYwGeAAAAAAUAAAAAA/Q
D9AA/AH8AvwD/Aa8AAAEPDisBLw4/Dx8OBQ8OKwEvDj8PHw4lFQ8OLw49AT8OHw4FFQ8OLw49AT8
OHw4BHx8zPw09AS8MPQE/DjsBPx01Lx8PHgOFAQECAgQEBQUGBgcHCAgJCAkJCAcIBgcGBQUEAwM
CAQEBAQIDAwQFBQYHBggHCAkJCAkIBwgHBgYFBQQEAgIB/Z4BAQIDAwQFBQYGBwgHCAkJCAkIBwg
HBgYFBQQDAwIBAQEBAgMDBAUFBgYHCAcICQgJCQgHCAcGBgUFBAMDAgEBvQECAwQEBAYGBgcHCAg
ICQkICAgHBwcFBgQFAwMCAQECAwMFBAYFBwcHCAgICQkICAgHBwYGBgQEBAMCAf7qAQIDAwUEBgU

Copyright © 2001 -2024 Syncfusion Inc. 87


Toolbar How To

HBwcICAgJCQgICAcHBgYGBAQEAwIBAQIDBAQEBgYGBwcICAgJCQgICAcHBwUGBAUDAwIB/kQBAgM
EBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGgkICAgHBwYGBgQEBAMCAQECAwMEBAoEBAMDAgE
CAgIEBAUFBgYHBwgICAlkDg8NDg0ODA0MDAwLCwsKCQoICQcIBgYGBQQEAwMCAQECAwQGBwcJCws
MDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgJTCAk
ICAcHBgYFBQQEAgICAgICBAQFBQYGBwcICAkICQgJBwgGBwYFBQQDAwIBAQEBAgMDBAUFBgcGCAc
JCAkICQgIBwcGBgUFBAQCAgICAgIEBAUFBgYHBwgICQgJCAkHCAYHBgUFBAMDAgEBAQECAwMEBQU
GBwYIBwkI1gkJCAcIBgcGBQUEAwMCAQEBAQIDAwQFBQYHBggHCAkJCAkICAcHBgYFBQQEAgIBAQE
BAgIEBAUFBgYHBwgICQgJCQgHCAYHBgUFBAMDAgEBAQECAwMEBQUGBwYIBwgJCQgJCAgHBwYGBQU
EBAICAQEBAQICBAQFBQYGBwcICAn+xhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAgI
CBAQFBQYGBwcICAkICAgIBwcGBgsGBwYIBwgICQkIBwgGBwYFBQQDAwIBAQECAgMEBQUFBgcHCAg
JCQoKCwoMCwwNDA0NDg0ODg4XFxYWFRUVFBQTExIRERAPDw4NDQsLCgkIBwYFBAMBAQECAwQGBwc
JCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAgAAAAAD9AO1AAgAVAAAARchFSEHFzcnJREVHw4hPw4
9ASMVIREhFTM9AS8OIQ8OAtV1/k0BsHI/4OD8+AICAwQFBQYHBwcICQkJCQHPCQkJCQgHBwcGBQU
EAwICXP4xAc9cAgIDBAUFBgcHBwgJCQkJ/jEJCQkJCAcHBwYFBQQDAgICoHRYdD7e3oD9RAkJCAg
IBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwgICAkJzMwCvMzMCQkICAgHBwYGBQQEAwIBAQEBAgMEBAU
GBgcHCAgICQADAAAAAAOvA/QAAwBHAF0AAAERIREHERUfDTMhMz8OES8OIyEjDw0nETMRITUhIw8
NA1X+DFsCAgMEBQUGBgcICAgJCQkB9AkJCQgICAcGBgUFBAMCAQEBAQIDBAUFBgYHCAgICQkJ/gw
JCQkICAgHBgYFBQQDAgK2WQIT/e0JCQkIBwgHBgYFBAQDAgEC4/2EAnwF/YgJCQgJCAcHBgYGBAQ
DAgICAgMEBAYGBgcHCAkICQkCeAkJCQgICAcGBgUFAwMDAQEDAwMFBQYGBwgICAkJsv2EAnxbAgI
DBAUFBgYHCAgICQkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAQAAEAAQAAAAAAAgAHABEAAQA
AAAAAAwAQABgAAQAAAAAABAAQACgAAQAAAAAABQALADgAAQAAAAAABgAQAEMAAQAAAAAACgAsAFM
AAQAAAAAACwASAH8AAwABBAkAAAACAJEAAwABBAkAAQAgAJMAAwABBAkAAgAOALMAAwABBAkAAwA
gAMEAAwABBAkABAAgAOEAAwABBAkABQAWAQEAAwABBAkABgAgARcAAwABBAkACgBYATcAAwABBAk
ACwAkAY8gdG9vbGJhci1tYXRlcmlhbFJlZ3VsYXJ0b29sYmFyLW1hdGVyaWFsdG9vbGJhci1tYXR
lcmlhbFZlcnNpb24gMS4wdG9vbGJhci1tYXRlcmlhbEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmN
mdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAdABvAG8AbABiAGEAcgAtAG0
AYQB0AGUAcgBpAGEAbABSAGUAZwB1AGwAYQByAHQAbwBvAGwAYgBhAHIALQBtAGEAdABlAHIAaQB
hAGwAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABWAGUAcgBzAGkAbwBuACAAMQAuADA
AdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdAB
lAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHU
AZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAjAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgE
TARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAAQVGV4dF9PdXRkZW50XzAwMQtQaWN
0dXJlXzAwMQxTZXR0aW5nc18wMDEQQ29sb3JfcGlja2VyXzAwMhBBbGlnbl9DZW50ZXJfMDA2CEx
pbmVfMDAxDVVuZGVybGluZV8wMDEMU29ydF9aLUFfMDAxCFVuZG9fMDAxEENoYXJ0X2J1YmJsZV8
wMDELRG93bmxvYWRfMDAPVGV4dF9pbmRlbnRfMDAxEkNoYXJ0X0RvdWdobnV0XzAwMQlDbGVhcl8
wMDINTnVtYmVyaW5nXzAwMQxTb3J0X0EtWl8wMDEKSXRhbGljXzAwMQtCdWxsZXRzXzAwMQlQYXN
0ZV8wMDEIUmVkb18wMDEPQ2hhcnRfcmFkYXJfMDAxD0FsaWduX1JpZ2h0XzAwMQlUYWJsZV8wMDE
OQWxpZ25fTGVmdF8wMDEITWVudV8wMDEHQ3V0XzAwMghCb2xkXzAwMRFBbGlnbl9KdXN0aWZ5XzA
wMQpSZWxvYWRfMDAxClNlYXJjaF8wMDEKVXBsb2FkXzAwMQpEZXNpZ25fMDA1CkV4cG9ydF8wMDE
IQ29weV8wMDIAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-bigger .e-tbar-btn .tb-icons {


font-size: 18px;
}
.e-cut-icon:before {
content: "\e719"
}
.e-copy-icon:before {
content: "\e721"
}
.e-paste-icon:before {
content: "\e712"
}

Copyright © 2001 -2024 Syncfusion Inc. 88


Toolbar How To

.e-color-icon:before {
content: "\e703";
}
.e-bold-icon:before {
content: "\e71a"
}
.e-underline-icon:before {
content: "\e706";
}
.e-clear-icon:before {
content: "\e70d"
}
.e-italic-icon:before {
content: "\e710"
}
.e-ascending-icon:before {
content: "\e70f";
}
.e-descending-icon:before {
content: "\e707";
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>

Set tool tip to the commands in React Toolbar component


The tooltipText property of the Toolbar item is used to set the HTML Tooltip to the commands that can
be viewed as hint texts on mouse hover.
To change the tooltipText to ej2-tooltip component:

• Import the Tooltip module from ej2-popups,and initialize the Tooltip with the Toolbar target.
Refer to the following code example:

INDEX.JSX
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Tooltip } from '@syncfusion/ej2-popups';
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';
const ReactApp = () => {
React.useEffect(() => {
let tooltip = new Tooltip({
target: '#toolbar [title]',
});
tooltip.appendTo('#Tooltip');
}, []);
return (<div id="Tooltip">
<ToolbarComponent width="300">

Copyright © 2001 -2024 Syncfusion Inc. 89


Toolbar How To

<ItemsDirective>
<ItemDirective text="Cut" tooltipText="Cut"/>
<ItemDirective text="Copy" tooltipText="Copy"/>
<ItemDirective text="Paste" tooltipText="Paste"/>
<ItemDirective text="Undo" tooltipText="Undo"/>
<ItemDirective text="Redo" tooltipText="Redo"/>
</ItemsDirective>
</ToolbarComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Tooltip } from '@syncfusion/ej2-popups';
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';
const ReactApp = () => {
React.useEffect(() => {
let tooltip: Tooltip = new Tooltip({
target: '#toolbar [title]',
});
tooltip.appendTo('#Tooltip');
}, []);
return (
<div id="Tooltip">
<ToolbarComponent width="300">
<ItemsDirective>
<ItemDirective text="Cut" tooltipText="Cut" />
<ItemDirective text="Copy" tooltipText="Copy" />
<ItemDirective text="Paste" tooltipText="Paste" />
<ItemDirective text="Undo" tooltipText="Undo" />
<ItemDirective text="Redo" tooltipText="Redo" />
</ItemsDirective>
</ToolbarComponent></div>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />

Copyright © 2001 -2024 Syncfusion Inc. 90


Toolbar How To

<link
href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component
.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom_bold .e-tbar-btn-text {
font-weight: 900;
}
.custom_italic .e-tbar-btn-text {
font-style: italic;
}
.custom_underline .e-tbar-btn-text {
text-decoration: underline red;
}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
@font-face {
font-family: 'Material_toolbar';
src: url(data:application/x-font-ttf;charset=utf-
8;base64,AAEAAAAKAIAAAwAgT1MvMj1tShMAAAEoAAAAVmNtYXDoMOjqAAACDAAAAHhnbHlmIuy
19QAAAswAACNMaGVhZA6okZMAAADQAAAANmhoZWEIUQQkAAAArAAAACRobXR4jAAAAAAAAYAAAAC
MbG9jYYc0kUIAAAKEAAAASG1heHABOwG8AAABCAAAACBuYW1lx/RZbQAAJhgAAAKRcG9zdJZeEVU
AACisAAACGAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAIwABAAAAAQAAAQsu/F8
PPPUACwQAAAAAANXLJlEAAAAA1csmUQAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAjAbAADgAAAAA
AAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnIQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAA
EAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQ
AAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAA
AAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGQAAAAEAAQAAQAA5yH//wA
A5wD//wAAAAEABAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABY
AFwAYABkAGgAbABwAHQAeAB8AIAAhACIAAAAAADIAjgFwAfgCIAKYAxIDSAO2BRYFMAVcBnIGugb
2ByoHQgguCNYJRgn6CiQKiAquCsgMFgzADOYNzg7WDvAQyBEyEaYABwAAAAAD9APzAAMABwAKAA4
AEgAVABkAADchNSElITUhJTkBBSE1ITUhNSEFFxEnITUhDAPo/BgBtgIy/c7+SgG2AjL9zgIy/c7
+Svr6A+j8GAxefV67Pl19Xvr6AfScXgAAAAIAAAAAA/QD9AAEAEgAACUhNxc3AREfDyE/DxEvDyE
PDgOF/PbDisP9gQEBAwQEBgYICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsL/PYLCwsKCgkICAgGBgQEAwGz+qf6AYX89gsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsLAwoLCwsKCgkICAgGBgQEAwEBAQEDBAQGBggICAkKCgsLAAACAAAAAAPzA/QAQAC/AAABFQ8

Copyright © 2001 -2024 Syncfusion Inc. 91


Toolbar How To

PLw8/Dx8OAQ8ELwErAQ8FFR8FBxcPAxUfBzsBNx8LOwI/Cx8BOwE/Bj0BLwQ/Aic/BC8HKwEHLws
rAg8FArIBAgUGBwkKDAwODxAQERITEhIREQ8PDgwMCgkHBgUCAQECBQYHCQoMDA4PDxEREhITEhE
QEA8ODAwKCQcGBQL+zxUWFhUWfwUFBAUDBANqAgEBAgIDbgMDbwMCAQEBAmkDBAQEBQSEFBYWFxQ
CAgIDBAQEBcwFBAQEAwICAhQXFRYVgAQFBQQEAwNoAgEBAgIDcAEBAQNvAgIBAQEBA2gDBAQFBAW
DFBYWFxIBAgMDAwQFBcwFBAQDBAICAgAJCRIQEBAODgwLCgkHBgQDAQEDBAYHCQoLDA4OEBAQEhI
SEhAQEA4ODAsKCQcGBAMBAQMEBgcJCgsMDg4QEBASAc6ECwwNDjIBAQICA7QEBQQFBAMEUjIyVgM
EBAQFBAWwAwICATMODQwLhAQEBAMCAgECAgIDBAMEhAsMDQ4yAQECAgOwBAQFBAUEAwRSDAwaMlY
DBAQEBQQFsAMCAgEzDg0MC4QEAwQDAgICAgICAwQDAAAAAAMAAAAAA/MD2AAyADUAaQAAJRUfDTs
BPw41LwgPBwMhAScXAQ8GHQEfBQEfBjsBPwYBPwYvBwEDFgIDBAQGBgcICQkKCgsLCwsLCwoKCQg
ICAYGBAQDAQEDBAcMCQoLFCMtFQoJCQcFBHv96gEL04X+4gYFBAQCAgICAgIEBAUBNwcHBwgHCAc
IBwgHCAgHBwYBOAUEAwMCAQEBAQIDAwQFBv4PlwsLCwoKCQkIBwYGBAQDAgIDBAQGBgcICQkKCgs
LCwcPEBAYEBAPHCk3HRAQEBAQEAEIAQrThf7iBgcIBwgHCAgICAgHBwcH/skGBQQEAwIBAQIDBAQ
FBgE3BwcHBwgICAgHCAgHCAcGAfEABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITchNSEnITUhNyE
1ISchNSEMA+j8GN4CLP3U3gPo/BjeAiz91N4D6PwYDF6AW5xefVqAXgAAAAAEAAAAAAP0A/QACQA
TABcAWwAAAQcVMzcXMzUjLwEjFTMbATM1IwElESERBxEfDyE/DxEvDyEPDgFro8ObnnROxOp0nZv
qTij+8AGW/NReAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgo
LCwv89gsLCwoKCQgICAYGBAQDAQENAyOWliO4BSUBK/7VJQFSffzUAywR/PYLCwsKCgkICAgGBgQ
EAwEBAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgoLCwAAAAA
CAAAAAAOWA/QAAwBpAAA3ITUhExUfHTsBPx01ESMRDw8vDxEjagMs/NRKAgIDAwUFBgcHCAkJCgs
LCwwNDQ0ODw4PEA8QERAREREREBEQDxAPDg8ODQ0NDAsLCwoJCQgHBwYFBQMDAgKLAQMFBggKCww
ODxARERMTFBQTExEREA8ODAsFCQcGBAKLDH0BsBEREREQEA8QDg8ODg0MDQsLCwoJCQgHBwYFBQQ
DAgEBAgMEBQUGBggICQkKCgsMDAwNDg4ODw8PEBAQERERAb7+RRQTEhIREA8NDQsKCAYFAwEBAwU
GCAoLDQ0PCBASEhMTAcUABQAAAAAD9APXAAIABQANABcAGgAAJTcjASM3ATM3MxczAyMFIQEVITU
hATUhJTMnAgJx4wG/vl/+/Fot+i1a3FD9RgEg/t4Bov7UAST+aAF/6XQobQET//47eHgCM07+XD5
NAaQ/UHMAAAAAAQAAAAAD9ALoAF8AABMhJz8PHxo3Lx8PDycMAbWyDQ0ODg8PDxAQEBERERIREhA
QEBAQDw8PDw4ODg0NDQwMFxYTEhAHBgYGBXUHBwgJCQoLCwwNDQ0PDg8QEBERERITEhMUExQVFBU
VFRgYFxcXFhYVFhQUFBMTEhGwARi6CwsJCggICAYGBgQEAwIBAQEBAgIDBAQFBQYHBwgICQkKFRY
YGhsODg8PDygUFBMTEhISERARDw8PDg0NDAsLCgoICAgGBgQEAwMBAQECAwQFBgcJCQoLDA0ODg+
6AAYAAAAAA/MD9AA/AGsAqwDrAO8BMwAAARUfDTsBPw09AS8ODw4lHwk7AT8IPQEvByMnByMPByU
fDz8PLw8PDiUfDz8OPQEvDSsBDw0lESERBxEfDyE/DxEvDyEPDgHhAgMFBQYHCAkKCgsLDA0NDA0
MCwsKCgkIBwYFBQMCAgMFBQYHCAkKCgsLDA0MDQ0MCwsKCgkIBwYFBQMC/scBAQEFBwgKCwYGBwY
GBgwKCAcFAQEBAQUHCAoMBgYGBwYGCwoIBwUBAQHzAQECBAQEBgYGCAcICQkJCgoJCQgJBwgGBgY
EBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCQgHCAYGBgQEBAIB/qgBAQMEBAYGBwgICQoKCgsLCws
LCgkJCQcHBwUFAwMCAgMDBQUHBwcJCQkKCwsLCwsKCgoJCAgHBgYEBAMBAlD81F4BAQMDBAUGBgc
HCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgYHBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwM
BAWQNDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA0NDAwLCwsJCQgHBwUEAwIBAQIDBAUHBwg
JCQsLCwwMMQYGBgsKCQcEAgEBAgQHCQoLBgYGBwYGCwoJBgUCAQECBQYJCgsGBvMJCgkICAgHBwY
FBQQDAwEBAQEDAwQFBQYHBwgICAkKCQoJCQkICAcGBwUFBAMCAQEBAQIDBAUFBwYHCAgJCQkGCws
KCgoJCAgHBgYEBAMBAQEBAwQEBgYHCAgJCgoKCwsLCwsKCQkJBwcHBQUDAwICAwMFBQcHBwkJCQo
LC9/81AMsA/zaCgkJCQkIBwcGBgUEBAIBAQEBAgQEBQUHBwcICQkJCQoDJgoJCQkJCAcHBwUFBAQ
CAQEBAQIEBAUFBwcHCAkJCQkAAAAAAgAAAAADtQP0AAMACgAANyE1IQEjCQEjESFKA2z8lAEG7AG
cAZzs/qAMfQIK/mQBnAFhAAYAAAAAA/QD8wADAAcACwAPABIAFgAANyE1ISUhNSE1ITUhNSE1KQE
RNwMhNSEMA+j8GAG2AjL9zgIy/c4CMv3O/kr6+gPo/BgMXn1efV19Xv4M+gGWXgAFAAAAAAPzA/M
AJQBpAKgArADwAAABFT8bIw8GBR8PNSMvDT8CJw8OHw8TByMPDBc/AzsBHwUzHwYzLxcjJREhEQc
RHw8hPw8RLw8hDw4CKg8QDw8ODg4NDQwMDAwKCwoKCQgJDw0KCQQDAgLxBAUGBggJC/7WDQ0NDg4
PDw8PEA8QEBAQEAoKCQkJCQgIBgQEBAUDAQEDBKsKCQgIBwYGBQUDAwMBAQEBAQEDAwQEBQYHBwg
ICgoL9g4OHA4ODQ4NDg0NDQwNDKkLDA8HCAkJCAgICA4DEAUFBQMEAu4EBwkKDQ8REwoKCwsMDAw
NDQ4ODg4PDy8KAZP81F4BAQMDBAUGBgcHCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgY
HBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwMBAZz0AgMDBAQFBQYHBwgICQkJCgsLCwsYGhsbDw4PDwo
KCQgIBwaUDAsLCgkIBwcGBQQEAgIBAfEBAwMEBQYIBQcGBw8PEA8ODa0NDQ0ODg4ODw8PDw8PEA8
PEA8PEA8ODw8ODg0ODQ0MAj8BBAMDBAQFBgcHBwkJCqoGBQQBAQICBAMJEAcHCAgJCh0dHRsaGRc
XCgoKCQgICAcGBgYEBQMDBj781AMsA/zaCgkJCQkIBwcGBgUEAwMBAQEBAgQEBQYGBwcICQkJCQo
DJgoJCQkJCAcHBgYFBAQCAQEBAQIEBAUFBwcHCAkJCQkAAgAAAAAD8wPrAB8AMwAAEw8HHww/BBU
hNSEBNwkBPwcvCDYKCAcGBQMCAQECAwUGBwgKrwgJCgoKCgkINQKQ/Xv+20EBPAGOCgkHBgUDAgE
BAgMFBgcJCtMBoQsMDQ0NDg4ODg0ODQ0NDAuvBgUDAQECBAY0I14BJEH+xAGRCwwMDQ0ODg4ODg4
NDQwMC9QABgAAAAAD9AP0AAMADwATAB0AIQAnAAAlITUhIzMVIxUzFSMVMzUjNyE1ISMzBxUzNSM
3NSM3ITUhJzMVMzUjAQYC7v0S+n0/P328vPoC7v0S+nh4vHh4vPoC7v0S+j4/fWpeID4gPvrbXXw

Copyright © 2001 -2024 Syncfusion Inc. 92


Toolbar How To

/P3w/u14gvPoAAAAABQAAAAAD9APbAAIABQANABcAGgAAJTcjAyM3ATM3MxczAyMFIQEVITUhATU
hJzMnAgJx4x6+Xv76Wi39LF3fTwFlAST+3AGk/tIBJP5mw+l0JXMBGP/+N3h4AjRQ/lo+TQGpPk5
zAAABAAAAAAOsA/QACwAAATMDIxUhNSMTMzUhAXGd88gCPJ3zyP3EAx79xNbWAjzWAAAGAAAAAAP
0A9QAAwBDAEcAhwCLAMsAACUhNSEHFR8OPw49AS8ODw4TITUhBxUfDTsBPw09AS8ODw4TITUhBxU
fDj8OPQEvDg8OAQYC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgY
HBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQE
CAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgY
GBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAkpeLwgIBwcHBwYFBQUDBAICAQE
BAQICBAMFBQUGBwcHBwgICAgIBwcGBgYFBAQDAwIBAQEBAgMDBAQFBgYGBwcICAFgXS4ICAgHBwY
GBgUEBAMDAgEBAgMDBAQFBgYGBwcICAgICAcHBwcGBQUFAwQCAgEBAQECAgQDBQUFBgcHBwcIAUB
dLggICAcHBgYGBQQEAwMCAQEBAQIDAwQEBQYGBgcHCAgICAgHBwcHBgUFBQMEAgIBAQEBAgIEAwU
FBQYHBwcHCAAAAwAAAAADmQP0AAcAKACNAAABFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw0VERUfDTM
hMz8NNRE1Lw0rAS8OKwEPDQEdAcZb/YQBbAEDBAYHBwkJCQkHBwYEAwEBAwQGBwcJCQkJBwcGBAO
svwkJCQgICAcGBgYEBAMCAgICAwQEBgYGBwgICAkJCQJ8CQkJCAgIBwYGBgQEAwICAgIDBAQGBgY
HCAgICQkJvwMFBQYGBwgICQkJCgoKCwsLCwoKCgkJCQgIBwYGBQUDPoiI/SkC1y4FBQgIBwUEAwE
BAwQFBwgICgkICAcFBQIBAQIFBQcICCQCAgMEBAYGBgcICAgJCQn9KQkJCQgICAcGBgUFBAMCAgI
CAwQFBQYGBwgICAkJCQLXCQkJCAgIBwYGBgQEAwICCgkJCAgIBwYGBQQEAwICAgIDBAQFBgYHCAg
ICQkAAQAAAAAD9ALoAGAAAAExLw8PHxc/Gh8PByERA0QREhMTFBQUFRYWFhcXFxgYFRUVFBUUExQ
TEhMSEREREBAPDg8NDQ0MCwsKCQkIBwd1BQYGBgcQEhMWFwwMDQ0NDg4ODw8PDxAQEBAQEhESERE
QERAQDw8PDg4NDbIBtQIuDw4ODQwLCgkJBwYFBAMCAQEBAwMEBAYGCAgICgoLCwwNDQ4PDw8REBE
SEhITExQUKA8PDw4OGxoYFhUKCQkICAcHBgUFBAQDAgIBAQEBAgMEBAYGBggICAoJCwu6AdAAAAA
OAAAAAAP0A/MAAgAFAAgACwAQABQAFwAbAB4AIQApAC0AMQB1AAABETclFzUXNyMFNyETFQUhEQE
hJRMlMycFMSEnBzcnBxcRBRMDBSUDEy0BEQMlIwUDEQcRHw8hPw8RLw8hDw4CGcj+ZaG3MJb+wM7
+4jQBCv6EAy7+ggEKdP1S3JkBCwEjWemWlvrIATJ0dP7n/up3dwEWAZhy/vQ0/vZyXgEBAwQEBgY
ICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsL/PYLCwsKCgkICAgGBgQ
EAwEBxv7fWSQ730Bky8v+9QNxAYH+f28BHx2ZmcukmTgJywEeP/7n/ud3dwEZARl3Bv5xAR1ycv7
yAYAR/PYLCwsKCgkICAcHBQUEAwEBAQEDBAUFBwcICAkKCgsLCwMKCwsLCgoJCAgHBwUFBAMBAQE
BAwQEBgYIBwkJCgoLCwAAAAAFAAAAAAP0A/MAAwAHAAsADwATAAA3ITUhJSE1ISUhNSElITUhJSE
1IQwD6PwYAVgCkP1w/qgD6PwYAVgCkP1w/qgD6PwYDF6AW5xefV19XgAAAAAKAAAAAAP0A/MAAwA
HAAsADwATABcAGwAfACMARwAAARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1JxE
fByE/BxEvByEPBgOW+j7bP9oDLPo+2z/aAyz6Pts/2l4BAwUGAwgJCgOJCgkJBwYDBAIBAwUGAwg
JCvx3CgkJBwYFAwElvb27u7u7ARrb29vb29v6vLy8vLy8hvyCCwoJBwQGBAIBAwUHBwUJCgOECwo
JBwQGBAIBAwUGCAkKAAAAAAUAAAAAA/QD8wADAAcACwAPABMAADchNSE1ITUhNSE1ITUhNSE1ITU
hDAPo/BgCkP1wA+j8GAKQ/XAD6PwYDF6BV59efVqAXgAAAAADAAAAAAP0A00AAwAHAAsAADchNSE
1ITUhNSE1IQwD6PwYA+j8GAPo/Bizb6Zwpm8AAAAABQAAAAAD9AP0AD8AXwCfAKQBIgAAJQ8PLw8
/Dx8OExUPBSsBLwU9AT8FOwEfBQMPDy8PPw8fEAE1IwUVHw8zPwMXBy8FDw8fDz8PNS8DNwEzNQE
/BS8PDw4BOAEBAwMEBQYGBwgICQkKCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgo
KCgkJCAgHBgYFBAMDAeICAgMDBQUFBQUFAwMCAgICAwMFBQUFBQUDAwIC4QEBAwMEBQYGBwgICQk
KCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAftkAV6W/K4
BAwUHCAoMDQ4PERETExQUCwsVFBN2dgkKCgoVFhQUExMREQ8ODQwKCAcFAwEBAwUHCAoMDQ4PERE
TExQUFBQTExERDw4NDAoIBwUDAQEEBgd2AV6W/ZYFBAMCAwEBAwUHCAoMDQ4PERETExQUFBQTExE
RDw4NDAoIBwUD1AoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgoKCgoKCQkICAcGBgUEAwM
BAQEBAwMEBQYGBwgICQkKCgEiBQUFAwMCAgICAwMFBQUFBQUDAwICAgIDAwUFAScKCgoJCQgIBwY
GBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgqgZAF
eMpYKChQTExERDw4NDAoIBwUDAQEEBgd2dgUEAwIDAQEDBQcICgwNDg8RERMTFBQUFBMTEREPDg0
MCggHBQMBAQMFBwgKDA0ODxERExMUFAsLFRQTdv6iMgJqCQoKChUWFBQTExERDw4NDAoIBwUDAQE
DBQcICgwNDg8RERMTFAADAAAAAANXA7UAIgBFAJMAAAEzHw4PDisBNRMzHw4PDisBNQMhPxEvDz8
PLxghAkgKCgkJCAgHBwYGBAQEAgEBAQEDAwQFBgYHBwgJCAkKCeDACgoJCQgIBwcGBgQEBAIBAQE
BAgQEBAYGBwcICAkJCgrAwAHDDQwMDBcWFRMSEQ8NDAoHBgQBAQIDBAYHBwkKCgsNDA4ODwsLCgo
KCAgIBgYFBQMDAQEBAQECAwQEBAUGDA8QEhQVFgwMDA0NDQ0N/nABogICAwQEBgYGBwgICQkKCQo
KCQgJBwgGBgUFBAMCArsBdwICAwQEBgYGCAcICQkKCQoKCQkIBwgGBgYEBAMCArv9MQEBAQIGCAo
MDg8REhQUFhcYGBERERAQEA4ODgwMDAoJCQcICQkKCgoLDAsMDAwMDQwNDQwNDQwMCwwLCxQUERA
ODQoFAwQDAgEBAQAABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITUhNSE1ITUhNSE1ITUhNSEMA+j
8GAPo/BgD6PwYA+j8GAPo/BgMXn1enF59XX1eAAAAAAEAAAAAA9QD1ADUAAATHx8/DxcRIRcPDy8
fPx8fDzMvHw8eKwECAwQFBggICQoMDA0ODhAQERISExQUFRUWFhcXGBgYGBgXFxcWFhUVFBQTEhI
REIr+ZrsMDA0ODg4PEBAQEBESERISEhIREhEQEQ8QDw8ODg0NDAwLCgoJCQgHBgYEBAQCAQEBAQI
EBAQGBgcICQkKCgsMDA0NDg4PDxAPERAREhESEhwcGxoaGBgWFRQSEQ8OCwp7BQYHCAgJCQoLCww

Copyright © 2001 -2024 Syncfusion Inc. 93


Toolbar How To

NDQ4ODg8QEBERERISEhMTFBMUFRQYGBgXFxYWFRUUFBMSEhEQEA4ODQwMCgkICAYFBAMCAgAYGBc
XFxYWFRUUFBMSEhEQEA4ODQ0LCgoICAYFBAMCAQECAwQFBggICgoLDQ0ODhCKAZq7DAsLCgkJCAc
HBQUEAwMBAQEBAgQEBAYGBwgICgkLCwwMDQ0ODg8PDxAREBESERISEhIREhEQERAPDw8ODg0NDAw
LCwkKCAgHBgYEBAQCAQECAwUICQsNDxASExUWFxgaExITERIREBAQDw8ODg0NDAsLCgoJCAcHBgY
EBAMCAQEBAgMEBQYICAoKCw0NDg4QEBESEhMUFBUVFhYXFxcYAAAAAgAAAAAD8gP0AGcA7gAAARU
PGC8YPQE/FzsBHxcFHx8/DxcVATcBIyc/Dj0BLx0rAQ8dAoABAgIDAwQFBQUNDxATExYLCwwMDAw
NDQ0NDQ0NDQwNDAsMCxUUEhAPDQUFBQQDAwMBAQEBAwMDBAUFBQ0PEBIUFQsMCwwNDA0NDQ0NDQ0
NDAwMDAsLFhMTEA8NBQUFBAMDAgIB/Y0BAQMDBAUGBggICQkLCwsNDA4ODg8QEBARERISEhMTExE
REBEQEBAQDw8ODg4ODA0OAR1W/uMuDgoKCQkIBwYGBgQEAwMCAQICAwQFBgcHCAkKCgsMDA0NDg8
PDxAREREREhMSExMTExMSEhIRERAQEA8ODg4MDQsLCwkJCAgGBgUEAwMBAoIODQ0MDQwMDAsLFRQ
SEQ4NBgUEBAQDAgEBAQEBAQIDBAQEBQYNDhESFBULCwwMDA0MDQ0ODQ0NDQwMDAwLCxUUEhEODQY
FBQQDAwICAQECAgMDBAUFBg0OERIUFQsLDAwMDA0NDQ0UEhMSEhIRERAQEA8ODg4NDAsLCwkJCAg
GBgUEBAIBAQEBAgIEBAUFBgcHCAgJCgoSLf7jVgEfDg0NDQ4ODg8PDxAQEBERERITExISEhIRERA
QEA8ODg4NDAwLCgoICQcHBQUEBAICAgIEBAUFBwcJCAoKCwwMDQ4ODg8QEBARERISEhITAAAAAgA
AAAADtQP0AAMACgAANyE1IRMzESERMwFKA2z8lA/zAWjz/lkMfQHN/p0BYwGeAAAAAAUAAAAAA/Q
D9AA/AH8AvwD/Aa8AAAEPDisBLw4/Dx8OBQ8OKwEvDj8PHw4lFQ8OLw49AT8OHw4FFQ8OLw49AT8
OHw4BHx8zPw09AS8MPQE/DjsBPx01Lx8PHgOFAQECAgQEBQUGBgcHCAgJCAkJCAcIBgcGBQUEAwM
CAQEBAQIDAwQFBQYHBggHCAkJCAkIBwgHBgYFBQQEAgIB/Z4BAQIDAwQFBQYGBwgHCAkJCAkIBwg
HBgYFBQQDAwIBAQEBAgMDBAUFBgYHCAcICQgJCQgHCAcGBgUFBAMDAgEBvQECAwQEBAYGBgcHCAg
ICQkICAgHBwcFBgQFAwMCAQECAwMFBAYFBwcHCAgICQkICAgHBwYGBgQEBAMCAf7qAQIDAwUEBgU
HBwcICAgJCQgICAcHBgYGBAQEAwIBAQIDBAQEBgYGBwcICAgJCQgICAcHBwUGBAUDAwIB/kQBAgM
EBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGgkICAgHBwYGBgQEBAMCAQECAwMEBAoEBAMDAgE
CAgIEBAUFBgYHBwgICAlkDg8NDg0ODA0MDAwLCwsKCQoICQcIBgYGBQQEAwMCAQECAwQGBwcJCws
MDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgJTCAk
ICAcHBgYFBQQEAgICAgICBAQFBQYGBwcICAkICQgJBwgGBwYFBQQDAwIBAQEBAgMDBAUFBgcGCAc
JCAkICQgIBwcGBgUFBAQCAgICAgIEBAUFBgYHBwgICQgJCAkHCAYHBgUFBAMDAgEBAQECAwMEBQU
GBwYIBwkI1gkJCAcIBgcGBQUEAwMCAQEBAQIDAwQFBQYHBggHCAkJCAkICAcHBgYFBQQEAgIBAQE
BAgIEBAUFBgYHBwgICQgJCQgHCAYHBgUFBAMDAgEBAQECAwMEBQUGBwYIBwgJCQgJCAgHBwYGBQU
EBAICAQEBAQICBAQFBQYGBwcICAn+xhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAgI
CBAQFBQYGBwcICAkICAgIBwcGBgsGBwYIBwgICQkIBwgGBwYFBQQDAwIBAQECAgMEBQUFBgcHCAg
JCQoKCwoMCwwNDA0NDg0ODg4XFxYWFRUVFBQTExIRERAPDw4NDQsLCgkIBwYFBAMBAQECAwQGBwc
JCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAgAAAAAD9AO1AAgAVAAAARchFSEHFzcnJREVHw4hPw4
9ASMVIREhFTM9AS8OIQ8OAtV1/k0BsHI/4OD8+AICAwQFBQYHBwcICQkJCQHPCQkJCQgHBwcGBQU
EAwICXP4xAc9cAgIDBAUFBgcHBwgJCQkJ/jEJCQkJCAcHBwYFBQQDAgICoHRYdD7e3oD9RAkJCAg
IBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwgICAkJzMwCvMzMCQkICAgHBwYGBQQEAwIBAQEBAgMEBAU
GBgcHCAgICQADAAAAAAOvA/QAAwBHAF0AAAERIREHERUfDTMhMz8OES8OIyEjDw0nETMRITUhIw8
NA1X+DFsCAgMEBQUGBgcICAgJCQkB9AkJCQgICAcGBgUFBAMCAQEBAQIDBAUFBgYHCAgICQkJ/gw
JCQkICAgHBgYFBQQDAgK2WQIT/e0JCQkIBwgHBgYFBAQDAgEC4/2EAnwF/YgJCQgJCAcHBgYGBAQ
DAgICAgMEBAYGBgcHCAkICQkCeAkJCQgICAcGBgUFAwMDAQEDAwMFBQYGBwgICAkJsv2EAnxbAgI
DBAUFBgYHCAgICQkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAQAAEAAQAAAAAAAgAHABEAAQA
AAAAAAwAQABgAAQAAAAAABAAQACgAAQAAAAAABQALADgAAQAAAAAABgAQAEMAAQAAAAAACgAsAFM
AAQAAAAAACwASAH8AAwABBAkAAAACAJEAAwABBAkAAQAgAJMAAwABBAkAAgAOALMAAwABBAkAAwA
gAMEAAwABBAkABAAgAOEAAwABBAkABQAWAQEAAwABBAkABgAgARcAAwABBAkACgBYATcAAwABBAk
ACwAkAY8gdG9vbGJhci1tYXRlcmlhbFJlZ3VsYXJ0b29sYmFyLW1hdGVyaWFsdG9vbGJhci1tYXR
lcmlhbFZlcnNpb24gMS4wdG9vbGJhci1tYXRlcmlhbEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmN
mdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAdABvAG8AbABiAGEAcgAtAG0
AYQB0AGUAcgBpAGEAbABSAGUAZwB1AGwAYQByAHQAbwBvAGwAYgBhAHIALQBtAGEAdABlAHIAaQB
hAGwAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABWAGUAcgBzAGkAbwBuACAAMQAuADA
AdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdAB
lAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHU
AZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAjAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgE
TARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAAQVGV4dF9PdXRkZW50XzAwMQtQaWN
0dXJlXzAwMQxTZXR0aW5nc18wMDEQQ29sb3JfcGlja2VyXzAwMhBBbGlnbl9DZW50ZXJfMDA2CEx
pbmVfMDAxDVVuZGVybGluZV8wMDEMU29ydF9aLUFfMDAxCFVuZG9fMDAxEENoYXJ0X2J1YmJsZV8
wMDELRG93bmxvYWRfMDAPVGV4dF9pbmRlbnRfMDAxEkNoYXJ0X0RvdWdobnV0XzAwMQlDbGVhcl8
wMDINTnVtYmVyaW5nXzAwMQxTb3J0X0EtWl8wMDEKSXRhbGljXzAwMQtCdWxsZXRzXzAwMQlQYXN

Copyright © 2001 -2024 Syncfusion Inc. 94


Toolbar How To

0ZV8wMDEIUmVkb18wMDEPQ2hhcnRfcmFkYXJfMDAxD0FsaWduX1JpZ2h0XzAwMQlUYWJsZV8wMDE
OQWxpZ25fTGVmdF8wMDEITWVudV8wMDEHQ3V0XzAwMghCb2xkXzAwMRFBbGlnbl9KdXN0aWZ5XzA
wMQpSZWxvYWRfMDAxClNlYXJjaF8wMDEKVXBsb2FkXzAwMQpEZXNpZ25fMDA1CkV4cG9ydF8wMDE
IQ29weV8wMDIAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-bigger .e-tbar-btn .tb-icons {


font-size: 18px;
}
.e-cut-icon:before {
content: "\e719"
}
.e-copy-icon:before {
content: "\e721"
}
.e-paste-icon:before {
content: "\e712"
}
.e-color-icon:before {
content: "\e703";
}
.e-bold-icon:before {
content: "\e71a"
}
.e-underline-icon:before {
content: "\e706";
}
.e-clear-icon:before {
content: "\e70d"
}
.e-italic-icon:before {
content: "\e710"
}
.e-ascending-icon:before {
content: "\e70f";
}
.e-descending-icon:before {
content: "\e707";
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>

Set item wise custom template in React Toolbar component


The Toolbar supports adding template commands using the template property. Template property can
be given as the HTML element that is either a string or a query selector.

Copyright © 2001 -2024 Syncfusion Inc. 95


Toolbar How To

As string
The HTML element tag can be given as a string for the template property. Here, the checkbox is
rendered as a HTML template.
`ts
template: "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"
`
As selector
The template property also allows getting template content through query selector. Here, checkbox 'ID'
attribute is specified in the template.
`ts
template: "#Template"
`
INDEX.JSX
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const buttonTemplate = () => {
return (<div>
<ButtonComponent content="Template"></ButtonComponent>
</div>)
}
const ReactApp = () => {
return (
<ToolbarComponent >
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective type="Separator" />
<ItemDirective text="Paste" />
<ItemDirective type="Separator" />
<ItemDirective template="<div><input type='checkbox' id='check1'
checked=''>Accept</input></div>" />
<ItemDirective text="Undo" />
<ItemDirective text="Redo" />
<ItemDirective template={buttonTemplate} />
</ItemsDirective>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';

Copyright © 2001 -2024 Syncfusion Inc. 96


Toolbar How To

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';


const buttonTemplate = () => {
return (<div>
<ButtonComponent content="Template"></ButtonComponent>
</div>)
}
const ReactApp = () => {
return (
<ToolbarComponent >
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective type="Separator" />
<ItemDirective text="Paste" />
<ItemDirective type="Separator" />
<ItemDirective template="<div><input type='checkbox' id='check1'
checked=''>Accept</input></div>" />
<ItemDirective text="Undo" />
<ItemDirective text="Redo" />
<ItemDirective template={buttonTemplate} />
</ItemsDirective>
</ToolbarComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<link
href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component
.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom_bold .e-tbar-btn-text {

Copyright © 2001 -2024 Syncfusion Inc. 97


Toolbar How To

font-weight: 900;
}
.custom_italic .e-tbar-btn-text {
font-style: italic;
}
.custom_underline .e-tbar-btn-text {
text-decoration: underline red;
}
.e-txt-casing .e-tbar-btn-text {
font-variant: small-caps;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>

Add toggle button in React Toolbar component


Toolbar supports to add a toggle Button by using the template property. Refer below steps

• By using Toolbar template property, pass required HTML String to render toggle button.

`ts
<ItemDirective template='<button class="e-btn" id="media_btn"></button>' />
`

• Now render the toggle Button into the targeted element in Toolbar created event handler and
bind click event for it. On clicking the toggle Button, change the required icon and content based
on current active state.

INDEX.JSX
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const ReactApp = () => {
const zoomBtnRef = useRef<ButtonComponent>(null);
const mediaBtnRef = useRef<ButtonComponent>(null);

Copyright © 2001 -2024 Syncfusion Inc. 98


Toolbar How To

const undoBtnRef = useRef<ButtonComponent>(null);


const filterBtnRef = useRef<ButtonComponent>(null);
const visibleBtnRef = useRef<ButtonComponent>(null);
const contentRef = useRef(null);
//Toggle button click event handlers
const zoomBtnClick = () => {
if (zoomBtnRef.current) {
zoomBtnRef.current.element.onclick = () => {
if (zoomBtnRef.current.element.classList.contains('e-active')) {
zoomBtnRef.current.iconCss = 'e-icons e-zoomout-icon';
} else {
zoomBtnRef.current.iconCss = 'e-icons e-zoomin-icon';
}
};
}
}
const mediaBtnClick = () => {
if (mediaBtnRef.current) {
mediaBtnRef.current.element.onclick = () => {
if (mediaBtnRef.current.element.classList.contains('e-active')) {
mediaBtnRef.current.iconCss = 'e-icons e-pause-icon';
} else {
mediaBtnRef.current.iconCss = 'e-icons e-play-icon';
}
};
}
}
const undoBtnClick = () => {
if (undoBtnRef.current) {
undoBtnRef.current.element.onclick = () => {
if (undoBtnRef.current.element.classList.contains('e-active')) {
undoBtnRef.current.iconCss = 'e-icons e-redo-icon';
} else {
undoBtnRef.current.iconCss = 'e-icons e-undo-icon';
}
};
}
}
const filterBtnClick = () => {
if (filterBtnRef.current) {
filterBtnRef.current.element.onclick = () => {
if (filterBtnRef.current.element.classList.contains('e-active')) {
filterBtnRef.current.iconCss = 'e-icons e-filternone-icon';
} else {
filterBtnRef.current.iconCss = 'e-icons e-filter-icon';
}
};
}
}
const visibleBtnClick = () => {
if (visibleBtnRef.current) {
visibleBtnRef.current.element.onclick = () => {
if (visibleBtnRef.current.element.classList.contains('e-active')) {
contentRef.current.style.display = 'none';
visibleBtnRef.current.content = 'Show';
visibleBtnRef.current.iconCss = 'e-icons e-show-icon';
} else {

Copyright © 2001 -2024 Syncfusion Inc. 99


Toolbar How To

contentRef.current.style.display = 'block';
visibleBtnRef.current.content = 'Hide';
visibleBtnRef.current.iconCss = 'e-icons e-hide-icon';
}
};
}
}
const zoomBtn = () => {
return (<div>
<ButtonComponent cssClass='e-flat' iconCss='e-icons e-zoomin-icon'
isToggle={true} ref={zoomBtnRef}></ButtonComponent>
</div>);
}
const mediaBtn = () => {
return (<div>
<ButtonComponent cssClass='e-flat' iconCss='e-icons e-play-icon'
isToggle={true} ref={mediaBtnRef}></ButtonComponent>
</div>);
}
const undoBtn = () => {
return (<div>
<ButtonComponent cssClass='e-flat' iconCss='e-icons e-undo-icon'
isToggle={true} ref={undoBtnRef}></ButtonComponent>
</div>);
}
const filterBtn = () => {
return (<div>
<ButtonComponent cssClass='e-flat' iconCss='e-icons e-filter-icon'
isToggle={true} ref={filterBtnRef}></ButtonComponent>
</div>);
}
const visibleBtn = () => {
return (<div>
<ButtonComponent cssClass='e-flat' iconCss='e-icons e-hide-icon'
isToggle={true} content='Hide' ref={visibleBtnRef}></ButtonComponent>
</div>);
}
const divMargin = { margin: '25px 0' };
return (
<div className='control-pane'>
<div className='control-section tbar-control-section'>
<div className='control toolbar-sample tbar-sample'
style={divMargin}>
<ToolbarComponent id="ej2Toolbar">
<ItemsDirective>
<ItemDirective template={mediaBtn} click={mediaBtnClick} />
<ItemDirective type='Separator' />
<ItemDirective template={zoomBtn} click={zoomBtnClick} />
<ItemDirective type='Separator' />
<ItemDirective template={undoBtn} click={undoBtnClick} />
<ItemDirective type='Separator' />
<ItemDirective template={filterBtn} click={filterBtnClick} />
<ItemDirective type='Separator' />
<ItemDirective template={visibleBtn} click={visibleBtnClick}
/>
</ItemsDirective>
</ToolbarComponent>

Copyright © 2001 -2024 Syncfusion Inc. 100


Toolbar How To

<br></br>
<div ref={contentRef}>
This content will be hidden, when you click on hide button and
toggle
get an active state as show, otherwise it will be visible.
</div>
</div>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const ReactApp = () => {
const zoomBtnRef = useRef<ButtonComponent>(null);
const mediaBtnRef = useRef<ButtonComponent>(null);
const undoBtnRef = useRef<ButtonComponent>(null);
const filterBtnRef = useRef<ButtonComponent>(null);
const visibleBtnRef = useRef<ButtonComponent>(null);
const contentRef = useRef(null);
//Toggle button click event handlers
const zoomBtnClick = () => {
if (zoomBtnRef.current) {
zoomBtnRef.current.element.onclick = () => {
if (zoomBtnRef.current.element.classList.contains('e-active')) {
zoomBtnRef.current.iconCss = 'e-icons e-zoomout-icon';
} else {
zoomBtnRef.current.iconCss = 'e-icons e-zoomin-icon';
}
};
}
}
const mediaBtnClick = () => {
if (mediaBtnRef.current) {
mediaBtnRef.current.element.onclick = () => {
if (mediaBtnRef.current.element.classList.contains('e-active')) {
mediaBtnRef.current.iconCss = 'e-icons e-pause-icon';
} else {
mediaBtnRef.current.iconCss = 'e-icons e-play-icon';
}
};
}
}
const undoBtnClick = () => {
if (undoBtnRef.current) {
undoBtnRef.current.element.onclick = () => {
if (undoBtnRef.current.element.classList.contains('e-active')) {

Copyright © 2001 -2024 Syncfusion Inc. 101


Toolbar How To

undoBtnRef.current.iconCss = 'e-icons e-redo-icon';


} else {
undoBtnRef.current.iconCss = 'e-icons e-undo-icon';
}
};
}
}
const filterBtnClick = () => {
if (filterBtnRef.current) {
filterBtnRef.current.element.onclick = () => {
if (filterBtnRef.current.element.classList.contains('e-active')) {
filterBtnRef.current.iconCss = 'e-icons e-filternone-icon';
} else {
filterBtnRef.current.iconCss = 'e-icons e-filter-icon';
}
};
}
}
const visibleBtnClick = () => {
if (visibleBtnRef.current) {
visibleBtnRef.current.element.onclick = () => {
if (visibleBtnRef.current.element.classList.contains('e-active')) {
contentRef.current.style.display = 'none';
visibleBtnRef.current.content = 'Show';
visibleBtnRef.current.iconCss = 'e-icons e-show-icon';
} else {
contentRef.current.style.display = 'block';
visibleBtnRef.current.content = 'Hide';
visibleBtnRef.current.iconCss = 'e-icons e-hide-icon';
}
};
}
}
const zoomBtn = () => {
return (<div>
<ButtonComponent cssClass='e-flat' iconCss='e-icons e-zoomin-icon'
isToggle={true} ref={zoomBtnRef}></ButtonComponent>
</div>);
}
const mediaBtn = () => {
return (<div>
<ButtonComponent cssClass='e-flat' iconCss='e-icons e-play-icon'
isToggle={true} ref={mediaBtnRef}></ButtonComponent>
</div>);
}
const undoBtn = () => {
return (<div>
<ButtonComponent cssClass='e-flat' iconCss='e-icons e-undo-icon'
isToggle={true} ref={undoBtnRef}></ButtonComponent>
</div>);
}
const filterBtn = () => {
return (<div>
<ButtonComponent cssClass='e-flat' iconCss='e-icons e-filter-icon'
isToggle={true} ref={filterBtnRef}></ButtonComponent>
</div>);
}

Copyright © 2001 -2024 Syncfusion Inc. 102


Toolbar How To

const visibleBtn = () => {


return (<div>
<ButtonComponent cssClass='e-flat' iconCss='e-icons e-hide-icon'
isToggle={true} content='Hide' ref={visibleBtnRef}></ButtonComponent>
</div>);
}
const divMargin = { margin: '25px 0' };
return (
<div className='control-pane'>
<div className='control-section tbar-control-section'>
<div className='control toolbar-sample tbar-sample'
style={divMargin}>
<ToolbarComponent id="ej2Toolbar">
<ItemsDirective>
<ItemDirective template={mediaBtn} click={mediaBtnClick} />
<ItemDirective type='Separator' />
<ItemDirective template={zoomBtn} click={zoomBtnClick} />
<ItemDirective type='Separator' />
<ItemDirective template={undoBtn} click={undoBtnClick} />
<ItemDirective type='Separator' />
<ItemDirective template={filterBtn} click={filterBtnClick} />
<ItemDirective type='Separator' />
<ItemDirective template={visibleBtn} click={visibleBtnClick}
/>
</ItemsDirective>
</ToolbarComponent>
<br></br>
<div ref={contentRef}>
This content will be hidden, when you click on hide button and
toggle
get an active state as show, otherwise it will be visible.
</div>
</div>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />

Copyright © 2001 -2024 Syncfusion Inc. 103


Toolbar How To

<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id="container">
<div id="toolbar" class="toggle">
<div id="loader">LOADING....</div>
</div>
<br />
</div>
</body>
</html>

How to customize toolbar scroll step in React Toolbar component


Toolbar supports to customize the scrolling distance when you click the left and right side navigation
icons. we can customize ScrollStep property for scrolling distance. Refer to the following code example.
By using Toolbar scrollStep property, pass a required value to customize toolbar scrollStep.
INDEX.JSX
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';
const ReactApp = () => {
const divMargin = { margin: '25px 0' };
return (<div className='control-pane'>
<div className='control-section tbar-control-section'>
<div className='control toolbar-sample tbar-sample'
style={divMargin}>
<ToolbarComponent id="ej2Toolbar" width="600px" scrollStep={50}>
<ItemsDirective>
<ItemDirective prefixIcon='e-cut-icon tb-icons'
tooltipText='Cut'/>
<ItemDirective prefixIcon='e-copy-icon tb-icons'
tooltipText='Copy'/>
<ItemDirective prefixIcon='e-paste-icon tb-icons'
tooltipText='Paste'/>
<ItemDirective type='Separator'/>
<ItemDirective prefixIcon='e-bold-icon tb-icons'
tooltipText='Bold'/>
<ItemDirective prefixIcon='e-underline-icon tb-icons'
tooltipText='Underline'/>
<ItemDirective prefixIcon='e-italic-icon tb-icons'
tooltipText='Italic'/>
<ItemDirective prefixIcon='e-color-icon tb-icons'
tooltipText='Color-Picker'/>
<ItemDirective type='Separator'/>
<ItemDirective prefixIcon='e-alignleft-icon tb-icons'
tooltipText='Align_Left'/>

Copyright © 2001 -2024 Syncfusion Inc. 104


Toolbar How To

<ItemDirective prefixIcon='e-alignright-icon tb-icons'


tooltipText='Align_Right'/>
<ItemDirective prefixIcon='e-aligncenter-icon tb-icons'
tooltipText='Align_Center'/>
<ItemDirective prefixIcon='e-alignjustify-icon tb-icons'
tooltipText='Align_Justify'/>
<ItemDirective type='Separator'/>
<ItemDirective prefixIcon='e-bullets-icon tb-icons'
tooltipText='Bullets'/>
<ItemDirective prefixIcon='e-numbering-icon tb-icons'
tooltipText='Numbering'/>
<ItemDirective type='Separator'/>
<ItemDirective prefixIcon='e-bullets-icon tb-icons'
tooltipText='Bullets'/>
<ItemDirective prefixIcon='e-numbering-icon tb-icons'
tooltipText='Numbering'/>
<ItemDirective type='Separator'/>
<ItemDirective prefixIcon='e-ascending-icon tb-icons'
tooltipText='Sort A - Z'/>
<ItemDirective prefixIcon='e-descending-icon tb-icons'
tooltipText='Sort Z - A'/>
<ItemDirective type='Separator'/>
<ItemDirective prefixIcon='e-indent-icon tb-icons'
tooltipText='Text Indent'/>
<ItemDirective prefixIcon='e-outdent-icon tb-icons'
tooltipText='Text Outdent'/>
<ItemDirective type='Separator'/>
<ItemDirective prefixIcon='e-clear-icon tb-icons'
tooltipText='Clear'/>
<ItemDirective prefixIcon='e-reload-icon tb-icons'
tooltipText='Reload'/>
<ItemDirective prefixIcon='e-export-icon tb-icons'
tooltipText='Export'/>
</ItemsDirective>
</ToolbarComponent>
</div>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.TSX
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';
const ReactApp = () => {
const divMargin = { margin: '25px 0' };
return (
<div className='control-pane'>
<div className='control-section tbar-control-section'>
<div className='control toolbar-sample tbar-sample'
style={divMargin}>
<ToolbarComponent id="ej2Toolbar" width="600px" scrollStep={50}>

Copyright © 2001 -2024 Syncfusion Inc. 105


Toolbar How To

<ItemsDirective>
<ItemDirective prefixIcon='e-cut-icon tb-icons'
tooltipText='Cut' />
<ItemDirective prefixIcon='e-copy-icon tb-icons'
tooltipText='Copy' />
<ItemDirective prefixIcon='e-paste-icon tb-icons'
tooltipText='Paste' />
<ItemDirective type='Separator' />
<ItemDirective prefixIcon='e-bold-icon tb-icons'
tooltipText='Bold' />
<ItemDirective prefixIcon='e-underline-icon tb-icons'
tooltipText='Underline' />
<ItemDirective prefixIcon='e-italic-icon tb-icons'
tooltipText='Italic' />
<ItemDirective prefixIcon='e-color-icon tb-icons'
tooltipText='Color-Picker' />
<ItemDirective type='Separator' />
<ItemDirective prefixIcon='e-alignleft-icon tb-icons'
tooltipText='Align_Left' />
<ItemDirective prefixIcon='e-alignright-icon tb-icons'
tooltipText='Align_Right' />
<ItemDirective prefixIcon='e-aligncenter-icon tb-icons'
tooltipText='Align_Center' />
<ItemDirective prefixIcon='e-alignjustify-icon tb-icons'
tooltipText='Align_Justify' />
<ItemDirective type='Separator' />
<ItemDirective prefixIcon='e-bullets-icon tb-icons'
tooltipText='Bullets' />
<ItemDirective prefixIcon='e-numbering-icon tb-icons'
tooltipText='Numbering' />
<ItemDirective type='Separator' />
<ItemDirective prefixIcon='e-bullets-icon tb-icons'
tooltipText='Bullets' />
<ItemDirective prefixIcon='e-numbering-icon tb-icons'
tooltipText='Numbering' />
<ItemDirective type='Separator' />
<ItemDirective prefixIcon='e-ascending-icon tb-icons'
tooltipText='Sort A - Z' />
<ItemDirective prefixIcon='e-descending-icon tb-icons'
tooltipText='Sort Z - A' />
<ItemDirective type='Separator' />
<ItemDirective prefixIcon='e-indent-icon tb-icons'
tooltipText='Text Indent' />
<ItemDirective prefixIcon='e-outdent-icon tb-icons'
tooltipText='Text Outdent' />
<ItemDirective type='Separator' />
<ItemDirective prefixIcon='e-clear-icon tb-icons'
tooltipText='Clear' />
<ItemDirective prefixIcon='e-reload-icon tb-icons'
tooltipText='Reload' />
<ItemDirective prefixIcon='e-export-icon tb-icons'
tooltipText='Export' />
</ItemsDirective>
</ToolbarComponent>
</div>
</div>
</div>

Copyright © 2001 -2024 Syncfusion Inc. 106


Toolbar How To

);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<link
href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component
.css" rel="stylesheet" />
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;

Copyright © 2001 -2024 Syncfusion Inc. 107


Toolbar How To

top: 45%;
width: 30%;
}
@font-face {
font-family: 'Material_toolbar';
src: url(data:application/x-font-ttf;charset=utf-
8;base64,AAEAAAAKAIAAAwAgT1MvMj1tShMAAAEoAAAAVmNtYXDoMOjqAAACDAAAAHhnbHlmIuy
19QAAAswAACNMaGVhZA6okZMAAADQAAAANmhoZWEIUQQkAAAArAAAACRobXR4jAAAAAAAAYAAAAC
MbG9jYYc0kUIAAAKEAAAASG1heHABOwG8AAABCAAAACBuYW1lx/RZbQAAJhgAAAKRcG9zdJZeEVU
AACisAAACGAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAIwABAAAAAQAAAQsu/F8
PPPUACwQAAAAAANXLJlEAAAAA1csmUQAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAjAbAADgAAAAA
AAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnIQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAA
EAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQ
AAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAA
AAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGQAAAAEAAQAAQAA5yH//wA
A5wD//wAAAAEABAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABY
AFwAYABkAGgAbABwAHQAeAB8AIAAhACIAAAAAADIAjgFwAfgCIAKYAxIDSAO2BRYFMAVcBnIGugb
2ByoHQgguCNYJRgn6CiQKiAquCsgMFgzADOYNzg7WDvAQyBEyEaYABwAAAAAD9APzAAMABwAKAA4
AEgAVABkAADchNSElITUhJTkBBSE1ITUhNSEFFxEnITUhDAPo/BgBtgIy/c7+SgG2AjL9zgIy/c7
+Svr6A+j8GAxefV67Pl19Xvr6AfScXgAAAAIAAAAAA/QD9AAEAEgAACUhNxc3AREfDyE/DxEvDyE
PDgOF/PbDisP9gQEBAwQEBgYICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsL/PYLCwsKCgkICAgGBgQEAwGz+qf6AYX89gsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQo
KCwsLAwoLCwsKCgkICAgGBgQEAwEBAQEDBAQGBggICAkKCgsLAAACAAAAAAPzA/QAQAC/AAABFQ8
PLw8/Dx8OAQ8ELwErAQ8FFR8FBxcPAxUfBzsBNx8LOwI/Cx8BOwE/Bj0BLwQ/Aic/BC8HKwEHLws
rAg8FArIBAgUGBwkKDAwODxAQERITEhIREQ8PDgwMCgkHBgUCAQECBQYHCQoMDA4PDxEREhITEhE
QEA8ODAwKCQcGBQL+zxUWFhUWfwUFBAUDBANqAgEBAgIDbgMDbwMCAQEBAmkDBAQEBQSEFBYWFxQ
CAgIDBAQEBcwFBAQEAwICAhQXFRYVgAQFBQQEAwNoAgEBAgIDcAEBAQNvAgIBAQEBA2gDBAQFBAW
DFBYWFxIBAgMDAwQFBcwFBAQDBAICAgAJCRIQEBAODgwLCgkHBgQDAQEDBAYHCQoLDA4OEBAQEhI
SEhAQEA4ODAsKCQcGBAMBAQMEBgcJCgsMDg4QEBASAc6ECwwNDjIBAQICA7QEBQQFBAMEUjIyVgM
EBAQFBAWwAwICATMODQwLhAQEBAMCAgECAgIDBAMEhAsMDQ4yAQECAgOwBAQFBAUEAwRSDAwaMlY
DBAQEBQQFsAMCAgEzDg0MC4QEAwQDAgICAgICAwQDAAAAAAMAAAAAA/MD2AAyADUAaQAAJRUfDTs
BPw41LwgPBwMhAScXAQ8GHQEfBQEfBjsBPwYBPwYvBwEDFgIDBAQGBgcICQkKCgsLCwsLCwoKCQg
ICAYGBAQDAQEDBAcMCQoLFCMtFQoJCQcFBHv96gEL04X+4gYFBAQCAgICAgIEBAUBNwcHBwgHCAc
IBwgHCAgHBwYBOAUEAwMCAQEBAQIDAwQFBv4PlwsLCwoKCQkIBwYGBAQDAgIDBAQGBgcICQkKCgs
LCwcPEBAYEBAPHCk3HRAQEBAQEAEIAQrThf7iBgcIBwgHCAgICAgHBwcH/skGBQQEAwIBAQIDBAQ
FBgE3BwcHBwgICAgHCAgHCAcGAfEABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITchNSEnITUhNyE
1ISchNSEMA+j8GN4CLP3U3gPo/BjeAiz91N4D6PwYDF6AW5xefVqAXgAAAAAEAAAAAAP0A/QACQA
TABcAWwAAAQcVMzcXMzUjLwEjFTMbATM1IwElESERBxEfDyE/DxEvDyEPDgFro8ObnnROxOp0nZv
qTij+8AGW/NReAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgo
LCwv89gsLCwoKCQgICAYGBAQDAQENAyOWliO4BSUBK/7VJQFSffzUAywR/PYLCwsKCgkICAgGBgQ
EAwEBAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgoLCwAAAAA
CAAAAAAOWA/QAAwBpAAA3ITUhExUfHTsBPx01ESMRDw8vDxEjagMs/NRKAgIDAwUFBgcHCAkJCgs
LCwwNDQ0ODw4PEA8QERAREREREBEQDxAPDg8ODQ0NDAsLCwoJCQgHBwYFBQMDAgKLAQMFBggKCww
ODxARERMTFBQTExEREA8ODAsFCQcGBAKLDH0BsBEREREQEA8QDg8ODg0MDQsLCwoJCQgHBwYFBQQ
DAgEBAgMEBQUGBggICQkKCgsMDAwNDg4ODw8PEBAQERERAb7+RRQTEhIREA8NDQsKCAYFAwEBAwU
GCAoLDQ0PCBASEhMTAcUABQAAAAAD9APXAAIABQANABcAGgAAJTcjASM3ATM3MxczAyMFIQEVITU
hATUhJTMnAgJx4wG/vl/+/Fot+i1a3FD9RgEg/t4Bov7UAST+aAF/6XQobQET//47eHgCM07+XD5
NAaQ/UHMAAAAAAQAAAAAD9ALoAF8AABMhJz8PHxo3Lx8PDycMAbWyDQ0ODg8PDxAQEBERERIREhA
QEBAQDw8PDw4ODg0NDQwMFxYTEhAHBgYGBXUHBwgJCQoLCwwNDQ0PDg8QEBERERITEhMUExQVFBU
VFRgYFxcXFhYVFhQUFBMTEhGwARi6CwsJCggICAYGBgQEAwIBAQEBAgIDBAQFBQYHBwgICQkKFRY
YGhsODg8PDygUFBMTEhISERARDw8PDg0NDAsLCgoICAgGBgQEAwMBAQECAwQFBgcJCQoLDA0ODg+
6AAYAAAAAA/MD9AA/AGsAqwDrAO8BMwAAARUfDTsBPw09AS8ODw4lHwk7AT8IPQEvByMnByMPByU
fDz8PLw8PDiUfDz8OPQEvDSsBDw0lESERBxEfDyE/DxEvDyEPDgHhAgMFBQYHCAkKCgsLDA0NDA0
MCwsKCgkIBwYFBQMCAgMFBQYHCAkKCgsLDA0MDQ0MCwsKCgkIBwYFBQMC/scBAQEFBwgKCwYGBwY
GBgwKCAcFAQEBAQUHCAoMBgYGBwYGCwoIBwUBAQHzAQECBAQEBgYGCAcICQkJCgoJCQgJBwgGBgY
EBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCQgHCAYGBgQEBAIB/qgBAQMEBAYGBwgICQoKCgsLCws

Copyright © 2001 -2024 Syncfusion Inc. 108


Toolbar How To

LCgkJCQcHBwUFAwMCAgMDBQUHBwcJCQkKCwsLCwsKCgoJCAgHBgYEBAMBAlD81F4BAQMDBAUGBgc
HCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgYHBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwM
BAWQNDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA0NDAwLCwsJCQgHBwUEAwIBAQIDBAUHBwg
JCQsLCwwMMQYGBgsKCQcEAgEBAgQHCQoLBgYGBwYGCwoJBgUCAQECBQYJCgsGBvMJCgkICAgHBwY
FBQQDAwEBAQEDAwQFBQYHBwgICAkKCQoJCQkICAcGBwUFBAMCAQEBAQIDBAUFBwYHCAgJCQkGCws
KCgoJCAgHBgYEBAMBAQEBAwQEBgYHCAgJCgoKCwsLCwsKCQkJBwcHBQUDAwICAwMFBQcHBwkJCQo
LC9/81AMsA/zaCgkJCQkIBwcGBgUEBAIBAQEBAgQEBQUHBwcICQkJCQoDJgoJCQkJCAcHBwUFBAQ
CAQEBAQIEBAUFBwcHCAkJCQkAAAAAAgAAAAADtQP0AAMACgAANyE1IQEjCQEjESFKA2z8lAEG7AG
cAZzs/qAMfQIK/mQBnAFhAAYAAAAAA/QD8wADAAcACwAPABIAFgAANyE1ISUhNSE1ITUhNSE1KQE
RNwMhNSEMA+j8GAG2AjL9zgIy/c4CMv3O/kr6+gPo/BgMXn1efV19Xv4M+gGWXgAFAAAAAAPzA/M
AJQBpAKgArADwAAABFT8bIw8GBR8PNSMvDT8CJw8OHw8TByMPDBc/AzsBHwUzHwYzLxcjJREhEQc
RHw8hPw8RLw8hDw4CKg8QDw8ODg4NDQwMDAwKCwoKCQgJDw0KCQQDAgLxBAUGBggJC/7WDQ0NDg4
PDw8PEA8QEBAQEAoKCQkJCQgIBgQEBAUDAQEDBKsKCQgIBwYGBQUDAwMBAQEBAQEDAwQEBQYHBwg
ICgoL9g4OHA4ODQ4NDg0NDQwNDKkLDA8HCAkJCAgICA4DEAUFBQMEAu4EBwkKDQ8REwoKCwsMDAw
NDQ4ODg4PDy8KAZP81F4BAQMDBAUGBgcHCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgY
HBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwMBAZz0AgMDBAQFBQYHBwgICQkJCgsLCwsYGhsbDw4PDwo
KCQgIBwaUDAsLCgkIBwcGBQQEAgIBAfEBAwMEBQYIBQcGBw8PEA8ODa0NDQ0ODg4ODw8PDw8PEA8
PEA8PEA8ODw8ODg0ODQ0MAj8BBAMDBAQFBgcHBwkJCqoGBQQBAQICBAMJEAcHCAgJCh0dHRsaGRc
XCgoKCQgICAcGBgYEBQMDBj781AMsA/zaCgkJCQkIBwcGBgUEAwMBAQEBAgQEBQYGBwcICQkJCQo
DJgoJCQkJCAcHBgYFBAQCAQEBAQIEBAUFBwcHCAkJCQkAAgAAAAAD8wPrAB8AMwAAEw8HHww/BBU
hNSEBNwkBPwcvCDYKCAcGBQMCAQECAwUGBwgKrwgJCgoKCgkINQKQ/Xv+20EBPAGOCgkHBgUDAgE
BAgMFBgcJCtMBoQsMDQ0NDg4ODg0ODQ0NDAuvBgUDAQECBAY0I14BJEH+xAGRCwwMDQ0ODg4ODg4
NDQwMC9QABgAAAAAD9AP0AAMADwATAB0AIQAnAAAlITUhIzMVIxUzFSMVMzUjNyE1ISMzBxUzNSM
3NSM3ITUhJzMVMzUjAQYC7v0S+n0/P328vPoC7v0S+nh4vHh4vPoC7v0S+j4/fWpeID4gPvrbXXw
/P3w/u14gvPoAAAAABQAAAAAD9APbAAIABQANABcAGgAAJTcjAyM3ATM3MxczAyMFIQEVITUhATU
hJzMnAgJx4x6+Xv76Wi39LF3fTwFlAST+3AGk/tIBJP5mw+l0JXMBGP/+N3h4AjRQ/lo+TQGpPk5
zAAABAAAAAAOsA/QACwAAATMDIxUhNSMTMzUhAXGd88gCPJ3zyP3EAx79xNbWAjzWAAAGAAAAAAP
0A9QAAwBDAEcAhwCLAMsAACUhNSEHFR8OPw49AS8ODw4TITUhBxUfDTsBPw09AS8ODw4TITUhBxU
fDj8OPQEvDg8OAQYC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgY
HBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQE
CAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgY
GBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAkpeLwgIBwcHBwYFBQUDBAICAQE
BAQICBAMFBQUGBwcHBwgICAgIBwcGBgYFBAQDAwIBAQEBAgMDBAQFBgYGBwcICAFgXS4ICAgHBwY
GBgUEBAMDAgEBAgMDBAQFBgYGBwcICAgICAcHBwcGBQUFAwQCAgEBAQECAgQDBQUFBgcHBwcIAUB
dLggICAcHBgYGBQQEAwMCAQEBAQIDAwQEBQYGBgcHCAgICAgHBwcHBgUFBQMEAgIBAQEBAgIEAwU
FBQYHBwcHCAAAAwAAAAADmQP0AAcAKACNAAABFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw0VERUfDTM
hMz8NNRE1Lw0rAS8OKwEPDQEdAcZb/YQBbAEDBAYHBwkJCQkHBwYEAwEBAwQGBwcJCQkJBwcGBAO
svwkJCQgICAcGBgYEBAMCAgICAwQEBgYGBwgICAkJCQJ8CQkJCAgIBwYGBgQEAwICAgIDBAQGBgY
HCAgICQkJvwMFBQYGBwgICQkJCgoKCwsLCwoKCgkJCQgIBwYGBQUDPoiI/SkC1y4FBQgIBwUEAwE
BAwQFBwgICgkICAcFBQIBAQIFBQcICCQCAgMEBAYGBgcICAgJCQn9KQkJCQgICAcGBgUFBAMCAgI
CAwQFBQYGBwgICAkJCQLXCQkJCAgIBwYGBgQEAwICCgkJCAgIBwYGBQQEAwICAgIDBAQFBgYHCAg
ICQkAAQAAAAAD9ALoAGAAAAExLw8PHxc/Gh8PByERA0QREhMTFBQUFRYWFhcXFxgYFRUVFBUUExQ
TEhMSEREREBAPDg8NDQ0MCwsKCQkIBwd1BQYGBgcQEhMWFwwMDQ0NDg4ODw8PDxAQEBAQEhESERE
QERAQDw8PDg4NDbIBtQIuDw4ODQwLCgkJBwYFBAMCAQEBAwMEBAYGCAgICgoLCwwNDQ4PDw8REBE
SEhITExQUKA8PDw4OGxoYFhUKCQkICAcHBgUFBAQDAgIBAQEBAgMEBAYGBggICAoJCwu6AdAAAAA
OAAAAAAP0A/MAAgAFAAgACwAQABQAFwAbAB4AIQApAC0AMQB1AAABETclFzUXNyMFNyETFQUhEQE
hJRMlMycFMSEnBzcnBxcRBRMDBSUDEy0BEQMlIwUDEQcRHw8hPw8RLw8hDw4CGcj+ZaG3MJb+wM7
+4jQBCv6EAy7+ggEKdP1S3JkBCwEjWemWlvrIATJ0dP7n/up3dwEWAZhy/vQ0/vZyXgEBAwQEBgY
ICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsL/PYLCwsKCgkICAgGBgQ
EAwEBxv7fWSQ730Bky8v+9QNxAYH+f28BHx2ZmcukmTgJywEeP/7n/ud3dwEZARl3Bv5xAR1ycv7
yAYAR/PYLCwsKCgkICAcHBQUEAwEBAQEDBAUFBwcICAkKCgsLCwMKCwsLCgoJCAgHBwUFBAMBAQE
BAwQEBgYIBwkJCgoLCwAAAAAFAAAAAAP0A/MAAwAHAAsADwATAAA3ITUhJSE1ISUhNSElITUhJSE
1IQwD6PwYAVgCkP1w/qgD6PwYAVgCkP1w/qgD6PwYDF6AW5xefV19XgAAAAAKAAAAAAP0A/MAAwA
HAAsADwATABcAGwAfACMARwAAARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1JxE
fByE/BxEvByEPBgOW+j7bP9oDLPo+2z/aAyz6Pts/2l4BAwUGAwgJCgOJCgkJBwYDBAIBAwUGAwg
JCvx3CgkJBwYFAwElvb27u7u7ARrb29vb29v6vLy8vLy8hvyCCwoJBwQGBAIBAwUHBwUJCgOECwo
JBwQGBAIBAwUGCAkKAAAAAAUAAAAAA/QD8wADAAcACwAPABMAADchNSE1ITUhNSE1ITUhNSE1ITU

Copyright © 2001 -2024 Syncfusion Inc. 109


Toolbar How To

hDAPo/BgCkP1wA+j8GAKQ/XAD6PwYDF6BV59efVqAXgAAAAADAAAAAAP0A00AAwAHAAsAADchNSE
1ITUhNSE1IQwD6PwYA+j8GAPo/Bizb6Zwpm8AAAAABQAAAAAD9AP0AD8AXwCfAKQBIgAAJQ8PLw8
/Dx8OExUPBSsBLwU9AT8FOwEfBQMPDy8PPw8fEAE1IwUVHw8zPwMXBy8FDw8fDz8PNS8DNwEzNQE
/BS8PDw4BOAEBAwMEBQYGBwgICQkKCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgo
KCgkJCAgHBgYFBAMDAeICAgMDBQUFBQUFAwMCAgICAwMFBQUFBQUDAwIC4QEBAwMEBQYGBwgICQk
KCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAftkAV6W/K4
BAwUHCAoMDQ4PERETExQUCwsVFBN2dgkKCgoVFhQUExMREQ8ODQwKCAcFAwEBAwUHCAoMDQ4PERE
TExQUFBQTExERDw4NDAoIBwUDAQEEBgd2AV6W/ZYFBAMCAwEBAwUHCAoMDQ4PERETExQUFBQTExE
RDw4NDAoIBwUD1AoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgoKCgoKCQkICAcGBgUEAwM
BAQEBAwMEBQYGBwgICQkKCgEiBQUFAwMCAgICAwMFBQUFBQUDAwICAgIDAwUFAScKCgoJCQgIBwY
GBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgqgZAF
eMpYKChQTExERDw4NDAoIBwUDAQEEBgd2dgUEAwIDAQEDBQcICgwNDg8RERMTFBQUFBMTEREPDg0
MCggHBQMBAQMFBwgKDA0ODxERExMUFAsLFRQTdv6iMgJqCQoKChUWFBQTExERDw4NDAoIBwUDAQE
DBQcICgwNDg8RERMTFAADAAAAAANXA7UAIgBFAJMAAAEzHw4PDisBNRMzHw4PDisBNQMhPxEvDz8
PLxghAkgKCgkJCAgHBwYGBAQEAgEBAQEDAwQFBgYHBwgJCAkKCeDACgoJCQgIBwcGBgQEBAIBAQE
BAgQEBAYGBwcICAkJCgrAwAHDDQwMDBcWFRMSEQ8NDAoHBgQBAQIDBAYHBwkKCgsNDA4ODwsLCgo
KCAgIBgYFBQMDAQEBAQECAwQEBAUGDA8QEhQVFgwMDA0NDQ0N/nABogICAwQEBgYGBwgICQkKCQo
KCQgJBwgGBgUFBAMCArsBdwICAwQEBgYGCAcICQkKCQoKCQkIBwgGBgYEBAMCArv9MQEBAQIGCAo
MDg8REhQUFhcYGBERERAQEA4ODgwMDAoJCQcICQkKCgoLDAsMDAwMDQwNDQwNDQwMCwwLCxQUERA
ODQoFAwQDAgEBAQAABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITUhNSE1ITUhNSE1ITUhNSEMA+j
8GAPo/BgD6PwYA+j8GAPo/BgMXn1enF59XX1eAAAAAAEAAAAAA9QD1ADUAAATHx8/DxcRIRcPDy8
fPx8fDzMvHw8eKwECAwQFBggICQoMDA0ODhAQERISExQUFRUWFhcXGBgYGBgXFxcWFhUVFBQTEhI
REIr+ZrsMDA0ODg4PEBAQEBESERISEhIREhEQEQ8QDw8ODg0NDAwLCgoJCQgHBgYEBAQCAQEBAQI
EBAQGBgcICQkKCgsMDA0NDg4PDxAPERAREhESEhwcGxoaGBgWFRQSEQ8OCwp7BQYHCAgJCQoLCww
NDQ4ODg8QEBERERISEhMTFBMUFRQYGBgXFxYWFRUUFBMSEhEQEA4ODQwMCgkICAYFBAMCAgAYGBc
XFxYWFRUUFBMSEhEQEA4ODQ0LCgoICAYFBAMCAQECAwQFBggICgoLDQ0ODhCKAZq7DAsLCgkJCAc
HBQUEAwMBAQEBAgQEBAYGBwgICgkLCwwMDQ0ODg8PDxAREBESERISEhIREhEQERAPDw8ODg0NDAw
LCwkKCAgHBgYEBAQCAQECAwUICQsNDxASExUWFxgaExITERIREBAQDw8ODg0NDAsLCgoJCAcHBgY
EBAMCAQEBAgMEBQYICAoKCw0NDg4QEBESEhMUFBUVFhYXFxcYAAAAAgAAAAAD8gP0AGcA7gAAARU
PGC8YPQE/FzsBHxcFHx8/DxcVATcBIyc/Dj0BLx0rAQ8dAoABAgIDAwQFBQUNDxATExYLCwwMDAw
NDQ0NDQ0NDQwNDAsMCxUUEhAPDQUFBQQDAwMBAQEBAwMDBAUFBQ0PEBIUFQsMCwwNDA0NDQ0NDQ0
NDAwMDAsLFhMTEA8NBQUFBAMDAgIB/Y0BAQMDBAUGBggICQkLCwsNDA4ODg8QEBARERISEhMTExE
REBEQEBAQDw8ODg4ODA0OAR1W/uMuDgoKCQkIBwYGBgQEAwMCAQICAwQFBgcHCAkKCgsMDA0NDg8
PDxAREREREhMSExMTExMSEhIRERAQEA8ODg4MDQsLCwkJCAgGBgUEAwMBAoIODQ0MDQwMDAsLFRQ
SEQ4NBgUEBAQDAgEBAQEBAQIDBAQEBQYNDhESFBULCwwMDA0MDQ0ODQ0NDQwMDAwLCxUUEhEODQY
FBQQDAwICAQECAgMDBAUFBg0OERIUFQsLDAwMDA0NDQ0UEhMSEhIRERAQEA8ODg4NDAsLCwkJCAg
GBgUEBAIBAQEBAgIEBAUFBgcHCAgJCgoSLf7jVgEfDg0NDQ4ODg8PDxAQEBERERITExISEhIRERA
QEA8ODg4NDAwLCgoICQcHBQUEBAICAgIEBAUFBwcJCAoKCwwMDQ4ODg8QEBARERISEhITAAAAAgA
AAAADtQP0AAMACgAANyE1IRMzESERMwFKA2z8lA/zAWjz/lkMfQHN/p0BYwGeAAAAAAUAAAAAA/Q
D9AA/AH8AvwD/Aa8AAAEPDisBLw4/Dx8OBQ8OKwEvDj8PHw4lFQ8OLw49AT8OHw4FFQ8OLw49AT8
OHw4BHx8zPw09AS8MPQE/DjsBPx01Lx8PHgOFAQECAgQEBQUGBgcHCAgJCAkJCAcIBgcGBQUEAwM
CAQEBAQIDAwQFBQYHBggHCAkJCAkIBwgHBgYFBQQEAgIB/Z4BAQIDAwQFBQYGBwgHCAkJCAkIBwg
HBgYFBQQDAwIBAQEBAgMDBAUFBgYHCAcICQgJCQgHCAcGBgUFBAMDAgEBvQECAwQEBAYGBgcHCAg
ICQkICAgHBwcFBgQFAwMCAQECAwMFBAYFBwcHCAgICQkICAgHBwYGBgQEBAMCAf7qAQIDAwUEBgU
HBwcICAgJCQgICAcHBgYGBAQEAwIBAQIDBAQEBgYGBwcICAgJCQgICAcHBwUGBAUDAwIB/kQBAgM
EBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGgkICAgHBwYGBgQEBAMCAQECAwMEBAoEBAMDAgE
CAgIEBAUFBgYHBwgICAlkDg8NDg0ODA0MDAwLCwsKCQoICQcIBgYGBQQEAwMCAQECAwQGBwcJCws
MDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgJTCAk
ICAcHBgYFBQQEAgICAgICBAQFBQYGBwcICAkICQgJBwgGBwYFBQQDAwIBAQEBAgMDBAUFBgcGCAc
JCAkICQgIBwcGBgUFBAQCAgICAgIEBAUFBgYHBwgICQgJCAkHCAYHBgUFBAMDAgEBAQECAwMEBQU
GBwYIBwkI1gkJCAcIBgcGBQUEAwMCAQEBAQIDAwQFBQYHBggHCAkJCAkICAcHBgYFBQQEAgIBAQE
BAgIEBAUFBgYHBwgICQgJCQgHCAYHBgUFBAMDAgEBAQECAwMEBQUGBwYIBwgJCQgJCAgHBwYGBQU
EBAICAQEBAQICBAQFBQYGBwcICAn+xhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAgI
CBAQFBQYGBwcICAkICAgIBwcGBgsGBwYIBwgICQkIBwgGBwYFBQQDAwIBAQECAgMEBQUFBgcHCAg
JCQoKCwoMCwwNDA0NDg0ODg4XFxYWFRUVFBQTExIRERAPDw4NDQsLCgkIBwYFBAMBAQECAwQGBwc
JCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAgAAAAAD9AO1AAgAVAAAARchFSEHFzcnJREVHw4hPw4
9ASMVIREhFTM9AS8OIQ8OAtV1/k0BsHI/4OD8+AICAwQFBQYHBwcICQkJCQHPCQkJCQgHBwcGBQU

Copyright © 2001 -2024 Syncfusion Inc. 110


Toolbar How To

EAwICXP4xAc9cAgIDBAUFBgcHBwgJCQkJ/jEJCQkJCAcHBwYFBQQDAgICoHRYdD7e3oD9RAkJCAg
IBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwgICAkJzMwCvMzMCQkICAgHBwYGBQQEAwIBAQEBAgMEBAU
GBgcHCAgICQADAAAAAAOvA/QAAwBHAF0AAAERIREHERUfDTMhMz8OES8OIyEjDw0nETMRITUhIw8
NA1X+DFsCAgMEBQUGBgcICAgJCQkB9AkJCQgICAcGBgUFBAMCAQEBAQIDBAUFBgYHCAgICQkJ/gw
JCQkICAgHBgYFBQQDAgK2WQIT/e0JCQkIBwgHBgYFBAQDAgEC4/2EAnwF/YgJCQgJCAcHBgYGBAQ
DAgICAgMEBAYGBgcHCAkICQkCeAkJCQgICAcGBgUFAwMDAQEDAwMFBQYGBwgICAkJsv2EAnxbAgI
DBAUFBgYHCAgICQkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAQAAEAAQAAAAAAAgAHABEAAQA
AAAAAAwAQABgAAQAAAAAABAAQACgAAQAAAAAABQALADgAAQAAAAAABgAQAEMAAQAAAAAACgAsAFM
AAQAAAAAACwASAH8AAwABBAkAAAACAJEAAwABBAkAAQAgAJMAAwABBAkAAgAOALMAAwABBAkAAwA
gAMEAAwABBAkABAAgAOEAAwABBAkABQAWAQEAAwABBAkABgAgARcAAwABBAkACgBYATcAAwABBAk
ACwAkAY8gdG9vbGJhci1tYXRlcmlhbFJlZ3VsYXJ0b29sYmFyLW1hdGVyaWFsdG9vbGJhci1tYXR
lcmlhbFZlcnNpb24gMS4wdG9vbGJhci1tYXRlcmlhbEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmN
mdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAdABvAG8AbABiAGEAcgAtAG0
AYQB0AGUAcgBpAGEAbABSAGUAZwB1AGwAYQByAHQAbwBvAGwAYgBhAHIALQBtAGEAdABlAHIAaQB
hAGwAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABWAGUAcgBzAGkAbwBuACAAMQAuADA
AdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdAB
lAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHU
AZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAjAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgE
TARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAAQVGV4dF9PdXRkZW50XzAwMQtQaWN
0dXJlXzAwMQxTZXR0aW5nc18wMDEQQ29sb3JfcGlja2VyXzAwMhBBbGlnbl9DZW50ZXJfMDA2CEx
pbmVfMDAxDVVuZGVybGluZV8wMDEMU29ydF9aLUFfMDAxCFVuZG9fMDAxEENoYXJ0X2J1YmJsZV8
wMDELRG93bmxvYWRfMDAPVGV4dF9pbmRlbnRfMDAxEkNoYXJ0X0RvdWdobnV0XzAwMQlDbGVhcl8
wMDINTnVtYmVyaW5nXzAwMQxTb3J0X0EtWl8wMDEKSXRhbGljXzAwMQtCdWxsZXRzXzAwMQlQYXN
0ZV8wMDEIUmVkb18wMDEPQ2hhcnRfcmFkYXJfMDAxD0FsaWduX1JpZ2h0XzAwMQlUYWJsZV8wMDE
OQWxpZ25fTGVmdF8wMDEITWVudV8wMDEHQ3V0XzAwMghCb2xkXzAwMRFBbGlnbl9KdXN0aWZ5XzA
wMQpSZWxvYWRfMDAxClNlYXJjaF8wMDEKVXBsb2FkXzAwMQpEZXNpZ25fMDA1CkV4cG9ydF8wMDE
IQ29weV8wMDIAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}
.e-cut-icon:before {
content: "\e719"
}
.e-copy-icon:before {
content: "\e721"
}
.e-paste-icon:before {
content: "\e712"
}
.e-color-icon:before {
content: "\e703";
}
.e-bold-icon:before {
content: "\e71a"
}
.e-underline-icon:before {
content: "\e706";
}
.e-alignleft-icon:before {
content: "\e717"
}
.e-alignright-icon:before {
content: "\e715"
}
.e-aligncenter-icon:before {
content: "\e704"

Copyright © 2001 -2024 Syncfusion Inc. 111


Toolbar How To

}
.e-alignjustify-icon:before {
content: "\e71b"
}
.e-upload-icon:before {
content: "\e71e"
}
.e-download-icon:before {
content: "\e70a"
}
.e-indent-icon:before {
content: "\e70b"
}
.e-outdent-icon:before {
content: "\e700"
}
.e-clear-icon:before {
content: "\e70d"
}
.e-reload-icon:before {
content: "\e71c"
}
.e-export-icon:before {
content: "\e720";
}
.e-italic-icon:before {
content: "\e710"
}
.e-bullets-icon:before {
content: "\e711";
}
.e-numbering-icon:before {
content: "\e70e";
}
.e-ascending-icon:before {
content: "\e70f";
}
.e-descending-icon:before {
content: "\e707";
}
.e-bubble-icon:before {
content: "\e709"
}
.e-line-icon:before {
content: "\e705"
}
</style>
</head>
<body>
<div id='toolbar'>
<div id='loader'>Loading....</div>
</div>
<br />
</body>
</html>

Copyright © 2001 -2024 Syncfusion Inc. 112


Toolbar How To

Add link to toolbar item in React Toolbar component


You can add link inside Toolbar using React template. Follow the below guidelines for add link as
template in Toolbar.

• Declare a template within the function which returns jsx element. If the template does not need
any arguments, then no need to pass the properties.
• Assign the function as value for the template option of toolbar item.

INDEX.JSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';
const App = () => {
const AnchorTemplate = () => {
return (<div>
<a target="_blank"
href="https://ej2.syncfusion.com/react/documentation/toolbar/getting-
started/">
Anchor Toolbar Link
</a>
</div>);
}
return (<div id='container'>
<ToolbarComponent id="ej2Toolbar">
<ItemsDirective>
<ItemDirective text="Cut"/>
<ItemDirective text="Copy"/>
<ItemDirective type="Separator"/>
<ItemDirective text="Paste"/>
<ItemDirective type="Separator"/>
<ItemDirective template={AnchorTemplate}/>
</ItemsDirective>
</ToolbarComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

INDEX.TSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';
const App = () => {
const AnchorTemplate = (): JSX.Element => {
return (
<div>
<a
target="_blank"

href="https://ej2.syncfusion.com/react/documentation/toolbar/getting-
started/"

Copyright © 2001 -2024 Syncfusion Inc. 113


Toolbar How To

>
Anchor Toolbar Link
</a>
</div>
);
}
return (
<div id='container'>
<ToolbarComponent id="ej2Toolbar">
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
<ItemDirective type="Separator" />
<ItemDirective text="Paste" />
<ItemDirective type="Separator" />
<ItemDirective template={AnchorTemplate} />
</ItemsDirective>
</ToolbarComponent>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Toolbar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
<style>
#container {
max-width: 700px;
min-width: 520px;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>

Copyright © 2001 -2024 Syncfusion Inc. 114


Toolbar How To

<body>
<div id='container'>
<div id='element'>
<div id='loader'>Loading</div>
</div>
</div>
</body>
</html>

Render other components in toolbar using template in React Toolbar component


You can render other components inside Toolbar using React template. Through this, we can add
content as other components directly with all functionalities to our Toolbar. Follow the below guidelines
for using the other components as template in Toolbar.

• Declare a template within the function returns jsx element. If the template does not need
arguments no need to pass the properties.
• Assign the function as value for the template property.

INDEX.JSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
const App = () => {
const buttonComponent = () => {
return (<ButtonComponent>Click me</ButtonComponent>);
}
const datePickerTemplate = () => {
return (<DatePickerComponent></DatePickerComponent>);
}
return (<div id='container'>
<ToolbarComponent id="toolbar">
<ItemsDirective>
<ItemDirective template={buttonComponent} />
<ItemDirective template={datePickerTemplate} />
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
<ItemDirective text="Paste" />
<ItemDirective type="Separator" />
<ItemDirective text="Bold" />
<ItemDirective text="Italic" />
<ItemDirective text="Underline" />
</ItemsDirective>
</ToolbarComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

INDEX.TSX

Copyright © 2001 -2024 Syncfusion Inc. 115


Toolbar How To

import * as React from 'react';


import * as ReactDOM from 'react-dom';
import { ToolbarComponent, ItemsDirective, ItemDirective } from
'@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
const App = () => {
const buttonTemplate = (): JSX.Element => {
return (<ButtonComponent>Click me</ButtonComponent>);
}
const datePickerTemplate = (): JSX.Element => {
return (<DatePickerComponent></DatePickerComponent>);
}
return (
<div id='container'>
<ToolbarComponent id="toolbar">
<ItemsDirective>
<ItemDirective template={buttonTemplate} />
<ItemDirective template={datePickerTemplate} />
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
<ItemDirective text="Paste" />
<ItemDirective type="Separator" />
<ItemDirective text="Bold" />
<ItemDirective text="Italic" />
<ItemDirective text="Underline" />
</ItemsDirective>
</ToolbarComponent>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Tab</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css"
rel="stylesheet" />
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<link href="index.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
</head>

Copyright © 2001 -2024 Syncfusion Inc. 116


Toolbar Ej1 api migration in React Toolbar component

<body>
<div id='container'>
<div id='element'>
<div id='loader'>Loading</div>
</div>
</div>
</body>
</html>

Ej1 api migration in React Toolbar component


This article describes the API migration process of Toolbar component from Essential JS 1 to Essential JS
2.
Accessibility and Localization
<!-- markdownlint-disable MD033 -->
|Behavior |Property in Essential JS 1 |Property in Essential JS 2 |
| -------------- | ---------------------------| --------------------------- |
|Localization | <b>Not Applicable</b> | Property : locale<br/> <ToolbarComponent id=‘toolbar’
locale=‘fr-BE’></ToolbarComponent> |
|Right to left | Property: enableRTL<br/> <EJ.Toolbar id=“toolbar” enableRTL={true}></EJ.Toolbar>
| Property: enableRTL<br/> <ToolbarComponent id=‘toolbar’ enableRTL={true}>
</ToolbarComponent> |
DataSource
<!-- markdownlint-disable MD033 -->
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ------------ | ------------------------- | ------------------------- |
|DataSource | Property : dataSource<br/> <EJ.Toolbar id=“toolbar” dataSource={this.items}
></EJ.Toolbar> | <b>Not Applicable</b> |
| Query | Property : query <br/> <EJ.Toolbar id=“toolbar” query={this.query}></EJ.Toolbar>|
<b>Not Applicable</b> |
|Fields | Property: fields<br/> <EJ.Toolbar id=“toolbar” fields={this.fields}></EJ.Toolbar> | <b>Not
Applicable</b> |
|Group | Property : group<br/> <EJ.Toolbar id=“toolbar” fields={this.fields}></EJ.Toolbar><br/>
<br/>constructor(props: {}) {<br/> this.fields = { group: '' }; } | <b>Not Applicable</b> |
|HtmlAttributes | Property : htmlAttributes<br/> <EJ.Toolbar id=“toolbar”
fields={this.fields}></EJ.Toolbar><br/> <br/>constructor(props: {}) {<br/> this.fields = {
htmlAttributes: { } };} | <b>Not Applicable</b> |
|Id | Property : id <br/> <EJ.Toolbar id=“toolbar” fields={this.fields}></EJ.Toolbar><br/>
<br/>constructor(props: {}) {<br/> this.fields = { id: '' };} | <b>Not Applicable</b> |

Copyright © 2001 -2024 Syncfusion Inc. 117


Toolbar Ej1 api migration in React Toolbar component

|ImageAttributes | Property: imageAttributes<br/> <EJ.Toolbar id=“toolbar” fields={this.fields}


></EJ.Toolbar><br/> <br/> constructor(props: {}) {<br/> this.fields = { imageAttributes: { } };}| <b>Not
Applicable</b> |
|ImageUrl | Property: imageUrl<br/> <EJ.Toolbar id=“toolbar” fields={this.fields}
></EJ.Toolbar><br/> <br/> constructor(props: {}) {<br/> this.fields = { imageUrl: '' };} | <b>Not
Applicable</b> |
|SpriteCssClass | Property: spriteCssClass<br/> <EJ.Toolbar id=“toolbar” fields={this.fields}
></EJ.Toolbar><br/> <br/> constructor(props: {}) {<br/> this.fields = { spriteCssClass: '' };}| <b>Not
Applicable</b> |
|Text | Property: text<br/> <EJ.Toolbar id=“toolbar” fields={this.fields} ></EJ.Toolbar><br/>
<br/>constructor(props: {}) {<br/> this.fields = { text: '' };}| <b>Not Applicable</b> |
|TooltipText | Property: tooltipText<br/> <EJ.Toolbar id=“toolbar” fields={this.fields}
></EJ.Toolbar><br/> <br/>constructor(props: {}) {<br/> this.fields = { tooltipText: ''};} | <b>Not
Applicable</b> |
|Template | Property: template<br/> <EJ.Toolbar id=“toolbar” fields={this.fields}
></EJ.Toolbar><br/> <br/>constructor(props: {}) {<br/> this.fields = { template: '' };} | <b>Not
Applicable</b> |
Items
<!-- markdownlint-disable MD033 -->
|Behavior |Property in Essential JS 1 |Property in Essential JS 2 |
| ------------ | ------------------------- | ------------------------- |
|Default | <Property : items<br/> <EJ.Toolbar id=“toolbar” items={this.items}> </EJ.Toolbar> |
Property : items<br/> <ToolbarComponent id=“toolbar” items={this.items}>
</ToolbarComponent> |
|Align | <b>Not Applicable</b> | Property : items[0].Align <br/> <ToolbarComponent id=“toolbar”
items={this.items}> </ToolbarComponent><br/> <br/> constructor(props: {}) {<br/> this.items = {
align: 'center'};}|
|Custom class | <b>Not Applicable</b> | Property : items[0].cssClass <br/> <ToolbarComponent
id=“toolbar” items={this.items}> </ToolbarComponent><br/> <br/> constructor(props: {}) {<br/>
this.items = { cssClass: 'e-class'}; }|
|Group Name| Property : items[0].group <br/> <EJ.Toolbar id=“toolbar” items={this.items}>
</EJ.Toolbar><br/> <br/> constructor(props: {}) {<br/> this.items = { group: ''}; } | <b>Not
Applicable</b>|
|HtmlAttributes | Property : items[0].htmlAttributes <br/> <EJ.Toolbar id=“toolbar”
items={this.items}> </EJ.Toolbar> </EJ.Toolbar><br/> <br/> constructor(props: {}) {<br/> this.items
= { htmlAttributes: { } };}| Property : items[0].htmlAttributes <br/> <ToolbarComponent id=“toolbar”
items={this.items}> </EJ.Toolbar> </ToolbarComponent><br/> <br/> constructor(props: {}) {<br/>
this.items = { htmlAttributes: { } };}|

Copyright © 2001 -2024 Syncfusion Inc. 118


Toolbar Ej1 api migration in React Toolbar component

|Id |Property : items[0].id <br/> <EJ.Toolbar id=“toolbar” items={this.items}> </EJ.Toolbar><br/>


<br/> constructor(props: {}) {<br/> this.items = { id: '' }; }| Property : items[0].id <br/>
<ToolbarComponent id=“toolbar” items={this.items}> </ToolbarComponent><br/> <br/>
constructor(props: {}) {<br/> this.items = { id: '' }; }|
|ImageAttributes | Property : items[0].imageAttributes <br/> <EJ.Toolbar id=“toolbar”
items={this.items}> </EJ.Toolbar><br/> <br/> constructor(props: {}) {<br/> this.items = {
imageAttributes: { } };} | <b>Not Applicable</b>|
|ImageUrl | Property : items[0].imageUrl <br/> <EJ.Toolbar id=“toolbar” items={this.items}>
</EJ.Toolbar><br/> <br/> constructor(props: {}) {<br/> this.items = { imageUrl: '' };} | <b>Not
Applicable</b>|
|Overflow | <b>Not Applicable</b> | Property : items[0].overflow <br/> <ToolbarComponent
id=“toolbar” items={this.items}> </ToolbarComponent><br/> <br/> constructor(props: {}) {<br/>
this.items = { overflow: 'popup' }; }|
| PrefixIcon | <b>Not Applicable</b> | Property : items[0].prefixIcon <br/> <ToolbarComponent
id=“toolbar” items={this.items}> </ToolbarComponent><br/> <br/> constructor(props: {}) {<br/>
this.items = { prefixIcon: 'e-icon' }; }|
|ShowAlwaysInPopup | <b>Not Applicable</b> | Property : items[0].showAlwaysInPopup <br/>
<ToolbarComponent id=“toolbar” items={this.items}> </ToolbarComponent><br/> <br/>
constructor(props: {}) {<br/> this.items = { showAlwaysInPopup: true };}|
|ShowTextOn | <b>Not Applicable</b> | Property : items[0].showTextOn <br/> <ToolbarComponent
id=“toolbar” items={this.items}> </ToolbarComponent><br/> <br/> constructor(props: {}) {<br/>
this.items = { showTextOn: 'popup' }; }|
|Sprite CssClass | Property : items[0].showTextOn <br/> <EJ.Toolbar id=“toolbar”
items={this.items}> </EJ.Toolbar><br/> <br/> constructor(props: {}) {<br/> this.items = {
spriteCssClass: 'e-class' }; } |<b>Not Applicable</b> |
|SuffixIcon | <b>Not Applicable</b> | Property : items[0].suffixIcon <br/> <ToolbarComponent
id=“toolbar” items={this.items}> </ToolbarComponent><br/> <br/> constructor(props: {}) {<br/>
this.items = { suffixIcon: 'e-icon' }; }|
|Template | Property : items[0].template <br/> <EJ.Toolbar id=“toolbar” items={this.items}>
</EJ.Toolbar><br/> <br/> constructor(props: {}) {<br/> this.items = { template: '' }; } | Property :
items[0].template <br/> <ToolbarComponent id=“toolbar” items={this.items}>
</ToolbarComponent><br/> <br/> constructor(props: {}) {<br/> this.items = { template: '' }; } |
|Text | Property : items[0].text <br/> <EJ.Toolbar id=“toolbar” items={this.items}>
</EJ.Toolbar><br/> <br/> constructor(props: {}) {<br/> this.items = { text: 'Cut' }; } | Property :
items[0].text <br/> <ToolbarComponent id=“toolbar” items={this.items}>
</ToolbarComponent><br/> <br/> constructor(props: {}) {<br/> this.items = { text: 'Copy' };} |
|TooltipText | Property : items[0].tooltipText <br/> <EJ.Toolbar id=“toolbar” items={this.items}>
</EJ.Toolbar><br/> <br/> constructor(props: {}) {<br/> this.items = { tooltipText: 'Cut' };} | Property :
items[0].tooltipText <br/> <ToolbarComponent id=“toolbar” items={this.items}>
</ToolbarComponent><br/> <br/> constructor(props: {}) {<br/> this.items = { tooltipText: 'Copy' }; } |

Copyright © 2001 -2024 Syncfusion Inc. 119


Toolbar Ej1 api migration in React Toolbar component

|Type | <b>Not Applicable</b> | Property : items[0].type <br/> <ToolbarComponent id=“toolbar”


items={this.items}> </ToolbarComponent><br/> <br/> constructor(props: {}) {<br/> this.items =
{type: 'Button'}; } |
|Width | <b>Not Applicable</b> | Property : items[0].width <br/> <ToolbarComponent id=“toolbar”
items={this.items}> </ToolbarComponent><br/> <br/> constructor(props: {}) {<br/> this.items =
{width: '50'}; }|
|Disable Items |Property : disabledItemIndices <br/> <EJ.Toolbar id=“toolbar”
disabledItemIndices=“[]” > </EJ.Toolbar>| Method : enableItems(items, false) <br/>
<ToolbarComponent id=“toolbar” ref = {(scope) => {this.ToolbarObj = scope}}
></ToolbarComponent><br/> <br/>constructor(props: {}) {<br/> this.ToolbarObj.enableItems([],
false); }|
|Add Items |<b>Not Applicable</b>| Method :addItems(items, index) <br/> <ToolbarComponent
id=“toolbar” ref = {(scope) => {this.ToolbarObj = scope}}> </ToolbarComponent> <br/> <br/>
constructor(props: {}) {<br/> this.ToolbarObj.addItems([], 0); } |
|Remove Item |Method : removeItem(element) <br/> <EJ.Toolbar id=“toolbar” ></EJ.Toolbar><br/>
<br/>var obj=$('#toolbar').ejToolbar('instance')<br/>obj.removeItem(ele);| Method :removeItems(args)
<br/> <ToolbarComponent id=“toolbar” ref = {(scope) => {this.ToolbarObj = scope}}>
</ToolbarComponent><br/> <br/> constructor(props: {}) {<br/> this.ToolbarObj.removeItems(0); }|
|RemoveItemById |Method :select(index)<br/> <EJ.Toolbar id=“toolbar” > </EJ.Toolbar><br/> <br/>
var obj=$('#toolbar').ejToolbar('instance')<br/>obj.select(1);|<b>Not Applicable</b>|
| Enable item | Method :enableItem(element)<br/> <EJ.Toolbar id=“toolbar” > </EJ.Toolbar><br/>
<br/> var obj=$('#toolbar').ejToolbar('instance')<br/>obj.enableItem(ele);| Method : enableItems(items,
true)<br/> <ToolbarComponent id=“toolbar” ref = {(scope) => {this.ToolbarObj = scope}}>
</ToolbarComponent><br/> <br/> constructor(props: {}) {<br/> this.ToolbarObj.enableItems(items,
true); } |
|EnableItemById |Method : enableItemById(id)<br/> <EJ.Toolbar id=“toolbar” > </EJ.Toolbar><br/>
<br/> var obj=$('#toolbar').ejToolbar('instance')<br/>obj.enableItemById('left');|<b>Not
Applicable</b>|
|Disable Item | Method : disableItem(element)<br/> <EJ.Toolbar id=“toolbar” > </EJ.Toolbar><br/>
<br/> var obj=$('#toolbar').ejToolbar('instance')<br/>obj.disableItem(ele);| Method :enableItems(items,
true)<br/> <ToolbarComponent id=“toolbar” ref = {(scope) => {this.ToolbarObj = scope}}>
</ToolbarComponent><br/> <br/> constructor(props: {}) {<br/> this.ToolbarObj.enableItems([],
false); }|
|DisableItemById |Method : disableItemById(id)<br/> <EJ.Toolbar id=“toolbar”> </EJ.Toolbar><br/>
<br/> var obj=$('#toolbar').ejToolbar('instance')<br/>obj.disableItemById('left');|<b>Not
Applicable</b>|
|Show item |<b>Not Applicable</b>| Method : hideItem(index, false)<br/> <ToolbarComponent
id=“toolbar” ref = {(scope) => {this.ToolbarObj = scope}}> </ToolbarComponent> <br/> <br/>
constructor(props: {}) {<br/> this.ToolbarObj.hideItem(0, false); }|

Copyright © 2001 -2024 Syncfusion Inc. 120


Toolbar Ej1 api migration in React Toolbar component

| Hide item |<b>Not Applicable</b>| Method : hideItem(index, true)<br/> <ToolbarComponent


id=“toolbar” ref = {(scope) => {this.ToolbarObj = scope}}r> </ToolbarComponent> <br/> <br/>
constructor(props: {}) {<br/> this.ToolbarObj.hideItem(0, true); }|
|Select item | Method :selectItem(element)<br/> <EJ.Toolbar id=“toolbar” > </EJ.Toolbar><br/>
<br/> var obj=$('#toolbar').ejToolbar('instance')<br/>obj.selectItem(ele);|<b>Not Applicable</b>|
|SelectItemById | Method : selectItemById(id)<br/> <EJ.Toolbar id=“toolbar” > </EJ.Toolbar><br/>
<br/> var obj=$('#toolbar').ejToolbar('instance')<br/>obj.selectItemById('left');|<b>Not Applicable</b>|
|DeselectItemById | Method : deselectItemById(id)<br/> <EJ.Toolbar id=“toolbar” >
</EJ.Toolbar><br/> <br/> var
obj=$('#toolbar').ejToolbar('instance')<br/>obj.deselectItemById('left');|<b>Not Applicable</b>|
|Clicked | <b>Not Applicable</b> | Event: clicked <br/> <ToolbarComponent id=“toolbar”
clicked={onclicked.bind(this)}></ToolbarComponent><br/> <br/> onclicked(event){ } |
|itemHover | Event: itemHover<br/> <EJ.Toolbar id=‘toolbar’
itemHover={this.onitemHover}></EJ.Toolbar><br/> <br/> onitemHover(event){ } | <b>Not
Applicable</b> |
|itemLeave | Event: itemLeave<br/> <EJ.Toolbar id=‘toolbar’
itemLeave={this.onitemLeave}></EJ.Toolbar><br/> <br/> onitemHover(event){ } | <b>Not
Applicable</b> |
Common
<!-- markdownlint-disable MD033 -->
|Behavior |Property in Essential JS 1 |Property in Essential JS 2 |
| ------------ | ------------------------- | ------------------------- |
|Custom class | Property : cssClass <br/> <EJ.Toolbar id=“toolbar” cssClass=“customClass” >
</EJ.Toolbar>| <b>Not Applicable</b> |
|Enabled | Property : enabled <br/> <EJ.Toolbar id=“toolbar” enabled={false}> </EJ.Toolbar>|
<b>Not Applicable</b>|
|EnableSeparator | Property : enableSeparator <br/> <EJ.Toolbar id=“Accordion”
enableSeparator={false} > </EJ.Toolbar>| <b>Not Applicable</b> |
|Height | Property : height <br/> <EJ.Toolbar id=“toolbar” height=“100%” > </EJ.Toolbar>|
Property : height <br/> <ToolbarComponent id=“toolbar” height=“100%” >
</ToolbarComponent> |
|HtmlAttributes | Property : htmlAttributes <br/> <EJ.Toolbar id=“Accordion”
htmlAttributes={this.attributes} > </EJ.Toolbar><br/> <br/> constructor(props: {}) {<br/>
this.attributes = {class: "my-class" };}| <b>Not Applicable</b> |
|Hide | Property : hide() <br/> <EJ.Toolbar id=“Accordion” hide={true}> </EJ.Toolbar> | <b>Not
Applicable</b> |
|Orientation | Property : orientation <br/> <EJ.Toolbar id=“Accordion” orientation=“horizontal” >
</EJ.Toolbar>| <b>Not Applicable</b> |

Copyright © 2001 -2024 Syncfusion Inc. 121


Toolbar Ej1 api migration in React Toolbar component

|OverflowModes | Property : responsiveType <br/> <EJ.Toolbar id=“Accordion”


responsiveType=“popup” > </EJ.Toolbar>| Property : overflowMode <br/> <ToolbarComponents
id=“Accordion” overflowMode=“popup” > </ToolbarComponent> |
|Persistence |<b>Not Applicable</b>| Property : enablePersistence <br/> <ToolbarComponent
id=“toolbar” enablePersistence={false} > </ToolbarComponent> |
|Responsive | Property : isResponsive <br/> <EJ.Toolbar id=“Accordion” isResponsive={true} >
</EJ.Toolbar> |<b>Not Applicable</b>|
|ShowRounderCorner | Property : showRoundedCorner <br/> <EJ.Toolbar id=“toolbar”
showRoundedCorner={true} > </EJ.Toolbar>| <b>Not Applicable</b> |
|Width | Property : width <br/> <EJ.Toolbar id=“Accordion” width=“600” > </EJ.Toolbar>|
Property : width <br/> <ToolbarComponent id=“Accordion” width=“600” >
</ToolbarComponent> |
|Enable | Method : enable() <br/> <EJ.Toolbar id=“toolbar” ></EJ.Toolbar><br/> <br/>var
obj=$('#toolbar').ejToolbar('instance')<br/>obj.enable(); | Method : disable(false) <br/>
<ToolbarComponent id=“toolbar” ref = {(scope) => {this.ToolbarObj =
scope}}></ToolbarComponent><br/> <br/>constructor(props: {}) {<br/>
this.ToolbarObj.disable(false); |
|Disable | Method : disable() <br/> <EJ.Toolbar id=“toolbar” ></EJ.Toolbar><br/> <br/>var
obj=$('#toolbar').ejToolbar('instance')<br/>obj.disable(); | Method : disable(true) <br/>
<ToolbarComponent id=“toolbar” ref = {(scope) => {this.ToolbarObj = scope}}
></ToolbarComponent><br/> <br/>constructor(props: {}) {<br/> this.ToolbarObj.disable(true); |
|Show | Method : show() <br/> <EJ.Toolbar id=“toolbar” ></EJ.Toolbar><br/> <br/>var
obj=$('#toolbar').ejToolbar('instance')<br/>obj.show(); | <b>Not Applicable</b> |
|Hide | Method : hide() <br/> <EJ.Toolbar id=“toolbar” ></EJ.Toolbar><br/> <br/>var
obj=$('#toolbar').ejToolbar('instance')<br/>obj.hide(); | <b>Not Applicable</b> |
|Refresh | <b>Not Applicable</b> | Method : refresh() <br/> <ToolbarComponent id=“toolbar” ref =
{(scope) => {this.ToolbarObj = scope}}></ToolbarComponent><br/> <br/>constructor(props: {})
{<br/> this.ToolbarObj.refresh(); |
|Destroy | Method : destroy() <br/> <EJ.Toolbar id=“toolbar” ></EJ.Toolbar><br/> <br/>var
obj=$('#toolbar').ejToolbar('instance')<br/>obj.destroy(); | Method : destroy() <br/>
<ToolbarComponent id=“toolbar” ref = {(scope) => {this.ToolbarObj =
scope}}></ToolbarComponent><br/> <br/>constructor(props: {}) {<br/> this.ToolbarObj.destroy(); |
|BeforeCreate | <b>Not Applicable</b> | Event: created<br/> <ToolbarComponent id=“toolbar”
created={onbeforeCreate.bind(this)}></ToolbarComponent><br/> <br/> onbeforeCreate(event) { }
|
|Created | Event: create<br/> <EJ.Toolbar id=“toolbar”
create={this.oncreate}></EJ.Toolbar><br/> <br/> oncreate(event) { } | Event: created<br/>
<ToolbarComponent id=“toolbar” created={oncreated.bind(this)}></ToolbarComponent><br/>
<br/> oncreated(event) { } |

Copyright © 2001 -2024 Syncfusion Inc. 122


Tooltip Getting Started

|Destroyed | Event: destroy<br/> <EJ.Toolbar id=“toolbar”


destroy={this.ondestroy}></EJ.Toolbar><br/> <br/> ondestroy(event) { } | Event: destroyed<br/>
<ToolbarComponent id=“toolbar”
destroyed={ondestroyed.bind(this)}></ToolbarComponent><br/> <br/> ondestroyed(event) { } |
|FocusOut | Event: focusOut<br/> <EJ.Toolbar id=“toolbar”
focusOut={onfocusOut.bind(this)}></EJ.Toolbar><br/> <br/> onfocusOut(event) { } |<b>Not
Applicable</b> |
|overflowOpen | Event: overflowOpen<br/> <EJ.Toolbar id=“toolbar”
(overflowOpen)={this.onoverflowOpen}></EJ.Toolbar><br/> <br/> onoverflowOpen(event) { }
|<b>Not Applicable</b> |
|overflowClose | Event: overflowClose<br/> <EJ.Toolbar id=“toolbar”
(overflowClose)={this.onoverflowClose}></EJ.Toolbar><br/> <br/> onoverflowClose(event) { } |
<b>Not Applicable</b> |

Tooltip
Getting Started
This section briefly explains how to create a simple Link to the Video component and configure its
available functionalities in React.
To get start quickly with React Tooltip, you can check on this video:
Tooltips can be initialized on,

• A single element (or)


• A container that has more than one sub-element within it and the sub-elements are considered
as targets.

Dependencies
The following list of dependencies are required to use the Tooltip component in your application.
`javascript
|-- @syncfusion/ej2-react-popups
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-react-base
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
`
Installation and configuration
You can use Create-react-app to setup the applications. To install create-react-app run the following
command.
`
npm install -g create-react-app

Copyright © 2001 -2024 Syncfusion Inc. 123


Tooltip Getting Started

`
To set-up a React application in TypeScript environment, run the following command.
`
npx create-react-app my-app --template typescript
cd my-app
npm start
`
To set-up a React application in JavaScript environment, run the following command.
`
npx create-react-app my-app
cd my-app
npm start
`
Adding Syncfusion packages
All the available Essential JS 2 packages are published in npmjs.com public registry.
Install the below required dependency package in order to use the Tooltip component in your
application.
`bash
npm install @syncfusion/ej2-react-popups --save
`
Adding CSS Reference
To render the Tooltip component, need to import Tooltip and its dependent component's styles as given
below in src/App.css.
`css
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-popups/styles/material.css";
`
Note: If you want to refer the combined component styles, please make use of our CRG (Custom
Resource Generator) in your application.
Initialize the Tooltip on a single element
Import the Tooltip component to your src/App.tsx file using following code.
`javascript
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import './App.css';

Copyright © 2001 -2024 Syncfusion Inc. 124


Tooltip Getting Started

function App() {
let style: object = {
display: 'inline-block',
margin: '60px'
};
return (
<TooltipComponent content="Tooltip Content" style={style}>
Show Tooltip
</TooltipComponent>
);
}
`
`ts
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import './App.css';
function App() {
let style = {
display: 'inline-block',
margin: '60px'
};
return (<TooltipComponent content="Tooltip Content" style={style}>
Show Tooltip
</TooltipComponent>);
}
`
Run the application
Now, use the npm start command to run the application in the browser.
`
npm start
`
The output will be as follows:
INDEX.JSX

Copyright © 2001 -2024 Syncfusion Inc. 125


Tooltip Getting Started

import * as React from 'react';


import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (<div id="container">
<TooltipComponent position="TopCenter" content="Tooltip Content"
target="#target">
<button className="e-btn tooltipElement" id="target" >Show
Tooltip</button>
</TooltipComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (
<div id="container">
<TooltipComponent position="TopCenter" content="Tooltip Content"
target="#target">
<button className="e-btn tooltipElement" id="target" >Show
Tooltip</button>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Tooltip</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components"
/>
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-
base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-
popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-
buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-
inputs/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />

Copyright © 2001 -2024 Syncfusion Inc. 126


Tooltip Getting Started

<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></sc
ript>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>

Initialize Tooltip within a container


You can create Tooltips on multiple targets within a container. To do so, you have to define specific
target elements to the target property so that the Tooltip is initialized only on matched targets within a
container. In this case, the Tooltip content is assigned from the title attribute of the target element.
Refer to the following code example to create a Tooltip on multiple targets within a container.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
return (<div id='container'>
<TooltipComponent id="details" target='.e-info'
position='RightCenter'>
<form id="details" role="form">
<table>
<tbody>
<tr>
<td className="info">User Name</td>
<td>
<input type="text" className="e-info"
name="firstname" title="Please enter your name"/> </td>
</tr>
<tr>
<td className="info">Email Address</td>
<td>
<input type="text" className="e-info"
name="email" title="Enter a valid email address"/>
</td>
</tr>
<tr>
<td className="info">Password</td>
<td>
<input type="password" className="e-info"
name="password" title="Be at least 8 characters length"/>
</td>
</tr>
<tr>

Copyright © 2001 -2024 Syncfusion Inc. 127


Tooltip Getting Started

<td className="info">Confirm Password</td>


<td>
<input type="password" className="e-info"
name="Cpwd" title="Re-enter your password"/>
</td>
</tr>
<tr>
<td>
<ButtonComponent id="sample" className="center"
content="Submit"/>
</td>
<td>
<ButtonComponent id="reset" className="center"
content="Reset"/>
</td>
</tr>
</tbody>
</table>
</form>
</TooltipComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
return (
<div id='container'>
<TooltipComponent id="details" target='.e-info'
position='RightCenter'>
<form id="details" role="form">
<table>
<tbody>
<tr>
<td className="info">User Name</td>
<td>
<input type="text" className="e-info"
name="firstname" title="Please enter your name" /> </td>
</tr>
<tr>
<td className="info">Email Address</td>
<td>
<input type="text" className="e-info"
name="email" title="Enter a valid email address" />
</td>
</tr>
<tr>
<td className="info">Password</td>
<td>

Copyright © 2001 -2024 Syncfusion Inc. 128


Tooltip Setting dimension in React Tooltip component

<input type="password" className="e-info"


name="password" title="Be at least 8 characters length" />
</td>
</tr>
<tr>
<td className="info">Confirm Password</td>
<td>
<input type="password" className="e-info"
name="Cpwd" title="Re-enter your password" />
</td>
</tr>
<tr>
<td>
<ButtonComponent id="sample" className="center"
content="Submit"/>
</td>
<td>
<ButtonComponent id="reset" className="center"
content="Reset"/>
</td>
</tr>
</tbody>
</table>
</form>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

In the above sample, details refers to the container's id, and the target .e-info refers to the target
elements available within that container.
See Also
Positioning Tooltip
Tooltip Open Mode
Customize the Tooltip
Setting dimension in React Tooltip component
Height and width
The Tooltip can either be assigned auto height and width values or specific pixel values. The width and
height properties are used to set the outer dimension of the Tooltip element. The default value for both
the properties is auto. It also accepts string and number values in pixels.
The following sample explains how to set dimensions for the Tooltip.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {

Copyright © 2001 -2024 Syncfusion Inc. 129


Tooltip Setting dimension in React Tooltip component

return (<TooltipComponent width="180px" height="40px" content="This


tooltip has 180px width and 40px height">
<div id='target'>Show Tooltip</div>
</TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (
<TooltipComponent width="180px" height="40px" content="This tooltip has
180px width and 40px height">
<div id='target'>Show Tooltip</div>
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Scroll mode
When height is specified with a certain pixel value and the Tooltip content overflows, the scrolling
mode gets enabled.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
function content() {
return (<span id='tooltipContent'>
<p><strong>Environmentally friendly</strong> or <strong>environment-
friendly</strong>, <i>(also referred to as eco-friendly, nature-friendly,
and green)</i> are marketing and sustainability terms referring to goods and
services, laws, guidelines and policies that inflict reduced, minimal, or no
harm upon ecosystems or the environment.</p></span>);
}
let style = {
display: 'inline-block',
padding: '5px'
};
return (<p>A green home is a type of house designed to be
<TooltipComponent width="300px" height="60px" isSticky={true}
content={content} style={style}>
<a><u>environmentally friendly</u></a>
</TooltipComponent> and sustainable. And also focuses on the
efficient use of "energy, water, and building materials." As green homes
have become more prevalent we have also seen the emergence of
green affordable housing.
</p>);

Copyright © 2001 -2024 Syncfusion Inc. 130


Tooltip Content in React Tooltip component

}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
function content() {
return(
<span id='tooltipContent'>
<p><strong>Environmentally friendly</strong> or <strong>environment-
friendly</strong>, <i>(also referred to as eco-friendly, nature-friendly,
and green)</i> are marketing and sustainability terms referring to goods and
services, laws, guidelines and policies that inflict reduced, minimal, or no
harm upon ecosystems or the environment.</p></span>
)
}
let style: object = {
display: 'inline-block',
padding : '5px'
};
return (
<TooltipComponent width="300px" height="60px" isSticky={true}
content={content} style={style}>
<p>A green home is a type of house designed to be
<a><u>environmentally friendly</u></a>
and sustainable. And also focuses on the efficient use of
"energy, water, and building materials." As green homes
have become more prevalent we have also seen the emergence
of green affordable housing.</p>
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

The scrolling mode can best be seen when the sticky mode of the Tooltip is enabled. To enable sticky
mode, set the isSticky property to true.

Content in React Tooltip component


A text or a piece of information assigned to the Tooltip's content property will be displayed as the main
text stream of the Tooltip.
It can be a string or a template content. If the content property is not provided with any specific value,
then it takes the value assigned to the title attribute of the target element on which the Tooltip was
initialized. The content can also dynamically be assigned to the Tooltip via Fetch.
Template content
Any text or image can be added to the Tooltip, by default. To customize the Tooltip layout or to create
your own visualized element on the Tooltip, template can be used.

Copyright © 2001 -2024 Syncfusion Inc. 131


Tooltip Content in React Tooltip component

Refer to the following code example to add formatted HTML content to the Tooltip.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
function content() {
return (<span id='tooltipContent'>
<p><strong>Environmentally friendly</strong> or <strong>environment-
friendly</strong>, <i>(also referred to as eco-friendly, nature-friendly,
and green)</i> are marketing and sustainability terms referring to goods and
services, laws, guidelines and policies that inflict reduced, minimal, or no
harm upon ecosystems or the environment.</p></span>);
}
let style = {
display: 'inline-block',
padding: '5px'
};
return (<div>A green home is a type of house designed to be
<TooltipComponent isSticky={true} content={content}
style={style}>
<a><u>environmentally friendly</u></a>
</TooltipComponent> and sustainable. And also focuses on the
efficient use of "energy, water, and building materials." As green homes
have become more prevalent we have also seen the emergence of
green affordable housing.
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
function content() {
return(
<span id='tooltipContent'>
<p><strong>Environmentally friendly</strong> or <strong>environment-
friendly</strong>, <i>(also referred to as eco-friendly, nature-friendly,
and green)</i> are marketing and sustainability terms referring to goods and
services, laws, guidelines and policies that inflict reduced, minimal, or no
harm upon ecosystems or the environment.</p></span>
)
}
let style: object = {
display: 'inline-block',
padding : '5px'
};
return (
<div>A green home is a type of house designed to be
<TooltipComponent isSticky={true} content={content} style={style}>
<a><u>environmentally friendly</u></a>

Copyright © 2001 -2024 Syncfusion Inc. 132


Tooltip Content in React Tooltip component

</TooltipComponent> and sustainable. And also focuses on the


efficient use of "energy, water, and building materials." As green homes
have become more prevalent we have also seen the emergence of
green affordable housing.
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Dynamic content via Fetch


The Tooltip content can be dynamically loaded by making use of the Fetch call. The Fetch request is
usually made within the beforeRender event of the Tooltip, and then the Tooltip's content is assigned
the value retrieved on it's success.
Note: The Tooltip target property includes a unique identifier used to associate Tooltips with specific
elements on a webpage or application interface. When setting the Tooltip target value as a GUID
(Globally Unique Identifier), it's important to note that the GUID must start with a combination of
letters before the numeric portion of the GUID. For example, target: ‘#’ + ‘ tooltip’+ ‘96ad88bd-294c-
47c3-999b-a9daa3285a05’.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Fetch } from '@syncfusion/ej2-base';
function App() {
let tooltipInstance;
function onBeforeRender(args) {
tooltipInstance.content = 'Loading...';
tooltipInstance.dataBind();
let fetchApi = new Fetch('./tooltipdata.json', 'GET');
fetchApi.send().then((result) => {
for (let i = 0; i < result.length; i++) {
if (result[i].Id === args.target.getAttribute('data-
content')) {
tooltipInstance.content = "<div class='contentWrap'>" +
result[i].Sports + "</div>";
}
}
tooltipInstance.dataBind();
}, (reason) => {
tooltipInstance.content = reason.message;
tooltipInstance.dataBind();
});
}
return (<div id="container">
<h4>National Sports</h4>
<TooltipComponent id="targetContainer" ref={t => tooltipInstance = t}
className="e-prevent-select" content="Loading..." target=".target"
position="RightCenter" beforeRender={onBeforeRender.bind(this)}>
<div id="countrylist">
<ul>
<li className="target" title="1"><span>Australia</span></li>

Copyright © 2001 -2024 Syncfusion Inc. 133


Tooltip Content in React Tooltip component

<li className="target" title="2"><span>Bhutan</span></li>


<li className="target" title="3"><span>China</span></li>
<li className="target" title="4"><span>Cuba</span></li>
<li className="target" title="5"><span>India</span></li>
<li className="target" title="6"><span>Switzerland</span></li>
<li className="target" title="7"><span>United States</span></li>
</ul>
</div>
</TooltipComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-
popups';
import { Fetch } from '@syncfusion/ej2-base';
function App() {
let tooltipInstance: TooltipComponent;
function onBeforeRender(args: TooltipEventArgs): void {
tooltipInstance.content = 'Loading...';
tooltipInstance.dataBind();
let fetchApi: Fetch = new Fetch('./tooltipdata.json', 'GET');
fetchApi.send().then(
(result: any) => {
for (let i: number = 0; i < result.length; i++) {
if (result[i].Id === args.target.getAttribute('data-content')) {
tooltipInstance.content = "<div class='contentWrap'>" +
result[i].Sports + "</div>";
}
}
tooltipInstance.dataBind();
},
(reason: any) => {
tooltipInstance.content = reason.message;
tooltipInstance.dataBind();
});
}
return (
<div id="container">
<h4>National Sports</h4>
<TooltipComponent id="targetContainer" ref={t => tooltipInstance = t}
className="e-prevent-select" content="Loading..." target=".target"
position="RightCenter" beforeRender={onBeforeRender.bind(this)}>
<div id="countrylist">
<ul>
<li className="target" title="1"><span>Australia</span></li>
<li className="target" title="2"><span>Bhutan</span></li>
<li className="target" title="3"><span>China</span></li>
<li className="target" title="4"><span>Cuba</span></li>
<li className="target" title="5"><span>India</span></li>
<li className="target" title="6"><span>Switzerland</span></li>

Copyright © 2001 -2024 Syncfusion Inc. 134


Tooltip Position in React Tooltip component

<li className="target" title="7"><span>United States</span></li>


</ul>
</div>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

Position in React Tooltip component


Tooltips can be attached to 12 static locations around the target. On initializing the Tooltip, you can set
the position property with any one of the following values:

• TopLeft
• TopCenter
• TopRight
• BottomLeft
• BottomCenter
• BottomRight
• LeftTop
• LeftCenter
• LeftBottom
• RightTop
• RightCenter
• RightBottom

By default, Tooltip is placed at the TopCenter of the target element.


INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let dropElement;
let tooltipInstance;
function change() {
tooltipInstance.position = dropElement.value;
}
return (<div id='container'>
<TooltipComponent ref={t => tooltipInstance = t}
className="tooltip-box" content='Tooltip Content' target='#tooltip'>
<div id="tooltip">Show Tooltip</div>
</TooltipComponent>
<div className='ddl'>
<select id="positions" ref={d => dropElement = d}
onChange={change.bind(this)} className="form-control drop-inline"
value="TopCenter">
<option value="TopLeft">Top Left</option>
<option value="TopCenter">Top Center</option>

Copyright © 2001 -2024 Syncfusion Inc. 135


Tooltip Position in React Tooltip component

<option value="TopRight">Top Right</option>


<option value="BottomLeft">Bottom Left</option>
<option value="BottomCenter">Bottom Center</option>
<option value="BottomRight">Bottom Right</option>
<option value="LeftTop">Left Top</option>
<option value="LeftCenter">Left Center</option>
<option value="LeftBottom">Left Bottom</option>
<option value="RightTop">Right Top</option>
<option value="RightCenter">Right Center</option>
<option value="RightBottom">Right Bottom</option>
</select>
</div>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent, Position } from '@syncfusion/ej2-react-popups';
function App() {
let dropElement: HTMLSelectElement;
let tooltipInstance: TooltipComponent;
function change(): void {
tooltipInstance.position = dropElement.value as Position;
}
return (
<div id='container'>
<TooltipComponent ref={t => tooltipInstance = t}
className="tooltip-box" content='Tooltip Content' target='#tooltip'>
<div id="tooltip">Show Tooltip</div>
</TooltipComponent>
<div className='ddl'>
<select id="positions" ref={d => dropElement = d}
onChange={change.bind(this)} className="form-control drop-inline"
value="TopCenter">
<option value="TopLeft">Top Left</option>
<option value="TopCenter">Top Center</option>
<option value="TopRight">Top Right</option>
<option value="BottomLeft">Bottom Left</option>
<option value="BottomCenter">Bottom Center</option>
<option value="BottomRight">Bottom Right</option>
<option value="LeftTop">Left Top</option>
<option value="LeftCenter">Left Center</option>
<option value="LeftBottom">Left Bottom</option>
<option value="RightTop">Right Top</option>
<option value="RightCenter">Right Center</option>
<option value="RightBottom">Right Bottom</option>
</select>
</div>
</div>
);
}
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 136


Tooltip Position in React Tooltip component

ReactDom.render(<App />,document.getElementById('sample'));

Tip pointer positioning


The Tooltip pointer can be attached or detached from the Tooltip by using the showTipPointer
property.
Pointer positions can be adjusted using the tipPointerPosition property that can be assigned to one of
the following values:

• Auto
• Start
• Middle
• End

The following code example illustrates how to set the pointer to the start position of the Tooltip.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (<TooltipComponent className="tooltip-box" content='Tooltip
Content' tipPointerPosition='Start' target='#target'>
<button className="e-btn" id='target'>Show Tooltip</button>
</TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (
<TooltipComponent className="tooltip-box" content='Tooltip Content'
tipPointerPosition='Start' target='#target'>
<button className="e-btn" id='target'>Show Tooltip</button>
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

By default, tip pointers are auto adjusted so that the arrow does not point outside the target element.
Dynamic positioning
The Tooltip and its tip pointer can be positioned dynamically based on the target's location. This can be
achieved by using the refresh method, which auto adjusts the Tooltip over the target.
INDEX.JSX

Copyright © 2001 -2024 Syncfusion Inc. 137


Tooltip Position in React Tooltip component

import * as React from 'react';


import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Draggable } from '@syncfusion/ej2-base';
function App() {
React.useEffect(() => {
rendereComplete();
}, []);
let tooltipInstance;
let tooltipAnimation = {
open: { effect: 'None' },
close: { effect: 'None' }
};
function rendereComplete() {
let ele = document.getElementById('demoSmart');
let drag = new Draggable(ele, {
clone: false,
dragArea: '#targetContainer',
drag: (args) => {
if (args.element.getAttribute('data-tooltip-id') === null) {
tooltipInstance.open(args.element);
}
else {
tooltipInstance.refresh(args.element);
}
},
dragStart: (args) => {
if (args.element.getAttribute('data-tooltip-id') === null) {
tooltipInstance.open(args.element);
}
},
dragStop: (args) => {
tooltipInstance.close();
}
});
}
return (<div id='targetContainer'>
<TooltipComponent ref={t => tooltipInstance = t}
target='#demoSmart' content='Drag me !!!' animation={tooltipAnimation}>
<div id='demoSmart'>
</div>
</TooltipComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Draggable } from '@syncfusion/ej2-base';
function App() {
React.useEffect(() => {
rendereComplete();

Copyright © 2001 -2024 Syncfusion Inc. 138


Tooltip Position in React Tooltip component

}, []);
let tooltipInstance: TooltipComponent;
let tooltipAnimation: Object = {
open: { effect: 'None' },
close: { effect: 'None' }
};
function rendereComplete() {
let ele: HTMLElement = document.getElementById('demoSmart');
let drag: Draggable = new Draggable(ele, {
clone: false,
dragArea: '#targetContainer',
drag: (args: any) => {
if (args.element.getAttribute('data-tooltip-id') === null) {
tooltipInstance.open(args.element);
} else {
tooltipInstance.refresh(args.element);
}
},
dragStart: (args: any) => {
if (args.element.getAttribute('data-tooltip-id') === null) {
tooltipInstance.open(args.element);
}
},
dragStop: (args: any) => {
tooltipInstance.close();
}
});
}
return (<div id='targetContainer'>
<TooltipComponent ref={t => tooltipInstance = t}
target='#demoSmart' content='Drag me !!!' animation={tooltipAnimation}>
<div id='demoSmart'>
</div>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Mouse trailing
Tooltips can be positioned relative to the mouse pointer. This behavior can be enabled or disabled by
using the mouseTrail property.
By default, it is set to false.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (<TooltipComponent className="tooltip-box" content='Tooltip
Content' mouseTrail={true} showTipPointer={false}>
<div id='target'>Show Tooltip</div>
</TooltipComponent>);

Copyright © 2001 -2024 Syncfusion Inc. 139


Tooltip Position in React Tooltip component

}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (
<TooltipComponent className="tooltip-box" content='Tooltip Content'
mouseTrail={true} showTipPointer={false}>
<div id='target'>Show Tooltip</div>
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

When mouse trailing option is enabled, the tip pointer position gets auto adjusted based on the target,
and
other position values like start, end, and middle are not applied (to prevent the pointer from moving out
of target).
Setting offset values
Offset values are set to specify the distance between the target and tooltip element. offsetX and
offsetY properties are used to specify the offset left and top values.

• offsetX specifies the distance between the target and Tooltip element in X axis.
• offsetY specifies the distance between the target and Tooltip element in Y axis.

The following code example illustrates how to set offset values.


INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (<TooltipComponent className="tooltip-box" offsetX={30}
offsetY={30} showTipPointer={false} mouseTrail={true} content='Tooltip
Content'>
<div id='target'>Show Tooltip</div>
</TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';

Copyright © 2001 -2024 Syncfusion Inc. 140


Tooltip Open mode in React Tooltip component

import { TooltipComponent } from '@syncfusion/ej2-react-popups';


function App() {
return (
<TooltipComponent className="tooltip-box" offsetX={30} offsetY={30}
showTipPointer={false} mouseTrail={true} content='Tooltip Content'>
<div id='target'>Show Tooltip</div>
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

By default, collision is handled automatically and therefore when collision is detected the Tooltip fits
horizontally and flips vertically.
Open mode in React Tooltip component
You can decide the mode on which the Tooltip is to be opened on a page, i.e., on hovering, focusing, or
clicking on the target elements.
On mobile devices, Tooltips appear when you tap and hold the element, even if the opensOn option is
assigned with Hover.
Tooltips are also displayed as long as you continue to tap and hold the element. On lift, it disappears in
the next 1.5 seconds.
If there is another action before that time ends, then the Tooltip disappears.
The opensOn property can take either a single or a combination of multiple values, separated by space
from the following options.
The table below explains how the Tooltip opens on both desktop and mobile based on the value(s)
assigned to the opensOn property.
By default, it takes Auto value.
| Values | Desktop | Mobile |
| ------------- | ------------- | ------------- |
| Auto | Tooltip appears when you hover over the target or when the target element receives the focus.
| Tooltip opens on tap and hold of the target element. |
| Hover | Tooltip appears when you hover over the target. | Tooltip opens on tap and hold of the target
element. |
| Click | Tooltip appears when you click a target element. | Tooltip appears when you single tap the
target element. |
| Focus | Tooltip appears when you focus (say through tab key) on a target element. | Tooltip appears
with a single tap on the target element. |
| Custom | Tooltip is not triggered by any default action. So, you have to bind your own events and use
either open or close public methods. | Same as Desktop. |
To open the Tooltip for multiple actions, say while hovering over or clicking on a target element, the
opensOn property can be assigned with multiple values, separated by space as hover click.

Copyright © 2001 -2024 Syncfusion Inc. 141


Tooltip Open mode in React Tooltip component

Auto value cannot be used with any combination for multiple values.
The following code example shows how to set the open mode for Tooltips.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let buttonElement;
let tooltipInstance;
function handleClick() {
if (buttonElement.getAttribute('data-tooltip-id')) {
tooltipInstance.close();
}
else {
tooltipInstance.open(buttonElement);
}
}
;
let style = {
margin: '150px auto 0 auto', transform: 'translateY(-50%)'
};
let margin = {
margin: '40px'
};
return (<div id='container'>
<table style={style}>
<tbody>
<tr>
<td>
<TooltipComponent content='Tooltip from hover'
opensOn='Hover' target='#hoverButton'>
<button style={margin} id='hoverButton'
className="e-btn blocks">Hover Me !(Default)</button>
</TooltipComponent>
</td>
<td>
<TooltipComponent content='Tooltip from click'
opensOn='Click' target='#clickButton'>
<button style={margin} id='clickButton'
className="e-btn blocks">Click Me !</button>
</TooltipComponent>
</td>
</tr>
<tr>
<td>
<TooltipComponent content='Tooltip from focus'
opensOn='Focus' target='#tooltipfocus'>
<span style={margin} id="textbox"
className="e-float-input blocks">
<input id="tooltipfocus" type="text"
placeholder="Focus and blur"/>
</span>
</TooltipComponent>
</td>

Copyright © 2001 -2024 Syncfusion Inc. 142


Tooltip Open mode in React Tooltip component

<td>
<TooltipComponent className="wrap" ref={t =>
tooltipInstance = t} opensOn='custom' content='Tooltip from custom mode'>
<input id="box" type="button" className="e-
btn" ref={d => buttonElement = d} onClick={handleClick.bind(this)}
value="Click to open tooltip manually"/>
</TooltipComponent>
</td>
</tr>
</tbody>
</table>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let buttonElement: HTMLElement;
let tooltipInstance: TooltipComponent;
function handleClick(): void {
if (buttonElement.getAttribute('data-tooltip-id')) {
tooltipInstance.close();
} else {
tooltipInstance.open(buttonElement);
}
};
let style: object = {
margin: '150px auto 0 auto',transform: 'translateY(-50%)'
};
let margin: object = {
margin: '40px'
};
return (
<div id='container'>
<table style={style}>
<tbody>
<tr>
<td>
<TooltipComponent content='Tooltip from hover'
opensOn='Hover' target='#hoverButton'>
<button style={margin} id='hoverButton'
className="e-btn blocks">Hover Me !(Default)</button>
</TooltipComponent>
</td>
<td>
<TooltipComponent content='Tooltip from click'
opensOn='Click' target='#clickButton'>
<button style={margin} id='clickButton'
className="e-btn blocks">Click Me !</button>
</TooltipComponent>
</td>

Copyright © 2001 -2024 Syncfusion Inc. 143


Tooltip Open mode in React Tooltip component

</tr>
<tr>
<td>
<TooltipComponent content='Tooltip from focus'
opensOn='Focus' target='#tooltipfocus'>
<span style={margin} id="textbox"
className="e-float-input blocks">
<input id="tooltipfocus" type="text"
placeholder="Focus and blur" />
</span>
</TooltipComponent>
</td>
<td>
<TooltipComponent className="wrap" ref={t =>
tooltipInstance = t} opensOn='custom' content='Tooltip from custom mode'>
<input id="box" type="button" className="e-
btn" ref={d => buttonElement = d} onClick={handleClick.bind(this)}
value="Click to open tooltip manually" />
</TooltipComponent>
</td>
</tr>
</tbody>
</table>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Custom open mode


Other than the above specified options, the custom mode makes the Tooltip appear on screen for user-
defined custom actions such as right-click, double-click, and so on. Here, the tooltip is not triggered by
any default action, and you have to bind your own events and use either open or close public methods
to show or hide the Tooltips.
The following code example shows how to define custom open mode for the Tooltip.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let buttonElement;
let tooltipInstance;
function handleDoubleClick() {
if (buttonElement.getAttribute('data-tooltip-id')) {
tooltipInstance.close();
}
else {
tooltipInstance.open(buttonElement);
}
}
;

Copyright © 2001 -2024 Syncfusion Inc. 144


Tooltip Open mode in React Tooltip component

return (<TooltipComponent className="wrap" ref={t => tooltipInstance =


t} opensOn='custom' content='Tooltip from custom mode'>
<input id="box" type="button" ref={d => buttonElement = d}
onDoubleClick={handleDoubleClick.bind(this)} value="Double click to open
tooltip"/>
</TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let buttonElement: HTMLElement;
let tooltipInstance: TooltipComponent;
function handleDoubleClick(): void {
if (buttonElement.getAttribute('data-tooltip-id')) {
tooltipInstance.close();
} else {
tooltipInstance.open(buttonElement);
}
};
return (
<TooltipComponent className="wrap" ref={t => tooltipInstance = t}
opensOn='custom' content='Tooltip from custom mode'>
<input id="box" type="button" ref={d => buttonElement = d}
onDoubleClick={handleDoubleClick.bind(this)} value="Double click to open
tooltip" />
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Sticky mode
With this mode set to true, Tooltips can be made to show up on the screen as long as the close icon is
pressed. In this mode, close icon is attached to the Tooltip located at the top right corner. This mode can
be enabled or disabled using the isSticky property.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (<TooltipComponent className="tooltip-box" isSticky={true}
content='Click close icon to close me'>
<div id='target'>Show Tooltip</div>
</TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

Copyright © 2001 -2024 Syncfusion Inc. 145


Tooltip Open mode in React Tooltip component

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (
<TooltipComponent className="tooltip-box" isSticky={true}
content='Click close icon to close me'>
<div id='target'>Show Tooltip</div>
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Open/Close Tooltip with delay


The Tooltips can be opened or closed after some delay by using the openDelay and closeDelay
properties.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (<TooltipComponent className="tooltip-box" content='Tooltip with
delay' openDelay={1000} closeDelay={1000}>
<div id='target'>Show Tooltip</div>
</TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (
<TooltipComponent className="tooltip-box" content='Tooltip with delay'
openDelay={1000} closeDelay={1000}>
<div id='target'>Show Tooltip</div>
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Copyright © 2001 -2024 Syncfusion Inc. 146


Tooltip Animation in React Tooltip component

Animation in React Tooltip component


To animate the Tooltip, a set of specific animation effects are available, and it can be controlled using
the animation property.
The animation property also allows you to set delay, duration, and various other effects of your choice.
AnimationModel is derived from base to apply the chosen animation effect, duration, etc. on Tooltips.
By default, Tooltip entrance occurs over 150 ms using the ease-out timing function. It exits also at 150
ms, but uses ease-in timing function.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let TooltipAnimation = {
open: { effect: 'ZoomIn', duration: 1000, delay: 0 },
close: { effect: 'ZoomOut', duration: 500, delay: 0 }
};
return (<TooltipComponent className="tooltip-box" content='Tooltip
animation effect' animation={TooltipAnimation}>
<div id='target'>Show Tooltip</div>
</TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let TooltipAnimation: Object = {
open: { effect: 'ZoomIn', duration: 1000, delay: 0 },
close: { effect: 'ZoomOut', duration: 500, delay: 0 }
};
return (
<TooltipComponent className="tooltip-box" content='Tooltip animation
effect' animation={TooltipAnimation}>
<div id='target'>Show Tooltip</div>
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

The default animation effect for the Tooltip is set to FadeIn for its open action, and FadeOut for its
close action.
The default duration is set to 150 ms and delay is set to 0.

Copyright © 2001 -2024 Syncfusion Inc. 147


Tooltip Animation in React Tooltip component

Animation effects
The animation effects that are applicable to Tooltips are:

• FadeIn
• FadeOut
• FadeZoomIn
• FadeZoomOut
• FlipXDownIn
• FlipXDownOut
• FlipXUpIn
• FlipXUpOut
• FlipYLeftIn
• FlipYLeftOut
• FlipYRightIn
• FlipYRightOut
• ZoomIn
• ZoomOut
• None

When the effect is specified as none, no effect will be applied to the Tooltip, and animation is
considered to be set to off.
Some of the above animation effects suits the Tooltip better when its tip pointer is hidden.
This can be achieved by setting the showTipPointer to false.
Animating via open/close methods
Animations can also be applied on Tooltips dynamically through open and close methods. These
methods accept the animation model as an optional parameter. If you pass TooltipAnimationSettings,
animation takes this model; otherwise, it takes the values from the animation property. It is also
possible to pass different animations for Tooltips on each target.
Refer to the code snippet below to apply animations using public methods.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let tooltipInstance;
function handleClick() {
if (tooltipInstance.element.getAttribute('data-tooltip-id')) {
let closeAnimation = { effect: 'FadeOut', duration: 1000 };
tooltipInstance.close(closeAnimation);
}
else {
let openAnimation = { effect: 'FadeIn', duration: 1000 };
tooltipInstance.open(tooltipInstance.element, openAnimation);
}
}
;

Copyright © 2001 -2024 Syncfusion Inc. 148


Tooltip Animation in React Tooltip component

return (<TooltipComponent className="tooltip-box" content='Tooltip


content' opensOn='custom' ref={t => tooltipInstance = t}>
<div id='target' onClick={handleClick.bind(this)}>Click
Here</div>
</TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent, TooltipAnimationSettings } from '@syncfusion/ej2-
react-popups';
function App() {
let tooltipInstance: TooltipComponent;
function handleClick(): void {
if (tooltipInstance.element.getAttribute('data-tooltip-id')) {
let closeAnimation: TooltipAnimationSettings = { effect:
'FadeOut', duration: 1000 };
tooltipInstance.close(closeAnimation);
} else {
let openAnimation: TooltipAnimationSettings = { effect:
'FadeIn', duration: 1000 };
tooltipInstance.open(tooltipInstance.element,openAnimation);
}
};
return (
<TooltipComponent className="tooltip-box" content='Tooltip content'
opensOn='custom' ref={t => tooltipInstance = t}>
<div id='target' onClick={handleClick.bind(this)}>Click
Here</div>
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Apply transition
The transition effect can be applied on Tooltips by using the beforeRender event as given in the
following work-around code example.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let tooltipInstance;
let TooltipAnimation = {
open: { effect: 'ZoomIn', duration: 500 },
close: { effect: 'ZoomOut', duration: 500 }
};
function onBeforeRender(args) {

Copyright © 2001 -2024 Syncfusion Inc. 149


Tooltip Animation in React Tooltip component

if (args.element) {
tooltipInstance.animation = { open: { effect: 'None' } };
args.element.style.display = 'block';
args.element.style.transitionProperty = 'left,top';
args.element.style.transitionDuration = '1000ms';
}
}
;
function onAfterClose(args) {
tooltipInstance.animation = TooltipAnimation;
}
;
let c1 = {
top: '18%',
left: '5%'
};
let c2 = {
top: '30%',
left: '30%'
};
let c3 = {
top: '80%',
left: '80%'
};
let c4 = {
top: '65%',
left: '50%'
};
let c5 = {
top: '75%',
left: '15%'
};
let c6 = {
top: '30%',
left: '70%'
};
return (<div className='wrap'>
<h3> Transition effect </h3>
<TooltipComponent className='circle-container' target='.circle-tool'
animation={TooltipAnimation} closeDelay={1000} ref={t => tooltipInstance =
t} beforeRender={onBeforeRender.bind(this)}
afterClose={onAfterClose.bind(this)}>
<div className="circle-tool" style={c1} title="This is Turtle
!!!"></div>
<div className="circle-tool" style={c2} title="This is Snake
!!!"></div>
<div className="circle-tool" style={c3} title="This is Croc
!!!"></div>
<div className="circle-tool" style={c4} title="This is String
Ray !!!"></div>
<div className="circle-tool" style={c5} title="This is Blob Fish
!!!"></div>
<div className="circle-tool" style={c6} title="This is Mammoth
!!!"></div>
</TooltipComponent>
</div>);
}

Copyright © 2001 -2024 Syncfusion Inc. 150


Tooltip Animation in React Tooltip component

export default App;


ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-
popups';
function App() {
let tooltipInstance: TooltipComponent;
let TooltipAnimation: Object = {
open: { effect: 'ZoomIn', duration: 500 },
close: { effect: 'ZoomOut', duration: 500 }
};
function onBeforeRender(args: TooltipEventArgs): void {
if (args.element) {
tooltipInstance.animation = { open: { effect: 'None' } };
args.element.style.display = 'block';
args.element.style.transitionProperty = 'left,top';
args.element.style.transitionDuration = '1000ms';
}
};
function onAfterClose(args: TooltipEventArgs): void {
tooltipInstance.animation = TooltipAnimation;
};
let c1: Object = {
top: '18%',
left: '5%'
};
let c2: Object = {
top: '30%',
left: '30%'
};
let c3: Object = {
top: '80%',
left: '80%'
};
let c4: Object = {
top: '65%',
left: '50%'
};
let c5: Object = {
top: '75%',
left: '15%'
};
let c6: Object = {
top: '30%',
left: '70%'
};
return (
<div className='wrap'>
<h3> Transition effect </h3>
<TooltipComponent className='circle-container' target='.circle-tool'
animation={TooltipAnimation} closeDelay={1000} ref={t => tooltipInstance =

Copyright © 2001 -2024 Syncfusion Inc. 151


Tooltip Customization in React Tooltip component

t} beforeRender={onBeforeRender.bind(this)}
afterClose={onAfterClose.bind(this)}>
<div className="circle-tool" style={c1} title="This is Turtle
!!!"></div>
<div className="circle-tool" style={c2} title="This is Snake
!!!"></div>
<div className="circle-tool" style={c3} title="This is Croc
!!!"></div>
<div className="circle-tool" style={c4} title="This is String
Ray !!!"></div>
<div className="circle-tool" style={c5} title="This is Blob Fish
!!!"></div>
<div className="circle-tool" style={c6} title="This is Mammoth
!!!"></div>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Customization in React Tooltip component


The Tooltip can be customized by using the cssClass property, which accepts custom CSS class names
that define specific user-defined styles and themes to be applied on the Tooltip element.
Tip pointer customization
Styling the tip pointer's size, background, and border colors can be done using the cssClass property, as
given below.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (<TooltipComponent className="tooltip-box" content='Tooltip arrow
customized' cssClass='customtip'>
<div id='target'>Show Tooltip</div>
</TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (
<TooltipComponent className="tooltip-box" content='Tooltip arrow
customized' cssClass='customtip'>
<div id='target'>Show Tooltip</div>
</TooltipComponent>
);

Copyright © 2001 -2024 Syncfusion Inc. 152


Tooltip Style in React Tooltip component

}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Tooltip customization
The complete look and feel of the Tooltip can be customized by changing it's background color, opacity,
content font, etc. The following code example shows the way to achieve it.
INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (<TooltipComponent className="tooltip-box" content='Tooltip
customized' cssClass='customtooltip'>
<div id="target">Show Tooltip</div>
</TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
return (
<TooltipComponent className="tooltip-box" content='Tooltip customized'
cssClass='customtooltip'>
<div id="target">Show Tooltip</div>
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Style in React Tooltip component


The following content provides the exact CSS structure that can be used to modify the control's
appearance based on the user preference.
Customizing the tooltip
Use the following CSS to customize the tooltip.
`css
.e-tooltip-wrap {
border-radius: 4px;
opacity: 1;
}
`

Copyright © 2001 -2024 Syncfusion Inc. 153


Tooltip Style in React Tooltip component

Customizing the tooltip popup


Use the following CSS to customize the tooltip popup properties.
`css
.e-tooltip-wrap.e-popup {
background-color: #fff;
border: 2px solid #000;
}
`
Customizing the tooltip content
Use the following CSS to customize the tooltip content.
`css
.e-tooltip-wrap .e-tip-content {
color: red;
font-size: 12px;
line-height: 20px;
}
`
Customizing the tooltip arrow tip
Use the following CSS to customize the tooltip arrow tip.
`css
/ To customize the arrow tip at bottom /
.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
height: 12px;
left: 50%;
top: 100%;
width: 24px;
}
/ To customize the arrow tip at top /
.e-tooltip-wrap .e-arrow-tip.e-tip-top {
height: 12px;
left: 50%;
top: -9px;
width: 24px;
}

Copyright © 2001 -2024 Syncfusion Inc. 154


Tooltip Style in React Tooltip component

/ To customize the arrow tip at left /


.e-tooltip-wrap .e-arrow-tip.e-tip-left {
height: 24px;
left: -9px;
top: 48%;
width: 12px;
}
/ To customize the arrow tip at right /
.e-tooltip-wrap .e-arrow-tip.e-tip-right {
height: 24px;
left: 100%;
top: 50%;
width: 12px;
}
`
Customizing the tooltip inner tip
Use the following CSS to customize the tooltip inner tip.
`css
.e-tooltip-wrap .e-arrow-tip-inner.e-tip-right,
.e-tooltip-wrap .e-arrow-tip-inner.e-tip-left,
.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom,
.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
color: #fff;
font-size: 25.9px;
}
`
Customizing the tooltip outer tip
Use the following CSS to customize the tooltip outer tip.
`css
/ To customize the arrow tip at bottom /
.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
border-left: 12px solid transparent;
border-right: 14px solid transparent;
border-top: 12px solid #000;

Copyright © 2001 -2024 Syncfusion Inc. 155


Tooltip Accessibility in React Tooltip component

}
/ To customize the arrow tip at top /
.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
border-bottom: 12px solid #000;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
/ To customize the arrow tip at left /
.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
border-bottom: 12px solid transparent;
border-right: 12px solid #000;
border-top: 12px solid transparent;
}
/ To customize the arrow tip at right /
.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
border-bottom: 12px solid transparent;
border-left: 12px solid #000;
border-top: 12px solid transparent;
}
`
Accessibility in React Tooltip component
The Tooltip component followed the accessibility guidelines and standards, including ADA, Section 508,
WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the Tooltip component is outlined below.
| Accessibility Criteria | Compatibility |
| -- | -- |
| WCAG 2.2 Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png"
alt="Yes"> |
| Section 508 Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Screen Reader Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Right-To-Left Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |

Copyright © 2001 -2024 Syncfusion Inc. 156


Tooltip Accessibility in React Tooltip component

| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png"


alt="Yes"> |
| Mobile Device Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Keyboard Navigation Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Accessibility Checker Validation | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Axe-core Accessibility Validation | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
<style>
.post .post-content img {
display: inline-block;
margin: 0.5em 0;
}
</style>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All
features of the component meet the requirement.</div>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png"
alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"
alt="No"> - The component does not meet the requirement.</div>
WAI-ARIA attributes
The Tooltip component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA
attributes are used in the Tooltip component.
| Attributes | Description |
| --- | --- |
| role="tooltip" | The element that serves as the container for the tooltip has the ARIA role of tooltip. |
| aria-describedby | This attribute is added to the target element on which the Tooltip gets opened,
when focusing or hovering over it. It usually holds the randomly generated Id value of the Tooltip
element. <br /> <br />In case, the target element already holds an aria-describedby attribute with Id
value of some other component, then the Tooltip Id value can be additionally appended to the existing
aria-describedby attribute separated by a space as shown in the example below.<br /><br /> For
example: <br /> aria-describedby = "my-text my-tooltip" <br /> my-text is the Id of some other
component.<br /> my-tooltip is the id of Tooltip component. <br /><br/> When the Tooltip is closed,
the aria-describedby attribute is removed from the target. |
| aria-hidden | This attribute is assigned to the Tooltip element whose default value is true. <br /><br />
When true, it denotes that the Tooltip element is in a hidden or a closed state. When the Tooltip
appears on the screen, it’s value changes to false.|

Copyright © 2001 -2024 Syncfusion Inc. 157


Tooltip Ej1 api migration in React Tooltip component

Keyboard interaction
The Tooltip component followed the keyboard interaction guideline, making it easy for people who use
assistive technologies (AT) and those who completely rely on keyboard navigation. The following
keyboard shortcuts are supported by the Tooltip component.
| Keys | Description |
| --- | --- |
| Escape | Closes or dismisses the Tooltip. |
| Tab | A form control receiving focus (say through tab key), opens the Tooltip, and on focus out closes
it. |
1. When the Tooltip is being displayed on the target element, focus continues to stay on it.
2. If the Tooltip opens on mouse entering into the target element space, then it should be dismissed
only when the mouse leaves that target.
3. If the Tooltip opens on the target element that receives focus, then it should be closed only when the
focus moves out of that target element.
Likewise, if the Tooltip opens on a click, then it should be closed only on another click action.
Ensuring accessibility
The Tooltip component's accessibility levels are ensured through an accessibility-checker and axe-core
software tools during automated testing.
The accessibility compliance of the Tooltip component is shown in the following sample. Open the
sample in a new window to evaluate the accessibility of the Tooltip component with accessibility tools.
See also

• Accessibility in Syncfusion React components

Ej1 api migration in React Tooltip component


This article describes the API migration process of Tooltip component from Essential JS 1 to Essential JS
2.
{% raw %}
| Behavior |API in Essential JS 1 | API in Essential JS 2 |
|--|--|--|
| Position | Property: position <br/><br/> public position = { target: { horizontal: “center”,
vertical: “top” }, <br/> stem: { horizontal: “center”, vertical: “bottom” } }; <br/><br/>
<EJ.Tooltip id=‘tooltip’ position={this.position}> <br/> </EJ.Tooltip> <br/> | Property: position
<br/><br/> <TooltipComponent position=‘TopCenter’><br/></TooltipComponent>|
| Animation | Property: animation <br/><br/> public animation = { animation :{ effect : “slide”,
speed : 1000} }; <br/><br/> <EJ.Tooltip id=‘tooltip’ animation={this.animation}> <br/>
</EJ.Tooltip> <br/> | Property: animation <br/> <br/> public animation = { open: { effect: ‘FadeIn’,
<br/> duration: 150, delay: 0 }, <br/> close: { effect: ‘FadeOut’, <br/> duration: 150, delay: 0 } };

Copyright © 2001 -2024 Syncfusion Inc. 158


Tooltip Ej1 api migration in React Tooltip component

<br/><br/> <TooltipComponent position=‘TopCenter’ <br/> animation={this.animation}> <br/>


</TooltipComponent> <br/>|
| Close Time Out | Property: autoCloseTimeout <br/><br/> <EJ.Tooltip id=‘tooltip’
autoCloseTimeout={5000} > <br/> </EJ.Tooltip> | Property: closeDelay, openDelay <br/><br/>
<TooltipComponent position=‘TopCenter’ <br/> closeDelay={500} > <br/> </TooltipComponent>
<br/> |
| Sticky Mode | Property : closeMode <br/><br/> <EJ.Tooltip id=‘tooltip’ closeMode=“sticky”>
<br/> </EJ.Tooltip> <br/> | Property: isSticky <br/><br/> <TooltipComponent position=‘TopCenter’
<br/> isSticky={true}> <br/> </TooltipComponent> <br/> |
| Offset from target | Property : tip.adjust.xValue/ tip.adjust.yValue <br/><br/> public tip = { size: {
width: 25, height: 12 }, <br/> adjust: { xValue: 5, yValue: 6 } }; <br/><br/> <EJ.Tooltip id=‘tooltip’
tip={this.tip}> <br/> </EJ.Tooltip> <br/> | Property: offSetX/ offSetY <br/><br/>
<TooltipComponent position=‘TopCenter’ <br/> offsetX={10} offsetY={10}> <br/>
</TooltipComponent> <br/> |
| Mouse trail on target | Not Applicable | Property: mouseTrail <br/><br/> <TooltipComponent
mouseTrail={true}> <br/> </TooltipComponent> |
| Open mode of tooltip | Not Applicable | Property: opensOn <br/><br/> <TooltipComponent
opensOn=‘Click’> <br/> </TooltipComponent> <br/>|
| Enable disable the tip of tooltip | Not Applicable | Property: showTipPointer <br/><br/>
<TooltipComponent showTipPointer={true}> <br/> </TooltipComponent> <br/> |
| Hide | Method: hide() <br/><br/> <EJ.Tooltip id=‘tooltip’ content=“Tooltip Content”> <br/>
</EJ.Tooltip> <br/><br/> let toolTipObj = ${“$tooltip”}.ejTooltip(“instance”); <br/><br/>
toolTipObj.hide(); <br/> | Method: close() <br/><br/> <TooltipComponent cssClass=‘e-tooltip-css’
<br/> opensOn=‘Custom’ <br/> content=‘Tooltip from custom mode’> <br/>
</TooltipComponent> <br/><br/> toolTipObj.close(); <br/> |
| Show | Method: show() <br/><br/> <EJ.Tooltip id=‘tooltip’ content=“Tooltip Content”> <br/>
</EJ.Tooltip> <br/><br/> let toolTipObj = ${“$tooltip”}.ejTooltip(“instance”); <br/><br/>
toolTipObj.show(); <br/> | Method: open() <br/><br/> <TooltipComponent cssClass=‘e-tooltip-
css’ <br/> opensOn=‘Custom’ <br/> content=‘Tooltip from custom mode’> <br/>
</TooltipComponent> <br/><br/> toolTipObj.open(); <br/> |
| Enable | Method: enable() <br/><br/> <EJ.Tooltip id=‘tooltip’ content=“Tooltip Content”> <br/>
</EJ.Tooltip> <br/><br/> let toolTipObj = ${“$tooltip”}.ejTooltip(“instance”); <br/><br/>
toolTipObj.enable(); <br/> | Method: destroy() <br/><br/> <TooltipComponent cssClass=‘e-
tooltip-css’ <br/> content=‘Tooltip from custom mode’> <br/> </TooltipComponent> <br/><br/>
toolTipObj.destroy(); <br/>|
| Close | Event: close <br/><br/> public close (args: Event): void { } <br/><br/> <EJ.Tooltip
id=‘tooltip’ close={this.close}; <br/> content=“Tooltip Content”> <br/> </EJ.Tooltip> <br/> |
Event: afterClose <br/><br/> <TooltipComponent afterClose={this.afterClose}> <br/>
</TooltipComponent> <br/><br/> public afterClose(args: Event): void { } <br/> |

Copyright © 2001 -2024 Syncfusion Inc. 159


Tooltip How To

| Open | Event: open <br/><br/> public open (args: Event): void { }; <br/><br/> <EJ.Tooltip
id=‘tooltip’ open={this.open} <br/> content=“Tooltip Content”> <br/> </EJ.Tooltip> <br/> |
Event: afterOpen <br/><br/> <TooltipComponent afterOpen={this.afterOpen}> <br/>
</TooltipComponent> <br/><br/> public afterOpen(args: Event): void { } <br/> |
| Before Collision | Not Applicable | Event: beforeCollision <br/><br/> <TooltipComponent
beforeCollision={this.beforeCollision}> <br/> </TooltipComponent> <br/><br/> public
beforeCollision(args: Event): void { } <br/> |
| Tracking | Event: tracking <br/><br/> public tracking (args: Event): void { }; <br/><br/> <EJ.Tooltip
id=‘tooltip’ tracking={this.tracking} <br/> content=“Tooltip Content” associate=“mouse”> <br/>
</EJ.Tooltip> <br/> | Method: open(),close(),refresh() <br/><br/> Sample |
{% endraw %}
How To
Show tooltip on disabled elements and disable tooltip in React Tooltip component
By default, Tooltips will not be displayed on disabled elements. However, it is possible to enable this
behavior by following the steps below.

1. Add a disabled element like the button element into a div whose display style is set to inline-
block.
2. Set the pointer event as none for the disabled element (button) through CSS.
3. Now, initialize the Tooltip for outer div element that holds the disabled button element.

APP.JSX
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent, SwitchComponent } from '@syncfusion/ej2-react-
buttons';
function App() {
let tooltip = null;
function change(args) {
if (!args.checked) {
tooltip.destroy();
}
else {
tooltip.render();
}
}
let box = {
display: "inline-block"
};
let position = {
position: "relative",
top: "75px",
transform: "translateX(-10%)"
};
let padding = {
padding: "0 25px 0 0"
};
let inline = {

Copyright © 2001 -2024 Syncfusion Inc. 160


Tooltip How To

display: "inline-block "


};
let margin = {
margin: "50px"
};
return (<div id="container">
<div id="box" style={box}>
<TooltipComponent id="box" content="Tooltip from disabled element">
<ButtonComponent id="disabledbutton" disabled={true}>
Disabled button
</ButtonComponent>
</TooltipComponent>
</div>
<div style={position}>
<TooltipComponent content="Tooltip Content" target="#tooltip"
style={inline} ref={d => (tooltip = d)}>
<ButtonComponent id="tooltip" style={margin}>
Show Tooltip
</ButtonComponent>
</TooltipComponent>
<div className="switchContainer">
<label htmlFor="checked" style={padding}>
Enable Tooltip
</label>
<SwitchComponent id="checked" checked={true}
change={change.bind(this)}/>
</div>
</div>
</div>);
}
export default App;

APP.TSX
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent, SwitchComponent,ChangeEventArgs } from
'@syncfusion/ej2-react-buttons';
function App() {
let tooltip: TooltipComponent = null as any;
function change(args: ChangeEventArgs) {
if (!args.checked) {
tooltip.destroy();
} else {
tooltip.render();
}
}
let box: object = {
display: "inline-block"
};
let position: object = {
position: "relative",
top: "75px",
transform: "translateX(-10%)"
};
let padding: object = {

Copyright © 2001 -2024 Syncfusion Inc. 161


Tooltip How To

padding: "0 25px 0 0"


};
let inline: object = {
display: "inline-block "
};
let margin: object = {
margin: "50px"
};
return (
<div id="container">
<div id="box" style={box}>
<TooltipComponent id="box" content="Tooltip from disabled element">
<ButtonComponent id="disabledbutton" disabled={true}>
Disabled button
</ButtonComponent>
</TooltipComponent>
</div>
<div style={position}>
<TooltipComponent
content="Tooltip Content"
target="#tooltip"
style={inline}
ref={d => (tooltip = d as any)}
>
<ButtonComponent id="tooltip" style={margin}>
Show Tooltip
</ButtonComponent>
</TooltipComponent>
<div className="switchContainer">
<label htmlFor="checked" style={padding}>
Enable Tooltip
</label>
<SwitchComponent
id="checked"
checked={true}
change={change.bind(this) as any}
/>
</div>
</div>
</div>
);
}
export default App;

INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip;
function change(args) {
if (!args.checked) {
tooltip.destroy();
}

Copyright © 2001 -2024 Syncfusion Inc. 162


Tooltip How To

else {
tooltip.render();
}
}
let box = {
display: 'inline-block'
};
let position = {
position: 'relative', top: '75px', transform: 'translateX(-10%)'
};
let padding = {
padding: '0 25px 0 0'
};
let inline = {
display: 'inline-block '
};
let margin = {
margin: '50px'
};
return (<div id='container'>
<div id="box" style={box}>
<TooltipComponent id="box" content='Tooltip from disabled
element'>
<button className="e-btn" id="disabledbutton"
disabled={true}>Disabled button</button>
</TooltipComponent>
</div>
<div style={position}>
<TooltipComponent content='Tooltip Content' target='#tooltip'
style={inline} ref={d => tooltip = d}>
<button className="e-btn" id="tooltip" style={margin}>Show
Tooltip</button>
</TooltipComponent>
<div className="switchContainer">
<label htmlFor="checked" style={padding}>Enable
Tooltip</label>
<SwitchComponent id="checked" checked={true}
change={change.bind(this)}></SwitchComponent>
</div>
</div>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip: TooltipComponent;
function change(args) {
if (!args.checked) {
tooltip.destroy();

Copyright © 2001 -2024 Syncfusion Inc. 163


Tooltip How To

} else {
tooltip.render();
}
}
let box: object = {
display: 'inline-block'
}
let position: object = {
position: 'relative',top: '75px', transform: 'translateX(-10%)'
}
let padding: object = {
padding: '0 25px 0 0'
}
let inline: object = {
display: 'inline-block '
}
let margin: object = {
margin: '50px'
}
return (
<div id='container'>
<div id="box" style={box}>
<TooltipComponent id="box" content='Tooltip from disabled
element'>
<button className="e-btn" id="disabledbutton"
disabled={true}>Disabled button</button>
</TooltipComponent>
</div>
<div style={position}>
<TooltipComponent content='Tooltip Content' target='#tooltip'
style={inline} ref={d => tooltip = d} >
<button className="e-btn" id="tooltip" style={margin}>Show
Tooltip</button>
</TooltipComponent>
<div className="switchContainer">
<label htmlFor="checked" style={padding}>Enable
Tooltip</label>
<SwitchComponent id="checked" checked={true}
change={change.bind(this)}></SwitchComponent>
</div>
</div>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Dynamic tooltip content with html elements in React Tooltip component


Tooltip loads HTML pages via HTML tags such as iframe, video, and map using the content property,
which supports both string and HTML tags.
To load an iframe element in tooltip, set the required iframe in the content of tooltip while initializing
the tooltip component. Refer to the following code.
`ts

Copyright © 2001 -2024 Syncfusion Inc. 164


Tooltip How To

content: '<iframe
src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard"></iframe>'
`
Use the following steps to render ej2-map in tooltip:

1. Initialize the map component and create an element. After initialization, append the map object
to the element.
2. Set the rendered map element to the content of tooltip component. Refer to the following
sample.

APP.JSX
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
function iFrame() {
return <iframe src="https://www.syncfusion.com/products/essential-
js2"/>;
}
return (<div id="container">
<TooltipComponent target="#iframeContent" content={iFrame}
opensOn="Click" position="BottomCenter">
<div id="tooltipContent">
<div className="content">
<ButtonComponent className="text" id="iframeContent">
Embedded Iframe
</ButtonComponent>
</div>
</div>
</TooltipComponent>
</div>);
}
export default App;

APP.TSX
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
function iFrame(): JSX.Element {
return <iframe src="https://www.syncfusion.com/products/essential-js2"
/>;
}
return (
<div id="container">
<TooltipComponent
target="#iframeContent"
content={iFrame}
opensOn="Click"
position="BottomCenter"
>

Copyright © 2001 -2024 Syncfusion Inc. 165


Tooltip How To

<div id="tooltipContent">
<div className="content">
<ButtonComponent className="text" id="iframeContent">
Embedded Iframe
</ButtonComponent>
</div>
</div>
</TooltipComponent>
</div>
);
}
export default App;

INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let tooltip;
function iFrame() {
return (<iframe
src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboa
rd"></iframe>);
}
return (<div id='container'>
<TooltipComponent ref={obj => tooltip = obj} target="#iframeContent"
content={iFrame} opensOn='Click' position='BottomCenter'>
<div id="tooltipContent">
<div className="content">
<button className="e-btn text" id="iframeContent">Embedded
Iframe</button>
</div>
</div>
</TooltipComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let tooltip: TooltipComponent;
function iFrame(): JSX {
return(
<iframe
src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboa
rd"></iframe>
);
}
return (
<div id='container'>

Copyright © 2001 -2024 Syncfusion Inc. 166


Tooltip How To

<TooltipComponent ref={obj => tooltip = obj} target="#iframeContent"


content={iFrame} opensOn='Click' position='BottomCenter'>
<div id="tooltipContent">
<div className="content">
<button className="e-btn text" id="iframeContent">Embedded
Iframe</button>
</div>
</div>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Tooltip open or display modes in React Tooltip component


The open mode property of tooltip can be defined on a target that is hovering, focusing, or clicking.
Tooltip component have the following types of open mode:

• Auto
• Hover
• Click
• Focus
• Custom

Auto
Tooltip appears when you hover over the target or when the target element receives the focus.
Hover
Tooltip appears when you hover over the target.
Click
Tooltip appears when you click a target element.
Focus
Tooltip appears when you focus (say through tab key) on a target element.
Custom
Tooltip is not triggered by any default action. So, bind your own events and use either open or close
public methods.
APP.JSX
{% raw %}
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let customTooltip = null;
function handleDoubleClick(args) {
if (args.target.getAttribute("data-tooltip-id")) {
customTooltip.close();
}
else {

Copyright © 2001 -2024 Syncfusion Inc. 167


Tooltip How To

customTooltip.open(args.target);
}
}
return (<div id="showTooltip">
<div id="first">
<TooltipComponent opensOn="Hover" content="Tooltip from hover"
position="BottomCenter">
<ButtonComponent className="blocks" id="tooltiphover" cssClass="e-
outline" isPrimary={true}>
Hover me
</ButtonComponent>
</TooltipComponent>
<TooltipComponent opensOn="Click" content="Tooltip from click"
position="BottomCenter">
<ButtonComponent className="blocks" id="tooltipclick" cssClass="e-
outline" isPrimary={true}>
Click me
</ButtonComponent>
</TooltipComponent>
</div>
<br />
<br />
<div id="second">
<TooltipComponent content="Click close icon to close me"
position="BottomCenter" isSticky={true}>
<ButtonComponent className="blocks" id="tooltipclick" cssClass="e-
outline" isPrimary={true}>
Sticky mode
</ButtonComponent>
</TooltipComponent>
<TooltipComponent content="Opens and closes Tooltip with delay of
<i>1000 milliseconds</i>" position="BottomCenter" openDelay="1000"
closeDelay="1000">
<ButtonComponent className="blocks" id="tooltipclick" cssClass="e-
outline" isPrimary={true}>
Tooltip with delay
</ButtonComponent>
</TooltipComponent>
</div>
<br />
<br />
<div id="third">
<TooltipComponent content="Tooltip from custom mode" ref={tooltip =>
{
customTooltip = tooltip;
}} position="BottomCenter" opensOn="Custom">
<button className="blocks e-primary e-outline e-btn"
id="tooltipcustom" onDoubleClick={handleDoubleClick.bind(this)}>
Double Click on Me
</button>
</TooltipComponent>
<TooltipComponent content="Tooltip from focus"
position="BottomCenter">
<div id="textbox" className="e-float-input blocks">
<input id="focus" type="text" placeholder="Focus and blur"/>
</div>
</TooltipComponent>

Copyright © 2001 -2024 Syncfusion Inc. 168


Tooltip How To

</div>
</div>);
}
export default App;
{% endraw %}

APP.TSX
{% raw %}
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let customTooltip: TooltipComponent = null as any;
function handleDoubleClick(args: any): void {
if (args.target.getAttribute("data-tooltip-id")) {
customTooltip.close();
} else {
customTooltip.open(args.target);
}
}
return (
<div id="showTooltip">
<div id="first">
<TooltipComponent
opensOn="Hover"
content="Tooltip from hover"
position="BottomCenter"
>
<ButtonComponent
className="blocks"
id="tooltiphover"
cssClass="e-outline"
isPrimary={true}
>
Hover me
</ButtonComponent>
</TooltipComponent>
<TooltipComponent
opensOn="Click"
content="Tooltip from click"
position="BottomCenter"
>
<ButtonComponent
className="blocks"
id="tooltipclick"
cssClass="e-outline"
isPrimary={true}
>
Click me
</ButtonComponent>
</TooltipComponent>
</div>
<br />
<br />
<div id="second">

Copyright © 2001 -2024 Syncfusion Inc. 169


Tooltip How To

<TooltipComponent
content="Click close icon to close me"
position="BottomCenter"
isSticky={true}
>
<ButtonComponent
className="blocks"
id="tooltipclick"
cssClass="e-outline"
isPrimary={true}
>
Sticky mode
</ButtonComponent>
</TooltipComponent>
<TooltipComponent
content="Opens and closes Tooltip with delay of <i>1000
milliseconds</i>"
position="BottomCenter"
openDelay="1000"
closeDelay="1000"
>
<ButtonComponent
className="blocks"
id="tooltipclick"
cssClass="e-outline"
isPrimary={true}
>
Tooltip with delay
</ButtonComponent>
</TooltipComponent>
</div>
<br />
<br />
<div id="third">
<TooltipComponent
content="Tooltip from custom mode"
ref={tooltip => {
customTooltip = tooltip as any;
}}
position="BottomCenter"
opensOn="Custom"
>
<button
className="blocks e-primary e-outline e-btn"
id="tooltipcustom"
onDoubleClick={handleDoubleClick.bind(this)}
>
Double Click on Me
</button>
</TooltipComponent>
<TooltipComponent content="Tooltip from focus"
position="BottomCenter">
<div id="textbox" className="e-float-input blocks">
<input id="focus" type="text" placeholder="Focus and blur" />
</div>
</TooltipComponent>
</div>

Copyright © 2001 -2024 Syncfusion Inc. 170


Tooltip How To

</div>
);
}
export default App;
{% endraw %}

INDEX.JSX
{% raw %}
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let customTooltip = null;
function handleDoubleClick(args) {
if (args.target.getAttribute('data-tooltip-id')) {
customTooltip.close();
}
else {
customTooltip.open(args.target);
}
}
return (<div id="showTooltip">
<div id="first">
<TooltipComponent opensOn="Hover" content="Tooltip from hover"
position="BottomCenter">
<ButtonComponent className="blocks" id="tooltiphover" cssClass="e-
outline" isPrimary={true}>
Hover me
</ButtonComponent>
</TooltipComponent>
<TooltipComponent opensOn="Click" content="Tooltip from click"
position="BottomCenter">
<ButtonComponent className="blocks" id="tooltipclick" cssClass="e-
outline" isPrimary={true}>
Click me
</ButtonComponent>
</TooltipComponent>
</div>
<br />
<br />
<div id="second">
<TooltipComponent content="Click close icon to close me"
position="BottomCenter" isSticky={true}>
<ButtonComponent className="blocks" id="tooltipclick" cssClass="e-
outline" isPrimary={true}>
Sticky mode
</ButtonComponent>
</TooltipComponent>
<TooltipComponent content="Opens and closes Tooltip with delay of
<i>1000 milliseconds</i>" position="BottomCenter" openDelay="1000"
closeDelay="1000">
<ButtonComponent className="blocks" id="tooltipclick" cssClass="e-
outline" isPrimary={true}>
Tooltip with delay

Copyright © 2001 -2024 Syncfusion Inc. 171


Tooltip How To

</ButtonComponent>
</TooltipComponent>
</div>
<br />
<br />
<div id="third">
<TooltipComponent content="Tooltip from custom mode" ref={tooltip =>
{
customTooltip = tooltip;
}} position="BottomCenter" opensOn="Custom">
<button className="blocks e-primary e-outline e-btn"
id="tooltipcustom" onDoubleClick={handleDoubleClick.bind(this)}>
Double Click on Me
</button>
</TooltipComponent>
<TooltipComponent content="Tooltip from focus"
position="BottomCenter">
<div id="textbox" className="e-float-input blocks">
<input id="focus" type="text" placeholder="Focus and blur"/>
</div>
</TooltipComponent>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
{% endraw %}

INDEX.TSX
{% raw %}
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let customTooltip: TooltipComponent = null as any;
function handleDoubleClick(args): void {
if (args.target.getAttribute('data-tooltip-id')) {
customTooltip.close();
} else {
customTooltip.open(args.target);
}
}
return (
<div id="showTooltip">
<div id="first">
<TooltipComponent
opensOn="Hover"
content="Tooltip from hover"
position="BottomCenter"
>
<ButtonComponent
className="blocks"
id="tooltiphover"
cssClass="e-outline"

Copyright © 2001 -2024 Syncfusion Inc. 172


Tooltip How To

isPrimary={true}
>
Hover me
</ButtonComponent>
</TooltipComponent>
<TooltipComponent
opensOn="Click"
content="Tooltip from click"
position="BottomCenter"
>
<ButtonComponent
className="blocks"
id="tooltipclick"
cssClass="e-outline"
isPrimary={true}
>
Click me
</ButtonComponent>
</TooltipComponent>
</div>
<br />
<br />
<div id="second">
<TooltipComponent
content="Click close icon to close me"
position="BottomCenter"
isSticky={true}
>
<ButtonComponent
className="blocks"
id="tooltipclick"
cssClass="e-outline"
isPrimary={true}
>
Sticky mode
</ButtonComponent>
</TooltipComponent>
<TooltipComponent
content="Opens and closes Tooltip with delay of <i>1000
milliseconds</i>"
position="BottomCenter"
openDelay="1000"
closeDelay="1000"
>
<ButtonComponent
className="blocks"
id="tooltipclick"
cssClass="e-outline"
isPrimary={true}
>
Tooltip with delay
</ButtonComponent>
</TooltipComponent>
</div>
<br />
<br />
<div id="third">

Copyright © 2001 -2024 Syncfusion Inc. 173


Tooltip How To

<TooltipComponent
content="Tooltip from custom mode"
ref={tooltip => {
customTooltip = tooltip;
}}
position="BottomCenter"
opensOn="Custom"
>
<button
className="blocks e-primary e-outline e-btn"
id="tooltipcustom"
onDoubleClick={handleDoubleClick.bind(this)}
>
Double Click on Me
</button>
</TooltipComponent>
<TooltipComponent
content="Tooltip from focus"
position="BottomCenter"
>
<div id="textbox" className="e-float-input blocks">
<input id="focus" type="text" placeholder="Focus and blur" />
</div>
</TooltipComponent>
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
{% endraw %}

Fancy tooltip customization in React Tooltip component


The arrow of the tooltip can be customized as needed by customizing CSS in the sample-side.
The EJ2 tooltip component is achieved through CSS3 format and positioned the tip arrow according to
the tooltip positions like TopCenter, BottomLeft, RightTop, and more.
Here, the tip arrow is customized as Curved tooltip and Bubble tooltip.
Curved tip
The content for the tip pointer arrow has been added. To customize the curved tip arrow, override the
following CSS class of tip arrow.
`ts
<TooltipComponent content='Tooltip Content' cssClass='curvetips e-tooltip-css'>
</TooltipComponent>
`
`css
.e-arrow-tip-outer.e-tip-bottom,
.e-arrow-tip-outer.e-tip-top {

Copyright © 2001 -2024 Syncfusion Inc. 174


Tooltip How To

border-left: none !important;


border-right: none !important;
border-top: none !important;
}
.e-arrow-tip.e-tip-top {
transform: rotate(170deg);
}
`
Bubble tip
The two divs(inner div and outer div) have been added to achieve the bubble tip arrow. To customize
the bubble tip arrow, override the following CSS class of tip arrow.
`ts
<TooltipComponent content='Tooltip Content' cssClass='bubbletip e-tooltip-css'>
</TooltipComponent>
`
`css
.e-arrow-tip-outer.e-tip-bottom, .e-arrow-tip-outer.e-tip-top
{
border-radius: 50px;
height: 10px;
width: 10px;
}
.e-arrow-tip-inner.e-tip-bottom, .e-arrow-tip-inner.e-tip-top
{
border-radius: 50px;
height: 10px;
width: 10px;
}
`
These tip arrow customizations have been achieved through CSS changes in the sample level. The tooltip
position can be changed by using the radio button click event.
The arrow tip pointer can also be disabled by using the showTipPointer property in a tooltip.
APP.JSX
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

Copyright © 2001 -2024 Syncfusion Inc. 175


Tooltip How To

import { ButtonComponent, RadioButtonComponent, } from '@syncfusion/ej2-


react-buttons';
function App() {
let tooltip;
let bubble;
function onChange(args) {
tooltip.position = args.value;
tooltip.dataBind();
}
function onChanged(args) {
bubble.position = args.value;
if (bubble.position == "BottomLeft") {
bubble.offsetY = -30;
}
else {
bubble.offsetY = 0;
}
bubble.dataBind();
}
return (<div id="container">
<TooltipComponent cssClass="curvetips e-tooltip-css" content="Tooltip
arrow customized" target="#target" ref={d => (tooltip = d)}>
<TooltipComponent cssClass="bubbletip e-tooltip-css"
content="Tooltip arrow customized as balloon tip" target="#bubbletip"
position="TopRight" ref={d => (bubble = d)}>
<TooltipComponent cssClass="pointertip e-tooltip-css"
mouseTrail={true} target="#tooltip" content="Disabled tooltip pointer"
showTipPointer={false}>
<div id="customization" className="customTipContainer">
<ButtonComponent id="target">Customized Tip
Arrow</ButtonComponent>
<div id="positions">
<ul>
<li>
<RadioButtonComponent id="element1" label="TopCenter"
name="default" checked={true} value="TopCenter" change={onChange}/>
</li>
<li>
<RadioButtonComponent id="element2" label="BottomLeft"
name="default" value="BottomLeft" change={onChange}/>
</li>
</ul>
</div>
</div>
<div id="balloon" className="customTipContainer">
<ButtonComponent id="bubbletip">Bubble Tip
Arrow</ButtonComponent>
<div id="btn">
<ul>
<li>
<RadioButtonComponent id="radio1" label="BottomLeft"
name="position" value="BottomLeft" change={onChanged}/>
</li>
<li>
<RadioButtonComponent id="radio2" label="TopRight"
name="position" value="TopRight" checked={true} change={onChanged}/>
</li>

Copyright © 2001 -2024 Syncfusion Inc. 176


Tooltip How To

</ul>
</div>
</div>
<div id="disabledContainer" className="customTipContainer">
<ButtonComponent id="tooltip">Disabled Tip
Arrow</ButtonComponent>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>);
}
export default App;

APP.TSX
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import {
ButtonComponent,
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip: TooltipComponent;
let bubble: TooltipComponent;
function onChange(args: ChangeArgs): void {
tooltip.position = args.value as any;
tooltip.dataBind();
}
function onChanged(args: ChangeArgs): void {
bubble.position = args.value as any;
if (bubble.position == "BottomLeft") {
bubble.offsetY = -30;
} else {
bubble.offsetY = 0;
}
bubble.dataBind();
}
return (
<div id="container">
<TooltipComponent
cssClass="curvetips e-tooltip-css"
content="Tooltip arrow customized"
target="#target"
ref={d => (tooltip = d as any)}
>
<TooltipComponent
cssClass="bubbletip e-tooltip-css"
content="Tooltip arrow customized as balloon tip"
target="#bubbletip"
position="TopRight"
ref={d => (bubble = d as any)}
>
<TooltipComponent
cssClass="pointertip e-tooltip-css"

Copyright © 2001 -2024 Syncfusion Inc. 177


Tooltip How To

mouseTrail={true}
target="#tooltip"
content="Disabled tooltip pointer"
showTipPointer={false}
>
<div id="customization" className="customTipContainer">
<ButtonComponent id="target">Customized Tip
Arrow</ButtonComponent>
<div id="positions">
<ul>
<li>
<RadioButtonComponent
id="element1"
label="TopCenter"
name="default"
checked={true}
value="TopCenter"
change={onChange as any}
/>
</li>
<li>
<RadioButtonComponent
id="element2"
label="BottomLeft"
name="default"
value="BottomLeft"
change={onChange as any}
/>
</li>
</ul>
</div>
</div>
<div id="balloon" className="customTipContainer">
<ButtonComponent id="bubbletip">Bubble Tip
Arrow</ButtonComponent>
<div id="btn">
<ul>
<li>
<RadioButtonComponent
id="radio1"
label="BottomLeft"
name="position"
value="BottomLeft"
change={onChanged as any}
/>
</li>
<li>
<RadioButtonComponent
id="radio2"
label="TopRight"
name="position"
value="TopRight"
checked={true}
change={onChanged as any}
/>
</li>
</ul>

Copyright © 2001 -2024 Syncfusion Inc. 178


Tooltip How To

</div>
</div>
<div id="disabledContainer" className="customTipContainer">
<ButtonComponent id="tooltip">Disabled Tip
Arrow</ButtonComponent>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>
);
}
export default App;

INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { RadioButtonComponent, } from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip;
let bubble;
function onChange(args) {
tooltip.position = args.value;
tooltip.dataBind();
}
function onChanged(args) {
bubble.position = args.value;
if (bubble.position == 'BottomLeft') {
bubble.offsetY = -30;
}
else {
bubble.offsetY = 0;
}
bubble.dataBind();
}
return (<div id="container">
<TooltipComponent cssClass="curvetips e-tooltip-css" content="Tooltip
arrow customized" target="#target" ref={d => tooltip = d}>
<TooltipComponent cssClass="bubbletip e-tooltip-css"
content="Tooltip arrow customized as balloon tip" target="#bubbletip"
position="TopRight" ref={d => bubble = d}>
<TooltipComponent cssClass="pointertip e-tooltip-css"
mouseTrail={true} target="#tooltip" content="Disabled tooltip pointer"
showTipPointer={false}>
<div id="customization" className="customTipContainer">
<button className="e-btn" id="target">
Customized Tip Arrow
</button>
<div id="positions">
<ul>
<li>
<RadioButtonComponent id="element1" label="TopCenter"
name="default" checked={true} value="TopCenter" change={onChange}/>
</li>

Copyright © 2001 -2024 Syncfusion Inc. 179


Tooltip How To

<li>
<RadioButtonComponent id="element2" label="BottomLeft"
name="default" value="BottomLeft" change={onChange}/>
</li>
</ul>
</div>
</div>
<div id="balloon" className="customTipContainer">
<button className="e-btn" id="bubbletip">
Bubble Tip Arrow
</button>
<div id="btn">
<ul>
<li>
<RadioButtonComponent id="radio1" label="BottomLeft"
name="position" value="BottomLeft" change={onChanged}/>
</li>
<li>
<RadioButtonComponent id="radio2" label="TopRight"
name="position" value="TopRight" checked={true} change={onChanged}/>
</li>
</ul>
</div>
</div>
<div id="disabledContainer" className="customTipContainer">
<button className="e-btn" id="tooltip">
Disabled Tip Arrow
</button>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import {
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip: TooltipComponent;
let bubble: TooltipComponent;
function onChange(args: ChangeArgs): void {
tooltip.position = args.value as any;
tooltip.dataBind();
}
function onChanged(args: ChangeArgs): void {
bubble.position = args.value as any;
if (bubble.position == 'BottomLeft') {

Copyright © 2001 -2024 Syncfusion Inc. 180


Tooltip How To

bubble.offsetY = -30;
} else {
bubble.offsetY = 0;
}
bubble.dataBind();
}
return (
<div id="container">
<TooltipComponent
cssClass="curvetips e-tooltip-css"
content="Tooltip arrow customized"
target="#target"
ref={d => tooltip = d}
>
<TooltipComponent
cssClass="bubbletip e-tooltip-css"
content="Tooltip arrow customized as balloon tip"
target="#bubbletip"
position="TopRight"
ref={d => bubble = d}
>
<TooltipComponent
cssClass="pointertip e-tooltip-css"
mouseTrail={true}
target="#tooltip"
content="Disabled tooltip pointer"
showTipPointer={false}
>
<div id="customization" className="customTipContainer">
<button className="e-btn" id="target">
Customized Tip Arrow
</button>
<div id="positions">
<ul>
<li>
<RadioButtonComponent
id="element1"
label="TopCenter"
name="default"
checked={true}
value="TopCenter"
change={onChange}
/>
</li>
<li>
<RadioButtonComponent
id="element2"
label="BottomLeft"
name="default"
value="BottomLeft"
change={onChange}
/>
</li>
</ul>
</div>
</div>
<div id="balloon" className="customTipContainer">

Copyright © 2001 -2024 Syncfusion Inc. 181


Tooltip How To

<button className="e-btn" id="bubbletip">


Bubble Tip Arrow
</button>
<div id="btn">
<ul>
<li>
<RadioButtonComponent
id="radio1"
label="BottomLeft"
name="position"
value="BottomLeft"
change={onChanged}
/>
</li>
<li>
<RadioButtonComponent
id="radio2"
label="TopRight"
name="position"
value="TopRight"
checked={true}
change={onChanged}
/>
</li>
</ul>
</div>
</div>
<div id="disabledContainer" className="customTipContainer">
<button className="e-btn" id="tooltip">
Disabled Tip Arrow
</button>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

Display tooltip on svg and canvas elements in React Tooltip component


Tooltip can be displayed on both SVG and Canvas elements. You can directly attach the <svg> or
<canvas> elements to show tooltips on data visualization elements.
SVG
Create the SVG square element and refer to the following code snippet to render the tooltip on SVG
square.
`ts
<TooltipComponent content='SVG Square' cssClass='e-tooltip-css' target= '#square'>
</TooltipComponent>
`

Copyright © 2001 -2024 Syncfusion Inc. 182


Tooltip How To

Canvas
Create the canvas circle element and refer to the following code snippet to render the tooltip on Canvas
circle.
`ts
<TooltipComponent content='Canvas Circle' cssClass='e-tooltip-css' target= '#circle'>
</TooltipComponent>
Link to the Video`
APP.JSX
{% raw %}
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
React.useEffect(() => {
componentDidMount();
}, []);
let circleRef = null;
let triRef = null;
function componentDidMount() {
const circle = circleRef;
const tri = triRef;
let context;
if (tri.getContext) {
context = tri.getContext("2d");
context.beginPath();
context.moveTo(0, 50);
context.lineTo(100, 50);
context.lineTo(50, 0);
context.fillStyle = "#FDA600";
context.fill();
}
if (circle.getContext) {
context = circle.getContext("2d");
let centerX = circle.width / 2;
let centerY = circle.height / 2;
let radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#0450C2";
context.fill();
}
}
return (<div id="container">
<TooltipComponent content="SVG Ellipse" cssClass="e-tooltip-css"
target="#ellipse">
<TooltipComponent content="SVG Polyline" cssClass="e-tooltip-css"
target="#polyline">
<TooltipComponent content="Canvas Circle" cssClass="e-tooltip-css"
target="#circle">
<TooltipComponent content="Canvas Triangle" cssClass="e-tooltip-
css" target="#triangle">
<TooltipComponent content="SVG Square" cssClass="e-tooltip-
css" target="#square">

Copyright © 2001 -2024 Syncfusion Inc. 183


Tooltip How To

<div id="box" className="e-prevent-select">


<div className="circletool" id="rectShape" style={{ left:
"1%", top: "10%" }}>
<svg>
<rect id="square" className="shape" x="50" y="20"
width="50" height="50" style={{
fill: "#FDA600",
stroke: "none",
strokeWidth: "5",
strokeOpacity: 0.9
}}/>
</svg>
</div>
<div className="circletool" id="ellipseShape" style={{
top: "65%" }}>
<svg>
<ellipse id="ellipse" className="shape" cx="100"
cy="50" rx="20" ry="40" style={{
fill: "#0450C2",
stroke: "none",
strokeWidth: "2"
}}/>
</svg>
</div>
<div className="circletool" id="polyShape" style={{ top:
"25%", left: "40%", position: "absolute" }}>
<svg>
<polyline id="polyline" className="shape" points="0,40
40,40 40,80 80,80 80,120 120,120 120,160" style={{
fill: "#ffffff",
stroke: "#0450C2",
strokeWidth: "4"
}}/>
</svg>
</div>
<div className="circletool" id="circleShape" style={{ top:
"16%", left: "72%", position: "absolute" }}>
<canvas id="circle" ref={(circle) => (circleRef =
circle)} className="shape" width="60" height="60"/>
</div>
<div className="circletool" id="triShape" style={{ top:
"73%", left: "76%" }}>
<canvas id="triangle" ref={(tri) => (triRef = tri)}
className="shape" width="100" height="50"/>
</div>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>);
}
export default App;
{% endraw %}

Copyright © 2001 -2024 Syncfusion Inc. 184


Tooltip How To

APP.TSX
{% raw %}
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import {
ButtonComponent,
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
function App() {
React.useEffect(()=>{
componentDidMount();
},[])
let circleRef = null;
let triRef = null;
function componentDidMount() {
const circle: any = circleRef;
const tri: any = triRef;
let context;
if (tri.getContext) {
context = tri.getContext("2d");
context.beginPath();
context.moveTo(0, 50);
context.lineTo(100, 50);
context.lineTo(50, 0);
context.fillStyle = "#FDA600";
context.fill();
}
if (circle.getContext) {
context = circle.getContext("2d");
let centerX: number = circle.width / 2;
let centerY: number = circle.height / 2;
let radius: number = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#0450C2";
context.fill();
}
}
return (
<div id="container">
<TooltipComponent content="SVG Ellipse" cssClass="e-tooltip-css"
target="#ellipse">
<TooltipComponent content="SVG Polyline" cssClass="e-tooltip-css"
target="#polyline">
<TooltipComponent
content="Canvas Circle"
cssClass="e-tooltip-css"
target="#circle"
>
<TooltipComponent
content="Canvas Triangle"
cssClass="e-tooltip-css"
target="#triangle"
>
<TooltipComponent

Copyright © 2001 -2024 Syncfusion Inc. 185


Tooltip How To

content="SVG Square"
cssClass="e-tooltip-css"
target="#square"
>
<div id="box" className="e-prevent-select">
<div
className="circletool"
id="rectShape"
style={{ left: "1%", top: "10%" }}
>
<svg>
<rect
id="square"
className="shape"
x="50"
y="20"
width="50"
height="50"
style={{
fill: "#FDA600",
stroke: "none",
strokeWidth: "5",
strokeOpacity: 0.9
}}
/>
</svg>
</div>
<div className="circletool" id="ellipseShape" style={{
top: "65%" }}>
<svg>
<ellipse
id="ellipse"
className="shape"
cx="100"
cy="50"
rx="20"
ry="40"
style={{
fill: "#0450C2",
stroke: "none",
strokeWidth: "2"
}}
/>
</svg>
</div>
<div
className="circletool"
id="polyShape"
style={{ top: "25%", left: "40%", position: "absolute"
}}
>
<svg>
<polyline
id="polyline"
className="shape"
points="0,40 40,40 40,80 80,80 80,120 120,120
120,160"

Copyright © 2001 -2024 Syncfusion Inc. 186


Tooltip How To

style={{
fill: "#ffffff",
stroke: "#0450C2",
strokeWidth: "4"
}}
/>
</svg>
</div>
<div
className="circletool"
id="circleShape"
style={{ top: "16%", left: "72%", position: "absolute"
}}
>
<canvas
id="circle"
ref={(circle) => ((circleRef as any) = circle )}
className="shape"
width="60"
height="60"
/>
</div>
<div
className="circletool"
id="triShape"
style={{ top: "73%", left: "76%" }}
>
<canvas
id="triangle"
ref={(tri) => ((triRef as any) = tri)}
className="shape"
width="100"
height="50"
/>
</div>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>
);
}
export default App;
{% endraw %}

INDEX.JSX
{% raw %}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
React.useEffect(() => {
componentDidMount();

Copyright © 2001 -2024 Syncfusion Inc. 187


Tooltip How To

}, []);
let circleRef = null;
let triRef = null;
function componentDidMount() {
const circle = circleRef;
const tri = triRef;
let context;
if (tri.getContext) {
context = tri.getContext("2d");
context.beginPath();
context.moveTo(0, 50);
context.lineTo(100, 50);
context.lineTo(50, 0);
context.fillStyle = "#FDA600";
context.fill();
}
if (circle.getContext) {
context = circle.getContext("2d");
let centerX = circle.width / 2;
let centerY = circle.height / 2;
let radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#0450C2";
context.fill();
}
}
return (<div id="container">
<TooltipComponent content="SVG Ellipse" cssClass="e-tooltip-css"
target="#ellipse">
<TooltipComponent content="SVG Polyline" cssClass="e-tooltip-css"
target="#polyline">
<TooltipComponent content="Canvas Circle" cssClass="e-tooltip-css"
target="#circle">
<TooltipComponent content="Canvas Triangle" cssClass="e-tooltip-
css" target="#triangle">
<TooltipComponent content="SVG Square" cssClass="e-tooltip-
css" target="#square">
<div id="box" className="e-prevent-select">
<div className="circletool" id="rectShape" style={{ left:
"1%", top: "10%" }}>
<svg>
<rect id="square" className="shape" x="50" y="20"
width="50" height="50" style={{
fill: "#FDA600",
stroke: "none",
strokeWidth: "5",
strokeOpacity: 0.9
}}/>
</svg>
</div>
<div className="circletool" id="ellipseShape" style={{
top: "65%" }}>
<svg>
<ellipse id="ellipse" className="shape" cx="100"
cy="50" rx="20" ry="40" style={{
fill: "#0450C2",

Copyright © 2001 -2024 Syncfusion Inc. 188


Tooltip How To

stroke: "none",
strokeWidth: "2"
}}/>
</svg>
</div>
<div className="circletool" id="polyShape" style={{ top:
"25%", left: "40%", position: "absolute" }}>
<svg>
<polyline id="polyline" className="shape" points="0,40
40,40 40,80 80,80 80,120 120,120 120,160" style={{
fill: "#ffffff",
stroke: "#0450C2",
strokeWidth: "4"
}}/>
</svg>
</div>
<div className="circletool" id="circleShape" style={{ top:
"16%", left: "72%", position: "absolute" }}>
<canvas id="circle" ref={(circle) => (circleRef =
circle)} className="shape" width="60" height="60"/>
</div>
<div className="circletool" id="triShape" style={{ top:
"73%", left: "76%" }}>
<canvas id="triangle" ref={(tri) => (triRef = tri)}
className="shape" width="100" height="50"/>
</div>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
{% endraw %}

INDEX.TSX
{% raw %}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import {
ButtonComponent,
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
function App() {
React.useEffect(()=>{
componentDidMount();
},[])
let circleRef = null;
let triRef = null;
function componentDidMount() {

Copyright © 2001 -2024 Syncfusion Inc. 189


Tooltip How To

const circle: any = circleRef;


const tri: any = triRef;
let context;
if (tri.getContext) {
context = tri.getContext("2d");
context.beginPath();
context.moveTo(0, 50);
context.lineTo(100, 50);
context.lineTo(50, 0);
context.fillStyle = "#FDA600";
context.fill();
}
if (circle.getContext) {
context = circle.getContext("2d");
let centerX: number = circle.width / 2;
let centerY: number = circle.height / 2;
let radius: number = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#0450C2";
context.fill();
}
}
return (
<div id="container">
<TooltipComponent content="SVG Ellipse" cssClass="e-tooltip-css"
target="#ellipse">
<TooltipComponent content="SVG Polyline" cssClass="e-tooltip-css"
target="#polyline">
<TooltipComponent
content="Canvas Circle"
cssClass="e-tooltip-css"
target="#circle"
>
<TooltipComponent
content="Canvas Triangle"
cssClass="e-tooltip-css"
target="#triangle"
>
<TooltipComponent
content="SVG Square"
cssClass="e-tooltip-css"
target="#square"
>
<div id="box" className="e-prevent-select">
<div
className="circletool"
id="rectShape"
style={{ left: "1%", top: "10%" }}
>
<svg>
<rect
id="square"
className="shape"
x="50"
y="20"
width="50"

Copyright © 2001 -2024 Syncfusion Inc. 190


Tooltip How To

height="50"
style={{
fill: "#FDA600",
stroke: "none",
strokeWidth: "5",
strokeOpacity: 0.9
}}
/>
</svg>
</div>
<div className="circletool" id="ellipseShape" style={{
top: "65%" }}>
<svg>
<ellipse
id="ellipse"
className="shape"
cx="100"
cy="50"
rx="20"
ry="40"
style={{
fill: "#0450C2",
stroke: "none",
strokeWidth: "2"
}}
/>
</svg>
</div>
<div
className="circletool"
id="polyShape"
style={{ top: "25%", left: "40%", position: "absolute"
}}
>
<svg>
<polyline
id="polyline"
className="shape"
points="0,40 40,40 40,80 80,80 80,120 120,120
120,160"
style={{
fill: "#ffffff",
stroke: "#0450C2",
strokeWidth: "4"
}}
/>
</svg>
</div>
<div
className="circletool"
id="circleShape"
style={{ top: "16%", left: "72%", position: "absolute"
}}
>
<canvas
id="circle"
ref={(circle) => ((circleRef as any) = circle )}

Copyright © 2001 -2024 Syncfusion Inc. 191


Tooltip How To

className="shape"
width="60"
height="60"
/>
</div>
<div
className="circletool"
id="triShape"
style={{ top: "73%", left: "76%" }}
>
<canvas
id="triangle"
ref={(tri) => ((triRef as any) = tri)}
className="shape"
width="100"
height="50"
/>
</div>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
{% endraw %}

Create and show tooltip on multiple targets in React Tooltip component


Tooltip can be created and shown on multiple targets within a container by defining the specific target
elements to the target property. So, the tooltip is initialized only on matched targets within a container.
APP.JSX
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Ajax } from '@syncfusion/ej2-base';
function App() {
let tooltip = null;
function beforeRender(args) {
tooltip.content = "Loading...";
tooltip.dataBind();
let ajax = new Ajax("./tooltip.json", "GET", true);
ajax.send().then((result) => {
result = JSON.parse(result);
for (let i = 0; i < result.length; i++) {
if (result[i].Id == args.target.id) {
/* tslint:disable */
tooltip.content = result[i].Name;
/* tslint:enable */
}
}
tooltip.dataBind();

Copyright © 2001 -2024 Syncfusion Inc. 192


Tooltip How To

}, (reason) => {
tooltip.content = reason.message;
tooltip.dataBind();
});
}
return (<div id="container">
<TooltipComponent beforeRender={beforeRender.bind(this)}
content="Loading..." target=".circletool" position="BottomCenter"
showTipPointer={false} ref={i => (tooltip = i)}>
<h2> Dynamic Tooltip content </h2>
<div id="box" className="e-prevent-select">
<div id="1" className="circletool bold-01"/>
<div id="2" className="circletool italic"/>
<div id="3" className="circletool underline-02"/>
<div id="4" className="circletool cut-02"/>
<div id="5" className="circletool copy"/>
<div id="6" className="circletool paste"/>
</div>
</TooltipComponent>
</div>);
}
export default App;

APP.TSX
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Ajax } from '@syncfusion/ej2-base';
import {
ButtonComponent,
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip: TooltipComponent = null as any;
function beforeRender(args: any) {
tooltip.content = "Loading...";
tooltip.dataBind();
let ajax: Ajax = new Ajax("./tooltip.json", "GET", true);
ajax.send().then(
(result: any) => {
result = JSON.parse(result);
for (let i: number = 0; i < result.length; i++) {
if (result[i].Id == args.target.id) {
/* tslint:disable */
tooltip.content = result[i].Name;
/* tslint:enable */
}
}
tooltip.dataBind();
},
(reason: any) => {
tooltip.content = reason.message;
tooltip.dataBind();
}
);

Copyright © 2001 -2024 Syncfusion Inc. 193


Tooltip How To

}
return (
<div id="container">
<TooltipComponent
beforeRender={beforeRender.bind(this)}
content="Loading..."
target=".circletool"
position="BottomCenter"
showTipPointer={false}
ref={i => (tooltip = i as any)}
>
<h2> Dynamic Tooltip content </h2>
<div id="box" className="e-prevent-select">
<div id="1" className="circletool bold-01" />
<div id="2" className="circletool italic" />
<div id="3" className="circletool underline-02" />
<div id="4" className="circletool cut-02" />
<div id="5" className="circletool copy" />
<div id="6" className="circletool paste" />
</div>
</TooltipComponent>
</div>
);
}
export default App;

INDEX.JSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Ajax } from '@syncfusion/ej2-base';
function App() {
let tooltip = null;
function beforeRender(args) {
tooltip.content = "Loading...";
tooltip.dataBind();
let ajax = new Ajax("./tooltip.json", "GET", true);
ajax.send().then((result) => {
result = JSON.parse(result);
for (let i = 0; i < result.length; i++) {
if (result[i].Id == args.target.id) {
/* tslint:disable */
tooltip.content = result[i].Name;
/* tslint:enable */
}
}
tooltip.dataBind();
}, (reason) => {
tooltip.content = reason.message;
tooltip.dataBind();
});
}
return (<div id="container">

Copyright © 2001 -2024 Syncfusion Inc. 194


Tooltip How To

<TooltipComponent beforeRender={beforeRender.bind(this)}
content="Loading..." target=".circletool" position="BottomCenter"
showTipPointer={false} ref={i => (tooltip = i)}>
<h2> Dynamic Tooltip content </h2>
<div id="box" className="e-prevent-select">
<div id="1" className="circletool bold-01"/>
<div id="2" className="circletool italic"/>
<div id="3" className="circletool underline-02"/>
<div id="4" className="circletool cut-02"/>
<div id="5" className="circletool copy"/>
<div id="6" className="circletool paste"/>
</div>
</TooltipComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

INDEX.TSX
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Ajax } from '@syncfusion/ej2-base';
import {
ButtonComponent,
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip: TooltipComponent = null as any;
function beforeRender(args: any) {
tooltip.content = "Loading...";
tooltip.dataBind();
let ajax: Ajax = new Ajax("./tooltip.json", "GET", true);
ajax.send().then(
(result: any) => {
result = JSON.parse(result);
for (let i: number = 0; i < result.length; i++) {
if (result[i].Id == args.target.id) {
/* tslint:disable */
tooltip.content = result[i].Name;
/* tslint:enable */
}
}
tooltip.dataBind();
},
(reason: any) => {
tooltip.content = reason.message;
tooltip.dataBind();
}
);
}
return (
<div id="container">
<TooltipComponent

Copyright © 2001 -2024 Syncfusion Inc. 195


Tooltip How To

beforeRender={beforeRender.bind(this)}
content="Loading..."
target=".circletool"
position="BottomCenter"
showTipPointer={false}
ref={i => (tooltip = i as any)}
>
<h2> Dynamic Tooltip content </h2>
<div id="box" className="e-prevent-select">
<div id="1" className="circletool bold-01" />
<div id="2" className="circletool italic" />
<div id="3" className="circletool underline-02" />
<div id="4" className="circletool cut-02" />
<div id="5" className="circletool copy" />
<div id="6" className="circletool paste" />
</div>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

TOOLTIP.JSX
[
{
"Id": "1",
"Name": "Bold"
},
{
"Id": "2",
"Name": "Italic"
},
{
"Id": "3",
"Name": "Underline"
},
{
"Id": "4",
"Name": "Cut"
},
{
"Id": "5",
"Name": "Copy"
},
{
"Id": "6",
"Name": "Paste"
}
];

Copyright © 2001 -2024 Syncfusion Inc. 196


TreeGrid Getting Started

TreeGrid
Getting Started
Getting started
This section explains the steps required to create a simple Essential JS 2 TreeGrid and demonstrates the
basic usage of the TreeGrid control in a React application.
To get start quickly with React Tree Grid, you can check on this video:
Setup for Local Development
You can use create-react-app to setup the applications.
To install create-react-app run the following command.
`
npm install -g create-react-app
`

• To setup basic React sample use following commands.

`
create-react-app quickstart --template typescript
cd quickstart
npm install
`
Adding Syncfusion TreeGrid packages
All the available Essential JS 2 packages are published in npmjs.com public registry. To install TreeGrid
component, use the following command
`
npm install @syncfusion/ej2-react-treegrid --save
`
Adding CSS reference
Add components style as given below in src/App.css.
`css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

Copyright © 2001 -2024 Syncfusion Inc. 197


TreeGrid Getting Started

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-treegrid/styles/material.css";
`
To refer App.css in the application then import it in the src/App.tsx file.
Adding TreeGrid component
Now, you can start adding TreeGrid component in the application. For getting started, add the TreeGrid
component in src/App.tsx file using following code.
Place the following treegrid code in the src/App.tsx.
`ts
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sortData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping= 'subtasks'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='150'/>
<ColumnDirective field='orderName' headerText='Order Name' width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right'
type='date' />
<ColumnDirective field='price' headerText='Price' width='100' textAlign='Right' type='number'
format='C0' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;
`
Module Injection
TreeGrid component features are segregated into individual feature-wise modules. In order to use a
particular feature, you need to inject its feature service in the App. In the current application, we are
going to use paging, sorting, filtering and exporting feature of TreeGrid. Please find relevant feature
service name and description as follows.

• Page - Inject this service to use paging feature.


• Sort - Inject this service to use sorting feature.
• Filter - Inject this service to use filtering feature.

Copyright © 2001 -2024 Syncfusion Inc. 198


TreeGrid Getting Started

• ExcelExport - Inject this service to use Excel Export feature.


• PdfExport - Inject this service to use PDF Export feature.

These modules should be injected into the treegrid using the Inject directive.
Additional feature modules are available here.
Enable Paging
The paging feature enables users to view the TreeGrid record in a paged view. It can be enabled by
setting allowPaging property to true. Inject the Page module in Inject.services as follows. If the Page
service is not injected, the pager will not be rendered in the treegrid. Pager can be customized using
pageSettings property.
We also have Root level paging mode in which paging is based on the root level rows only i.e., it ignores
the child rows count and it can be enabled by using the pageSettings.pageSizeMode property.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Page, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './data';
function App() {
const pageOptions = { pageSize: 2 };
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='150'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='130' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='price' headerText='Price' width='100'
textAlign='Right' type='number' format='C0'/>
</ColumnsDirective>
<Inject services={[Page, Sort, Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Page, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './data';
function App() {
const pageOptions: PageSettingsModel = { pageSize: 2 };
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping= 'subtasks'
allowPaging={true}>
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 199


TreeGrid Getting Started

<ColumnDirective field='Category' headerText='Category'


width='150'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='130' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='price' headerText='Price' width='100'
textAlign='Right' type='number' format='C0' />
</ColumnsDirective>
<Inject services={[Page, Sort, Filter]}/>
</TreeGridComponent>
};
export default App;

DATA.JSX
export let sortData = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.42',
price: 134,
Category: 'Seafoods',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', Category: 'Frozen
seafood', units: '235',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.35', price: 28 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', Category: 'Frozen
seafood', units: '324',
orderDate: new Date('04/05/2017'), shippedDate: new
Date('04/12/2017'), unitPrice: '18.56', price: 25 },
{ orderID: '1.3', orderName: 'Herrings', Category: 'Frozen
seafood', units: '488',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.45', price: 52 },
{ orderID: '1.4', orderName: 'Preserved Olives', Category:
'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '19.26', price: 11 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen', Category:
'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2019'), unitPrice: '17.54', price: 15 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',

Copyright © 2001 -2024 Syncfusion Inc. 200


TreeGrid Getting Started

price: 212,
Category: 'products',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', Category: 'Frozen
seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.26', price: 41 },
{ orderID: '2.2', orderName: 'White Shrimp', Category: 'Frozen
seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '17.26', price: 39 },
{ orderID: '2.3', orderName: 'Fresh Cheese', Category: 'Dairy',
units: '323', unitPrice: '12.67',
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 38 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese', Category:
'Dairy', units: '370', unitPrice: '15.25',
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 55 },
{ orderID: '2.5', orderName: 'Butter', Category: 'Dairy', units:
'413', unitPrice: '19.25',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 37.17 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.45',
price: 109,
Category: 'Crystals',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', Category: 'Solid
crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '16.45', price: 32 },
{ orderID: '3.2', orderName: 'Pharmaceutical Glassware',
Category: 'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.45', price: 35 },
{ orderID: '3.3', orderName: 'Glass beads', Category: 'Solid
crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.23', price: 40 }
]
}
];
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,

Copyright © 2001 -2024 Syncfusion Inc. 201


TreeGrid Getting Started

duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',

Copyright © 2001 -2024 Syncfusion Inc. 202


TreeGrid Getting Started

startDate: new Date('02/17/2017'),


endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 203


TreeGrid Getting Started

endDate: new Date('02/28/2017'),


priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',

Copyright © 2001 -2024 Syncfusion Inc. 204


TreeGrid Getting Started

approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];

DATA.TSX
export let sortData: Object[] = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.42',
price: 134,
Category: 'Seafoods',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', Category: 'Frozen
seafood', units: '235',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.35', price: 28 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', Category: 'Frozen
seafood', units: '324',
orderDate: new Date('04/05/2017'), shippedDate: new
Date('04/12/2017'), unitPrice: '18.56', price: 25 },

Copyright © 2001 -2024 Syncfusion Inc. 205


TreeGrid Getting Started

{ orderID: '1.3', orderName: 'Herrings', Category: 'Frozen


seafood', units: '488',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.45', price: 52 },
{ orderID: '1.4', orderName: 'Preserved Olives', Category:
'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '19.26', price: 11 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen', Category:
'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2019'), unitPrice: '17.54', price: 15 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 212,
Category: 'products',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', Category: 'Frozen
seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.26', price: 41 },
{ orderID: '2.2', orderName: 'White Shrimp', Category: 'Frozen
seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '17.26', price: 39 },
{ orderID: '2.3', orderName: 'Fresh Cheese', Category: 'Dairy',
units: '323', unitPrice: '12.67',
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 38 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese', Category:
'Dairy', units: '370', unitPrice: '15.25',
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 55 },
{ orderID: '2.5', orderName: 'Butter', Category: 'Dairy', units:
'413', unitPrice: '19.25',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 37.17 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.45',
price: 109,
Category: 'Crystals',
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 206


TreeGrid Getting Started

{ orderID: '3.1', orderName: 'Lead glassware', Category: 'Solid


crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '16.45', price: 32 },
{ orderID: '3.2', orderName: 'Pharmaceutical Glassware',
Category: 'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.45', price: 35 },
{ orderID: '3.3', orderName: 'Glass beads', Category: 'Solid
crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.23', price: 40 }
]
}
];
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 207


TreeGrid Getting Started

endDate: new Date('02/12/2017'), duration: 3, progress: 60,


priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 208


TreeGrid Getting Started

{ taskID: 17, taskName: 'Testing', startDate: new


Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 209


TreeGrid Getting Started

endDate: new Date('02/28/2017'), duration: 2,


progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}

Copyright © 2001 -2024 Syncfusion Inc. 210


TreeGrid Getting Started

];

Enable Sorting
The sorting feature enables you to order the records. It can be enabled by setting the allowSorting
property as true. Inject the Sort module in the Inject.services as follows. If the Sort module is not
injected, you cannot sort when a header is clicked. Sorting feature can be customized using sortSettings
property.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Page, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './data';
function App() {
const pageOptions = { pageSize: 7 };
const sortingOptions = {
columns: [
{ field: 'Category', direction: 'Ascending' },
{ field: 'orderName', direction: 'Ascending' }
]
};
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} allowSorting={true}
sortSettings={sortingOptions}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='150'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='130' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='price' headerText='Price' width='100'
textAlign='Right' type='number' format='C0'/>
</ColumnsDirective>
<Inject services={[Page, Sort, Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Page, Sort, SortSettingsModel } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './data';
function App() {
const pageOptions: PageSettingsModel = { pageSize: 7 };
const sortingOptions: SortSettingsModel = {
columns: [
{ field: 'Category', direction: 'Ascending' },

Copyright © 2001 -2024 Syncfusion Inc. 211


TreeGrid Getting Started

{ field: 'orderName', direction: 'Ascending' }


]
};
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping= 'subtasks'
allowPaging={true} allowSorting={true}
sortSettings={sortingOptions}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='150'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='130' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='price' headerText='Price' width='100'
textAlign='Right' type='number' format='C0' />
</ColumnsDirective>
<Inject services={[Page, Sort, Filter]}/>
</TreeGridComponent>
};
export default App;

DATA.JSX
export let sortData = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.42',
price: 134,
Category: 'Seafoods',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', Category: 'Frozen
seafood', units: '235',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.35', price: 28 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', Category: 'Frozen
seafood', units: '324',
orderDate: new Date('04/05/2017'), shippedDate: new
Date('04/12/2017'), unitPrice: '18.56', price: 25 },
{ orderID: '1.3', orderName: 'Herrings', Category: 'Frozen
seafood', units: '488',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.45', price: 52 },
{ orderID: '1.4', orderName: 'Preserved Olives', Category:
'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '19.26', price: 11 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen', Category:
'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2019'), unitPrice: '17.54', price: 15 }
]

Copyright © 2001 -2024 Syncfusion Inc. 212


TreeGrid Getting Started

},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 212,
Category: 'products',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', Category: 'Frozen
seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.26', price: 41 },
{ orderID: '2.2', orderName: 'White Shrimp', Category: 'Frozen
seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '17.26', price: 39 },
{ orderID: '2.3', orderName: 'Fresh Cheese', Category: 'Dairy',
units: '323', unitPrice: '12.67',
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 38 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese', Category:
'Dairy', units: '370', unitPrice: '15.25',
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 55 },
{ orderID: '2.5', orderName: 'Butter', Category: 'Dairy', units:
'413', unitPrice: '19.25',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 37.17 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.45',
price: 109,
Category: 'Crystals',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', Category: 'Solid
crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '16.45', price: 32 },
{ orderID: '3.2', orderName: 'Pharmaceutical Glassware',
Category: 'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.45', price: 35 },
{ orderID: '3.3', orderName: 'Glass beads', Category: 'Solid
crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.23', price: 40 }
]
}

Copyright © 2001 -2024 Syncfusion Inc. 213


TreeGrid Getting Started

];
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 214


TreeGrid Getting Started

{ taskID: 11, taskName: 'Design complete', startDate: new


Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 215


TreeGrid Getting Started

endDate: new Date('02/27/2017'), duration:


0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',

Copyright © 2001 -2024 Syncfusion Inc. 216


TreeGrid Getting Started

approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];

DATA.TSX
export let sortData: Object[] = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.42',
price: 134,
Category: 'Seafoods',

Copyright © 2001 -2024 Syncfusion Inc. 217


TreeGrid Getting Started

subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', Category: 'Frozen
seafood', units: '235',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.35', price: 28 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', Category: 'Frozen
seafood', units: '324',
orderDate: new Date('04/05/2017'), shippedDate: new
Date('04/12/2017'), unitPrice: '18.56', price: 25 },
{ orderID: '1.3', orderName: 'Herrings', Category: 'Frozen
seafood', units: '488',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.45', price: 52 },
{ orderID: '1.4', orderName: 'Preserved Olives', Category:
'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '19.26', price: 11 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen', Category:
'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2019'), unitPrice: '17.54', price: 15 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 212,
Category: 'products',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', Category: 'Frozen
seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.26', price: 41 },
{ orderID: '2.2', orderName: 'White Shrimp', Category: 'Frozen
seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '17.26', price: 39 },
{ orderID: '2.3', orderName: 'Fresh Cheese', Category: 'Dairy',
units: '323', unitPrice: '12.67',
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 38 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese', Category:
'Dairy', units: '370', unitPrice: '15.25',
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 55 },
{ orderID: '2.5', orderName: 'Butter', Category: 'Dairy', units:
'413', unitPrice: '19.25',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 37.17 }
]
},
{
orderID: '3',

Copyright © 2001 -2024 Syncfusion Inc. 218


TreeGrid Getting Started

orderName: 'Order 3',


orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.45',
price: 109,
Category: 'Crystals',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', Category: 'Solid
crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '16.45', price: 32 },
{ orderID: '3.2', orderName: 'Pharmaceutical Glassware',
Category: 'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.45', price: 35 },
{ orderID: '3.3', orderName: 'Glass beads', Category: 'Solid
crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.23', price: 40 }
]
}
];
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 219


TreeGrid Getting Started

duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 220


TreeGrid Getting Started

{ taskID: 15, taskName: 'Development Task 1',


startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 221


TreeGrid Getting Started

endDate: new Date('02/24/2017'), duration: 2,


progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 222


TreeGrid Getting Started

{ taskID: 36, taskName: 'Phase 3 complete',


startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];

Enable Filtering
The filtering feature enables you to view reduced amount of records based on filter criteria. It can be
enabled by setting the allowFiltering property as true. Inject the Filter module in the Inject.services as
follows. If Filter module is not injected, filter bar will not be rendered in TreeGrid. Filtering feature can
be customized using filterSettings property.
By default, filtered records are shown along with its parent records. This behavior can be changed by
using filterSettings-hierarchyMode property.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Page, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './data';
function App() {
const pageOptions = { pageSize: 7 };
const sortingOptions = {
columns: [
{ field: 'Category', direction: 'Ascending' },
{ field: 'orderName', direction: 'Ascending' }
]
};
const filterSettings = { columns: [
{ field: 'price', operator: 'lessthan', value: 40 }
] };
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} allowSorting={true}
allowFiltering={true} filterSettings={filterSettings}
sortSettings={sortingOptions}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='150'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='130' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='price' headerText='Price' width='100'
textAlign='Right' type='number' format='C0'/>
</ColumnsDirective>
<Inject services={[Page, Sort, Filter]}/>
</TreeGridComponent>;
}
;

Copyright © 2001 -2024 Syncfusion Inc. 223


TreeGrid Getting Started

export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, FilterSettingsModel, Inject, Page, Sort, SortSettingsModel
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './data';
function App() {
const pageOptions: PageSettingsModel = { pageSize: 7 };
const sortingOptions: SortSettingsModel = {
columns: [
{ field: 'Category', direction: 'Ascending' },
{ field: 'orderName', direction: 'Ascending' }
]
};
const filterSettings: FilterSettingsModel = { columns: [
{field: 'price', operator: 'lessthan', value: 40 }
] };
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping= 'subtasks'
allowPaging={true} allowSorting={true} allowFiltering={true}
filterSettings = {filterSettings} sortSettings={sortingOptions}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='150'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='130' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='price' headerText='Price' width='100'
textAlign='Right' type='number' format='C0' />
</ColumnsDirective>
<Inject services={[Page, Sort, Filter]}/>
</TreeGridComponent>
};
export default App;

DATA.JSX
export let sortData = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.42',
price: 134,
Category: 'Seafoods',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', Category: 'Frozen
seafood', units: '235',

Copyright © 2001 -2024 Syncfusion Inc. 224


TreeGrid Getting Started

orderDate: new Date('03/03/2017'), shippedDate: new


Date('03/10/2017'), unitPrice: '12.35', price: 28 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', Category: 'Frozen
seafood', units: '324',
orderDate: new Date('04/05/2017'), shippedDate: new
Date('04/12/2017'), unitPrice: '18.56', price: 25 },
{ orderID: '1.3', orderName: 'Herrings', Category: 'Frozen
seafood', units: '488',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.45', price: 52 },
{ orderID: '1.4', orderName: 'Preserved Olives', Category:
'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '19.26', price: 11 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen', Category:
'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2019'), unitPrice: '17.54', price: 15 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 212,
Category: 'products',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', Category: 'Frozen
seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.26', price: 41 },
{ orderID: '2.2', orderName: 'White Shrimp', Category: 'Frozen
seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '17.26', price: 39 },
{ orderID: '2.3', orderName: 'Fresh Cheese', Category: 'Dairy',
units: '323', unitPrice: '12.67',
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 38 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese', Category:
'Dairy', units: '370', unitPrice: '15.25',
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 55 },
{ orderID: '2.5', orderName: 'Butter', Category: 'Dairy', units:
'413', unitPrice: '19.25',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 37.17 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),

Copyright © 2001 -2024 Syncfusion Inc. 225


TreeGrid Getting Started

units: '1120',
unitPrice: '33.45',
price: 109,
Category: 'Crystals',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', Category: 'Solid
crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '16.45', price: 32 },
{ orderID: '3.2', orderName: 'Pharmaceutical Glassware',
Category: 'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.45', price: 35 },
{ orderID: '3.3', orderName: 'Glass beads', Category: 'Solid
crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.23', price: 40 }
]
}
];
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',

Copyright © 2001 -2024 Syncfusion Inc. 226


TreeGrid Getting Started

approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 227


TreeGrid Getting Started

{ taskID: 16, taskName: 'Development Task 2',


startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 228


TreeGrid Getting Started

endDate: new Date('02/26/2017'), duration:


2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]

Copyright © 2001 -2024 Syncfusion Inc. 229


TreeGrid Getting Started

}]
}
]
}
];

DATA.TSX
export let sortData: Object[] = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.42',
price: 134,
Category: 'Seafoods',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', Category: 'Frozen
seafood', units: '235',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.35', price: 28 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', Category: 'Frozen
seafood', units: '324',
orderDate: new Date('04/05/2017'), shippedDate: new
Date('04/12/2017'), unitPrice: '18.56', price: 25 },
{ orderID: '1.3', orderName: 'Herrings', Category: 'Frozen
seafood', units: '488',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.45', price: 52 },
{ orderID: '1.4', orderName: 'Preserved Olives', Category:
'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '19.26', price: 11 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen', Category:
'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2019'), unitPrice: '17.54', price: 15 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 212,
Category: 'products',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', Category: 'Frozen
seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.26', price: 41 },

Copyright © 2001 -2024 Syncfusion Inc. 230


TreeGrid Getting Started

{ orderID: '2.2', orderName: 'White Shrimp', Category: 'Frozen


seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '17.26', price: 39 },
{ orderID: '2.3', orderName: 'Fresh Cheese', Category: 'Dairy',
units: '323', unitPrice: '12.67',
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 38 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese', Category:
'Dairy', units: '370', unitPrice: '15.25',
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 55 },
{ orderID: '2.5', orderName: 'Butter', Category: 'Dairy', units:
'413', unitPrice: '19.25',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 37.17 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.45',
price: 109,
Category: 'Crystals',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', Category: 'Solid
crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '16.45', price: 32 },
{ orderID: '3.2', orderName: 'Pharmaceutical Glassware',
Category: 'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.45', price: 35 },
{ orderID: '3.3', orderName: 'Glass beads', Category: 'Solid
crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.23', price: 40 }
]
}
];
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 231


TreeGrid Getting Started

endDate: new Date('02/07/2017'), duration: 5, progress: 100,


priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,

Copyright © 2001 -2024 Syncfusion Inc. 232


TreeGrid Getting Started

subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{

Copyright © 2001 -2024 Syncfusion Inc. 233


TreeGrid Getting Started

taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 234


TreeGrid Getting Started

endDate: new Date('02/19/2017'), duration: 3,


progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];

Run the application


The create-react-app will pre-configure the project to compile and run the application in browser. Use
the following command to run the application.
`
npm start
`
Output will be appears as follows.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Page, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './data';
function App() {
const pageOptions = { pageSize: 7 };
const sortingOptions = {
columns: [
{ field: 'Category', direction: 'Ascending' },
{ field: 'orderName', direction: 'Ascending' }
]
};
const filterSettings = { columns: [

Copyright © 2001 -2024 Syncfusion Inc. 235


TreeGrid Getting Started

{ field: 'price', operator: 'lessthan', value: 40 }


] };
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} allowSorting={true}
allowFiltering={true} filterSettings={filterSettings}
sortSettings={sortingOptions}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='150'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='130' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='price' headerText='Price' width='100'
textAlign='Right' type='number' format='C0'/>
</ColumnsDirective>
<Inject services={[Page, Sort, Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, FilterSettingsModel, Inject, Page, Sort, SortSettingsModel
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './data';
function App() {
const pageOptions: PageSettingsModel = { pageSize: 7 };
const sortingOptions: SortSettingsModel = {
columns: [
{ field: 'Category', direction: 'Ascending' },
{ field: 'orderName', direction: 'Ascending' }
]
};
const filterSettings: FilterSettingsModel = { columns: [
{field: 'price', operator: 'lessthan', value: 40 }
] };
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping= 'subtasks'
allowPaging={true} allowSorting={true} allowFiltering={true}
filterSettings = {filterSettings} sortSettings={sortingOptions}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='150'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='130' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='price' headerText='Price' width='100'
textAlign='Right' type='number' format='C0' />
</ColumnsDirective>
<Inject services={[Page, Sort, Filter]}/>

Copyright © 2001 -2024 Syncfusion Inc. 236


TreeGrid Getting Started

</TreeGridComponent>
};
export default App;

DATA.JSX
export let sortData = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.42',
price: 134,
Category: 'Seafoods',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', Category: 'Frozen
seafood', units: '235',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.35', price: 28 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', Category: 'Frozen
seafood', units: '324',
orderDate: new Date('04/05/2017'), shippedDate: new
Date('04/12/2017'), unitPrice: '18.56', price: 25 },
{ orderID: '1.3', orderName: 'Herrings', Category: 'Frozen
seafood', units: '488',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.45', price: 52 },
{ orderID: '1.4', orderName: 'Preserved Olives', Category:
'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '19.26', price: 11 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen', Category:
'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2019'), unitPrice: '17.54', price: 15 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 212,
Category: 'products',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', Category: 'Frozen
seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.26', price: 41 },
{ orderID: '2.2', orderName: 'White Shrimp', Category: 'Frozen
seafood', units: '560',

Copyright © 2001 -2024 Syncfusion Inc. 237


TreeGrid Getting Started

orderDate: new Date('05/22/2018'), shippedDate: new


Date('05/29/2018'), unitPrice: '17.26', price: 39 },
{ orderID: '2.3', orderName: 'Fresh Cheese', Category: 'Dairy',
units: '323', unitPrice: '12.67',
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 38 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese', Category:
'Dairy', units: '370', unitPrice: '15.25',
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 55 },
{ orderID: '2.5', orderName: 'Butter', Category: 'Dairy', units:
'413', unitPrice: '19.25',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 37.17 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.45',
price: 109,
Category: 'Crystals',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', Category: 'Solid
crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '16.45', price: 32 },
{ orderID: '3.2', orderName: 'Pharmaceutical Glassware',
Category: 'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.45', price: 35 },
{ orderID: '3.3', orderName: 'Glass beads', Category: 'Solid
crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.23', price: 40 }
]
}
];
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 238


TreeGrid Getting Started

{ taskID: 3, taskName: 'Plan budget', startDate: new


Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{

Copyright © 2001 -2024 Syncfusion Inc. 239


TreeGrid Getting Started

taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',

Copyright © 2001 -2024 Syncfusion Inc. 240


TreeGrid Getting Started

startDate: new Date('02/17/2017'),


endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 241


TreeGrid Getting Started

{ taskID: 32, taskName: 'Development Task 2',


startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];

DATA.TSX
export let sortData: Object[] = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.42',
price: 134,
Category: 'Seafoods',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', Category: 'Frozen
seafood', units: '235',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.35', price: 28 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', Category: 'Frozen
seafood', units: '324',
orderDate: new Date('04/05/2017'), shippedDate: new
Date('04/12/2017'), unitPrice: '18.56', price: 25 },
{ orderID: '1.3', orderName: 'Herrings', Category: 'Frozen
seafood', units: '488',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.45', price: 52 },
{ orderID: '1.4', orderName: 'Preserved Olives', Category:
'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '19.26', price: 11 },

Copyright © 2001 -2024 Syncfusion Inc. 242


TreeGrid Getting Started

{ orderID: '1.5', orderName: 'Sweet corn Frozen', Category:


'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2019'), unitPrice: '17.54', price: 15 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 212,
Category: 'products',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', Category: 'Frozen
seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.26', price: 41 },
{ orderID: '2.2', orderName: 'White Shrimp', Category: 'Frozen
seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '17.26', price: 39 },
{ orderID: '2.3', orderName: 'Fresh Cheese', Category: 'Dairy',
units: '323', unitPrice: '12.67',
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 38 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese', Category:
'Dairy', units: '370', unitPrice: '15.25',
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 55 },
{ orderID: '2.5', orderName: 'Butter', Category: 'Dairy', units:
'413', unitPrice: '19.25',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 37.17 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.45',
price: 109,
Category: 'Crystals',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', Category: 'Solid
crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '16.45', price: 32 },
{ orderID: '3.2', orderName: 'Pharmaceutical Glassware',
Category: 'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.45', price: 35 },

Copyright © 2001 -2024 Syncfusion Inc. 243


TreeGrid Getting Started

{ orderID: '3.3', orderName: 'Glass beads', Category: 'Solid


crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.23', price: 40 }
]
}
];
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 244


TreeGrid Getting Started

endDate: new Date('02/14/2017'), duration: 2, progress: 100,


priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 245


TreeGrid Getting Started

{ taskID: 19, taskName: 'Customer review meeting',


startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},

Copyright © 2001 -2024 Syncfusion Inc. 246


TreeGrid Getting Started

{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.

Copyright © 2001 -2024 Syncfusion Inc. 247


TreeGrid Getting Started

Getting Started with the TreeGrid Component in the Preact Framework


This article provides a step-by-step guide for setting up a Preact project and integrating the Syncfusion
React TreeGrid component.
Preact is a fast and lightweight JavaScript library for building user interfaces. It's often used as an
alternative to larger frameworks like React. The key difference is that Preact is designed to be smaller in
size and faster in performance, making it a good choice for projects where file size and load times are
critical factors.
Prerequisites
System requirements for Syncfusion React UI components
Set up the Preact project
To create a new Preact project, use one of the commands that are specific to either NPM or Yarn.
`bash
npm init preact
`
or
`bash
yarn init preact
`
Using one of the above commands will lead you to set up additional configurations for the project, as
below:
1\. Define the project name: We can specify the name of the project directly. Let's specify the name of
the project as my-project for this article.
`bash
T Preact - Fast 3kB alternative to React with the same modern API
|

• Project directory:

| my-project
—
`
2\. Choose JavaScript as the framework variant to build this Preact project using JavaScript and React.
`bash
T Preact - Fast 3kB alternative to React with the same modern API
|

• Project language:

Copyright © 2001 -2024 Syncfusion Inc. 248


TreeGrid Getting Started

| > JavaScript
| TypeScript
—
`
3\. Then configure the project as below for this article.
`bash
T Preact - Fast 3kB alternative to React with the same modern API
|

• Use router?

| Yes / > No
—
|

• Prerender app (SSG)?

| Yes / > No
—
|

• Use ESLint?

| Yes / > No
—
`
5\. Upon completing the aforementioned steps to create my-project, run the following command to
jump into the project directory:
`bash
cd my-project
`
Now that my-project is ready to run with default settings, let's add Syncfusion components to the
project.
Add the Syncfusion React packages
Syncfusion React component packages are available at npmjs.com. To use Syncfusion React components
in the project, install the corresponding npm package.

Copyright © 2001 -2024 Syncfusion Inc. 249


TreeGrid Getting Started

This article uses the React TreeGrid component as an example. To use the React TreeGrid component in
the project, the @syncfusion/ej2-react-treegrid package needs to be installed using the following
command:
`bash
npm install @syncfusion/ej2-react-treegrid --save
`
or
`bash
yarn add @syncfusion/ej2-react-treegrid
`
Import Syncfusion CSS styles
You can import themes for the Syncfusion React component in various ways, such as using CSS or SASS
styles from npm packages, CDN, CRG and Theme Studio. Refer to themes topic to know more about
built-in themes and different ways to refer to theme's in a React project.
In this article, the Material 3 theme is applied using CSS styles, which are available in installed packages.
The necessary Material 3 CSS styles for the TreeGrid component and its dependents were imported
into the src/style.css file.
~/SRC/STYLE.CSS
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import "../node_modules/@syncfusion/ej2-grids/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-react-
treegrid/styles/material3.css";

The order of importing CSS styles should be in line with its dependency graph.
Add the Syncfusion React component
Follow the below steps to add the React TreeGrid component to the Vite project:
1\. Before adding the TreeGrid component to your markup, import the TreeGrid component in the
src/index.jsx file.
~/SRC/INDEX.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';

2\. Then, define the TreeGrid component with the dataSource property and column definitions. Declare
the values for the dataSource property.

Copyright © 2001 -2024 Syncfusion Inc. 250


TreeGrid Getting Started

~/SRC/INDEX.JSX
import { render } from 'preact';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import './style.css';
function App() {
let sortData = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.42',
price: 134,
Category: 'Seafoods',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', Category: 'Frozen seafood', units:
'235',
orderDate: new Date('03/03/2017'), shippedDate: new Date('03/10/2017'),
unitPrice: '12.35', price: 28 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', Category: 'Frozen seafood',
units: '324',
orderDate: new Date('04/05/2017'), shippedDate: new Date('04/12/2017'),
unitPrice: '18.56', price: 25 },
{ orderID: '1.3', orderName: 'Herrings', Category: 'Frozen seafood', units:
'488',
orderDate: new Date('05/08/2017'), shippedDate: new Date('05/15/2017'),
unitPrice: '11.45', price: 52 },
{ orderID: '1.4', orderName: 'Preserved Olives', Category: 'Edible', units:
'125',
orderDate: new Date('06/10/2017'), shippedDate: new Date('06/17/2017'),
unitPrice: '19.26', price: 11 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen', Category: 'Edible', units:
'223',
orderDate: new Date('07/12/2017'), shippedDate: new Date('07/19/2019'),
unitPrice: '17.54', price: 15 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 212,
Category: 'products',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', Category: 'Frozen seafood',
orderDate: new Date('02/05/2018'), shippedDate: new Date('02/12/2018'),
units: '278', unitPrice: '15.26', price: 41 },
{ orderID: '2.2', orderName: 'White Shrimp', Category: 'Frozen seafood',
units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new Date('05/29/2018'),
unitPrice: '17.26', price: 39 },

Copyright © 2001 -2024 Syncfusion Inc. 251


TreeGrid Getting Started

{ orderID: '2.3', orderName: 'Fresh Cheese', Category: 'Dairy', units:


'323', unitPrice: '12.67',
orderDate: new Date('06/08/2018'), shippedDate: new Date('06/15/2018'),
price: 38 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese', Category: 'Dairy', units:
'370', unitPrice: '15.25',
orderDate: new Date('07/10/2018'), shippedDate: new Date('07/17/2018'),
price: 55 },
{ orderID: '2.5', orderName: 'Butter', Category: 'Dairy', units: '413',
unitPrice: '19.25',
orderDate: new Date('09/18/2018'), shippedDate: new Date('09/25/2018'),
price: 37.17 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.45',
price: 109,
Category: 'Crystals',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', Category: 'Solid crystals',
orderDate: new Date('02/07/2018'), shippedDate: new Date('02/14/2018'),
units: '542', unitPrice: '16.45', price: 32 },
{ orderID: '3.2', orderName: 'Pharmaceutical Glassware', Category: 'Solid
crystals',
orderDate: new Date('04/19/2018'), shippedDate: new Date('04/26/2018'),
units: '324', unitPrice: '11.45', price: 35 },
{ orderID: '3.3', orderName: 'Glass beads', Category: 'Solid crystals',
units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new Date('03/22/2018'),
unitPrice: '16.23', price: 40 }
]
}
];
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping= 'subtasks'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='150'/>
<ColumnDirective field='orderName' headerText='Order Name' width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='130'
format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='price' headerText='Price' width='100'
textAlign='Right' type='number' format='C0' />
</ColumnsDirective>
</TreeGridComponent>
};
render(<App />, document.querySelector('#app'))

Run the project


To run the project, use the following command:
`bash

Copyright © 2001 -2024 Syncfusion Inc. 252


TreeGrid Data Binding

npm run dev


`
or
`bash
yarn run dev
`
The output will appear as follows:

See also
Getting Started with the Syncfusion React UI Component
Data Binding
Data binding in React Treegrid component
The TreeGrid uses Link to the Video, which supports both RESTful JSON data services binding and local
JavaScript object array binding. The dataSource property can be assigned either with the instance of
DataManager or JavaScript object array collection.
It supports two kinds of data binding method:

• Local data
• Remote data

To get start quickly with Data Binding, you can check on this video:
Binding with ajax
You can use TreeGrid dataSource property to bind the data source to TreeGrid from external Fetch
request. In the below code we have fetched the data source from the server with the help of Fetch
request and provided that to dataSource property by using onSuccess event of the Fetch.
APP.JSX
import { Fetch } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
const pageOptions = { pageSize: 7 };
let treegridInstance;

Copyright © 2001 -2024 Syncfusion Inc. 253


TreeGrid Data Binding

const handleClick = () => {


if (treegridInstance) {
const fetch = new
Fetch("https://ej2services.syncfusion.com/production/web-
services/api/SelfReferenceData", "GET");
treegridInstance.showSpinner();
const treegrid = treegridInstance;
fetch.send();
fetch.onSuccess = (data) => {
treegrid.hideSpinner();
treegrid.dataSource = data;
};
}
};
return (<div className='control-pane'>
<div className='control-section'>
<button onClick={handleClick}>Bind Data</button>
<TreeGridComponent treeColumnIndex={1} idMapping='TaskID'
parentIdMapping='ParentItem' height='210' allowPaging={true}
pageSettings={pageOptions} ref={treegrid => treegridInstance = treegrid}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='Duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
</div>
</div>);
}
;
export default App;

APP.TSX
import { Fetch } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, TreeGrid, TreeGridComponent }
from '@syncfusion/ej2-react-treegrid';
import { Inject, Page, PageSettingsModel } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
function App() {
const pageOptions: PageSettingsModel = { pageSize: 7 };
let treegridInstance: TreeGridComponent | null;
const handleClick = () => {
if (treegridInstance) {
const fetch = new
Fetch("https://ej2services.syncfusion.com/production/web-
services/api/SelfReferenceData","GET");
treegridInstance.showSpinner();
const treegrid = treegridInstance;

Copyright © 2001 -2024 Syncfusion Inc. 254


TreeGrid Data Binding

fetch.send();
fetch.onSuccess = (data: object) => {
treegrid.hideSpinner();
treegrid.dataSource = data;
};
}
}
return (<div className='control-pane'>
<div className='control-section'>
<button onClick={handleClick}>Bind Data</button>
<TreeGridComponent treeColumnIndex={1} idMapping='TaskID'
parentIdMapping='ParentItem' height='210' allowPaging={true}
pageSettings={pageOptions} ref={treegrid =>
treegridInstance=treegrid}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='Duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
</div>
</div>);
};
export default App;

If you bind the dataSource from this way, then it acts like a local dataSource. So you cannot perform any
server side crud actions.
Handling expandStateMapping
To denotes the expand status of parent row, define the expandStateMapping property of tree grid.
The expandStateMapping property maps the field name in data source, that denotes whether parent
record is in expanded or collapsed state and this is useful to renders parent row in expanded or
collapsed state based on this mapping property value in data source.
`ts
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
function App() {
const dataManager: DataManager = new DataManager({
adaptor: new UrlAdaptor,
url: "Home/DataSource",

Copyright © 2001 -2024 Syncfusion Inc. 255


TreeGrid Data Binding

});
return <TreeGridComponent dataSource={dataManager} treeColumnIndex={1} idMapping= 'TaskID'
parentIdMapping='ParentValue' hasChildMapping='isParent' expandStateMapping='IsExpanded'
height='400'>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name' width='180'/>
<ColumnDirective field='Duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;
`
The following code example defines expandStateMapping property at server end.
`ts
public ActionResult ExpandStateMapping()
{
return View();
}
public class TreeData
{
public static List<TreeData> tree = new List<TreeData>();
[System.ComponentModel.DataAnnotations.Key]
public int TaskID { get; set; }
public string TaskName { get; set; }
public int Duration { get; set; }
public int? ParentValue { get; set; }
public bool? isParent { get; set; }
public bool IsExpanded { get; set; }
public TreeData() { }
public static List<TreeData> GetTree()
{
if (tree.Count == 0)

Copyright © 2001 -2024 Syncfusion Inc. 256


TreeGrid Data Binding

{
int root = 0;
for (var t = 1; t <= 500; t++)
{
Random ran = new Random();
string math = (ran.Next() % 3) == 0 ? "High" : (ran.Next() % 2) == 0 ? "Release Breaker" : "Critical";
string progr = (ran.Next() % 3) == 0 ? "Started" : (ran.Next() % 2) == 0 ? "Open" : "In Progress";
root++;
int rootItem = root;
tree.Add(new TreeData() { TaskID = rootItem, TaskName = "Parent task " + rootItem.ToString(), isParent
= true, IsExpanded = false, ParentValue = null, Duration = ran.Next(1, 50) });
int parent = root;
for (var d = 0; d < 1; d++)
{
root++;
string value = ((parent + 1) % 3 == 0) ? "Low" : "Critical";
int par = parent + 1;
progr = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated";
int iD = root;
tree.Add(new TreeData() { TaskID = iD, TaskName = "Child task " + iD.ToString(), isParent = true,
IsExpanded = false, ParentValue = rootItem, Duration = ran.Next(1, 50) });
int subparent = root;
for (var c = 0; c < 500; c++)
{
root++;
string val = ((subparent + c + 1) % 3 == 0) ? "Low" : "Critical";
int subchild = subparent + c + 1;
string progress = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated";
int childID = root ;
tree.Add(new TreeData() { TaskID = childID, TaskName = "sub Child task " + childID.ToString(), isParent =
false, IsExpanded = false, ParentValue = subparent, Duration = ran.Next(1, 50) });
}
}
}

Copyright © 2001 -2024 Syncfusion Inc. 257


TreeGrid Data Binding

}
return tree;
}
}
`
Custom binding
It is possible to handle data processing externally and bind the result to the TreeGrid. This helps you to
provide your own custom data logic. TreeGrid expects an object as the result of the custom logic and the
emitted value should be an object with properties result and count.
In this context, we are going to use Fetch from our @syncfusion/ej2-base library for handling remote
interaction, you can choose any HTTP client as per your choice.
`ts
import React, { Component } from 'react';
import { Fetch, getValue } from '@syncfusion/ej2-base';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, Page, Edit, Sort,
PageSettingsModel, EditSettingsModel, DataStateChangeEventArgs } from '@syncfusion/ej2-react-
treegrid';
import { DataResult } from '@syncfusion/ej2-data';
function App() {
const fetch: Fetch = new Fetch({
mode: true,
onFailure: (e: Error) => false,
type: 'GET'
});
/// this url is just a test url, provide the required url for fetching the data from server.
const BASE_URL: string = 'http://localhost:51473/api/Tasks';
const execute = (state: DataStateChangeEventArgs): Promise<DataResult> => {
return getData(state);
}
const getData = (state: DataStateChangeEventArgs): Promise<DataResult> => {
const pageQuery = $skip=${state.skip}&$top=${state.take};
/// filter query for fetching only the root level records
const treegridQuery = "$filter='ParentId eq null'";
fetch.url = ${BASE_URL}?${pageQuery}&${treegridQuery}&$inlinecount=allpages&$format=json;
return fetch.send().then((response: any) => {

Copyright © 2001 -2024 Syncfusion Inc. 258


TreeGrid Data Binding

const data: any = response;


return {
count: parseInt(getValue('d.count', data), 10),
result: getValue('d.results', data)
};
});
}
let treegridObj: TreeGridComponent | null | undefined;
const pageSettings: PageSettingsModel = { pageSize: 2, pageSizeMode: 'Root' };
const editSettings: EditSettingsModel = { allowAdding: true, allowDeleting:true, allowEditing: true,
mode: 'Row' };
const getDataSource = () => {
if(treegridObj && (treegridObj.dataSource instanceof Array
&& !(treegridObj.dataSource as object[]).length)) {
const state = { skip: 0, take: 2 }; /// take value should always be equal to the pageSize of TreeGrid
dataStateChange(state);
}
}
const dataStateChange = (state : any): void => {
execute(state).then(( treedata ) => {
if(treegridObj) {
treegridObj.dataSource = treedata
}
});
}
return (
<div className="App">
<TreeGridComponent dataSource={[]} dataBound={getDataSource}
ref={treegrid => treegridObj = treegrid} hasChildMapping='isParent'
dataStateChange={dataStateChange} id="TreeGrid" idMapping='TaskId' parentIdMapping='ParentId'
allowPaging={true} treeColumnIndex={1} pageSettings={pageSettings} editSettings={editSettings} >
<ColumnsDirective>
<ColumnDirective field='TaskId' headerText='ID' width='70' textAlign='Right'
isPrimaryKey={true}></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 259


TreeGrid Data Binding

<ColumnDirective field='Task Name' headerText='Name' width='160'></ColumnDirective>


<ColumnDirective field='Duration' headerText='Duration' width='90' textAlign='Right' />
<ColumnDirective field='Progress' headerText='Progress' width='90' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Edit, Sort]} />
</TreeGridComponent>
</div>
);
}
export default App;
`
We have a limitation for Custom Binding feature of TreeGrid. This feature works only for Self Referential
data binding with pageSizeMode as Root.
Handling child data
Using the custom binding feature you can bind the child data for a parent record as per your custom
logic. When a parent record is expanded, dataStateChange event is triggered in which you can assign
your custom data to the childData property of the
dataStateChange](../../api/treegrid/#datastatechange) event arguments.After assigning the child data,
childDataBind method should be called from thedataStateChange event arguments to indicate that the
data is bound.
In this context, initially we have assigned only the parent records to the treegrid dataSource and fetched
the required child records in the dataStateChange event.
`ts
import React, { Component } from 'react';
import { Fetch, getValue } from '@syncfusion/ej2-base';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, Page, Edit, Sort,
PageSettingsModel, EditSettingsModel, DataStateChangeEventArgs } from '@syncfusion/ej2-react-
treegrid';
import { DataResult } from '@syncfusion/ej2-data';
function App() {
const fetch: Fetch = new Fetch({
mode: true,
onFailure: (e: Error) => false,
type: 'GET'
});
const BASE_URL: string = 'http://localhost:51473/api/Tasks';

Copyright © 2001 -2024 Syncfusion Inc. 260


TreeGrid Data Binding

const execute = (state: DataStateChangeEventArgs): Promise<DataResult> => {


if (state.requestType === 'expand') {
return getChildData(state);
}
else {
return getData(state);
}
}
const getData = (state: DataStateChangeEventArgs): Promise<DataResult> => {
const pageQuery = $skip=${state.skip}&$top=${state.take};
/// filter query for fetching only the root level records
const treegridQuery = "$filter='ParentId eq null'";
fetch.url = ${BASE_URL}?${pageQuery}&${treegridQuery}&$inlinecount=allpages&$format=json;
return fetch.send().then((response: any) => {
const data: any = response;
return {
count: parseInt(getValue('d.count', data), 10),
result: getValue('d.results', data)
};
});
}
const getChildData = (state: DataStateChangeEventArgs): Promise<DataResult> => {
let expandQuery: any;
if(state.requestType === 'expand') {
/// filter query for fetching the respective child records
expandQuery = $filter=${‘ParentId eq ‘ + getValue(‘TaskId’, state.data)};
}
fetch.url = ${BASE_URL}?&${expandQuery}&$inlinecount=allpages&$format=json;
return fetch.send().then((response: any) => {
const data: any = response;
return data;
});
}

Copyright © 2001 -2024 Syncfusion Inc. 261


TreeGrid Data Binding

let treegridObj: TreeGridComponent | null;


const pageSettings: PageSettingsModel = { pageSize: 4, pageSizeMode: 'Root' };
const editSettings: EditSettingsModel = { allowAdding: true, allowDeleting:true, allowEditing: true,
mode: 'Row' };
const getDatasource = (): void => {
if(treegridObj && (treegridObj.dataSource instanceof Array
&& !(treegridObj.dataSource as object[]).length)) {
const state = { skip: 0, take: 4 }; /// take value should always be equal to the pageSize of TreeGrid
dataStateChange(state);
}
}
const dataStateChange = (state : any): void => {
if(state.requestType === 'expand'){
execute(state).then((childData: any) => {
state.childData = childData;
state.childDataBind();
});
} else {
execute(state).then(( treedata ) => {
if(treegridObj) {
treegridObj.dataSource = treedata
}
});
}
}
return (
<div className="App">
<TreeGridComponent dataSource={[]} dataBound={getDatasource}
ref={treegrid => treegridObj = treegrid} hasChildMapping='isParent'
dataStateChange={dataStateChange} id="TreeGrid" idMapping='TaskId' parentIdMapping='ParentId'
allowPaging={true} treeColumnIndex={1} pageSettings={pageSettings} editSettings={editSettings} >
<ColumnsDirective>
<ColumnDirective field='TaskId' headerText='ID' width='70' textAlign='Right'
isPrimaryKey={true}></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 262


TreeGrid Data Binding

<ColumnDirective field='Task Name' headerText='Name' width='160'></ColumnDirective>


<ColumnDirective field='Duration' headerText='Duration' width='90' textAlign='Right' />
<ColumnDirective field='Progress' headerText='Progress' width='90' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Edit, Sort]} />
</TreeGridComponent>
</div>
);
}
export default App;
`
Handling Tree Grid actions
For TreeGrid actions such as paging, sorting, etc dataStateChange event will be invoked. You have to
query and resolve data using Fetch in this event based on the state arguments.
`ts
import React, { Component } from 'react';
import { Fetch, getValue } from '@syncfusion/ej2-base';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, Page, Edit, Sort,
PageSettingsModel, EditSettingsModel, DataStateChangeEventArgs } from '@syncfusion/ej2-react-
treegrid';
import { DataResult } from '@syncfusion/ej2-data';
function App() {
const fetch: Fetch = new Fetch({
mode: true,
onFailure: (e: Error) => false,
type: 'GET'
});
const BASE_URL: string = 'http://localhost:51473/api/Tasks';
const execute = (state: DataStateChangeEventArgs): Promise<DataResult> => {
return getData(state);
}
const getData = (state: DataStateChangeEventArgs): Promise<DataResult> => {
const pageQuery = $skip=${state.skip}&$top=${state.take};
/// filter query for fetching only the root level records

Copyright © 2001 -2024 Syncfusion Inc. 263


TreeGrid Data Binding

const treegridQuery = "$filter='ParentId eq null'";


let sortQuery: string = '';
if (state && (state.sorted || []).length) {
sortQuery = &$orderby= + ((state).sorted as Sorts[]).map((obj: Sorts) => {
return obj.direction === 'descending' ? ${obj.name} desc : obj.name;
}).reverse().join(',');
}
fetch.url =
${BASE_URL}?${pageQuery}&${treegridQuery}&${sortQuery}&$inlinecount=allpages&$format=
json;
return fetch.send().then((response: any) => {
const data: any = response;
return {
count: parseInt(getValue('d.count', data), 10),
result: getValue('d.results', data)
};
});
}
let treegridObj: TreeGridComponent | null;
const pageSettings: PageSettingsModel = { pageSize: 2, pageSizeMode: 'Root' };
const editSettings: EditSettingsModel = { allowAdding: true, allowDeleting:true, allowEditing: true,
mode: 'Row' };
const getDataSource = (): void => {
if(treegridObj && (treegridObj.dataSource instanceof Array
&& !(treegridObj.dataSource as object[]).length)) {
const state = { skip: 0, take: 2 }; /// take value should always be equal to the pageSize of TreeGrid
dataStateChange(state);
}
}
const dataStateChange = (state : any): void => {
execute(state).then(( treedata ) => {
if(treegridObj) {
treegridObj.dataSource = treedata
}

Copyright © 2001 -2024 Syncfusion Inc. 264


TreeGrid Data Binding

});
}
return (
<div className="App">
<TreeGridComponent dataSource={[]} dataBound={getDataSource}
ref={treegrid => treegridObj = treegrid} hasChildMapping='isParent'
dataStateChange={dataStateChange} id="TreeGrid" idMapping='TaskId' parentIdMapping='ParentId'
allowPaging={true} treeColumnIndex={1} pageSettings={pageSettings} editSettings={editSettings} >
<ColumnsDirective>
<ColumnDirective field='TaskId' headerText='ID' width='70' textAlign='Right'
isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='Task Name' headerText='Name' width='160'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90' textAlign='Right' />
<ColumnDirective field='Progress' headerText='Progress' width='90' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Edit, Sort]} />
</TreeGridComponent>
</div>
);
}
export default App;
`
Performing CRUD actions
The dataSourceChanged event will be triggered for updating the grid data. You can perform the save
operation based on the event arguments and call the endEdit method to indicate the completion of save
operation.
`ts
import * as React from 'react';
import { Fetch, getValue } from '@syncfusion/ej2-base';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, Page, Edit, Sort,
PageSettingsModel, EditSettingsModel, DataStateChangeEventArgs } from '@syncfusion/ej2-react-
treegrid';
import { DataResult } from '@syncfusion/ej2-data';
import * as ReactDOM from 'react-dom';
import { DataSourceChangedEventArgs } from '@syncfusion/ej2-grids';

Copyright © 2001 -2024 Syncfusion Inc. 265


TreeGrid Data Binding

function App() {
const fetch: Fetch = new Fetch({
mode: true,
onFailure: (e: Error) => false,
type: 'GET'
});
let BASE_URL: string = 'http://localhost:51473/api/Tasks';
const execute = (state: DataStateChangeEventArgs): Promise<DataResult> => {
if (state.requestType === 'expand') {
return getChildData(state);
} else {
return getData(state);
}
}
const getData = (state: DataStateChangeEventArgs): Promise<DataResult> => {
const pageQuery = $skip=${state.skip}&$top=${state.take};
/// filter query for fetching only the root level records
const treegridQuery = "$filter='ParentId eq null'";
fetch.url = ${BASE_URL}?${pageQuery}&${treegridQuery}&$inlinecount=allpages&$format=json;
return fetch.send().then((response: any) => {
const data: any = response;
return {
count: parseInt(getValue('d.count', data), 10),
result: getValue('d.results', data)
};
});
}
const getChildData = (state: DataStateChangeEventArgs): Promise<DataResult> => {
let expandQuery: any;
if(state.requestType === 'expand') {
expandQuery = $filter=${‘ParentId eq ‘ + getValue(‘TaskId’, state.data)};
}
fetch.url = ${BASE_URL}?&${expandQuery}&$inlinecount=allpages&$format=json;

Copyright © 2001 -2024 Syncfusion Inc. 266


TreeGrid Data Binding

return fetch.send().then((response: any) => {


const data: any = response;
return data;
});
}
const addRecord = (state: DataSourceChangedEventArgs) : Promise<DataResult> => {
const add: Fetch = new Fetch({
mode: true,
onFailure: (e: Error) => false,
type: 'POST'
});
return add.send(JSON.stringify(state.data)).then((response: any) => {
const data: any = response;
return data;
});
}
const updateRecord = (state: DataSourceChangedEventArgs) : Promise<DataResult> => {
const update: Fetch = new Fetch({
mode: true,
onFailure: (e: Error) => false,
type: 'PUT'
});
return update.send(JSON.stringify(state.data)).then((response: any) => {
const data: any = response;
return data;
});
}
const deleteRecord = (state: any) : Promise<DataResult> => {
const remove: Fetch = new Fetch({
mode: true,
onFailure: (e: Error) => false,
type: 'DELETE'
});

Copyright © 2001 -2024 Syncfusion Inc. 267


TreeGrid Data Binding

return remove.send(JSON.stringify((state.data && state.data[0]))).then((response: any) => {


const data: any = response;
return data;
});
}
let treegridObj: TreeGridComponent | null | undefined;
const pageSettings: PageSettingsModel = { pageSize: 4, pageSizeMode: 'Root' };
const editSettings: EditSettingsModel = { allowAdding: true, allowDeleting:true, allowEditing: true,
mode: 'Row' };
const getDataSource = (): void => {
if(treegridObj && (treegridObj.dataSource instanceof Array
&& !(treegridObj.dataSource as object[]).length)) {
const state = { skip: 0, take: 4 }; /// take value should always be equal to the pageSize of TreeGrid
dataStateChange(state);
}
}
const dataStateChange = (state : any): void => {
if (state.requestType === 'expand') {
execute(state).then((childData: any) => {
state.childData = childData;
state.childDataBind();
});
} else {
execute(state).then(( treedata ) => {
if(treegridObj) {
treegridObj.dataSource = treedata;
}
});
}
}
const dataSourceChanged = (state: any) => {
if (state.action === 'add') {
addRecord(state).then(() => state.endEdit());

Copyright © 2001 -2024 Syncfusion Inc. 268


TreeGrid Data Binding

} else if (state.action === 'edit') {


updateRecord(state).then(() => state.endEdit());
} else if (state.requestType === 'delete') {
deleteRecord(state).then(() => state.endEdit());
}
}
return (
<div className="App">
<TreeGridComponent dataSource={[]} dataBound={getDataSource} ref={treegrid => treegridObj =
treegrid} dataSourceChanged={dataSourceChanged} dataStateChange={dataStateChange} id="TreeGrid"
idMapping='TaskId' parentIdMapping='ParentId' allowPaging={true} treeColumnIndex={1}
pageSettings={pageSettings} editSettings={editSettings} hasChildMapping='isParent'>
<ColumnsDirective>
<ColumnDirective field='TaskId' headerText='ID' width='70' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='Task Name' headerText='Name' width='160'/>
<ColumnDirective field='Duration' headerText='Duration' width='90' textAlign='Right' />
<ColumnDirective field='Progress' headerText='Progress' width='90' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Edit, Sort]} />
</TreeGridComponent>
</div>
);
}
export default App;
`
Calculate aggregates
The footer aggregate values should be calculated and sent along with the dataSource property as
follows. The aggregate property of the data source should contain the aggregate value assigned to the
property named in the field – type format. For example, the Sum aggregate value for the Duration field
should be assigned to the property named as Duration - sum.
`
{
result: [{..}, {..}, {..}, ...],
count: 830,
aggregates: { 'Freight - sum' : 450,'EmployeeID - min': 1 }

Copyright © 2001 -2024 Syncfusion Inc. 269


TreeGrid Data Binding

}
`
Provide excel filter data source
The dataStateChange event will be triggered with appropriate arguments when the excel filter requests
the filter choice data source. You need to resolve the excel filter data source using the dataSource
resolver function from the state argument as follows.
`ts
import React, { Component } from 'react';
import { Fetch, getValue } from '@syncfusion/ej2-base';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, Page, Edit, Sort,
PageSettingsModel, EditSettingsModel, FilterSettingsModel, DataStateChangeEventArgs } from
'@syncfusion/ej2-react-treegrid';
import { DataResult } from '@syncfusion/ej2-data';
function App() {
const fetch: Fetch = new Fetch({
mode: true,
onFailure: (e: Error) => false,
type: 'GET'
});
/// this url is just a test url, provide the required url for fetching the data from server.
const BASE_URL: string = 'http://localhost:51473/api/Tasks';
const execute = (state: DataStateChangeEventArgs): Promise<DataResult> => {
return getData(state);
}
const getData = (state: DataStateChangeEventArgs): Promise<DataResult> => {
const pageQuery = $skip=${state.skip}&$top=${state.take};
/// filter query for fetching only the root level records
const treegridQuery = "$filter='ParentId eq null'";
fetch.url = ${BASE_URL}?${pageQuery}&${treegridQuery}&$inlinecount=allpages&$format=json;
return fetch.send().then((response: any) => {
const data: any = response;
return {
count: parseInt(getValue('d.count', data), 10),
result: getValue('d.results', data)
};

Copyright © 2001 -2024 Syncfusion Inc. 270


TreeGrid Data Binding

});
}
let treegridObj: TreeGridComponent | null ;
const pageSettings: PageSettingsModel = { pageSize: 2, pageSizeMode: 'Root' };
const filterSettings: FilterSettingsModel = { type: 'Excel' };
const editSettings: EditSettingsModel = { allowAdding: true, allowDeleting:true, allowEditing: true,
mode: 'Row' };
const getDataSource = (): void => {
if(treegridObj && (treegridObj.dataSource instanceof Array
&& !(treegridObj.dataSource as object[]).length)) {
const state = { skip: 0, take: 2 }; /// take value should always be equal to the pageSize of TreeGrid
dataStateChange(state);
}
}
const dataStateChange = (state : any): void => {
if (state.action && (state.action.requestType === 'filterchoicerequest'
|| state.action.requestType ==='filtersearchbegin')) {
execute(state).then((e) => state.dataSource && state.dataSource(e.result));
}
else {
execute(state).then(( treedata ) => {
if(treegridObj) {
treegridObj.dataSource = treedata;
}
});
}
}
return (
<div className="App">
<TreeGridComponent dataSource={[]} dataBound={getDataSource}
ref={treegrid => treegridObj = treegrid} hasChildMapping='isParent'
dataStateChange={dataStateChange} id="TreeGrid" idMapping='TaskId' parentIdMapping='ParentId'
allowPaging={true} treeColumnIndex={1} pageSettings={pageSettings} editSettings={editSettings} >
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 271


TreeGrid Data Binding

<ColumnDirective field='TaskId' headerText='ID' width='70' textAlign='Right'


isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='Task Name' headerText='Name' width='160'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90' textAlign='Right' />
<ColumnDirective field='Progress' headerText='Progress' width='90' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Edit, Sort]} />
</TreeGridComponent>
</div>
);
}
export default App;
`
You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Local data in React Treegrid component
In Local Data binding, data source for rendering the TreeGrid control is retrieved from the same
application locally.
Two types of Data binding are possible with the TreeGrid control.

• Hierarchical Datasource binding


• Self-Referential Data binding (Flat Data)

To bind local data to the treegrid, you can assign a JavaScript object array to the dataSource property.
The local data source can also be provided as an instance of the DataManager.
By default, DataManager uses JsonAdaptor for local data-binding.
Hierarchy data source binding
The childMapping property is used to map the child records in hierarchy data source.
The following code example shows you how to bind the hierarchical local data into the TreeGrid control.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const pageOptions = { pageSize: 7 };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>

Copyright © 2001 -2024 Syncfusion Inc. 272


TreeGrid Data Binding

<ColumnDirective field='taskName' headerText='Task Name'


width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const pageOptions: PageSettingsModel = { pageSize: 7 };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

* Remote data binding is not supported for Hierarchy Data.


Self-Referential data binding (Flat data)
TreeGrid is rendered from Self-Referential data structures by providing two fields, ID field and parent ID
field.

• ID Field: This field contains unique values used to identify nodes. Its name is assigned to the
idMapping property.
• Parent ID Field: This field contains values that indicate parent nodes. Its name is assigned to the
parentIdMapping property.

APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 273


TreeGrid Data Binding

import * as React from 'react';


import { projectData } from './datasource';
function App() {
const pageOptions = { pageSize: 7 };
return <TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' allowPaging={true}
pageSettings={pageOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='Duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { projectData } from './datasource';
function App() {
const pageOptions: PageSettingsModel = { pageSize: 7 };
return <TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID'
parentIdMapping='parentID' allowPaging={true}
pageSettings={pageOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='Duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Herewith we have provided list of reserved properties and the purpose used in TreeGrid. We
recommend to avoid these reserved properties for Internal purpose(To get rid of conflicts).
Reserved keywords | Purpose

Copyright © 2001 -2024 Syncfusion Inc. 274


TreeGrid Data Binding

childRecords | Specifies the childRecords of a parentData


hasChildRecords | Specifies whether the record contains child records
hasFilteredChildRecords | Specifies whether the record contains filtered child records
expanded | Specifies whether the child records are expanded
parentItem | Specifies the parentItem of childRecords
index | Specifies the index of current record
level | Specifies the hierarchy level of record
filterLevel | Specifies the hierarchy level of filtered record
parentIdMapping | Specifies the parentID
uniqueID | Specifies the unique ID of a record
parentUniqueID | Specifies the parent Unique ID of a record
checkboxState | Specifies the checkbox state of a record
isSummaryRow | Specifies the summary of a record
taskData | Specifies the main data
primaryParent | Specifies the Primary data
Remote data in React Treegrid component
To bind remote data to TreeGrid component, assign service data as an instance of DataManager to the
dataSource property. To interact with remote data source, provide the endpoint url and define the
hasChildMapping property of treegrid.
The hasChildMapping property maps the field name in data source, that denotes whether current
record holds any child records. This is useful internally to show expand icon while binding child data on
demand.
The TreeGrid provides Load on Demand support for rendering remote data. The Load on demand is
considered in TreeGrid for the following actions.

• Expanding root nodes.


• Navigating pages, with paging enabled in TreeGrid.

When load on demand is enabled, all the root nodes are rendered in collapsed state at initial load.
When load on demand support is enabled in TreeGrid with paging, the current or active page’s root
node alone will be rendered in collapsed state. On expanding the root node, the child nodes will be
loaded from the remote server.
When a root node is expanded, its child nodes are rendered and are cached locally, such that on
consecutive expand/collapse actions on root node, the child nodes are loaded from the cache instead
from the remote server.
Similarly, if the user navigates to a new page, the root nodes of that specific page, will be rendered with
request to the remote server.

Copyright © 2001 -2024 Syncfusion Inc. 275


TreeGrid Data Binding

Remote Data Binding supports only Self-Referential Data and by default the pageSizeMode for Remote
Data is Root mode. i.e only root node’s count will be shown in pager while using Remote Data
APP.JSX
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
const data = new DataManager({
adaptor: new WebApiAdaptor,
crossDomain: true,
url: 'https://ej2services.syncfusion.com/production/web-
services/api/SelfReferenceData'
});
return <TreeGridComponent dataSource={data} hasChildMapping='isParent'
treeColumnIndex={1} idMapping='TaskID' parentIdMapping='ParentItem'
height='260' allowPaging={true}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='Duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
const data = new DataManager({
adaptor: new WebApiAdaptor,
crossDomain: true,
url: 'https://ej2services.syncfusion.com/production/web-
services/api/SelfReferenceData'
});
return <TreeGridComponent dataSource={data} hasChildMapping='isParent'
treeColumnIndex={1} idMapping='TaskID' parentIdMapping='ParentItem'
height='260' allowPaging={true}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>

Copyright © 2001 -2024 Syncfusion Inc. 276


TreeGrid Data Binding

<ColumnDirective field='StartDate' headerText='Start Date'


width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='Duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

By default, DataManager uses ODataAdaptor for remote data-binding.


Based on the RESTful web services, set the corresponding adaptor to DataManager. Refer here for more
details.
Filtering and searching server-side data operations are not supported in load on demand
LoadChildOnDemand
While binding remote data to Tree Grid component, by default Tree Grid renders parent rows in
collapsed state. Tree Grid provides option to load the child records also during the initial rendering itself
for remote data binding by setting loadChildOnDemand as true.
When loadChildOnDemand is enabled parent records are rendered in expanded state.
The following code example describes the behavior of the loadChildOnDemand feature of Tree Grid.
`ts
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
function App() {
const dataManager: DataManager = new DataManager({
adaptor: new UrlAdaptor,
insertUrl: "Home/Insert",
removeUrl: "Home/Delete",
updateUrl: "Home/Update",
batchUrl: "Home/Remove",
url: "Home/DataSource",
});
return <TreeGridComponent dataSource={dataManager} treeColumnIndex={1} idMapping= 'TaskID'
parentIdMapping='parentID' loadChildOnDemand='true' height='270' allowPaging='true'>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='90' textAlign='Right'/>

Copyright © 2001 -2024 Syncfusion Inc. 277


TreeGrid Data Binding

<ColumnDirective field='TaskName' headerText='Task Name' width='180'/>


<ColumnDirective field='StartDate' headerText='Start Date' width='90' textAlign='Right' format='yMd'
type='date' />
<ColumnDirective field='EndDate' headerText='End Date' width='90' format='yMd' textAlign='Right' />
<ColumnDirective field='Priority' headerText='Priority' width='110'/>
</ColumnsDirective>
</TreeGridComponent>
};
export default App;
`
Also while using loadChildOnDemand we need to handle the child records on server end and it is
applicable to CRUD operations also.
The following code example describes handling of child records at server end.
`ts
public ActionResult UrlDatasource(DataManagerRequest dm)
{
if (TreeData.tree.Count == 0)
TreeData.GetTree();
IEnumerable DataSource = TreeData.tree;
DataOperations operation = new DataOperations();
if (dm.Where != null && dm.Where.Count > 0)
{
DataSource = operation.PerformFiltering(DataSource, dm.Where, "and"); //perform filtering
}
if (dm.Sorted != null && dm.Sorted.Count > 0)
{
DataSource = operation.PerformSorting(DataSource, dm.Sorted); //perform sorting
}
var count = DataSource.ToList<TreeData>().Count();
if (dm.Skip != 0)
{
DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging
}
if (dm.Take != 0)

Copyright © 2001 -2024 Syncfusion Inc. 278


TreeGrid Data Binding

{
DataSource = operation.PerformTake(DataSource, dm.Take);
}
if (dm.Where != null)
{
DataSource = CollectChildRecords(DataSource, dm); // method to collect child records
}
return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
}
public IEnumerable CollectChildRecords(IEnumerable datasource, DataManagerRequest dm)
{
DataOperations operation = new DataOperations();
IEnumerable DataSource = TreeData.tree; // use the total DataSource here
string IdMapping = "TaskID"; // define your IdMapping field name here
int[] TaskIds = new int[0];
foreach (var rec in datasource)
{
int taskid = (int)rec.GetType().GetProperty(IdMapping).GetValue(rec);
TaskIds = TaskIds.Concat(new int[] { taskid }).ToArray(); //get the Parentrecord Ids based on IdMapping
Field
}
IEnumerable ChildRecords = null;
foreach (int id in TaskIds)
{
dm.Where[0].value = id;
IEnumerable records = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
//perform filtering to collect the childrecords based on Ids
ChildRecords = ChildRecords == null || (ChildRecords.AsQueryable().Count() == 0) ? records :
((IEnumerable<object>)ChildRecords).Concat((IEnumerable<object>)records); //concate the
childrecords with dataSource
}
if (ChildRecords != null)
{
ChildRecords = CollectChildRecords(ChildRecords, dm); // repeat the operation for inner level child

Copyright © 2001 -2024 Syncfusion Inc. 279


TreeGrid Data Binding

if (dm.Sorted != null && dm.Sorted.Count > 0) // perform Sorting


{
ChildRecords = operation.PerformSorting(ChildRecords, dm.Sorted);
}
datasource = ((IEnumerable<object>)datasource).Concat((IEnumerable<object>)ChildRecords);
//concate the childrecords with dataSource
}
return datasource;
}
`
Offline mode
On remote data binding, all treegrid actions such as paging, loading child on-demand, will be processed
on server-side. To avoid postback, set the treegrid to load all data on initialization and make the actions
process in client-side. To enable this behavior, use the offline property of DataManager.
APP.JSX
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
const data = new DataManager({
adaptor: new WebApiAdaptor,
crossDomain: true,
offline: true,
url: 'https://ej2services.syncfusion.com/production/web-
services/api/SelfReferenceData'
});
return <TreeGridComponent dataSource={data} hasChildMapping='isParent'
treeColumnIndex={1} idMapping='TaskID' parentIdMapping='ParentItem'
height='260' allowPaging={true}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='Duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX

Copyright © 2001 -2024 Syncfusion Inc. 280


TreeGrid Data Binding

import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';


import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
const data = new DataManager({
adaptor: new WebApiAdaptor,
crossDomain: true,
offline: true,
url: 'https://ej2services.syncfusion.com/production/web-
services/api/SelfReferenceData'
});
return <TreeGridComponent dataSource={data}
hasChildMapping='isParent' treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='ParentItem' height='260'
allowPaging={true}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='Duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Custom adaptor
You can create your own adaptor by extending the built-in adaptors. The following demonstrates
custom adaptor approach and how to add a serial number for the records by overriding the built-in
response processing using the processResponse method of the ODataAdaptor.
APP.JSX
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { SerialNoAdaptor } from './serialNoAdaptor';
export default class App extends React.Component {
data = new DataManager({
adaptor: new SerialNoAdaptor,
crossDomain: true,
url: 'https://ej2services.syncfusion.com/production/web-
services/api/SelfReferenceData'
});
render() {
return <TreeGridComponent dataSource={this.data}
hasChildMapping='isParent' treeColumnIndex={2} idMapping='TaskID'
parentIdMapping='ParentItem' height='260'>
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 281


TreeGrid Data Binding

<ColumnDirective field='Sno' headerText='Sno' width='90'


textAlign='Right'/>
<ColumnDirective field='TaskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='Duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
}
;

APP.TSX
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { SerialNoAdaptor } from './serialNoAdaptor';
export default class App extends React.Component<{}, {}>{
public data = new DataManager({
adaptor: new SerialNoAdaptor,
crossDomain: true,
url: 'https://ej2services.syncfusion.com/production/web-
services/api/SelfReferenceData'
});
public render() {
return <TreeGridComponent dataSource={this.data}
hasChildMapping='isParent' treeColumnIndex={2} idMapping='TaskID'
parentIdMapping='ParentItem' height='260'>
<ColumnsDirective>
<ColumnDirective field='Sno' headerText='Sno' width='90'
textAlign='Right'/>
<ColumnDirective field='TaskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='Duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
}
};

SERIALNOADAPTOR.JSX
import { setValue } from '@syncfusion/ej2-base';
import { ODataAdaptor } from '@syncfusion/ej2-data';
export class SerialNoAdaptor extends ODataAdaptor {
processResponse() {

Copyright © 2001 -2024 Syncfusion Inc. 282


TreeGrid Data Binding

let i = 0;
// calling base class processResponse function
const original = super.processResponse.apply(this, arguments);
if (!(original instanceof Array)) {
// adding serial number
original.result.forEach((item) => setValue('Sno', ++i, item));
}
return original;
}
}

SERIALNOADAPTOR.TSX
import { setValue } from '@syncfusion/ej2-base';
import { ODataAdaptor } from '@syncfusion/ej2-data';
export class SerialNoAdaptor extends ODataAdaptor {
public processResponse() {
let i: number = 0;
// calling base class processResponse function
const original: any = super.processResponse.apply(this, arguments);
if (!(original instanceof Array)) {
// adding serial number
original.result.forEach((item: object) => setValue('Sno', ++i,
item));
}
return original;
}
}

Sending additional parameters to the server


To add a custom parameter to the data request, use the addParams method of Query class. Assign the
Query object with additional parameters to the treegrid query property.
APP.JSX
import { DataManager, Query, WebApiAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
const data = new DataManager({
adaptor: new WebApiAdaptor,
crossDomain: true,
url: 'https://ej2services.syncfusion.com/production/web-
services/api/SelfReferenceData'
});
const query = new Query().addParams('ej2treegrid', 'true');
return <TreeGridComponent dataSource={data} hasChildMapping='isParent'
treeColumnIndex={1} idMapping='TaskID' parentIdMapping='ParentItem'
height='260' query={query}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>

Copyright © 2001 -2024 Syncfusion Inc. 283


TreeGrid Data Binding

<ColumnDirective field='StartDate' headerText='Start Date'


width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='Duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { DataManager, Query, WebApiAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
const data = new DataManager({
adaptor: new WebApiAdaptor,
crossDomain: true,
url: 'https://ej2services.syncfusion.com/production/web-
services/api/SelfReferenceData'
});
const query = new Query().addParams('ej2treegrid', 'true');
return <TreeGridComponent dataSource={data}
hasChildMapping='isParent' treeColumnIndex={1} idMapping='TaskID'
parentIdMapping='ParentItem' height='260' query={query}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='Duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Handling HTTP error


During server interaction from the treegrid, some server-side exceptions may occur, and you can acquire
those error messages or exception details in client-side using the actionFailure event.
The argument passed to the actionFailure event contains the error details returned from the server.
APP.JSX
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
let treegrid;
const data = new DataManager({

Copyright © 2001 -2024 Syncfusion Inc. 284


TreeGrid Data Binding

url: 'http://some.com/invalidUrl'
});
const onActionFailure = (e) => {
const span = document.createElement('span');
if (treegrid) {
treegrid.element.parentNode
.insertBefore(span, treegrid.element);
span.style.color = "#FF0000";
span.innerHTML = "Server exception: 404 Not found";
}
};
return <TreeGridComponent dataSource={data} ref={g => treegrid = g}
hasChildMapping='isParent' treeColumnIndex={1} idMapping='TaskID'
parentIdMapping='ParentItem' height='260' actionFailure={onActionFailure}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='Duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { DataManager } from '@syncfusion/ej2-data';
import { FailureEventArgs } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, TreeGrid, TreeGridComponent }
from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
let treegrid: TreeGridComponent | null;
const data = new DataManager({
url: 'http://some.com/invalidUrl'
});
const onActionFailure = (e: FailureEventArgs) => {
const span: HTMLElement = document.createElement('span');
if (treegrid) {
(treegrid.element.parentNode as HTMLElement)
.insertBefore(span, treegrid.element);
span.style.color = "#FF0000";
span.innerHTML = "Server exception: 404 Not found";
}
}
return <TreeGridComponent dataSource={data} ref={g => treegrid = g}
hasChildMapping='isParent' treeColumnIndex={1} idMapping='TaskID'
parentIdMapping='ParentItem' height='260' actionFailure={onActionFailure}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID'
width='90' textAlign='Right'/>

Copyright © 2001 -2024 Syncfusion Inc. 285


TreeGrid Data Binding

<ColumnDirective field='TaskName' headerText='Task Name'


width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='Duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

The actionFailure event will be triggered not only for the server errors, but also when there is an
exception while processing the treegrid actions.
Load on demand with virtualization
While binding remote data to Tree Grid component, by default Tree Grid renders parent rows in
collapsed state. When expanding the root node, the child nodes will be loaded from the remote server.
When using virtualization with remote data binding, it helps you to improve the tree grid performance
while loading a large set of data by setting enableVirtualization as true. The Tree Grid UI virtualization
allows it to render only rows and columns visible within the view-port without buffering the entire
datasource.
hasChildMapping property maps the field name in data source, that denotes whether current record
holds any child records. This is useful internally to show expand icon while binding child data on
demand.
`ts
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent, VirtualScroll, Sort, Filter, Edit,
EditSettingsModel, Toolbar, ToolbarItems, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Row',
newRowPosition: 'Below'
};
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const pageSettings: PageSettingsModel = { pageSize: 30 };
const dataManager: DataManager = new DataManager({
adaptor: new UrlAdaptor,

Copyright © 2001 -2024 Syncfusion Inc. 286


TreeGrid Data Binding

insertUrl: "Home/Insert",
removeUrl: "Home/Delete",
updateUrl: "Home/Update",
url: "Home/DataSource",
});
return <TreeGridComponent dataSource={dataManager} treeColumnIndex={1} idMapping= 'TaskID'
parentIdMapping='ParentValue' hasChildMapping='isParent' expandStateMapping='IsExpanded'
height='400' enableVirtualization={true} editSettings={editOptions} toolbar={toolbarOptions}
allowFiltering={true} allowSorting={true} pageSettings={pageSettings}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='TaskName' headerText='Task Name' width='180'/>
<ColumnDirective field='Duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit, VirtualScroll, Sort, Filter, Toolbar]} />
</TreeGridComponent>
};
export default App;
`
The following code example describes handling of Load on demand at server end.
`ts
public ActionResult lazyLoading()
{
TreeData.tree = new List<TreeData>();
return View();
}
public ActionResult UrlDatasource(DataManagerRequest dm)
{
List<TreeData> data = new List<TreeData>();
data = TreeData.GetTree();
DataOperations operation = new DataOperations();
IEnumerable<TreeData> DataSource = data;
List<TreeData> ExpandedParentRecords = new List<TreeData>();

Copyright © 2001 -2024 Syncfusion Inc. 287


TreeGrid Data Binding

if (dm.Expand != null && dm.Expand[0] == "ExpandingAction") // setting the ExpandStateMapping


property whether is true or false
{
var val = TreeData.GetTree().Where(ds => ds.TaskID == int.Parse(dm.Expand[1])).FirstOrDefault();
val.IsExpanded = true;
}
else if (dm.Expand != null && dm.Expand[0] == "CollapsingAction")
{
var val = TreeData.GetTree().Where(ds => ds.TaskID == int.Parse(dm.Expand[1])).FirstOrDefault();
val.IsExpanded = false;
}
if (!(dm.Where != null && dm.Where.Count > 1))
{
data = data.Where(p => p.ParentValue == null).ToList();
}
DataSource = data;
if (dm.Search != null && dm.Search.Count > 0) // Searching
{
DataSource = operation.PerformSearching(DataSource, dm.Search);
}
if (dm.Sorted != null && dm.Sorted.Count > 0 && dm.Sorted[0].Name != null) // Sorting
{
DataSource = operation.PerformSorting(DataSource, dm.Sorted);
}
if (dm.Where != null && dm.Where.Count > 1) //filtering
{
DataSource = operation.PerformFiltering(DataSource, dm.Where, "and");
}
data = new List<TreeData>();
foreach (var rec in DataSource)
{
if (rec.IsExpanded)
{

Copyright © 2001 -2024 Syncfusion Inc. 288


TreeGrid Data Binding

ExpandedParentRecords.Add(rec as TreeData); // saving the expanded parent records


}
data.Add(rec as TreeData);
}
var GroupData = TreeData.GetTree().ToList().GroupBy(rec => rec.ParentValue)
.Where(g => g.Key != null).ToDictionary(g => g.Key?.ToString(), g => g.ToList());
if (ExpandedParentRecords.Count > 0)
{
foreach (var Record in ExpandedParentRecords.ToList())
{
var ChildGroup = GroupData[Record.TaskID.ToString()];
if (dm.Sorted != null && dm.Sorted.Count > 0 && dm.Sorted[0].Name != null) // sorting the child records
{
IEnumerable ChildSort = ChildGroup;
ChildSort = operation.PerformSorting(ChildSort, dm.Sorted);
ChildGroup = new List<TreeData>();
foreach (var rec in ChildSort)
{
ChildGroup.Add(rec as TreeData);
}
}
if (dm.Search != null && dm.Search.Count > 0) // searching the child records
{
IEnumerable ChildSearch = ChildGroup;
ChildSearch = operation.PerformSearching(ChildSearch, dm.Search);
ChildGroup = new List<TreeData>();
foreach (var rec in ChildSearch)
{
ChildGroup.Add(rec as TreeData);
}
}
AppendChildren(dm, ChildGroup, Record, GroupData, data);
}

Copyright © 2001 -2024 Syncfusion Inc. 289


TreeGrid Data Binding

}
DataSource = data;
if (dm.Expand != null && dm.Expand[0] == "CollapsingAction") // setting the skip index based on
collapsed parent
{
string IdMapping = "TaskID";
List<WhereFilter> CollapseFilter = new List<WhereFilter>();
CollapseFilter.Add(new WhereFilter() { Field = IdMapping, value = dm.Where[0].value, Operator =
dm.Where[0].Operator });
var CollapsedParentRecord = operation.PerformFiltering(DataSource, CollapseFilter, "and");
var index = data.Cast<object>().ToList().IndexOf(CollapsedParentRecord.Cast<object>().ToList()[0]);
dm.Skip = index;
}
else if (dm.Expand != null && dm.Expand[0] == "ExpandingAction") // setting the skip index based on
expanded parent
{
string IdMapping = "TaskID";
List<WhereFilter> ExpandFilter = new List<WhereFilter>();
ExpandFilter.Add(new WhereFilter() { Field = IdMapping, value = dm.Where[0].value, Operator =
dm.Where[0].Operator });
var ExpandedParentRecord = operation.PerformFiltering(DataSource, ExpandFilter, "and");
var index = data.Cast<object>().ToList().IndexOf(ExpandedParentRecord.Cast<object>().ToList()[0]);
dm.Skip = index;
}
int count = data.Count;
DataSource = data;
if (dm.Skip != 0)
{
DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging
}
if (dm.Take != 0)
{
DataSource = operation.PerformTake(DataSource, dm.Take);
}

Copyright © 2001 -2024 Syncfusion Inc. 290


TreeGrid Data Binding

return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);


}
private void AppendChildren(DataManagerRequest dm, List<TreeData> ChildRecords, TreeData
ParentValue, Dictionary<string, List<TreeData>> GroupData, List<TreeData> data) // Getting child
records for the respective parent
{
string TaskId = ParentValue.TaskID.ToString();
var index = data.IndexOf(ParentValue);
DataOperations operation = new DataOperations();
foreach (var Child in ChildRecords)
{
if (ParentValue.IsExpanded)
{
string ParentId = Child.ParentValue.ToString();
if (TaskId == ParentId)
{
((IList)data).Insert(++index, Child);
if (GroupData.ContainsKey(Child.TaskID.ToString()))
{
var DeepChildRecords = GroupData[Child.TaskID.ToString()];
if (DeepChildRecords?.Count > 0)
{
if (dm.Sorted != null && dm.Sorted.Count > 0 && dm.Sorted[0].Name != null) // sorting the child records
{
IEnumerable ChildSort = DeepChildRecords;
ChildSort = operation.PerformSorting(ChildSort, dm.Sorted);
DeepChildRecords = new List<TreeData>();
foreach (var rec in ChildSort)
{
DeepChildRecords.Add(rec as TreeData);
}
}
if (dm.Search != null && dm.Search.Count > 0) // searching the child records
{

Copyright © 2001 -2024 Syncfusion Inc. 291


TreeGrid Data Binding

IEnumerable ChildSearch = DeepChildRecords;


ChildSearch = operation.PerformSearching(ChildSearch, dm.Search);
DeepChildRecords = new List<TreeData>();
foreach (var rec in ChildSearch)
{
DeepChildRecords.Add(rec as TreeData);
}
}
AppendChildren(dm, DeepChildRecords, Child, GroupData, data);
if (Child.IsExpanded)
{
index += DeepChildRecords.Count;
}
}
}
else
{
Child.isParent = false;
}
}
}
}
}
public ActionResult Update(CRUDModel<TreeData> value)
{
List<TreeData> data = new List<TreeData>();
data = TreeData.GetTree();
var val = data.Where(ds => ds.TaskID == value.Value.TaskID).FirstOrDefault();
val.TaskName = value.Value.TaskName;
val.Duration = value.Value.Duration;
return Json(val);
}
public ActionResult Insert(CRUDModel<TreeData> value)

Copyright © 2001 -2024 Syncfusion Inc. 292


TreeGrid Data Binding

{
var c = 0;
for (; c < TreeData.GetTree().Count; c++)
{
if (TreeData.GetTree()[c].TaskID == value.RelationalKey)
{
if (TreeData.GetTree()[c].isParent == null)
{
TreeData.GetTree()[c].isParent = true;
}
break;
}
}
c += FindChildRecords(value.RelationalKey);
TreeData.GetTree().Insert(c + 1, value.Value);
return Json(value.Value);
}
public int FindChildRecords(int? id)
{
var count = 0;
for (var i = 0; i < TreeData.GetTree().Count; i++)
{
if (TreeData.GetTree()[i].ParentValue == id)
{
count++;
count += FindChildRecords(TreeData.GetTree()[i].TaskID);
}
}
return count;
}
public object Delete(CRUDModel<TreeData> value)
{
if (value.deleted != null)

Copyright © 2001 -2024 Syncfusion Inc. 293


TreeGrid Data Binding

{
for (var i = 0; i < value.deleted.Count; i++)
{
TreeData.GetTree().Remove(TreeData.GetTree().Where(ds => ds.TaskID ==
value.deleted[i].TaskID).FirstOrDefault());
}
}
else
{
TreeData.GetTree().Remove(TreeData.GetTree().Where(or => or.TaskID ==
int.Parse(value.Key.ToString())).FirstOrDefault());
}
return Json(value);
}
public class CRUDModel<T> where T : class
{
public TreeData Value;
public int Key { get; set; }
public int RelationalKey { get; set; }
public List<T> added { get; set; }
public List<T> changed { get; set; }
public List<T> deleted { get; set; }
}
public class TreeData
{
public static List<TreeData> tree = new List<TreeData>();
[System.ComponentModel.DataAnnotations.Key]
public int TaskID { get; set; }
public string TaskName { get; set; }
public int Duration { get; set; }
public int? ParentValue { get; set; }
public bool? isParent { get; set; }
public bool IsExpanded { get; set; }
public TreeData() { }

Copyright © 2001 -2024 Syncfusion Inc. 294


TreeGrid Data Binding

public static List<TreeData> GetTree()


{
if (tree.Count == 0)
{
int root = 0;
for (var t = 1; t <= 500; t++)
{
Random ran = new Random();
string math = (ran.Next() % 3) == 0 ? "High" : (ran.Next() % 2) == 0 ? "Release Breaker" : "Critical";
string progr = (ran.Next() % 3) == 0 ? "Started" : (ran.Next() % 2) == 0 ? "Open" : "In Progress";
root++;
int rootItem = root;
tree.Add(new TreeData() { TaskID = rootItem, TaskName = "Parent task " + rootItem.ToString(), isParent
= true, IsExpanded = false, ParentValue = null, Duration = ran.Next(1, 50) });
int parent = root;
for (var d = 0; d < 1; d++)
{
root++;
string value = ((parent + 1) % 3 == 0) ? "Low" : "Critical";
int par = parent + 1;
progr = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated";
int iD = root;
tree.Add(new TreeData() { TaskID = iD, TaskName = "Child task " + iD.ToString(), isParent = true,
IsExpanded = false, ParentValue = rootItem, Duration = ran.Next(1, 50) });
int subparent = root;
for (var c = 0; c < 500; c++)
{
root++;
string val = ((subparent + c + 1) % 3 == 0) ? "Low" : "Critical";
int subchild = subparent + c + 1;
string progress = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated";
int childID = root ;
tree.Add(new TreeData() { TaskID = childID, TaskName = "sub Child task " + childID.ToString(), isParent =
false, IsExpanded = false, ParentValue = subparent, Duration = ran.Next(1, 50) });

Copyright © 2001 -2024 Syncfusion Inc. 295


TreeGrid Data Binding

}
}
}
}
return tree;
}
}
`
Load parent rows in expanded state with virtualization
Tree Grid provides an option to load the child records in the initial rendering itself for remote data
binding by setting the loadChildOnDemand as true. When the loadChildOnDemand is enabled, parent
records are rendered in expanded state.
When using virtualization with loadChildOnDemand , it helps you to improve the tree grid
performance while loading the child records during the initial rendering for remote data binding by
setting enableVirtualization as true and loadChildOnDemand as true.
`ts
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent, VirtualScroll, Sort, Filter, Edit,
EditSettingsModel, Toolbar, ToolbarItems, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Row',
newRowPosition: 'Below'
};
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const pageSettings: PageSettingsModel = { pageSize: 30 };
const dataManager: DataManager = new DataManager({
adaptor: new UrlAdaptor,
insertUrl: "Home/Insert",
removeUrl: "Home/Delete",
updateUrl: "Home/Update",

Copyright © 2001 -2024 Syncfusion Inc. 296


TreeGrid Data Binding

url: "Home/DataSource",
});
return <TreeGridComponent dataSource={dataManager} treeColumnIndex={1} idMapping= 'TaskID'
parentIdMapping='ParentValue' hasChildMapping='isParent' expandStateMapping='IsExpanded'
loadChildOnDemand='true' height='400' enableVirtualization={true} editSettings={editOptions}
toolbar={toolbarOptions} allowFiltering={true} allowSorting={true} pageSettings={pageSettings}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='TaskName' headerText='Task Name' width='180'/>
<ColumnDirective field='Duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit, VirtualScroll, Sort, Filter, Toolbar]} />
</TreeGridComponent>
};
export default App;
`
The following code example describes handling of child records at server end.
`ts
public ActionResult loadChildOndemand()
{
TreeData.tree = new List<TreeData>();
return View();
}
public ActionResult UrlDatasource(DataManagerRequest dm)
{
List<TreeData> data = new List<TreeData>();
data = TreeData.GetTree();
DataOperations operation = new DataOperations();
IEnumerable<TreeData> DataSource = data;
if (dm.Expand != null && dm.Expand[0] == "CollapsingAction") // setting the ExpandStateMapping
property whether is true or false
{
var val = TreeData.GetTree().Where(ds => ds.TaskID == int.Parse(dm.Expand[1])).FirstOrDefault();
val.IsExpanded = false;

Copyright © 2001 -2024 Syncfusion Inc. 297


TreeGrid Data Binding

}
else if (dm.Expand != null && dm.Expand[0] == "ExpandingAction")
{
var val = TreeData.GetTree().Where(ds => ds.TaskID == int.Parse(dm.Expand[1])).FirstOrDefault();
val.IsExpanded = true;
}
if (!(dm.Where != null && dm.Where.Count > 1))
{
data = data.Where(p => p.ParentValue == null).ToList();
}
DataSource = data;
if (dm.Search != null && dm.Search.Count > 0) // Searching
{
DataSource = operation.PerformSearching(DataSource, dm.Search);
}
if (dm.Sorted != null && dm.Sorted.Count > 0 && dm.Sorted[0].Name != null) // Sorting
{
DataSource = operation.PerformSorting(DataSource, dm.Sorted);
}
if (dm.Where != null && dm.Where.Count > 1) //filtering
{
DataSource = operation.PerformFiltering(DataSource, dm.Where, "and");
}
data = new List<TreeData>();
foreach (var rec in DataSource)
{
data.Add(rec as TreeData);
}
var GroupData = TreeData.GetTree().ToList().GroupBy(rec => rec.ParentValue)
.Where(g => g.Key != null).ToDictionary(g => g.Key?.ToString(), g => g.ToList());
foreach (var Record in data.ToList())
{
if (GroupData.ContainsKey(Record.TaskID.ToString()))

Copyright © 2001 -2024 Syncfusion Inc. 298


TreeGrid Data Binding

{
var ChildGroup = GroupData[Record.TaskID.ToString()];
if (dm.Sorted != null && dm.Sorted.Count > 0 && dm.Sorted[0].Name != null) // Sorting the child records
{
IEnumerable ChildSort = ChildGroup;
ChildSort = operation.PerformSorting(ChildSort, dm.Sorted);
ChildGroup = new List<TreeData>();
foreach (var rec in ChildSort)
{
ChildGroup.Add(rec as TreeData);
}
}
if (dm.Search != null && dm.Search.Count > 0) // Searching the child records
{
IEnumerable ChildSearch = ChildGroup;
ChildSearch = operation.PerformSearching(ChildSearch, dm.Search);
ChildGroup = new List<TreeData>();
foreach (var rec in ChildSearch)
{
ChildGroup.Add(rec as TreeData);
}
}
if (ChildGroup?.Count > 0)
AppendChildren(dm, ChildGroup, Record, GroupData, data);
}
}
DataSource = data;
if (dm.Expand != null && dm.Expand[0] == "CollapsingAction") // setting the skip index based on
collapsed parent
{
string IdMapping = "TaskID";
List<WhereFilter> CollapseFilter = new List<WhereFilter>();
CollapseFilter.Add(new WhereFilter() { Field = IdMapping, value = dm.Where[0].value, Operator =
dm.Where[0].Operator });

Copyright © 2001 -2024 Syncfusion Inc. 299


TreeGrid Data Binding

var CollapsedParentRecord = operation.PerformFiltering(DataSource, CollapseFilter, "and");


var index = data.Cast<object>().ToList().IndexOf(CollapsedParentRecord.Cast<object>().ToList()[0]);
dm.Skip = index;
}
else if (dm.Expand != null && dm.Expand[0] == "ExpandingAction") // setting the skip index based on
expanded parent
{
string IdMapping = "TaskID";
List<WhereFilter> ExpandFilter = new List<WhereFilter>();
ExpandFilter.Add(new WhereFilter() { Field = IdMapping, value = dm.Where[0].value, Operator =
dm.Where[0].Operator });
var ExpandedParentRecord = operation.PerformFiltering(DataSource, ExpandFilter, "and");
var index = data.Cast<object>().ToList().IndexOf(ExpandedParentRecord.Cast<object>().ToList()[0]);
dm.Skip = index;
}
int count = data.Count;
DataSource = data;
if (dm.Skip != 0)
{
DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging
}
if (dm.Take != 0)
{
DataSource = operation.PerformTake(DataSource, dm.Take);
}
return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
}
private void AppendChildren(DataManagerRequest dm, List<TreeData> ChildRecords, TreeData
ParentValue, Dictionary<string, List<TreeData>> GroupData, List<TreeData> data) // Getting child
records for the respective parent
{
string TaskId = ParentValue.TaskID.ToString();
var index = data.IndexOf(ParentValue);
DataOperations operation = new DataOperations();

Copyright © 2001 -2024 Syncfusion Inc. 300


TreeGrid Data Binding

foreach (var Child in ChildRecords)


{
if (ParentValue.IsExpanded)
{
string ParentId = Child.ParentValue.ToString();
if (TaskId == ParentId)
{
((IList)data).Insert(++index, Child);
if (GroupData.ContainsKey(Child.TaskID.ToString()))
{
var DeepChildRecords = GroupData[Child.TaskID.ToString()];
if (DeepChildRecords?.Count > 0)
{
if (dm.Sorted != null && dm.Sorted.Count > 0 && dm.Sorted[0].Name != null) // sorting the child records
{
IEnumerable ChildSort = DeepChildRecords;
ChildSort = operation.PerformSorting(ChildSort, dm.Sorted);
DeepChildRecords = new List<TreeData>();
foreach (var rec in ChildSort)
{
DeepChildRecords.Add(rec as TreeData);
}
}
if (dm.Search != null && dm.Search.Count > 0) // searching the child records
{
IEnumerable ChildSearch = DeepChildRecords;
ChildSearch = operation.PerformSearching(ChildSearch, dm.Search);
DeepChildRecords = new List<TreeData>();
foreach (var rec in ChildSearch)
{
DeepChildRecords.Add(rec as TreeData);
}
}

Copyright © 2001 -2024 Syncfusion Inc. 301


TreeGrid Data Binding

AppendChildren(dm, DeepChildRecords, Child, GroupData, data);


if (Child.IsExpanded)
{
index += DeepChildRecords.Count;
}
}
}
}
}
}
}
public ActionResult Update(CRUDModel<TreeData> value)
{
List<TreeData> data = new List<TreeData>();
data = TreeData.GetTree();
var val = data.Where(ds => ds.TaskID == value.Value.TaskID).FirstOrDefault();
val.TaskName = value.Value.TaskName;
val.Duration = value.Value.Duration;
return Json(val);
}
public ActionResult Insert(CRUDModel<TreeData> value)
{
var c = 0;
for (; c < TreeData.GetTree().Count; c++)
{
if (TreeData.GetTree()[c].TaskID == value.RelationalKey)
{
if (TreeData.GetTree()[c].isParent == null)
{
TreeData.GetTree()[c].isParent = true;
}
break;
}

Copyright © 2001 -2024 Syncfusion Inc. 302


TreeGrid Data Binding

}
c += FindChildRecords(value.RelationalKey);
TreeData.GetTree().Insert(c + 1, value.Value);
return Json(value.Value);
}
public int FindChildRecords(int? id)
{
var count = 0;
for (var i = 0; i < TreeData.GetTree().Count; i++)
{
if (TreeData.GetTree()[i].ParentValue == id)
{
count++;
count += FindChildRecords(TreeData.GetTree()[i].TaskID);
}
}
return count;
}
public object Delete(CRUDModel<TreeData> value)
{
if (value.deleted != null)
{
for (var i = 0; i < value.deleted.Count; i++)
{
TreeData.GetTree().Remove(TreeData.GetTree().Where(ds => ds.TaskID ==
value.deleted[i].TaskID).FirstOrDefault());
}
}
else
{
TreeData.GetTree().Remove(TreeData.GetTree().Where(or => or.TaskID ==
int.Parse(value.Key.ToString())).FirstOrDefault());
}
return Json(value);

Copyright © 2001 -2024 Syncfusion Inc. 303


TreeGrid Data Binding

}
public class CRUDModel<T> where T : class
{
public TreeData Value;
public int Key { get; set; }
public int RelationalKey { get; set; }
public List<T> added { get; set; }
public List<T> changed { get; set; }
public List<T> deleted { get; set; }
}
public class TreeData
{
public static List<TreeData> tree = new List<TreeData>();
[System.ComponentModel.DataAnnotations.Key]
public int TaskID { get; set; }
public string TaskName { get; set; }
public int Duration { get; set; }
public int? ParentValue { get; set; }
public bool? isParent { get; set; }
public bool IsExpanded { get; set; }
public TreeData() { }
public static List<TreeData> GetTree()
{
if (tree.Count == 0)
{
int root = 0;
for (var t = 1; t <= 1500; t++)
{
Random ran = new Random();
string math = (ran.Next() % 3) == 0 ? "High" : (ran.Next() % 2) == 0 ? "Release Breaker" : "Critical";
string progr = (ran.Next() % 3) == 0 ? "Started" : (ran.Next() % 2) == 0 ? "Open" : "In Progress";
root++;
int rootItem = root;

Copyright © 2001 -2024 Syncfusion Inc. 304


TreeGrid Immutable mode in React Treegrid component

tree.Add(new TreeData() { TaskID = rootItem, TaskName = "Parent task " + rootItem.ToString(), isParent
= true, IsExpanded = true, ParentValue = null, Duration = ran.Next(1, 50) });
int parent = root;
for (var d = 0; d < 1; d++)
{
root++;
string value = ((parent + 1) % 3 == 0) ? "Low" : "Critical";
int par = parent + 1;
progr = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated";
int iD = root;
tree.Add(new TreeData() { TaskID = iD, TaskName = "Child task " + iD.ToString(), isParent = true,
IsExpanded = true, ParentValue = rootItem, Duration = ran.Next(1, 50) });
int subparent = root;
for (var c = 0; c < 6; c++)
{
root++;
string val = ((subparent + c + 1) % 3 == 0) ? "Low" : "Critical";
int subchild = subparent + c + 1;
string progress = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated";
int childID = root ;
tree.Add(new TreeData() { TaskID = childID, TaskName = "sub Child task " + childID.ToString(),
ParentValue = subparent, Duration = ran.Next(1, 50) });
}
}
}
}
return tree;
}
}
`
Immutable mode in React Treegrid component
The immutable mode optimizes the Tree Grid re-rendering performance by using the object reference
and deep compare concept. When performing the Grid actions, it will only re-render the modified or
newly added rows and prevent the re-rendering of the unchanged rows.
To enable this feature, you have to set the enableImmutableMode property as true.

Copyright © 2001 -2024 Syncfusion Inc. 305


TreeGrid Immutable mode in React Treegrid component

* This feature uses the primary key value for data comparison. So, you need to provide the isPrimaryKey
column.
APP.JSX
{% raw %}
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Page, Edit } from '@syncfusion/ej2-react-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { sampleData2, dataSource1, sampleData } from './datasource';
function App() {
const pageSettings = { pageSize: 50 };
const settings = { type: 'Multiple' };
let immutableInit = true;
let init = true;
let normalStart;
let immutableStart;
let immutableGrid;
let normalGrid;
let topBtn;
let bottomBtn;
let deleteBtn;
let sortBtn;
let pageBtn;
let editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell'
};
const immutableBeforeDataBound = () => {
immutableStart = new Date().getTime();
};
const immutableDataBound = () => {
let val = immutableInit ? '' : new Date().getTime() -
immutableStart;
document.getElementById("immutableDelete").innerHTML =
"Immutable rendering Time: " + "<b>" + val + "</b>" +
"<b>ms</b>";
immutableStart = 0;
immutableInit = false;
};
const addTopEvent = () => {
normalGrid.addRecord(sampleData[0], 0, "Top");
immutableGrid.addRecord(sampleData[0], 0, "Top");
};
const addBottomEvent = () => {
normalGrid.addRecord(sampleData[0], 0, "Bottom");
immutableGrid.addRecord(sampleData[0], 0, "Bottom");
};
const deleteEvent = () => {
normalGrid.selectRows([0, 2, 4]);
immutableGrid.selectRows([0, 2, 4]);
normalGrid.deleteRecord();
immutableGrid.deleteRecord();

Copyright © 2001 -2024 Syncfusion Inc. 306


TreeGrid Immutable mode in React Treegrid component

};
const sortEvent = () => {
let aData = immutableGrid.dataSource.reverse();
normalGrid.setProperties({ dataSource: aData });
immutableGrid.setProperties({ dataSource: aData });
};
const pageEvent = () => {
let page = normalGrid.pageSettings.currentPage + 1;
normalGrid.goToPage(page);
immutableGrid.goToPage(page);
};
const beforeDataBound = () => {
normalStart = new Date().getTime();
};
const dataBound = () => {
let val = init ? '' : new Date().getTime() - normalStart;
document.getElementById("normalDelete").innerHTML =
"Normal rendering Time: " + "<b>" + val + "</b>" + "<b>ms</b>";
normalStart = 0;
init = false;
};
if (sampleData2.length == 0) {
dataSource1();
}
return (<div>
<table>
<tbody>
<tr>
<td>
<span id="immutableDelete"></span>
</td>
</tr>
<tr>
<td>
<span id="normalDelete"></span>
</td>
</tr>
<tr>
<td>
<div>
<ButtonComponent ref={topBtn} cssClass='e-info'
onClick={addTopEvent}>Add row at top</ButtonComponent>
<ButtonComponent ref={bottomBtn} cssClass='e-info'
onClick={addBottomEvent}>Add row at bottom</ButtonComponent>
<ButtonComponent ref={deleteBtn} cssClass='e-info'
onClick={deleteEvent}>Delete 5 rows</ButtonComponent>
<ButtonComponent ref={sortBtn} cssClass='e-info'
onClick={sortEvent}>Sort Task ID</ButtonComponent>
<ButtonComponent ref={pageBtn} cssClass='e-info'
onClick={pageEvent}>Paging</ButtonComponent>
</div>
</td>
</tr>
<tr>
<td>
<span><b>Immutable Grid</b></span>

Copyright © 2001 -2024 Syncfusion Inc. 307


TreeGrid Immutable mode in React Treegrid component

<TreeGridComponent ref={immutable => { immutableGrid =


immutable; }} treeColumnIndex={1} childMapping='subtasks'
dataSource={sampleData2} height='350' selectionSettings={settings}
enableImmutableMode={true} allowPaging={true} pageSettings={pageSettings}
beforeDataBound={immutableBeforeDataBound} dataBound={immutableDataBound}
editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='priority' headerText='Priority'
width='90'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Edit]}/>
</TreeGridComponent>
</td>
<td>
<span><b>Normal Grid</b></span>
<TreeGridComponent ref={normal => { normalGrid = normal; }}
treeColumnIndex={1} childMapping='subtasks' dataSource={sampleData2}
allowPaging={true} height='350' pageSettings={pageSettings}
selectionSettings={settings} beforeDataBound={beforeDataBound}
editSettings={editOptions} dataBound={dataBound}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='priority' headerText='Priority'
width='90'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Edit]}/>
</TreeGridComponent>
</td>
</tr>
</tbody>
</table></div>);
}
;
export default App;
{% endraw %}

APP.TSX
{% raw %}
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Page, Edit, SelectionSettingsModel, EditSettingsModel } from
'@syncfusion/ej2-react-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

Copyright © 2001 -2024 Syncfusion Inc. 308


TreeGrid Immutable mode in React Treegrid component

import { sampleData2, dataSource1, sampleData } from './datasource';


function App() {
const pageSettings: object = { pageSize: 50 };
const settings: SelectionSettingsModel = { type: 'Multiple' };
let immutableInit: boolean = true;
let init: boolean = true;
let normalStart: number;
let immutableStart: number;
let immutableGrid: GridComponent;
let normalGrid: GridComponent;
let topBtn: ButtonComponent;
let bottomBtn: ButtonComponent;
let deleteBtn: ButtonComponent;
let sortBtn: ButtonComponent;
let pageBtn: ButtonComponent;
let editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell'
};
const immutableBeforeDataBound = () => {
immutableStart = new Date().getTime();
}
const immutableDataBound = () => {
let val: number | string = immutableInit ? '' : new Date().getTime()
- immutableStart;
document.getElementById("immutableDelete").innerHTML =
"Immutable rendering Time: " + "<b>" + val + "</b>" +
"<b>ms</b>";
immutableStart = 0; immutableInit = false;
}
const addTopEvent = () => {
normalGrid.addRecord(sampleData[0], 0, "Top");
immutableGrid.addRecord(sampleData[0], 0, "Top");
}
const addBottomEvent = () => {
normalGrid.addRecord(sampleData[0], 0, "Bottom");
immutableGrid.addRecord(sampleData[0], 0, "Bottom");
}
const deleteEvent = () => {
normalGrid.selectRows([0, 2, 4]);
immutableGrid.selectRows([0, 2, 4]);
normalGrid.deleteRecord();
immutableGrid.deleteRecord();
}
const sortEvent = () => {
let aData: object[] = (immutableGrid.dataSource as
object[]).reverse();
normalGrid.setProperties({ dataSource: aData });
immutableGrid.setProperties({ dataSource: aData });
}
const pageEvent = () => {
let page: number = normalGrid.pageSettings.currentPage + 1;
normalGrid.goToPage(page);
immutableGrid.goToPage(page);
}

Copyright © 2001 -2024 Syncfusion Inc. 309


TreeGrid Immutable mode in React Treegrid component

const beforeDataBound = () => {


normalStart = new Date().getTime();
}
const dataBound = () => {
let val: number | string = init ? '' : new Date().getTime() -
normalStart;
document.getElementById("normalDelete").innerHTML =
"Normal rendering Time: " + "<b>" + val + "</b>" + "<b>ms</b>";
normalStart = 0; init = false;
}
if(sampleData2.length == 0){
dataSource1();
}
return (<div>
<table>
<tbody>
<tr>
<td>
<span id="immutableDelete"></span>
</td>
</tr>
<tr>
<td>
<span id="normalDelete"></span>
</td>
</tr>
<tr>
<td>
<div>
<ButtonComponent ref={topBtn} cssClass='e-info'
onClick={addTopEvent}>Add row at top</ButtonComponent>
<ButtonComponent ref={bottomBtn} cssClass='e-info'
onClick={addBottomEvent}>Add row at bottom</ButtonComponent>
<ButtonComponent ref={deleteBtn} cssClass='e-info'
onClick={deleteEvent}>Delete 5 rows</ButtonComponent>
<ButtonComponent ref={sortBtn} cssClass='e-info'
onClick={sortEvent}>Sort Task ID</ButtonComponent>
<ButtonComponent ref={pageBtn} cssClass='e-info'
onClick={pageEvent}>Paging</ButtonComponent>
</div>
</td>
</tr>
<tr>
<td>
<span><b>Immutable Grid</b></span>
<TreeGridComponent ref={immutable => { immutableGrid =
immutable }} treeColumnIndex={1} childMapping='subtasks'
dataSource={sampleData2} height='350' selectionSettings={settings}
enableImmutableMode={true} allowPaging={true} pageSettings={pageSettings}
beforeDataBound={immutableBeforeDataBound} dataBound={immutableDataBound}
editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>

Copyright © 2001 -2024 Syncfusion Inc. 310


TreeGrid Immutable mode in React Treegrid component

<ColumnDirective field='priority' headerText='Priority'


width='90' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Edit]} />
</TreeGridComponent>
</td>
<td>
<span><b>Normal Grid</b></span>
<TreeGridComponent ref={normal => { normalGrid = normal }}
treeColumnIndex={1} childMapping='subtasks' dataSource={sampleData2}
allowPaging={true} height='350' pageSettings={pageSettings}
selectionSettings={settings} beforeDataBound={beforeDataBound}
editSettings={editOptions} dataBound={dataBound}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='priority' headerText='Priority'
width='90' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Edit]} />
</TreeGridComponent>
</td>
</tr>
</tbody>
</table></div>)
};
export default App;
{% endraw %}

DATASOURCE.JSX
/**
*Sample data
*/
export let virtualData = [];
export function dataSource() {
let parent = -1;
let parentId = null;
let names = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD', 'HANAR',
'CHOPS', 'RICSU', 'WELLI', 'HILAA', 'ERNSH', 'CENTC',
'OTTIK', 'QUEDE', 'RATTC', 'ERNSH', 'FOLKO', 'BLONP', 'WARTH',
'FRANK', 'GROSR', 'WHITC', 'WARTH', 'SPLIR', 'RATTC', 'QUICK', 'VINET',
'MAGAA', 'TORTU', 'MORGK', 'BERGS', 'LEHMS', 'BERGS', 'ROMEY',
'ROMEY', 'LILAS', 'LEHMS', 'QUICK', 'QUICK', 'RICAR', 'REGGC', 'BSBEV',
'COMMI', 'QUEDE', 'TRADH', 'TORTU', 'RATTC', 'VINET', 'LILAS',
'BLONP', 'HUNGO', 'RICAR', 'MAGAA', 'WANDK', 'SUPRD', 'GODOS', 'TORTU',
'OLDWO', 'ROMEY', 'LONEP', 'ANATR', 'HUNGO', 'THEBI', 'DUMON',
'WANDK', 'QUICK', 'RATTC', 'ISLAT', 'RATTC', 'LONEP', 'ISLAT', 'TORTU',
'WARTH', 'ISLAT', 'PERIC', 'KOENE', 'SAVEA', 'KOENE', 'BOLID',
'FOLKO', 'FURIB', 'SPLIR', 'LILAS', 'BONAP', 'MEREP', 'WARTH', 'VICTE',

Copyright © 2001 -2024 Syncfusion Inc. 311


TreeGrid Immutable mode in React Treegrid component

'HUNGO', 'PRINI', 'FRANK', 'OLDWO', 'MEREP', 'BONAP', 'SIMOB',


'FRANK', 'LEHMS', 'WHITC', 'QUICK', 'RATTC', 'FAMIA'];
for (let i = 0; i < 10000; i++) {
if (i % 5 === 0) {
parent = i;
}
if (i % 5 !== 0) {
let crew = 'Crew';
let num = isNaN((virtualData.length % parent) - 1) ? 0 :
(virtualData.length % parent) - 1;
virtualData[num][crew].push({
'TaskID': i + 1,
'FIELD1': names[Math.floor(Math.random() * names.length)],
'FIELD2': 1967 + (i % 10),
'FIELD3': Math.floor(Math.random() * 200),
'FIELD4': Math.floor(Math.random() * 100),
'FIELD5': Math.floor(Math.random() * 2000),
'FIELD6': Math.floor(Math.random() * 1000),
'FIELD7': Math.floor(Math.random() * 100),
'FIELD8': Math.floor(Math.random() * 10),
'FIELD9': Math.floor(Math.random() * 10),
'FIELD10': Math.floor(Math.random() * 100),
'FIELD11': Math.floor(Math.random() * 100),
'FIELD12': Math.floor(Math.random() * 1000),
'FIELD13': Math.floor(Math.random() * 10),
'FIELD14': Math.floor(Math.random() * 10),
'FIELD15': Math.floor(Math.random() * 1000),
'FIELD16': Math.floor(Math.random() * 200),
'FIELD17': Math.floor(Math.random() * 300),
'FIELD18': Math.floor(Math.random() * 400),
'FIELD19': Math.floor(Math.random() * 500),
'FIELD20': Math.floor(Math.random() * 700),
'FIELD21': Math.floor(Math.random() * 800),
'FIELD22': Math.floor(Math.random() * 1000),
'FIELD23': Math.floor(Math.random() * 2000),
'FIELD24': Math.floor(Math.random() * 150),
'FIELD25': Math.floor(Math.random() * 1000),
'FIELD26': Math.floor(Math.random() * 100),
'FIELD27': Math.floor(Math.random() * 400),
'FIELD28': Math.floor(Math.random() * 600),
'FIELD29': Math.floor(Math.random() * 500),
'FIELD30': Math.floor(Math.random() * 300),
});
}
else {
virtualData.push({
'TaskID': i + 1,
'Crew': [],
'FIELD1': names[Math.floor(Math.random() * names.length)],
'FIELD2': 1967 + (i % 10),
'FIELD3': Math.floor(Math.random() * 200),
'FIELD4': Math.floor(Math.random() * 100),
'FIELD5': Math.floor(Math.random() * 2000),
'FIELD6': Math.floor(Math.random() * 1000),
'FIELD7': Math.floor(Math.random() * 100),
'FIELD8': Math.floor(Math.random() * 10),
'FIELD9': Math.floor(Math.random() * 10),

Copyright © 2001 -2024 Syncfusion Inc. 312


TreeGrid Immutable mode in React Treegrid component

'FIELD10': Math.floor(Math.random() * 100),


'FIELD11': Math.floor(Math.random() * 100),
'FIELD12': Math.floor(Math.random() * 1000),
'FIELD13': Math.floor(Math.random() * 10),
'FIELD14': Math.floor(Math.random() * 10),
'FIELD15': Math.floor(Math.random() * 1000),
'FIELD16': Math.floor(Math.random() * 200),
'FIELD17': Math.floor(Math.random() * 300),
'FIELD18': Math.floor(Math.random() * 400),
'FIELD19': Math.floor(Math.random() * 500),
'FIELD20': Math.floor(Math.random() * 700),
'FIELD21': Math.floor(Math.random() * 800),
'FIELD22': Math.floor(Math.random() * 1000),
'FIELD23': Math.floor(Math.random() * 2000),
'FIELD24': Math.floor(Math.random() * 150),
'FIELD25': Math.floor(Math.random() * 1000),
'FIELD26': Math.floor(Math.random() * 100),
'FIELD27': Math.floor(Math.random() * 400),
'FIELD28': Math.floor(Math.random() * 600),
'FIELD29': Math.floor(Math.random() * 500),
'FIELD30': Math.floor(Math.random() * 300),
});
}
}
}
let stringData = JSON.stringify([
{
'OrderID': 10248,
'CustomerID': 'VINET',
'OrderDate': '1996-07-04T00:00:00.000Z',
'ShippedDate': '1996-07-16T00:00:00.000Z',
'Freight': 32.38,
'ShipName': 'Vins et alcools Chevalier',
'ShipAddress': '59 rue de l\'Abbaye',
'ShipCity': 'Reims',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10249,
'CustomerID': 'TOMSP',
'OrderDate': '1996-07-05T00:00:00.000Z',
'ShippedDate': '1996-07-10T00:00:00.000Z',
'Freight': 11.61,
'ShipName': 'Toms Spezialitäten',
'ShipAddress': 'Luisenstr. 48',
'ShipCity': 'Münster',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10250,
'CustomerID': 'HANAR',
'OrderDate': '1996-07-08T00:00:00.000Z',
'ShippedDate': '1996-07-12T00:00:00.000Z',
'Freight': 65.83,
'ShipName': 'Hanari Carnes',

Copyright © 2001 -2024 Syncfusion Inc. 313


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Rua do Paço, 67',


'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10251,
'CustomerID': 'VICTE',
'OrderDate': '1996-07-08T00:00:00.000Z',
'ShippedDate': '1996-07-15T00:00:00.000Z',
'Freight': 41.34,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10252,
'CustomerID': 'SUPRD',
'OrderDate': '1996-07-09T00:00:00.000Z',
'ShippedDate': '1996-07-11T00:00:00.000Z',
'Freight': 51.3,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10253,
'CustomerID': 'HANAR',
'OrderDate': '1996-07-10T00:00:00.000Z',
'ShippedDate': '1996-07-16T00:00:00.000Z',
'Freight': 58.17,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10254,
'CustomerID': 'CHOPS',
'OrderDate': '1996-07-11T00:00:00.000Z',
'ShippedDate': '1996-07-23T00:00:00.000Z',
'Freight': 22.98,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10255,
'CustomerID': 'RICSU',
'OrderDate': '1996-07-12T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 314


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-07-15T00:00:00.000Z',
'Freight': 148.33,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10256,
'CustomerID': 'WELLI',
'OrderDate': '1996-07-15T00:00:00.000Z',
'ShippedDate': '1996-07-17T00:00:00.000Z',
'Freight': 13.97,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10257,
'CustomerID': 'HILAA',
'OrderDate': '1996-07-16T00:00:00.000Z',
'ShippedDate': '1996-07-22T00:00:00.000Z',
'Freight': 81.91,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10258,
'CustomerID': 'ERNSH',
'OrderDate': '1996-07-17T00:00:00.000Z',
'ShippedDate': '1996-07-23T00:00:00.000Z',
'Freight': 140.51,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10259,
'CustomerID': 'CENTC',
'OrderDate': '1996-07-18T00:00:00.000Z',
'ShippedDate': '1996-07-25T00:00:00.000Z',
'Freight': 3.25,
'ShipName': 'Centro comercial Moctezuma',
'ShipAddress': 'Sierras de Granada 9993',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 315


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10260,
'CustomerID': 'OTTIK',
'OrderDate': '1996-07-19T00:00:00.000Z',
'ShippedDate': '1996-07-29T00:00:00.000Z',
'Freight': 55.09,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10261,
'CustomerID': 'QUEDE',
'OrderDate': '1996-07-19T00:00:00.000Z',
'ShippedDate': '1996-07-30T00:00:00.000Z',
'Freight': 3.05,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10262,
'CustomerID': 'RATTC',
'OrderDate': '1996-07-22T00:00:00.000Z',
'ShippedDate': '1996-07-25T00:00:00.000Z',
'Freight': 48.29,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10263,
'CustomerID': 'ERNSH',
'OrderDate': '1996-07-23T00:00:00.000Z',
'ShippedDate': '1996-07-31T00:00:00.000Z',
'Freight': 146.06,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10264,
'CustomerID': 'FOLKO',
'OrderDate': '1996-07-24T00:00:00.000Z',
'ShippedDate': '1996-08-23T00:00:00.000Z',
'Freight': 3.67,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 316


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Sweden'
},
{
'OrderID': 10265,
'CustomerID': 'BLONP',
'OrderDate': '1996-07-25T00:00:00.000Z',
'ShippedDate': '1996-08-12T00:00:00.000Z',
'Freight': 55.28,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10266,
'CustomerID': 'WARTH',
'OrderDate': '1996-07-26T00:00:00.000Z',
'ShippedDate': '1996-07-31T00:00:00.000Z',
'Freight': 25.73,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10267,
'CustomerID': 'FRANK',
'OrderDate': '1996-07-29T00:00:00.000Z',
'ShippedDate': '1996-08-06T00:00:00.000Z',
'Freight': 208.58,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10268,
'CustomerID': 'GROSR',
'OrderDate': '1996-07-30T00:00:00.000Z',
'ShippedDate': '1996-08-02T00:00:00.000Z',
'Freight': 66.29,
'ShipName': 'GROSELLA-Restaurante',
'ShipAddress': '5ª Ave. Los Palos Grandes',
'ShipCity': 'Caracas',
'ShipRegion': 'DF',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10269,
'CustomerID': 'WHITC',
'OrderDate': '1996-07-31T00:00:00.000Z',
'ShippedDate': '1996-08-09T00:00:00.000Z',
'Freight': 4.56,
'ShipName': 'White Clover Markets',

Copyright © 2001 -2024 Syncfusion Inc. 317


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '1029 - 12th Ave. S.',


'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10270,
'CustomerID': 'WARTH',
'OrderDate': '1996-08-01T00:00:00.000Z',
'ShippedDate': '1996-08-02T00:00:00.000Z',
'Freight': 136.54,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10271,
'CustomerID': 'SPLIR',
'OrderDate': '1996-08-01T00:00:00.000Z',
'ShippedDate': '1996-08-30T00:00:00.000Z',
'Freight': 4.54,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10272,
'CustomerID': 'RATTC',
'OrderDate': '1996-08-02T00:00:00.000Z',
'ShippedDate': '1996-08-06T00:00:00.000Z',
'Freight': 98.03,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10273,
'CustomerID': 'QUICK',
'OrderDate': '1996-08-05T00:00:00.000Z',
'ShippedDate': '1996-08-12T00:00:00.000Z',
'Freight': 76.07,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10274,
'CustomerID': 'VINET',
'OrderDate': '1996-08-06T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 318


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-08-16T00:00:00.000Z',
'Freight': 6.01,
'ShipName': 'Vins et alcools Chevalier',
'ShipAddress': '59 rue de l\'Abbaye',
'ShipCity': 'Reims',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10275,
'CustomerID': 'MAGAA',
'OrderDate': '1996-08-07T00:00:00.000Z',
'ShippedDate': '1996-08-09T00:00:00.000Z',
'Freight': 26.93,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10276,
'CustomerID': 'TORTU',
'OrderDate': '1996-08-08T00:00:00.000Z',
'ShippedDate': '1996-08-14T00:00:00.000Z',
'Freight': 13.84,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10277,
'CustomerID': 'MORGK',
'OrderDate': '1996-08-09T00:00:00.000Z',
'ShippedDate': '1996-08-13T00:00:00.000Z',
'Freight': 125.77,
'ShipName': 'Morgenstern Gesundkost',
'ShipAddress': 'Heerstr. 22',
'ShipCity': 'Leipzig',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10278,
'CustomerID': 'BERGS',
'OrderDate': '1996-08-12T00:00:00.000Z',
'ShippedDate': '1996-08-16T00:00:00.000Z',
'Freight': 92.69,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 319


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10279,
'CustomerID': 'LEHMS',
'OrderDate': '1996-08-13T00:00:00.000Z',
'ShippedDate': '1996-08-16T00:00:00.000Z',
'Freight': 25.83,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10280,
'CustomerID': 'BERGS',
'OrderDate': '1996-08-14T00:00:00.000Z',
'ShippedDate': '1996-09-12T00:00:00.000Z',
'Freight': 8.98,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10281,
'CustomerID': 'ROMEY',
'OrderDate': '1996-08-14T00:00:00.000Z',
'ShippedDate': '1996-08-21T00:00:00.000Z',
'Freight': 2.94,
'ShipName': 'Romero y tomillo',
'ShipAddress': 'Gran Vía, 1',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10282,
'CustomerID': 'ROMEY',
'OrderDate': '1996-08-15T00:00:00.000Z',
'ShippedDate': '1996-08-21T00:00:00.000Z',
'Freight': 12.69,
'ShipName': 'Romero y tomillo',
'ShipAddress': 'Gran Vía, 1',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10283,
'CustomerID': 'LILAS',
'OrderDate': '1996-08-16T00:00:00.000Z',
'ShippedDate': '1996-08-23T00:00:00.000Z',
'Freight': 84.81,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',

Copyright © 2001 -2024 Syncfusion Inc. 320


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Venezuela'
},
{
'OrderID': 10284,
'CustomerID': 'LEHMS',
'OrderDate': '1996-08-19T00:00:00.000Z',
'ShippedDate': '1996-08-27T00:00:00.000Z',
'Freight': 76.56,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10285,
'CustomerID': 'QUICK',
'OrderDate': '1996-08-20T00:00:00.000Z',
'ShippedDate': '1996-08-26T00:00:00.000Z',
'Freight': 76.83,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10286,
'CustomerID': 'QUICK',
'OrderDate': '1996-08-21T00:00:00.000Z',
'ShippedDate': '1996-08-30T00:00:00.000Z',
'Freight': 229.24,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10287,
'CustomerID': 'RICAR',
'OrderDate': '1996-08-22T00:00:00.000Z',
'ShippedDate': '1996-08-28T00:00:00.000Z',
'Freight': 12.76,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10288,
'CustomerID': 'REGGC',
'OrderDate': '1996-08-23T00:00:00.000Z',
'ShippedDate': '1996-09-03T00:00:00.000Z',
'Freight': 7.45,
'ShipName': 'Reggiani Caseifici',

Copyright © 2001 -2024 Syncfusion Inc. 321


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Strada Provinciale 124',


'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10289,
'CustomerID': 'BSBEV',
'OrderDate': '1996-08-26T00:00:00.000Z',
'ShippedDate': '1996-08-28T00:00:00.000Z',
'Freight': 22.77,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10290,
'CustomerID': 'COMMI',
'OrderDate': '1996-08-27T00:00:00.000Z',
'ShippedDate': '1996-09-03T00:00:00.000Z',
'Freight': 79.7,
'ShipName': 'Comércio Mineiro',
'ShipAddress': 'Av. dos Lusíadas, 23',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10291,
'CustomerID': 'QUEDE',
'OrderDate': '1996-08-27T00:00:00.000Z',
'ShippedDate': '1996-09-04T00:00:00.000Z',
'Freight': 6.4,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10292,
'CustomerID': 'TRADH',
'OrderDate': '1996-08-28T00:00:00.000Z',
'ShippedDate': '1996-09-02T00:00:00.000Z',
'Freight': 1.35,
'ShipName': 'Tradiçao Hipermercados',
'ShipAddress': 'Av. Inês de Castro, 414',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10293,
'CustomerID': 'TORTU',
'OrderDate': '1996-08-29T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 322


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-09-11T00:00:00.000Z',
'Freight': 21.18,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10294,
'CustomerID': 'RATTC',
'OrderDate': '1996-08-30T00:00:00.000Z',
'ShippedDate': '1996-09-05T00:00:00.000Z',
'Freight': 147.26,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10295,
'CustomerID': 'VINET',
'OrderDate': '1996-09-02T00:00:00.000Z',
'ShippedDate': '1996-09-10T00:00:00.000Z',
'Freight': 1.15,
'ShipName': 'Vins et alcools Chevalier',
'ShipAddress': '59 rue de l\'Abbaye',
'ShipCity': 'Reims',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10296,
'CustomerID': 'LILAS',
'OrderDate': '1996-09-03T00:00:00.000Z',
'ShippedDate': '1996-09-11T00:00:00.000Z',
'Freight': 0.12,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10297,
'CustomerID': 'BLONP',
'OrderDate': '1996-09-04T00:00:00.000Z',
'ShippedDate': '1996-09-10T00:00:00.000Z',
'Freight': 5.74,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 323


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10298,
'CustomerID': 'HUNGO',
'OrderDate': '1996-09-05T00:00:00.000Z',
'ShippedDate': '1996-09-11T00:00:00.000Z',
'Freight': 168.22,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10299,
'CustomerID': 'RICAR',
'OrderDate': '1996-09-06T00:00:00.000Z',
'ShippedDate': '1996-09-13T00:00:00.000Z',
'Freight': 29.76,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10300,
'CustomerID': 'MAGAA',
'OrderDate': '1996-09-09T00:00:00.000Z',
'ShippedDate': '1996-09-18T00:00:00.000Z',
'Freight': 17.68,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10301,
'CustomerID': 'WANDK',
'OrderDate': '1996-09-09T00:00:00.000Z',
'ShippedDate': '1996-09-17T00:00:00.000Z',
'Freight': 45.08,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10302,
'CustomerID': 'SUPRD',
'OrderDate': '1996-09-10T00:00:00.000Z',
'ShippedDate': '1996-10-09T00:00:00.000Z',
'Freight': 6.27,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 324


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Belgium'
},
{
'OrderID': 10303,
'CustomerID': 'GODOS',
'OrderDate': '1996-09-11T00:00:00.000Z',
'ShippedDate': '1996-09-18T00:00:00.000Z',
'Freight': 107.83,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10304,
'CustomerID': 'TORTU',
'OrderDate': '1996-09-12T00:00:00.000Z',
'ShippedDate': '1996-09-17T00:00:00.000Z',
'Freight': 63.79,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10305,
'CustomerID': 'OLDWO',
'OrderDate': '1996-09-13T00:00:00.000Z',
'ShippedDate': '1996-10-09T00:00:00.000Z',
'Freight': 257.62,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10306,
'CustomerID': 'ROMEY',
'OrderDate': '1996-09-16T00:00:00.000Z',
'ShippedDate': '1996-09-23T00:00:00.000Z',
'Freight': 7.56,
'ShipName': 'Romero y tomillo',
'ShipAddress': 'Gran Vía, 1',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10307,
'CustomerID': 'LONEP',
'OrderDate': '1996-09-17T00:00:00.000Z',
'ShippedDate': '1996-09-25T00:00:00.000Z',
'Freight': 0.56,
'ShipName': 'Lonesome Pine Restaurant',

Copyright © 2001 -2024 Syncfusion Inc. 325


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '89 Chiaroscuro Rd.',


'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10308,
'CustomerID': 'ANATR',
'OrderDate': '1996-09-18T00:00:00.000Z',
'ShippedDate': '1996-09-24T00:00:00.000Z',
'Freight': 1.61,
'ShipName': 'Ana Trujillo Emparedados y helados',
'ShipAddress': 'Avda. de la Constitución 2222',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10309,
'CustomerID': 'HUNGO',
'OrderDate': '1996-09-19T00:00:00.000Z',
'ShippedDate': '1996-10-23T00:00:00.000Z',
'Freight': 47.3,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10310,
'CustomerID': 'THEBI',
'OrderDate': '1996-09-20T00:00:00.000Z',
'ShippedDate': '1996-09-27T00:00:00.000Z',
'Freight': 17.52,
'ShipName': 'The Big Cheese',
'ShipAddress': '89 Jefferson Way Suite 2',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10311,
'CustomerID': 'DUMON',
'OrderDate': '1996-09-20T00:00:00.000Z',
'ShippedDate': '1996-09-26T00:00:00.000Z',
'Freight': 24.69,
'ShipName': 'Du monde entier',
'ShipAddress': '67, rue des Cinquante Otages',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10312,
'CustomerID': 'WANDK',
'OrderDate': '1996-09-23T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 326


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-10-03T00:00:00.000Z',
'Freight': 40.26,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10313,
'CustomerID': 'QUICK',
'OrderDate': '1996-09-24T00:00:00.000Z',
'ShippedDate': '1996-10-04T00:00:00.000Z',
'Freight': 1.96,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10314,
'CustomerID': 'RATTC',
'OrderDate': '1996-09-25T00:00:00.000Z',
'ShippedDate': '1996-10-04T00:00:00.000Z',
'Freight': 74.16,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10315,
'CustomerID': 'ISLAT',
'OrderDate': '1996-09-26T00:00:00.000Z',
'ShippedDate': '1996-10-03T00:00:00.000Z',
'Freight': 41.76,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10316,
'CustomerID': 'RATTC',
'OrderDate': '1996-09-27T00:00:00.000Z',
'ShippedDate': '1996-10-08T00:00:00.000Z',
'Freight': 150.15,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 327


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10317,
'CustomerID': 'LONEP',
'OrderDate': '1996-09-30T00:00:00.000Z',
'ShippedDate': '1996-10-10T00:00:00.000Z',
'Freight': 12.69,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10318,
'CustomerID': 'ISLAT',
'OrderDate': '1996-10-01T00:00:00.000Z',
'ShippedDate': '1996-10-04T00:00:00.000Z',
'Freight': 4.73,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10319,
'CustomerID': 'TORTU',
'OrderDate': '1996-10-02T00:00:00.000Z',
'ShippedDate': '1996-10-11T00:00:00.000Z',
'Freight': 64.5,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10320,
'CustomerID': 'WARTH',
'OrderDate': '1996-10-03T00:00:00.000Z',
'ShippedDate': '1996-10-18T00:00:00.000Z',
'Freight': 34.57,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10321,
'CustomerID': 'ISLAT',
'OrderDate': '1996-10-03T00:00:00.000Z',
'ShippedDate': '1996-10-11T00:00:00.000Z',
'Freight': 3.43,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',

Copyright © 2001 -2024 Syncfusion Inc. 328


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'UK'
},
{
'OrderID': 10322,
'CustomerID': 'PERIC',
'OrderDate': '1996-10-04T00:00:00.000Z',
'ShippedDate': '1996-10-23T00:00:00.000Z',
'Freight': 0.4,
'ShipName': 'Pericles Comidas clásicas',
'ShipAddress': 'Calle Dr. Jorge Cash 321',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10323,
'CustomerID': 'KOENE',
'OrderDate': '1996-10-07T00:00:00.000Z',
'ShippedDate': '1996-10-14T00:00:00.000Z',
'Freight': 4.88,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10324,
'CustomerID': 'SAVEA',
'OrderDate': '1996-10-08T00:00:00.000Z',
'ShippedDate': '1996-10-10T00:00:00.000Z',
'Freight': 214.27,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10325,
'CustomerID': 'KOENE',
'OrderDate': '1996-10-09T00:00:00.000Z',
'ShippedDate': '1996-10-14T00:00:00.000Z',
'Freight': 64.86,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10326,
'CustomerID': 'BOLID',
'OrderDate': '1996-10-10T00:00:00.000Z',
'ShippedDate': '1996-10-14T00:00:00.000Z',
'Freight': 77.92,
'ShipName': 'Bólido Comidas preparadas',

Copyright © 2001 -2024 Syncfusion Inc. 329


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'C/ Araquil, 67',


'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10327,
'CustomerID': 'FOLKO',
'OrderDate': '1996-10-11T00:00:00.000Z',
'ShippedDate': '1996-10-14T00:00:00.000Z',
'Freight': 63.36,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10328,
'CustomerID': 'FURIB',
'OrderDate': '1996-10-14T00:00:00.000Z',
'ShippedDate': '1996-10-17T00:00:00.000Z',
'Freight': 87.03,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10329,
'CustomerID': 'SPLIR',
'OrderDate': '1996-10-15T00:00:00.000Z',
'ShippedDate': '1996-10-23T00:00:00.000Z',
'Freight': 191.67,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10330,
'CustomerID': 'LILAS',
'OrderDate': '1996-10-16T00:00:00.000Z',
'ShippedDate': '1996-10-28T00:00:00.000Z',
'Freight': 12.75,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10331,
'CustomerID': 'BONAP',
'OrderDate': '1996-10-16T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 330


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-10-21T00:00:00.000Z',
'Freight': 10.19,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10332,
'CustomerID': 'MEREP',
'OrderDate': '1996-10-17T00:00:00.000Z',
'ShippedDate': '1996-10-21T00:00:00.000Z',
'Freight': 52.84,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10333,
'CustomerID': 'WARTH',
'OrderDate': '1996-10-18T00:00:00.000Z',
'ShippedDate': '1996-10-25T00:00:00.000Z',
'Freight': 0.59,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10334,
'CustomerID': 'VICTE',
'OrderDate': '1996-10-21T00:00:00.000Z',
'ShippedDate': '1996-10-28T00:00:00.000Z',
'Freight': 8.56,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10335,
'CustomerID': 'HUNGO',
'OrderDate': '1996-10-22T00:00:00.000Z',
'ShippedDate': '1996-10-24T00:00:00.000Z',
'Freight': 42.11,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 331


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10336,
'CustomerID': 'PRINI',
'OrderDate': '1996-10-23T00:00:00.000Z',
'ShippedDate': '1996-10-25T00:00:00.000Z',
'Freight': 15.51,
'ShipName': 'Princesa Isabel Vinhos',
'ShipAddress': 'Estrada da saúde n. 58',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10337,
'CustomerID': 'FRANK',
'OrderDate': '1996-10-24T00:00:00.000Z',
'ShippedDate': '1996-10-29T00:00:00.000Z',
'Freight': 108.26,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10338,
'CustomerID': 'OLDWO',
'OrderDate': '1996-10-25T00:00:00.000Z',
'ShippedDate': '1996-10-29T00:00:00.000Z',
'Freight': 84.21,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10339,
'CustomerID': 'MEREP',
'OrderDate': '1996-10-28T00:00:00.000Z',
'ShippedDate': '1996-11-04T00:00:00.000Z',
'Freight': 15.66,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10340,
'CustomerID': 'BONAP',
'OrderDate': '1996-10-29T00:00:00.000Z',
'ShippedDate': '1996-11-08T00:00:00.000Z',
'Freight': 166.31,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 332


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'France'
},
{
'OrderID': 10341,
'CustomerID': 'SIMOB',
'OrderDate': '1996-10-29T00:00:00.000Z',
'ShippedDate': '1996-11-05T00:00:00.000Z',
'Freight': 26.78,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10342,
'CustomerID': 'FRANK',
'OrderDate': '1996-10-30T00:00:00.000Z',
'ShippedDate': '1996-11-04T00:00:00.000Z',
'Freight': 54.83,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10343,
'CustomerID': 'LEHMS',
'OrderDate': '1996-10-31T00:00:00.000Z',
'ShippedDate': '1996-11-06T00:00:00.000Z',
'Freight': 110.37,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10344,
'CustomerID': 'WHITC',
'OrderDate': '1996-11-01T00:00:00.000Z',
'ShippedDate': '1996-11-05T00:00:00.000Z',
'Freight': 23.29,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10345,
'CustomerID': 'QUICK',
'OrderDate': '1996-11-04T00:00:00.000Z',
'ShippedDate': '1996-11-11T00:00:00.000Z',
'Freight': 249.06,
'ShipName': 'QUICK-Stop',

Copyright © 2001 -2024 Syncfusion Inc. 333


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Taucherstraße 10',


'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10346,
'CustomerID': 'RATTC',
'OrderDate': '1996-11-05T00:00:00.000Z',
'ShippedDate': '1996-11-08T00:00:00.000Z',
'Freight': 142.08,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10347,
'CustomerID': 'FAMIA',
'OrderDate': '1996-11-06T00:00:00.000Z',
'ShippedDate': '1996-11-08T00:00:00.000Z',
'Freight': 3.1,
'ShipName': 'Familia Arquibaldo',
'ShipAddress': 'Rua Orós, 92',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10348,
'CustomerID': 'WANDK',
'OrderDate': '1996-11-07T00:00:00.000Z',
'ShippedDate': '1996-11-15T00:00:00.000Z',
'Freight': 0.78,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10349,
'CustomerID': 'SPLIR',
'OrderDate': '1996-11-08T00:00:00.000Z',
'ShippedDate': '1996-11-15T00:00:00.000Z',
'Freight': 8.63,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10350,
'CustomerID': 'LAMAI',
'OrderDate': '1996-11-11T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 334


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-12-03T00:00:00.000Z',
'Freight': 64.19,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10351,
'CustomerID': 'ERNSH',
'OrderDate': '1996-11-11T00:00:00.000Z',
'ShippedDate': '1996-11-20T00:00:00.000Z',
'Freight': 162.33,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10352,
'CustomerID': 'FURIB',
'OrderDate': '1996-11-12T00:00:00.000Z',
'ShippedDate': '1996-11-18T00:00:00.000Z',
'Freight': 1.3,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10353,
'CustomerID': 'PICCO',
'OrderDate': '1996-11-13T00:00:00.000Z',
'ShippedDate': '1996-11-25T00:00:00.000Z',
'Freight': 360.63,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10354,
'CustomerID': 'PERIC',
'OrderDate': '1996-11-14T00:00:00.000Z',
'ShippedDate': '1996-11-20T00:00:00.000Z',
'Freight': 53.8,
'ShipName': 'Pericles Comidas clásicas',
'ShipAddress': 'Calle Dr. Jorge Cash 321',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 335


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10355,
'CustomerID': 'AROUT',
'OrderDate': '1996-11-15T00:00:00.000Z',
'ShippedDate': '1996-11-20T00:00:00.000Z',
'Freight': 41.95,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10356,
'CustomerID': 'WANDK',
'OrderDate': '1996-11-18T00:00:00.000Z',
'ShippedDate': '1996-11-27T00:00:00.000Z',
'Freight': 36.71,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10357,
'CustomerID': 'LILAS',
'OrderDate': '1996-11-19T00:00:00.000Z',
'ShippedDate': '1996-12-02T00:00:00.000Z',
'Freight': 34.88,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10358,
'CustomerID': 'LAMAI',
'OrderDate': '1996-11-20T00:00:00.000Z',
'ShippedDate': '1996-11-27T00:00:00.000Z',
'Freight': 19.64,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10359,
'CustomerID': 'SEVES',
'OrderDate': '1996-11-21T00:00:00.000Z',
'ShippedDate': '1996-11-26T00:00:00.000Z',
'Freight': 288.43,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 336


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'UK'
},
{
'OrderID': 10360,
'CustomerID': 'BLONP',
'OrderDate': '1996-11-22T00:00:00.000Z',
'ShippedDate': '1996-12-02T00:00:00.000Z',
'Freight': 131.7,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10361,
'CustomerID': 'QUICK',
'OrderDate': '1996-11-22T00:00:00.000Z',
'ShippedDate': '1996-12-03T00:00:00.000Z',
'Freight': 183.17,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10362,
'CustomerID': 'BONAP',
'OrderDate': '1996-11-25T00:00:00.000Z',
'ShippedDate': '1996-11-28T00:00:00.000Z',
'Freight': 96.04,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10363,
'CustomerID': 'DRACD',
'OrderDate': '1996-11-26T00:00:00.000Z',
'ShippedDate': '1996-12-04T00:00:00.000Z',
'Freight': 30.54,
'ShipName': 'Drachenblut Delikatessen',
'ShipAddress': 'Walserweg 21',
'ShipCity': 'Aachen',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10364,
'CustomerID': 'EASTC',
'OrderDate': '1996-11-26T00:00:00.000Z',
'ShippedDate': '1996-12-04T00:00:00.000Z',
'Freight': 71.97,
'ShipName': 'Eastern Connection',

Copyright © 2001 -2024 Syncfusion Inc. 337


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '35 King George',


'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10365,
'CustomerID': 'ANTON',
'OrderDate': '1996-11-27T00:00:00.000Z',
'ShippedDate': '1996-12-02T00:00:00.000Z',
'Freight': 22,
'ShipName': 'Antonio Moreno Taquería',
'ShipAddress': 'Mataderos 2312',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10366,
'CustomerID': 'GALED',
'OrderDate': '1996-11-28T00:00:00.000Z',
'ShippedDate': '1996-12-30T00:00:00.000Z',
'Freight': 10.14,
'ShipName': 'Galería del gastronómo',
'ShipAddress': 'Rambla de Cataluña, 23',
'ShipCity': 'Barcelona',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10367,
'CustomerID': 'VAFFE',
'OrderDate': '1996-11-28T00:00:00.000Z',
'ShippedDate': '1996-12-02T00:00:00.000Z',
'Freight': 13.55,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10368,
'CustomerID': 'ERNSH',
'OrderDate': '1996-11-29T00:00:00.000Z',
'ShippedDate': '1996-12-02T00:00:00.000Z',
'Freight': 101.95,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10369,
'CustomerID': 'SPLIR',
'OrderDate': '1996-12-02T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 338


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-12-09T00:00:00.000Z',
'Freight': 195.68,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10370,
'CustomerID': 'CHOPS',
'OrderDate': '1996-12-03T00:00:00.000Z',
'ShippedDate': '1996-12-27T00:00:00.000Z',
'Freight': 1.17,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10371,
'CustomerID': 'LAMAI',
'OrderDate': '1996-12-03T00:00:00.000Z',
'ShippedDate': '1996-12-24T00:00:00.000Z',
'Freight': 0.45,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10372,
'CustomerID': 'QUEEN',
'OrderDate': '1996-12-04T00:00:00.000Z',
'ShippedDate': '1996-12-09T00:00:00.000Z',
'Freight': 890.78,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10373,
'CustomerID': 'HUNGO',
'OrderDate': '1996-12-05T00:00:00.000Z',
'ShippedDate': '1996-12-11T00:00:00.000Z',
'Freight': 124.12,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 339


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10374,
'CustomerID': 'WOLZA',
'OrderDate': '1996-12-05T00:00:00.000Z',
'ShippedDate': '1996-12-09T00:00:00.000Z',
'Freight': 3.94,
'ShipName': 'Wolski Zajazd',
'ShipAddress': 'ul. Filtrowa 68',
'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 10375,
'CustomerID': 'HUNGC',
'OrderDate': '1996-12-06T00:00:00.000Z',
'ShippedDate': '1996-12-09T00:00:00.000Z',
'Freight': 20.12,
'ShipName': 'Hungry Coyote Import Store',
'ShipAddress': 'City Center Plaza 516 Main St.',
'ShipCity': 'Elgin',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10376,
'CustomerID': 'MEREP',
'OrderDate': '1996-12-09T00:00:00.000Z',
'ShippedDate': '1996-12-13T00:00:00.000Z',
'Freight': 20.39,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10377,
'CustomerID': 'SEVES',
'OrderDate': '1996-12-09T00:00:00.000Z',
'ShippedDate': '1996-12-13T00:00:00.000Z',
'Freight': 22.21,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10378,
'CustomerID': 'FOLKO',
'OrderDate': '1996-12-10T00:00:00.000Z',
'ShippedDate': '1996-12-19T00:00:00.000Z',
'Freight': 5.44,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 340


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Sweden'
},
{
'OrderID': 10379,
'CustomerID': 'QUEDE',
'OrderDate': '1996-12-11T00:00:00.000Z',
'ShippedDate': '1996-12-13T00:00:00.000Z',
'Freight': 45.03,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10380,
'CustomerID': 'HUNGO',
'OrderDate': '1996-12-12T00:00:00.000Z',
'ShippedDate': '1997-01-16T00:00:00.000Z',
'Freight': 35.03,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10381,
'CustomerID': 'LILAS',
'OrderDate': '1996-12-12T00:00:00.000Z',
'ShippedDate': '1996-12-13T00:00:00.000Z',
'Freight': 7.99,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10382,
'CustomerID': 'ERNSH',
'OrderDate': '1996-12-13T00:00:00.000Z',
'ShippedDate': '1996-12-16T00:00:00.000Z',
'Freight': 94.77,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10383,
'CustomerID': 'AROUT',
'OrderDate': '1996-12-16T00:00:00.000Z',
'ShippedDate': '1996-12-18T00:00:00.000Z',
'Freight': 34.24,
'ShipName': 'Around the Horn',

Copyright © 2001 -2024 Syncfusion Inc. 341


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Brook Farm Stratford St. Mary',


'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10384,
'CustomerID': 'BERGS',
'OrderDate': '1996-12-16T00:00:00.000Z',
'ShippedDate': '1996-12-20T00:00:00.000Z',
'Freight': 168.64,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10385,
'CustomerID': 'SPLIR',
'OrderDate': '1996-12-17T00:00:00.000Z',
'ShippedDate': '1996-12-23T00:00:00.000Z',
'Freight': 30.96,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10386,
'CustomerID': 'FAMIA',
'OrderDate': '1996-12-18T00:00:00.000Z',
'ShippedDate': '1996-12-25T00:00:00.000Z',
'Freight': 13.99,
'ShipName': 'Familia Arquibaldo',
'ShipAddress': 'Rua Orós, 92',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10387,
'CustomerID': 'SANTG',
'OrderDate': '1996-12-18T00:00:00.000Z',
'ShippedDate': '1996-12-20T00:00:00.000Z',
'Freight': 93.63,
'ShipName': 'Santé Gourmet',
'ShipAddress': 'Erling Skakkes gate 78',
'ShipCity': 'Stavern',
'ShipRegion': null,
'ShipCountry': 'Norway'
},
{
'OrderID': 10388,
'CustomerID': 'SEVES',
'OrderDate': '1996-12-19T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 342


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-12-20T00:00:00.000Z',
'Freight': 34.86,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10389,
'CustomerID': 'BOTTM',
'OrderDate': '1996-12-20T00:00:00.000Z',
'ShippedDate': '1996-12-24T00:00:00.000Z',
'Freight': 47.42,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10390,
'CustomerID': 'ERNSH',
'OrderDate': '1996-12-23T00:00:00.000Z',
'ShippedDate': '1996-12-26T00:00:00.000Z',
'Freight': 126.38,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10391,
'CustomerID': 'DRACD',
'OrderDate': '1996-12-23T00:00:00.000Z',
'ShippedDate': '1996-12-31T00:00:00.000Z',
'Freight': 5.45,
'ShipName': 'Drachenblut Delikatessen',
'ShipAddress': 'Walserweg 21',
'ShipCity': 'Aachen',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10392,
'CustomerID': 'PICCO',
'OrderDate': '1996-12-24T00:00:00.000Z',
'ShippedDate': '1997-01-01T00:00:00.000Z',
'Freight': 122.46,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 343


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10393,
'CustomerID': 'SAVEA',
'OrderDate': '1996-12-25T00:00:00.000Z',
'ShippedDate': '1997-01-03T00:00:00.000Z',
'Freight': 126.56,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10394,
'CustomerID': 'HUNGC',
'OrderDate': '1996-12-25T00:00:00.000Z',
'ShippedDate': '1997-01-03T00:00:00.000Z',
'Freight': 30.34,
'ShipName': 'Hungry Coyote Import Store',
'ShipAddress': 'City Center Plaza 516 Main St.',
'ShipCity': 'Elgin',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10395,
'CustomerID': 'HILAA',
'OrderDate': '1996-12-26T00:00:00.000Z',
'ShippedDate': '1997-01-03T00:00:00.000Z',
'Freight': 184.41,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10396,
'CustomerID': 'FRANK',
'OrderDate': '1996-12-27T00:00:00.000Z',
'ShippedDate': '1997-01-06T00:00:00.000Z',
'Freight': 135.35,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10397,
'CustomerID': 'PRINI',
'OrderDate': '1996-12-27T00:00:00.000Z',
'ShippedDate': '1997-01-02T00:00:00.000Z',
'Freight': 60.26,
'ShipName': 'Princesa Isabel Vinhos',
'ShipAddress': 'Estrada da saúde n. 58',
'ShipCity': 'Lisboa',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 344


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Portugal'
},
{
'OrderID': 10398,
'CustomerID': 'SAVEA',
'OrderDate': '1996-12-30T00:00:00.000Z',
'ShippedDate': '1997-01-09T00:00:00.000Z',
'Freight': 89.16,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10399,
'CustomerID': 'VAFFE',
'OrderDate': '1996-12-31T00:00:00.000Z',
'ShippedDate': '1997-01-08T00:00:00.000Z',
'Freight': 27.36,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10400,
'CustomerID': 'EASTC',
'OrderDate': '1997-01-01T00:00:00.000Z',
'ShippedDate': '1997-01-16T00:00:00.000Z',
'Freight': 83.93,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10401,
'CustomerID': 'RATTC',
'OrderDate': '1997-01-01T00:00:00.000Z',
'ShippedDate': '1997-01-10T00:00:00.000Z',
'Freight': 12.51,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10402,
'CustomerID': 'ERNSH',
'OrderDate': '1997-01-02T00:00:00.000Z',
'ShippedDate': '1997-01-10T00:00:00.000Z',
'Freight': 67.88,
'ShipName': 'Ernst Handel',

Copyright © 2001 -2024 Syncfusion Inc. 345


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Kirchgasse 6',


'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10403,
'CustomerID': 'ERNSH',
'OrderDate': '1997-01-03T00:00:00.000Z',
'ShippedDate': '1997-01-09T00:00:00.000Z',
'Freight': 73.79,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10404,
'CustomerID': 'MAGAA',
'OrderDate': '1997-01-03T00:00:00.000Z',
'ShippedDate': '1997-01-08T00:00:00.000Z',
'Freight': 155.97,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10405,
'CustomerID': 'LINOD',
'OrderDate': '1997-01-06T00:00:00.000Z',
'ShippedDate': '1997-01-22T00:00:00.000Z',
'Freight': 34.82,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10406,
'CustomerID': 'QUEEN',
'OrderDate': '1997-01-07T00:00:00.000Z',
'ShippedDate': '1997-01-13T00:00:00.000Z',
'Freight': 108.04,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10407,
'CustomerID': 'OTTIK',
'OrderDate': '1997-01-07T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 346


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-01-30T00:00:00.000Z',
'Freight': 91.48,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10408,
'CustomerID': 'FOLIG',
'OrderDate': '1997-01-08T00:00:00.000Z',
'ShippedDate': '1997-01-14T00:00:00.000Z',
'Freight': 11.26,
'ShipName': 'Folies gourmandes',
'ShipAddress': '184, chaussée de Tournai',
'ShipCity': 'Lille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10409,
'CustomerID': 'OCEAN',
'OrderDate': '1997-01-09T00:00:00.000Z',
'ShippedDate': '1997-01-14T00:00:00.000Z',
'Freight': 29.83,
'ShipName': 'Océano Atlántico Ltda.',
'ShipAddress': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10410,
'CustomerID': 'BOTTM',
'OrderDate': '1997-01-10T00:00:00.000Z',
'ShippedDate': '1997-01-15T00:00:00.000Z',
'Freight': 2.4,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10411,
'CustomerID': 'BOTTM',
'OrderDate': '1997-01-10T00:00:00.000Z',
'ShippedDate': '1997-01-21T00:00:00.000Z',
'Freight': 23.65,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 347


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10412,
'CustomerID': 'WARTH',
'OrderDate': '1997-01-13T00:00:00.000Z',
'ShippedDate': '1997-01-15T00:00:00.000Z',
'Freight': 3.77,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10413,
'CustomerID': 'LAMAI',
'OrderDate': '1997-01-14T00:00:00.000Z',
'ShippedDate': '1997-01-16T00:00:00.000Z',
'Freight': 95.66,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10414,
'CustomerID': 'FAMIA',
'OrderDate': '1997-01-14T00:00:00.000Z',
'ShippedDate': '1997-01-17T00:00:00.000Z',
'Freight': 21.48,
'ShipName': 'Familia Arquibaldo',
'ShipAddress': 'Rua Orós, 92',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10415,
'CustomerID': 'HUNGC',
'OrderDate': '1997-01-15T00:00:00.000Z',
'ShippedDate': '1997-01-24T00:00:00.000Z',
'Freight': 0.2,
'ShipName': 'Hungry Coyote Import Store',
'ShipAddress': 'City Center Plaza 516 Main St.',
'ShipCity': 'Elgin',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10416,
'CustomerID': 'WARTH',
'OrderDate': '1997-01-16T00:00:00.000Z',
'ShippedDate': '1997-01-27T00:00:00.000Z',
'Freight': 22.72,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 348


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Finland'
},
{
'OrderID': 10417,
'CustomerID': 'SIMOB',
'OrderDate': '1997-01-16T00:00:00.000Z',
'ShippedDate': '1997-01-28T00:00:00.000Z',
'Freight': 70.29,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10418,
'CustomerID': 'QUICK',
'OrderDate': '1997-01-17T00:00:00.000Z',
'ShippedDate': '1997-01-24T00:00:00.000Z',
'Freight': 17.55,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10419,
'CustomerID': 'RICSU',
'OrderDate': '1997-01-20T00:00:00.000Z',
'ShippedDate': '1997-01-30T00:00:00.000Z',
'Freight': 137.35,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10420,
'CustomerID': 'WELLI',
'OrderDate': '1997-01-21T00:00:00.000Z',
'ShippedDate': '1997-01-27T00:00:00.000Z',
'Freight': 44.12,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10421,
'CustomerID': 'QUEDE',
'OrderDate': '1997-01-21T00:00:00.000Z',
'ShippedDate': '1997-01-27T00:00:00.000Z',
'Freight': 99.23,
'ShipName': 'Que Delícia',

Copyright © 2001 -2024 Syncfusion Inc. 349


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Rua da Panificadora, 12',


'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10422,
'CustomerID': 'FRANS',
'OrderDate': '1997-01-22T00:00:00.000Z',
'ShippedDate': '1997-01-31T00:00:00.000Z',
'Freight': 3.02,
'ShipName': 'Franchi S.p.A.',
'ShipAddress': 'Via Monte Bianco 34',
'ShipCity': 'Torino',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10423,
'CustomerID': 'GOURL',
'OrderDate': '1997-01-23T00:00:00.000Z',
'ShippedDate': '1997-02-24T00:00:00.000Z',
'Freight': 24.5,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10424,
'CustomerID': 'MEREP',
'OrderDate': '1997-01-23T00:00:00.000Z',
'ShippedDate': '1997-01-27T00:00:00.000Z',
'Freight': 370.61,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10425,
'CustomerID': 'LAMAI',
'OrderDate': '1997-01-24T00:00:00.000Z',
'ShippedDate': '1997-02-14T00:00:00.000Z',
'Freight': 7.93,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10426,
'CustomerID': 'GALED',
'OrderDate': '1997-01-27T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 350


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-02-06T00:00:00.000Z',
'Freight': 18.69,
'ShipName': 'Galería del gastronómo',
'ShipAddress': 'Rambla de Cataluña, 23',
'ShipCity': 'Barcelona',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10427,
'CustomerID': 'PICCO',
'OrderDate': '1997-01-27T00:00:00.000Z',
'ShippedDate': '1997-03-03T00:00:00.000Z',
'Freight': 31.29,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10428,
'CustomerID': 'REGGC',
'OrderDate': '1997-01-28T00:00:00.000Z',
'ShippedDate': '1997-02-04T00:00:00.000Z',
'Freight': 11.09,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10429,
'CustomerID': 'HUNGO',
'OrderDate': '1997-01-29T00:00:00.000Z',
'ShippedDate': '1997-02-07T00:00:00.000Z',
'Freight': 56.63,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10430,
'CustomerID': 'ERNSH',
'OrderDate': '1997-01-30T00:00:00.000Z',
'ShippedDate': '1997-02-03T00:00:00.000Z',
'Freight': 458.78,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 351


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10431,
'CustomerID': 'BOTTM',
'OrderDate': '1997-01-30T00:00:00.000Z',
'ShippedDate': '1997-02-07T00:00:00.000Z',
'Freight': 44.17,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10432,
'CustomerID': 'SPLIR',
'OrderDate': '1997-01-31T00:00:00.000Z',
'ShippedDate': '1997-02-07T00:00:00.000Z',
'Freight': 4.34,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10433,
'CustomerID': 'PRINI',
'OrderDate': '1997-02-03T00:00:00.000Z',
'ShippedDate': '1997-03-04T00:00:00.000Z',
'Freight': 73.83,
'ShipName': 'Princesa Isabel Vinhos',
'ShipAddress': 'Estrada da saúde n. 58',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10434,
'CustomerID': 'FOLKO',
'OrderDate': '1997-02-03T00:00:00.000Z',
'ShippedDate': '1997-02-13T00:00:00.000Z',
'Freight': 17.92,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10435,
'CustomerID': 'CONSH',
'OrderDate': '1997-02-04T00:00:00.000Z',
'ShippedDate': '1997-02-07T00:00:00.000Z',
'Freight': 9.21,
'ShipName': 'Consolidated Holdings',
'ShipAddress': 'Berkeley Gardens 12 Brewery',
'ShipCity': 'London',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 352


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'UK'
},
{
'OrderID': 10436,
'CustomerID': 'BLONP',
'OrderDate': '1997-02-05T00:00:00.000Z',
'ShippedDate': '1997-02-11T00:00:00.000Z',
'Freight': 156.66,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10437,
'CustomerID': 'WARTH',
'OrderDate': '1997-02-05T00:00:00.000Z',
'ShippedDate': '1997-02-12T00:00:00.000Z',
'Freight': 19.97,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10438,
'CustomerID': 'TOMSP',
'OrderDate': '1997-02-06T00:00:00.000Z',
'ShippedDate': '1997-02-14T00:00:00.000Z',
'Freight': 8.24,
'ShipName': 'Toms Spezialitäten',
'ShipAddress': 'Luisenstr. 48',
'ShipCity': 'Münster',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10439,
'CustomerID': 'MEREP',
'OrderDate': '1997-02-07T00:00:00.000Z',
'ShippedDate': '1997-02-10T00:00:00.000Z',
'Freight': 4.07,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10440,
'CustomerID': 'SAVEA',
'OrderDate': '1997-02-10T00:00:00.000Z',
'ShippedDate': '1997-02-28T00:00:00.000Z',
'Freight': 86.53,
'ShipName': 'Save-a-lot Markets',

Copyright © 2001 -2024 Syncfusion Inc. 353


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '187 Suffolk Ln.',


'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10441,
'CustomerID': 'OLDWO',
'OrderDate': '1997-02-10T00:00:00.000Z',
'ShippedDate': '1997-03-14T00:00:00.000Z',
'Freight': 73.02,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10442,
'CustomerID': 'ERNSH',
'OrderDate': '1997-02-11T00:00:00.000Z',
'ShippedDate': '1997-02-18T00:00:00.000Z',
'Freight': 47.94,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10443,
'CustomerID': 'REGGC',
'OrderDate': '1997-02-12T00:00:00.000Z',
'ShippedDate': '1997-02-14T00:00:00.000Z',
'Freight': 13.95,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10444,
'CustomerID': 'BERGS',
'OrderDate': '1997-02-12T00:00:00.000Z',
'ShippedDate': '1997-02-21T00:00:00.000Z',
'Freight': 3.5,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10445,
'CustomerID': 'BERGS',
'OrderDate': '1997-02-13T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 354


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-02-20T00:00:00.000Z',
'Freight': 9.3,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10446,
'CustomerID': 'TOMSP',
'OrderDate': '1997-02-14T00:00:00.000Z',
'ShippedDate': '1997-02-19T00:00:00.000Z',
'Freight': 14.68,
'ShipName': 'Toms Spezialitäten',
'ShipAddress': 'Luisenstr. 48',
'ShipCity': 'Münster',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10447,
'CustomerID': 'RICAR',
'OrderDate': '1997-02-14T00:00:00.000Z',
'ShippedDate': '1997-03-07T00:00:00.000Z',
'Freight': 68.66,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10448,
'CustomerID': 'RANCH',
'OrderDate': '1997-02-17T00:00:00.000Z',
'ShippedDate': '1997-02-24T00:00:00.000Z',
'Freight': 38.82,
'ShipName': 'Rancho grande',
'ShipAddress': 'Av. del Libertador 900',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10449,
'CustomerID': 'BLONP',
'OrderDate': '1997-02-18T00:00:00.000Z',
'ShippedDate': '1997-02-27T00:00:00.000Z',
'Freight': 53.3,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 355


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10450,
'CustomerID': 'VICTE',
'OrderDate': '1997-02-19T00:00:00.000Z',
'ShippedDate': '1997-03-11T00:00:00.000Z',
'Freight': 7.23,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10451,
'CustomerID': 'QUICK',
'OrderDate': '1997-02-19T00:00:00.000Z',
'ShippedDate': '1997-03-12T00:00:00.000Z',
'Freight': 189.09,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10452,
'CustomerID': 'SAVEA',
'OrderDate': '1997-02-20T00:00:00.000Z',
'ShippedDate': '1997-02-26T00:00:00.000Z',
'Freight': 140.26,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10453,
'CustomerID': 'AROUT',
'OrderDate': '1997-02-21T00:00:00.000Z',
'ShippedDate': '1997-02-26T00:00:00.000Z',
'Freight': 25.36,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10454,
'CustomerID': 'LAMAI',
'OrderDate': '1997-02-21T00:00:00.000Z',
'ShippedDate': '1997-02-25T00:00:00.000Z',
'Freight': 2.74,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 356


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'France'
},
{
'OrderID': 10455,
'CustomerID': 'WARTH',
'OrderDate': '1997-02-24T00:00:00.000Z',
'ShippedDate': '1997-03-03T00:00:00.000Z',
'Freight': 180.45,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10456,
'CustomerID': 'KOENE',
'OrderDate': '1997-02-25T00:00:00.000Z',
'ShippedDate': '1997-02-28T00:00:00.000Z',
'Freight': 8.12,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10457,
'CustomerID': 'KOENE',
'OrderDate': '1997-02-25T00:00:00.000Z',
'ShippedDate': '1997-03-03T00:00:00.000Z',
'Freight': 11.57,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10458,
'CustomerID': 'SUPRD',
'OrderDate': '1997-02-26T00:00:00.000Z',
'ShippedDate': '1997-03-04T00:00:00.000Z',
'Freight': 147.06,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10459,
'CustomerID': 'VICTE',
'OrderDate': '1997-02-27T00:00:00.000Z',
'ShippedDate': '1997-02-28T00:00:00.000Z',
'Freight': 25.09,
'ShipName': 'Victuailles en stock',

Copyright © 2001 -2024 Syncfusion Inc. 357


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '2, rue du Commerce',


'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10460,
'CustomerID': 'FOLKO',
'OrderDate': '1997-02-28T00:00:00.000Z',
'ShippedDate': '1997-03-03T00:00:00.000Z',
'Freight': 16.27,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10461,
'CustomerID': 'LILAS',
'OrderDate': '1997-02-28T00:00:00.000Z',
'ShippedDate': '1997-03-05T00:00:00.000Z',
'Freight': 148.61,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10462,
'CustomerID': 'CONSH',
'OrderDate': '1997-03-03T00:00:00.000Z',
'ShippedDate': '1997-03-18T00:00:00.000Z',
'Freight': 6.17,
'ShipName': 'Consolidated Holdings',
'ShipAddress': 'Berkeley Gardens 12 Brewery',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10463,
'CustomerID': 'SUPRD',
'OrderDate': '1997-03-04T00:00:00.000Z',
'ShippedDate': '1997-03-06T00:00:00.000Z',
'Freight': 14.78,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10464,
'CustomerID': 'FURIB',
'OrderDate': '1997-03-04T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 358


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-03-14T00:00:00.000Z',
'Freight': 89,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10465,
'CustomerID': 'VAFFE',
'OrderDate': '1997-03-05T00:00:00.000Z',
'ShippedDate': '1997-03-14T00:00:00.000Z',
'Freight': 145.04,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10466,
'CustomerID': 'COMMI',
'OrderDate': '1997-03-06T00:00:00.000Z',
'ShippedDate': '1997-03-13T00:00:00.000Z',
'Freight': 11.93,
'ShipName': 'Comércio Mineiro',
'ShipAddress': 'Av. dos Lusíadas, 23',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10467,
'CustomerID': 'MAGAA',
'OrderDate': '1997-03-06T00:00:00.000Z',
'ShippedDate': '1997-03-11T00:00:00.000Z',
'Freight': 4.93,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10468,
'CustomerID': 'KOENE',
'OrderDate': '1997-03-07T00:00:00.000Z',
'ShippedDate': '1997-03-12T00:00:00.000Z',
'Freight': 44.12,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 359


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10469,
'CustomerID': 'WHITC',
'OrderDate': '1997-03-10T00:00:00.000Z',
'ShippedDate': '1997-03-14T00:00:00.000Z',
'Freight': 60.18,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10470,
'CustomerID': 'BONAP',
'OrderDate': '1997-03-11T00:00:00.000Z',
'ShippedDate': '1997-03-14T00:00:00.000Z',
'Freight': 64.56,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10471,
'CustomerID': 'BSBEV',
'OrderDate': '1997-03-11T00:00:00.000Z',
'ShippedDate': '1997-03-18T00:00:00.000Z',
'Freight': 45.59,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10472,
'CustomerID': 'SEVES',
'OrderDate': '1997-03-12T00:00:00.000Z',
'ShippedDate': '1997-03-19T00:00:00.000Z',
'Freight': 4.2,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10473,
'CustomerID': 'ISLAT',
'OrderDate': '1997-03-13T00:00:00.000Z',
'ShippedDate': '1997-03-21T00:00:00.000Z',
'Freight': 16.37,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',

Copyright © 2001 -2024 Syncfusion Inc. 360


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'UK'
},
{
'OrderID': 10474,
'CustomerID': 'PERIC',
'OrderDate': '1997-03-13T00:00:00.000Z',
'ShippedDate': '1997-03-21T00:00:00.000Z',
'Freight': 83.49,
'ShipName': 'Pericles Comidas clásicas',
'ShipAddress': 'Calle Dr. Jorge Cash 321',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10475,
'CustomerID': 'SUPRD',
'OrderDate': '1997-03-14T00:00:00.000Z',
'ShippedDate': '1997-04-04T00:00:00.000Z',
'Freight': 68.52,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10476,
'CustomerID': 'HILAA',
'OrderDate': '1997-03-17T00:00:00.000Z',
'ShippedDate': '1997-03-24T00:00:00.000Z',
'Freight': 4.41,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10477,
'CustomerID': 'PRINI',
'OrderDate': '1997-03-17T00:00:00.000Z',
'ShippedDate': '1997-03-25T00:00:00.000Z',
'Freight': 13.02,
'ShipName': 'Princesa Isabel Vinhos',
'ShipAddress': 'Estrada da saúde n. 58',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10478,
'CustomerID': 'VICTE',
'OrderDate': '1997-03-18T00:00:00.000Z',
'ShippedDate': '1997-03-26T00:00:00.000Z',
'Freight': 4.81,
'ShipName': 'Victuailles en stock',

Copyright © 2001 -2024 Syncfusion Inc. 361


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '2, rue du Commerce',


'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10479,
'CustomerID': 'RATTC',
'OrderDate': '1997-03-19T00:00:00.000Z',
'ShippedDate': '1997-03-21T00:00:00.000Z',
'Freight': 708.95,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10480,
'CustomerID': 'FOLIG',
'OrderDate': '1997-03-20T00:00:00.000Z',
'ShippedDate': '1997-03-24T00:00:00.000Z',
'Freight': 1.35,
'ShipName': 'Folies gourmandes',
'ShipAddress': '184, chaussée de Tournai',
'ShipCity': 'Lille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10481,
'CustomerID': 'RICAR',
'OrderDate': '1997-03-20T00:00:00.000Z',
'ShippedDate': '1997-03-25T00:00:00.000Z',
'Freight': 64.33,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10482,
'CustomerID': 'LAZYK',
'OrderDate': '1997-03-21T00:00:00.000Z',
'ShippedDate': '1997-04-10T00:00:00.000Z',
'Freight': 7.48,
'ShipName': 'Lazy K Kountry Store',
'ShipAddress': '12 Orchestra Terrace',
'ShipCity': 'Walla Walla',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10483,
'CustomerID': 'WHITC',
'OrderDate': '1997-03-24T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 362


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-04-25T00:00:00.000Z',
'Freight': 15.28,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10484,
'CustomerID': 'BSBEV',
'OrderDate': '1997-03-24T00:00:00.000Z',
'ShippedDate': '1997-04-01T00:00:00.000Z',
'Freight': 6.88,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10485,
'CustomerID': 'LINOD',
'OrderDate': '1997-03-25T00:00:00.000Z',
'ShippedDate': '1997-03-31T00:00:00.000Z',
'Freight': 64.45,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10486,
'CustomerID': 'HILAA',
'OrderDate': '1997-03-26T00:00:00.000Z',
'ShippedDate': '1997-04-02T00:00:00.000Z',
'Freight': 30.53,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10487,
'CustomerID': 'QUEEN',
'OrderDate': '1997-03-26T00:00:00.000Z',
'ShippedDate': '1997-03-28T00:00:00.000Z',
'Freight': 71.07,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 363


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10488,
'CustomerID': 'FRANK',
'OrderDate': '1997-03-27T00:00:00.000Z',
'ShippedDate': '1997-04-02T00:00:00.000Z',
'Freight': 4.93,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10489,
'CustomerID': 'PICCO',
'OrderDate': '1997-03-28T00:00:00.000Z',
'ShippedDate': '1997-04-09T00:00:00.000Z',
'Freight': 5.29,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10490,
'CustomerID': 'HILAA',
'OrderDate': '1997-03-31T00:00:00.000Z',
'ShippedDate': '1997-04-03T00:00:00.000Z',
'Freight': 210.19,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10491,
'CustomerID': 'FURIB',
'OrderDate': '1997-03-31T00:00:00.000Z',
'ShippedDate': '1997-04-08T00:00:00.000Z',
'Freight': 16.96,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10492,
'CustomerID': 'BOTTM',
'OrderDate': '1997-04-01T00:00:00.000Z',
'ShippedDate': '1997-04-11T00:00:00.000Z',
'Freight': 62.89,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',

Copyright © 2001 -2024 Syncfusion Inc. 364


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Canada'
},
{
'OrderID': 10493,
'CustomerID': 'LAMAI',
'OrderDate': '1997-04-02T00:00:00.000Z',
'ShippedDate': '1997-04-10T00:00:00.000Z',
'Freight': 10.64,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10494,
'CustomerID': 'COMMI',
'OrderDate': '1997-04-02T00:00:00.000Z',
'ShippedDate': '1997-04-09T00:00:00.000Z',
'Freight': 65.99,
'ShipName': 'Comércio Mineiro',
'ShipAddress': 'Av. dos Lusíadas, 23',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10495,
'CustomerID': 'LAUGB',
'OrderDate': '1997-04-03T00:00:00.000Z',
'ShippedDate': '1997-04-11T00:00:00.000Z',
'Freight': 4.65,
'ShipName': 'Laughing Bacchus Wine Cellars',
'ShipAddress': '2319 Elm St.',
'ShipCity': 'Vancouver',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10496,
'CustomerID': 'TRADH',
'OrderDate': '1997-04-04T00:00:00.000Z',
'ShippedDate': '1997-04-07T00:00:00.000Z',
'Freight': 46.77,
'ShipName': 'Tradiçao Hipermercados',
'ShipAddress': 'Av. Inês de Castro, 414',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10497,
'CustomerID': 'LEHMS',
'OrderDate': '1997-04-04T00:00:00.000Z',
'ShippedDate': '1997-04-07T00:00:00.000Z',
'Freight': 36.21,
'ShipName': 'Lehmanns Marktstand',

Copyright © 2001 -2024 Syncfusion Inc. 365


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Magazinweg 7',


'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10498,
'CustomerID': 'HILAA',
'OrderDate': '1997-04-07T00:00:00.000Z',
'ShippedDate': '1997-04-11T00:00:00.000Z',
'Freight': 29.75,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10499,
'CustomerID': 'LILAS',
'OrderDate': '1997-04-08T00:00:00.000Z',
'ShippedDate': '1997-04-16T00:00:00.000Z',
'Freight': 102.02,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10500,
'CustomerID': 'LAMAI',
'OrderDate': '1997-04-09T00:00:00.000Z',
'ShippedDate': '1997-04-17T00:00:00.000Z',
'Freight': 42.68,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10501,
'CustomerID': 'BLAUS',
'OrderDate': '1997-04-09T00:00:00.000Z',
'ShippedDate': '1997-04-16T00:00:00.000Z',
'Freight': 8.85,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10502,
'CustomerID': 'PERIC',
'OrderDate': '1997-04-10T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 366


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-04-29T00:00:00.000Z',
'Freight': 69.32,
'ShipName': 'Pericles Comidas clásicas',
'ShipAddress': 'Calle Dr. Jorge Cash 321',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10503,
'CustomerID': 'HUNGO',
'OrderDate': '1997-04-11T00:00:00.000Z',
'ShippedDate': '1997-04-16T00:00:00.000Z',
'Freight': 16.74,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10504,
'CustomerID': 'WHITC',
'OrderDate': '1997-04-11T00:00:00.000Z',
'ShippedDate': '1997-04-18T00:00:00.000Z',
'Freight': 59.13,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10505,
'CustomerID': 'MEREP',
'OrderDate': '1997-04-14T00:00:00.000Z',
'ShippedDate': '1997-04-21T00:00:00.000Z',
'Freight': 7.13,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10506,
'CustomerID': 'KOENE',
'OrderDate': '1997-04-15T00:00:00.000Z',
'ShippedDate': '1997-05-02T00:00:00.000Z',
'Freight': 21.19,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 367


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10507,
'CustomerID': 'ANTON',
'OrderDate': '1997-04-15T00:00:00.000Z',
'ShippedDate': '1997-04-22T00:00:00.000Z',
'Freight': 47.45,
'ShipName': 'Antonio Moreno Taquería',
'ShipAddress': 'Mataderos 2312',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10508,
'CustomerID': 'OTTIK',
'OrderDate': '1997-04-16T00:00:00.000Z',
'ShippedDate': '1997-05-13T00:00:00.000Z',
'Freight': 4.99,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10509,
'CustomerID': 'BLAUS',
'OrderDate': '1997-04-17T00:00:00.000Z',
'ShippedDate': '1997-04-29T00:00:00.000Z',
'Freight': 0.15,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10510,
'CustomerID': 'SAVEA',
'OrderDate': '1997-04-18T00:00:00.000Z',
'ShippedDate': '1997-04-28T00:00:00.000Z',
'Freight': 367.63,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10511,
'CustomerID': 'BONAP',
'OrderDate': '1997-04-18T00:00:00.000Z',
'ShippedDate': '1997-04-21T00:00:00.000Z',
'Freight': 350.64,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 368


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'France'
},
{
'OrderID': 10512,
'CustomerID': 'FAMIA',
'OrderDate': '1997-04-21T00:00:00.000Z',
'ShippedDate': '1997-04-24T00:00:00.000Z',
'Freight': 3.53,
'ShipName': 'Familia Arquibaldo',
'ShipAddress': 'Rua Orós, 92',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10513,
'CustomerID': 'WANDK',
'OrderDate': '1997-04-22T00:00:00.000Z',
'ShippedDate': '1997-04-28T00:00:00.000Z',
'Freight': 105.65,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10514,
'CustomerID': 'ERNSH',
'OrderDate': '1997-04-22T00:00:00.000Z',
'ShippedDate': '1997-05-16T00:00:00.000Z',
'Freight': 789.95,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10515,
'CustomerID': 'QUICK',
'OrderDate': '1997-04-23T00:00:00.000Z',
'ShippedDate': '1997-05-23T00:00:00.000Z',
'Freight': 204.47,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10516,
'CustomerID': 'HUNGO',
'OrderDate': '1997-04-24T00:00:00.000Z',
'ShippedDate': '1997-05-01T00:00:00.000Z',
'Freight': 62.78,
'ShipName': 'Hungry Owl All-Night Grocers',

Copyright © 2001 -2024 Syncfusion Inc. 369


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '8 Johnstown Road',


'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10517,
'CustomerID': 'NORTS',
'OrderDate': '1997-04-24T00:00:00.000Z',
'ShippedDate': '1997-04-29T00:00:00.000Z',
'Freight': 32.07,
'ShipName': 'North/South',
'ShipAddress': 'South House 300 Queensbridge',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10518,
'CustomerID': 'TORTU',
'OrderDate': '1997-04-25T00:00:00.000Z',
'ShippedDate': '1997-05-05T00:00:00.000Z',
'Freight': 218.15,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10519,
'CustomerID': 'CHOPS',
'OrderDate': '1997-04-28T00:00:00.000Z',
'ShippedDate': '1997-05-01T00:00:00.000Z',
'Freight': 91.76,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10520,
'CustomerID': 'SANTG',
'OrderDate': '1997-04-29T00:00:00.000Z',
'ShippedDate': '1997-05-01T00:00:00.000Z',
'Freight': 13.37,
'ShipName': 'Santé Gourmet',
'ShipAddress': 'Erling Skakkes gate 78',
'ShipCity': 'Stavern',
'ShipRegion': null,
'ShipCountry': 'Norway'
},
{
'OrderID': 10521,
'CustomerID': 'CACTU',
'OrderDate': '1997-04-29T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 370


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-05-02T00:00:00.000Z',
'Freight': 17.22,
'ShipName': 'Cactus Comidas para llevar',
'ShipAddress': 'Cerrito 333',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10522,
'CustomerID': 'LEHMS',
'OrderDate': '1997-04-30T00:00:00.000Z',
'ShippedDate': '1997-05-06T00:00:00.000Z',
'Freight': 45.33,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10523,
'CustomerID': 'SEVES',
'OrderDate': '1997-05-01T00:00:00.000Z',
'ShippedDate': '1997-05-30T00:00:00.000Z',
'Freight': 77.63,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10524,
'CustomerID': 'BERGS',
'OrderDate': '1997-05-01T00:00:00.000Z',
'ShippedDate': '1997-05-07T00:00:00.000Z',
'Freight': 244.79,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10525,
'CustomerID': 'BONAP',
'OrderDate': '1997-05-02T00:00:00.000Z',
'ShippedDate': '1997-05-23T00:00:00.000Z',
'Freight': 11.06,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 371


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10526,
'CustomerID': 'WARTH',
'OrderDate': '1997-05-05T00:00:00.000Z',
'ShippedDate': '1997-05-15T00:00:00.000Z',
'Freight': 58.59,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10527,
'CustomerID': 'QUICK',
'OrderDate': '1997-05-05T00:00:00.000Z',
'ShippedDate': '1997-05-07T00:00:00.000Z',
'Freight': 41.9,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10528,
'CustomerID': 'GREAL',
'OrderDate': '1997-05-06T00:00:00.000Z',
'ShippedDate': '1997-05-09T00:00:00.000Z',
'Freight': 3.35,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10529,
'CustomerID': 'MAISD',
'OrderDate': '1997-05-07T00:00:00.000Z',
'ShippedDate': '1997-05-09T00:00:00.000Z',
'Freight': 66.69,
'ShipName': 'Maison Dewey',
'ShipAddress': 'Rue Joseph-Bens 532',
'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10530,
'CustomerID': 'PICCO',
'OrderDate': '1997-05-08T00:00:00.000Z',
'ShippedDate': '1997-05-12T00:00:00.000Z',
'Freight': 339.22,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 372


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Austria'
},
{
'OrderID': 10531,
'CustomerID': 'OCEAN',
'OrderDate': '1997-05-08T00:00:00.000Z',
'ShippedDate': '1997-05-19T00:00:00.000Z',
'Freight': 8.12,
'ShipName': 'Océano Atlántico Ltda.',
'ShipAddress': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10532,
'CustomerID': 'EASTC',
'OrderDate': '1997-05-09T00:00:00.000Z',
'ShippedDate': '1997-05-12T00:00:00.000Z',
'Freight': 74.46,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10533,
'CustomerID': 'FOLKO',
'OrderDate': '1997-05-12T00:00:00.000Z',
'ShippedDate': '1997-05-22T00:00:00.000Z',
'Freight': 188.04,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10534,
'CustomerID': 'LEHMS',
'OrderDate': '1997-05-12T00:00:00.000Z',
'ShippedDate': '1997-05-14T00:00:00.000Z',
'Freight': 27.94,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10535,
'CustomerID': 'ANTON',
'OrderDate': '1997-05-13T00:00:00.000Z',
'ShippedDate': '1997-05-21T00:00:00.000Z',
'Freight': 15.64,
'ShipName': 'Antonio Moreno Taquería',

Copyright © 2001 -2024 Syncfusion Inc. 373


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Mataderos 2312',


'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10536,
'CustomerID': 'LEHMS',
'OrderDate': '1997-05-14T00:00:00.000Z',
'ShippedDate': '1997-06-06T00:00:00.000Z',
'Freight': 58.88,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10537,
'CustomerID': 'RICSU',
'OrderDate': '1997-05-14T00:00:00.000Z',
'ShippedDate': '1997-05-19T00:00:00.000Z',
'Freight': 78.85,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10538,
'CustomerID': 'BSBEV',
'OrderDate': '1997-05-15T00:00:00.000Z',
'ShippedDate': '1997-05-16T00:00:00.000Z',
'Freight': 4.87,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10539,
'CustomerID': 'BSBEV',
'OrderDate': '1997-05-16T00:00:00.000Z',
'ShippedDate': '1997-05-23T00:00:00.000Z',
'Freight': 12.36,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10540,
'CustomerID': 'QUICK',
'OrderDate': '1997-05-19T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 374


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-06-13T00:00:00.000Z',
'Freight': 1007.64,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10541,
'CustomerID': 'HANAR',
'OrderDate': '1997-05-19T00:00:00.000Z',
'ShippedDate': '1997-05-29T00:00:00.000Z',
'Freight': 68.65,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10542,
'CustomerID': 'KOENE',
'OrderDate': '1997-05-20T00:00:00.000Z',
'ShippedDate': '1997-05-26T00:00:00.000Z',
'Freight': 10.95,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10543,
'CustomerID': 'LILAS',
'OrderDate': '1997-05-21T00:00:00.000Z',
'ShippedDate': '1997-05-23T00:00:00.000Z',
'Freight': 48.17,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10544,
'CustomerID': 'LONEP',
'OrderDate': '1997-05-21T00:00:00.000Z',
'ShippedDate': '1997-05-30T00:00:00.000Z',
'Freight': 24.91,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 375


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10545,
'CustomerID': 'LAZYK',
'OrderDate': '1997-05-22T00:00:00.000Z',
'ShippedDate': '1997-06-26T00:00:00.000Z',
'Freight': 11.92,
'ShipName': 'Lazy K Kountry Store',
'ShipAddress': '12 Orchestra Terrace',
'ShipCity': 'Walla Walla',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10546,
'CustomerID': 'VICTE',
'OrderDate': '1997-05-23T00:00:00.000Z',
'ShippedDate': '1997-05-27T00:00:00.000Z',
'Freight': 194.72,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10547,
'CustomerID': 'SEVES',
'OrderDate': '1997-05-23T00:00:00.000Z',
'ShippedDate': '1997-06-02T00:00:00.000Z',
'Freight': 178.43,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10548,
'CustomerID': 'TOMSP',
'OrderDate': '1997-05-26T00:00:00.000Z',
'ShippedDate': '1997-06-02T00:00:00.000Z',
'Freight': 1.43,
'ShipName': 'Toms Spezialitäten',
'ShipAddress': 'Luisenstr. 48',
'ShipCity': 'Münster',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10549,
'CustomerID': 'QUICK',
'OrderDate': '1997-05-27T00:00:00.000Z',
'ShippedDate': '1997-05-30T00:00:00.000Z',
'Freight': 171.24,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 376


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Germany'
},
{
'OrderID': 10550,
'CustomerID': 'GODOS',
'OrderDate': '1997-05-28T00:00:00.000Z',
'ShippedDate': '1997-06-06T00:00:00.000Z',
'Freight': 4.32,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10551,
'CustomerID': 'FURIB',
'OrderDate': '1997-05-28T00:00:00.000Z',
'ShippedDate': '1997-06-06T00:00:00.000Z',
'Freight': 72.95,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10552,
'CustomerID': 'HILAA',
'OrderDate': '1997-05-29T00:00:00.000Z',
'ShippedDate': '1997-06-05T00:00:00.000Z',
'Freight': 83.22,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10553,
'CustomerID': 'WARTH',
'OrderDate': '1997-05-30T00:00:00.000Z',
'ShippedDate': '1997-06-03T00:00:00.000Z',
'Freight': 149.49,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10554,
'CustomerID': 'OTTIK',
'OrderDate': '1997-05-30T00:00:00.000Z',
'ShippedDate': '1997-06-05T00:00:00.000Z',
'Freight': 120.97,
'ShipName': 'Ottilies Käseladen',

Copyright © 2001 -2024 Syncfusion Inc. 377


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Mehrheimerstr. 369',


'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10555,
'CustomerID': 'SAVEA',
'OrderDate': '1997-06-02T00:00:00.000Z',
'ShippedDate': '1997-06-04T00:00:00.000Z',
'Freight': 252.49,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10556,
'CustomerID': 'SIMOB',
'OrderDate': '1997-06-03T00:00:00.000Z',
'ShippedDate': '1997-06-13T00:00:00.000Z',
'Freight': 9.8,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10557,
'CustomerID': 'LEHMS',
'OrderDate': '1997-06-03T00:00:00.000Z',
'ShippedDate': '1997-06-06T00:00:00.000Z',
'Freight': 96.72,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10558,
'CustomerID': 'AROUT',
'OrderDate': '1997-06-04T00:00:00.000Z',
'ShippedDate': '1997-06-10T00:00:00.000Z',
'Freight': 72.97,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10559,
'CustomerID': 'BLONP',
'OrderDate': '1997-06-05T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 378


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-06-13T00:00:00.000Z',
'Freight': 8.05,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10560,
'CustomerID': 'FRANK',
'OrderDate': '1997-06-06T00:00:00.000Z',
'ShippedDate': '1997-06-09T00:00:00.000Z',
'Freight': 36.65,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10561,
'CustomerID': 'FOLKO',
'OrderDate': '1997-06-06T00:00:00.000Z',
'ShippedDate': '1997-06-09T00:00:00.000Z',
'Freight': 242.21,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10562,
'CustomerID': 'REGGC',
'OrderDate': '1997-06-09T00:00:00.000Z',
'ShippedDate': '1997-06-12T00:00:00.000Z',
'Freight': 22.95,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10563,
'CustomerID': 'RICAR',
'OrderDate': '1997-06-10T00:00:00.000Z',
'ShippedDate': '1997-06-24T00:00:00.000Z',
'Freight': 60.43,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 379


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10564,
'CustomerID': 'RATTC',
'OrderDate': '1997-06-10T00:00:00.000Z',
'ShippedDate': '1997-06-16T00:00:00.000Z',
'Freight': 13.75,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10565,
'CustomerID': 'MEREP',
'OrderDate': '1997-06-11T00:00:00.000Z',
'ShippedDate': '1997-06-18T00:00:00.000Z',
'Freight': 7.15,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10566,
'CustomerID': 'BLONP',
'OrderDate': '1997-06-12T00:00:00.000Z',
'ShippedDate': '1997-06-18T00:00:00.000Z',
'Freight': 88.4,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10567,
'CustomerID': 'HUNGO',
'OrderDate': '1997-06-12T00:00:00.000Z',
'ShippedDate': '1997-06-17T00:00:00.000Z',
'Freight': 33.97,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10568,
'CustomerID': 'GALED',
'OrderDate': '1997-06-13T00:00:00.000Z',
'ShippedDate': '1997-07-09T00:00:00.000Z',
'Freight': 6.54,
'ShipName': 'Galería del gastronómo',
'ShipAddress': 'Rambla de Cataluña, 23',
'ShipCity': 'Barcelona',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 380


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Spain'
},
{
'OrderID': 10569,
'CustomerID': 'RATTC',
'OrderDate': '1997-06-16T00:00:00.000Z',
'ShippedDate': '1997-07-11T00:00:00.000Z',
'Freight': 58.98,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10570,
'CustomerID': 'MEREP',
'OrderDate': '1997-06-17T00:00:00.000Z',
'ShippedDate': '1997-06-19T00:00:00.000Z',
'Freight': 188.99,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10571,
'CustomerID': 'ERNSH',
'OrderDate': '1997-06-17T00:00:00.000Z',
'ShippedDate': '1997-07-04T00:00:00.000Z',
'Freight': 26.06,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10572,
'CustomerID': 'BERGS',
'OrderDate': '1997-06-18T00:00:00.000Z',
'ShippedDate': '1997-06-25T00:00:00.000Z',
'Freight': 116.43,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10573,
'CustomerID': 'ANTON',
'OrderDate': '1997-06-19T00:00:00.000Z',
'ShippedDate': '1997-06-20T00:00:00.000Z',
'Freight': 84.84,
'ShipName': 'Antonio Moreno Taquería',

Copyright © 2001 -2024 Syncfusion Inc. 381


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Mataderos 2312',


'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10574,
'CustomerID': 'TRAIH',
'OrderDate': '1997-06-19T00:00:00.000Z',
'ShippedDate': '1997-06-30T00:00:00.000Z',
'Freight': 37.6,
'ShipName': 'Trail\' Head Gourmet Provisioners',
'ShipAddress': '722 DaVinci Blvd.',
'ShipCity': 'Kirkland',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10575,
'CustomerID': 'MORGK',
'OrderDate': '1997-06-20T00:00:00.000Z',
'ShippedDate': '1997-06-30T00:00:00.000Z',
'Freight': 127.34,
'ShipName': 'Morgenstern Gesundkost',
'ShipAddress': 'Heerstr. 22',
'ShipCity': 'Leipzig',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10576,
'CustomerID': 'TORTU',
'OrderDate': '1997-06-23T00:00:00.000Z',
'ShippedDate': '1997-06-30T00:00:00.000Z',
'Freight': 18.56,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10577,
'CustomerID': 'TRAIH',
'OrderDate': '1997-06-23T00:00:00.000Z',
'ShippedDate': '1997-06-30T00:00:00.000Z',
'Freight': 25.41,
'ShipName': 'Trail\' Head Gourmet Provisioners',
'ShipAddress': '722 DaVinci Blvd.',
'ShipCity': 'Kirkland',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10578,
'CustomerID': 'BSBEV',
'OrderDate': '1997-06-24T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 382


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-07-25T00:00:00.000Z',
'Freight': 29.6,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10579,
'CustomerID': 'LETSS',
'OrderDate': '1997-06-25T00:00:00.000Z',
'ShippedDate': '1997-07-04T00:00:00.000Z',
'Freight': 13.73,
'ShipName': 'Let\' Stop N Shop',
'ShipAddress': '87 Polk St. Suite 5',
'ShipCity': 'San Francisco',
'ShipRegion': 'CA',
'ShipCountry': 'USA'
},
{
'OrderID': 10580,
'CustomerID': 'OTTIK',
'OrderDate': '1997-06-26T00:00:00.000Z',
'ShippedDate': '1997-07-01T00:00:00.000Z',
'Freight': 75.89,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10581,
'CustomerID': 'FAMIA',
'OrderDate': '1997-06-26T00:00:00.000Z',
'ShippedDate': '1997-07-02T00:00:00.000Z',
'Freight': 3.01,
'ShipName': 'Familia Arquibaldo',
'ShipAddress': 'Rua Orós, 92',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10582,
'CustomerID': 'BLAUS',
'OrderDate': '1997-06-27T00:00:00.000Z',
'ShippedDate': '1997-07-14T00:00:00.000Z',
'Freight': 27.71,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 383


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10583,
'CustomerID': 'WARTH',
'OrderDate': '1997-06-30T00:00:00.000Z',
'ShippedDate': '1997-07-04T00:00:00.000Z',
'Freight': 7.28,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10584,
'CustomerID': 'BLONP',
'OrderDate': '1997-06-30T00:00:00.000Z',
'ShippedDate': '1997-07-04T00:00:00.000Z',
'Freight': 59.14,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10585,
'CustomerID': 'WELLI',
'OrderDate': '1997-07-01T00:00:00.000Z',
'ShippedDate': '1997-07-10T00:00:00.000Z',
'Freight': 13.41,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10586,
'CustomerID': 'REGGC',
'OrderDate': '1997-07-02T00:00:00.000Z',
'ShippedDate': '1997-07-09T00:00:00.000Z',
'Freight': 0.48,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10587,
'CustomerID': 'QUEDE',
'OrderDate': '1997-07-02T00:00:00.000Z',
'ShippedDate': '1997-07-09T00:00:00.000Z',
'Freight': 62.52,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',

Copyright © 2001 -2024 Syncfusion Inc. 384


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Brazil'
},
{
'OrderID': 10588,
'CustomerID': 'QUICK',
'OrderDate': '1997-07-03T00:00:00.000Z',
'ShippedDate': '1997-07-10T00:00:00.000Z',
'Freight': 194.67,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10589,
'CustomerID': 'GREAL',
'OrderDate': '1997-07-04T00:00:00.000Z',
'ShippedDate': '1997-07-14T00:00:00.000Z',
'Freight': 4.42,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10590,
'CustomerID': 'MEREP',
'OrderDate': '1997-07-07T00:00:00.000Z',
'ShippedDate': '1997-07-14T00:00:00.000Z',
'Freight': 44.77,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10591,
'CustomerID': 'VAFFE',
'OrderDate': '1997-07-07T00:00:00.000Z',
'ShippedDate': '1997-07-16T00:00:00.000Z',
'Freight': 55.92,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10592,
'CustomerID': 'LEHMS',
'OrderDate': '1997-07-08T00:00:00.000Z',
'ShippedDate': '1997-07-16T00:00:00.000Z',
'Freight': 32.1,
'ShipName': 'Lehmanns Marktstand',

Copyright © 2001 -2024 Syncfusion Inc. 385


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Magazinweg 7',


'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10593,
'CustomerID': 'LEHMS',
'OrderDate': '1997-07-09T00:00:00.000Z',
'ShippedDate': '1997-08-13T00:00:00.000Z',
'Freight': 174.2,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10594,
'CustomerID': 'OLDWO',
'OrderDate': '1997-07-09T00:00:00.000Z',
'ShippedDate': '1997-07-16T00:00:00.000Z',
'Freight': 5.24,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10595,
'CustomerID': 'ERNSH',
'OrderDate': '1997-07-10T00:00:00.000Z',
'ShippedDate': '1997-07-14T00:00:00.000Z',
'Freight': 96.78,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10596,
'CustomerID': 'WHITC',
'OrderDate': '1997-07-11T00:00:00.000Z',
'ShippedDate': '1997-08-12T00:00:00.000Z',
'Freight': 16.34,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10597,
'CustomerID': 'PICCO',
'OrderDate': '1997-07-11T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 386


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-07-18T00:00:00.000Z',
'Freight': 35.12,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10598,
'CustomerID': 'RATTC',
'OrderDate': '1997-07-14T00:00:00.000Z',
'ShippedDate': '1997-07-18T00:00:00.000Z',
'Freight': 44.42,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10599,
'CustomerID': 'BSBEV',
'OrderDate': '1997-07-15T00:00:00.000Z',
'ShippedDate': '1997-07-21T00:00:00.000Z',
'Freight': 29.98,
'ShipName': 'B Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10600,
'CustomerID': 'HUNGC',
'OrderDate': '1997-07-16T00:00:00.000Z',
'ShippedDate': '1997-07-21T00:00:00.000Z',
'Freight': 45.13,
'ShipName': 'Hungry Coyote Import Store',
'ShipAddress': 'City Center Plaza 516 Main St.',
'ShipCity': 'Elgin',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10601,
'CustomerID': 'HILAA',
'OrderDate': '1997-07-16T00:00:00.000Z',
'ShippedDate': '1997-07-22T00:00:00.000Z',
'Freight': 58.3,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 387


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10602,
'CustomerID': 'VAFFE',
'OrderDate': '1997-07-17T00:00:00.000Z',
'ShippedDate': '1997-07-22T00:00:00.000Z',
'Freight': 2.92,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10603,
'CustomerID': 'SAVEA',
'OrderDate': '1997-07-18T00:00:00.000Z',
'ShippedDate': '1997-08-08T00:00:00.000Z',
'Freight': 48.77,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10604,
'CustomerID': 'FURIB',
'OrderDate': '1997-07-18T00:00:00.000Z',
'ShippedDate': '1997-07-29T00:00:00.000Z',
'Freight': 7.46,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10605,
'CustomerID': 'MEREP',
'OrderDate': '1997-07-21T00:00:00.000Z',
'ShippedDate': '1997-07-29T00:00:00.000Z',
'Freight': 379.13,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10606,
'CustomerID': 'TRADH',
'OrderDate': '1997-07-22T00:00:00.000Z',
'ShippedDate': '1997-07-31T00:00:00.000Z',
'Freight': 79.4,
'ShipName': 'Tradiçao Hipermercados',
'ShipAddress': 'Av. Inês de Castro, 414',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',

Copyright © 2001 -2024 Syncfusion Inc. 388


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Brazil'
},
{
'OrderID': 10607,
'CustomerID': 'SAVEA',
'OrderDate': '1997-07-22T00:00:00.000Z',
'ShippedDate': '1997-07-25T00:00:00.000Z',
'Freight': 200.24,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10608,
'CustomerID': 'TOMSP',
'OrderDate': '1997-07-23T00:00:00.000Z',
'ShippedDate': '1997-08-01T00:00:00.000Z',
'Freight': 27.79,
'ShipName': 'Toms Spezialitäten',
'ShipAddress': 'Luisenstr. 48',
'ShipCity': 'Münster',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10609,
'CustomerID': 'DUMON',
'OrderDate': '1997-07-24T00:00:00.000Z',
'ShippedDate': '1997-07-30T00:00:00.000Z',
'Freight': 1.85,
'ShipName': 'Du monde entier',
'ShipAddress': '67, rue des Cinquante Otages',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10610,
'CustomerID': 'LAMAI',
'OrderDate': '1997-07-25T00:00:00.000Z',
'ShippedDate': '1997-08-06T00:00:00.000Z',
'Freight': 26.78,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10611,
'CustomerID': 'WOLZA',
'OrderDate': '1997-07-25T00:00:00.000Z',
'ShippedDate': '1997-08-01T00:00:00.000Z',
'Freight': 80.65,
'ShipName': 'Wolski Zajazd',

Copyright © 2001 -2024 Syncfusion Inc. 389


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'ul. Filtrowa 68',


'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 10612,
'CustomerID': 'SAVEA',
'OrderDate': '1997-07-28T00:00:00.000Z',
'ShippedDate': '1997-08-01T00:00:00.000Z',
'Freight': 544.08,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10613,
'CustomerID': 'HILAA',
'OrderDate': '1997-07-29T00:00:00.000Z',
'ShippedDate': '1997-08-01T00:00:00.000Z',
'Freight': 8.11,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10614,
'CustomerID': 'BLAUS',
'OrderDate': '1997-07-29T00:00:00.000Z',
'ShippedDate': '1997-08-01T00:00:00.000Z',
'Freight': 1.93,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10615,
'CustomerID': 'WILMK',
'OrderDate': '1997-07-30T00:00:00.000Z',
'ShippedDate': '1997-08-06T00:00:00.000Z',
'Freight': 0.75,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10616,
'CustomerID': 'GREAL',
'OrderDate': '1997-07-31T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 390


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-08-05T00:00:00.000Z',
'Freight': 116.53,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10617,
'CustomerID': 'GREAL',
'OrderDate': '1997-07-31T00:00:00.000Z',
'ShippedDate': '1997-08-04T00:00:00.000Z',
'Freight': 18.53,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10618,
'CustomerID': 'MEREP',
'OrderDate': '1997-08-01T00:00:00.000Z',
'ShippedDate': '1997-08-08T00:00:00.000Z',
'Freight': 154.68,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10619,
'CustomerID': 'MEREP',
'OrderDate': '1997-08-04T00:00:00.000Z',
'ShippedDate': '1997-08-07T00:00:00.000Z',
'Freight': 91.05,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10620,
'CustomerID': 'LAUGB',
'OrderDate': '1997-08-05T00:00:00.000Z',
'ShippedDate': '1997-08-14T00:00:00.000Z',
'Freight': 0.94,
'ShipName': 'Laughing Bacchus Wine Cellars',
'ShipAddress': '2319 Elm St.',
'ShipCity': 'Vancouver',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 391


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10621,
'CustomerID': 'ISLAT',
'OrderDate': '1997-08-05T00:00:00.000Z',
'ShippedDate': '1997-08-11T00:00:00.000Z',
'Freight': 23.73,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10622,
'CustomerID': 'RICAR',
'OrderDate': '1997-08-06T00:00:00.000Z',
'ShippedDate': '1997-08-11T00:00:00.000Z',
'Freight': 50.97,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10623,
'CustomerID': 'FRANK',
'OrderDate': '1997-08-07T00:00:00.000Z',
'ShippedDate': '1997-08-12T00:00:00.000Z',
'Freight': 97.18,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10624,
'CustomerID': 'THECR',
'OrderDate': '1997-08-07T00:00:00.000Z',
'ShippedDate': '1997-08-19T00:00:00.000Z',
'Freight': 94.8,
'ShipName': 'The Cracker Box',
'ShipAddress': '55 Grizzly Peak Rd.',
'ShipCity': 'Butte',
'ShipRegion': 'MT',
'ShipCountry': 'USA'
},
{
'OrderID': 10625,
'CustomerID': 'ANATR',
'OrderDate': '1997-08-08T00:00:00.000Z',
'ShippedDate': '1997-08-14T00:00:00.000Z',
'Freight': 43.9,
'ShipName': 'Ana Trujillo Emparedados y helados',
'ShipAddress': 'Avda. de la Constitución 2222',
'ShipCity': 'México D.F.',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 392


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Mexico'
},
{
'OrderID': 10626,
'CustomerID': 'BERGS',
'OrderDate': '1997-08-11T00:00:00.000Z',
'ShippedDate': '1997-08-20T00:00:00.000Z',
'Freight': 138.69,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10627,
'CustomerID': 'SAVEA',
'OrderDate': '1997-08-11T00:00:00.000Z',
'ShippedDate': '1997-08-21T00:00:00.000Z',
'Freight': 107.46,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10628,
'CustomerID': 'BLONP',
'OrderDate': '1997-08-12T00:00:00.000Z',
'ShippedDate': '1997-08-20T00:00:00.000Z',
'Freight': 30.36,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10629,
'CustomerID': 'GODOS',
'OrderDate': '1997-08-12T00:00:00.000Z',
'ShippedDate': '1997-08-20T00:00:00.000Z',
'Freight': 85.46,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10630,
'CustomerID': 'KOENE',
'OrderDate': '1997-08-13T00:00:00.000Z',
'ShippedDate': '1997-08-19T00:00:00.000Z',
'Freight': 32.35,
'ShipName': 'Königlich Essen',

Copyright © 2001 -2024 Syncfusion Inc. 393


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Maubelstr. 90',


'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10631,
'CustomerID': 'LAMAI',
'OrderDate': '1997-08-14T00:00:00.000Z',
'ShippedDate': '1997-08-15T00:00:00.000Z',
'Freight': 0.87,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10632,
'CustomerID': 'WANDK',
'OrderDate': '1997-08-14T00:00:00.000Z',
'ShippedDate': '1997-08-19T00:00:00.000Z',
'Freight': 41.38,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10633,
'CustomerID': 'ERNSH',
'OrderDate': '1997-08-15T00:00:00.000Z',
'ShippedDate': '1997-08-18T00:00:00.000Z',
'Freight': 477.9,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10634,
'CustomerID': 'FOLIG',
'OrderDate': '1997-08-15T00:00:00.000Z',
'ShippedDate': '1997-08-21T00:00:00.000Z',
'Freight': 487.38,
'ShipName': 'Folies gourmandes',
'ShipAddress': '184, chaussée de Tournai',
'ShipCity': 'Lille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10635,
'CustomerID': 'MAGAA',
'OrderDate': '1997-08-18T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 394


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-08-21T00:00:00.000Z',
'Freight': 47.46,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10636,
'CustomerID': 'WARTH',
'OrderDate': '1997-08-19T00:00:00.000Z',
'ShippedDate': '1997-08-26T00:00:00.000Z',
'Freight': 1.15,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10637,
'CustomerID': 'QUEEN',
'OrderDate': '1997-08-19T00:00:00.000Z',
'ShippedDate': '1997-08-26T00:00:00.000Z',
'Freight': 201.29,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10638,
'CustomerID': 'LINOD',
'OrderDate': '1997-08-20T00:00:00.000Z',
'ShippedDate': '1997-09-01T00:00:00.000Z',
'Freight': 158.44,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10639,
'CustomerID': 'SANTG',
'OrderDate': '1997-08-20T00:00:00.000Z',
'ShippedDate': '1997-08-27T00:00:00.000Z',
'Freight': 38.64,
'ShipName': 'Santé Gourmet',
'ShipAddress': 'Erling Skakkes gate 78',
'ShipCity': 'Stavern',
'ShipRegion': null,
'ShipCountry': 'Norway'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 395


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10640,
'CustomerID': 'WANDK',
'OrderDate': '1997-08-21T00:00:00.000Z',
'ShippedDate': '1997-08-28T00:00:00.000Z',
'Freight': 23.55,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10641,
'CustomerID': 'HILAA',
'OrderDate': '1997-08-22T00:00:00.000Z',
'ShippedDate': '1997-08-26T00:00:00.000Z',
'Freight': 179.61,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10642,
'CustomerID': 'SIMOB',
'OrderDate': '1997-08-22T00:00:00.000Z',
'ShippedDate': '1997-09-05T00:00:00.000Z',
'Freight': 41.89,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10643,
'CustomerID': 'ALFKI',
'OrderDate': '1997-08-25T00:00:00.000Z',
'ShippedDate': '1997-09-02T00:00:00.000Z',
'Freight': 29.46,
'ShipName': 'Alfreds Futterkiste',
'ShipAddress': 'Obere Str. 57',
'ShipCity': 'Berlin',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10644,
'CustomerID': 'WELLI',
'OrderDate': '1997-08-25T00:00:00.000Z',
'ShippedDate': '1997-09-01T00:00:00.000Z',
'Freight': 0.14,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',

Copyright © 2001 -2024 Syncfusion Inc. 396


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Brazil'
},
{
'OrderID': 10645,
'CustomerID': 'HANAR',
'OrderDate': '1997-08-26T00:00:00.000Z',
'ShippedDate': '1997-09-02T00:00:00.000Z',
'Freight': 12.41,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10646,
'CustomerID': 'HUNGO',
'OrderDate': '1997-08-27T00:00:00.000Z',
'ShippedDate': '1997-09-03T00:00:00.000Z',
'Freight': 142.33,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10647,
'CustomerID': 'QUEDE',
'OrderDate': '1997-08-27T00:00:00.000Z',
'ShippedDate': '1997-09-03T00:00:00.000Z',
'Freight': 45.54,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10648,
'CustomerID': 'RICAR',
'OrderDate': '1997-08-28T00:00:00.000Z',
'ShippedDate': '1997-09-09T00:00:00.000Z',
'Freight': 14.25,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10649,
'CustomerID': 'MAISD',
'OrderDate': '1997-08-28T00:00:00.000Z',
'ShippedDate': '1997-08-29T00:00:00.000Z',
'Freight': 6.2,
'ShipName': 'Maison Dewey',

Copyright © 2001 -2024 Syncfusion Inc. 397


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Rue Joseph-Bens 532',


'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10650,
'CustomerID': 'FAMIA',
'OrderDate': '1997-08-29T00:00:00.000Z',
'ShippedDate': '1997-09-03T00:00:00.000Z',
'Freight': 176.81,
'ShipName': 'Familia Arquibaldo',
'ShipAddress': 'Rua Orós, 92',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10651,
'CustomerID': 'WANDK',
'OrderDate': '1997-09-01T00:00:00.000Z',
'ShippedDate': '1997-09-11T00:00:00.000Z',
'Freight': 20.6,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10652,
'CustomerID': 'GOURL',
'OrderDate': '1997-09-01T00:00:00.000Z',
'ShippedDate': '1997-09-08T00:00:00.000Z',
'Freight': 7.14,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10653,
'CustomerID': 'FRANK',
'OrderDate': '1997-09-02T00:00:00.000Z',
'ShippedDate': '1997-09-19T00:00:00.000Z',
'Freight': 93.25,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10654,
'CustomerID': 'BERGS',
'OrderDate': '1997-09-02T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 398


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-09-11T00:00:00.000Z',
'Freight': 55.26,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10655,
'CustomerID': 'REGGC',
'OrderDate': '1997-09-03T00:00:00.000Z',
'ShippedDate': '1997-09-11T00:00:00.000Z',
'Freight': 4.41,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10656,
'CustomerID': 'GREAL',
'OrderDate': '1997-09-04T00:00:00.000Z',
'ShippedDate': '1997-09-10T00:00:00.000Z',
'Freight': 57.15,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10657,
'CustomerID': 'SAVEA',
'OrderDate': '1997-09-04T00:00:00.000Z',
'ShippedDate': '1997-09-15T00:00:00.000Z',
'Freight': 352.69,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10658,
'CustomerID': 'QUICK',
'OrderDate': '1997-09-05T00:00:00.000Z',
'ShippedDate': '1997-09-08T00:00:00.000Z',
'Freight': 364.15,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 399


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10659,
'CustomerID': 'QUEEN',
'OrderDate': '1997-09-05T00:00:00.000Z',
'ShippedDate': '1997-09-10T00:00:00.000Z',
'Freight': 105.81,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10660,
'CustomerID': 'HUNGC',
'OrderDate': '1997-09-08T00:00:00.000Z',
'ShippedDate': '1997-10-15T00:00:00.000Z',
'Freight': 111.29,
'ShipName': 'Hungry Coyote Import Store',
'ShipAddress': 'City Center Plaza 516 Main St.',
'ShipCity': 'Elgin',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10661,
'CustomerID': 'HUNGO',
'OrderDate': '1997-09-09T00:00:00.000Z',
'ShippedDate': '1997-09-15T00:00:00.000Z',
'Freight': 17.55,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10662,
'CustomerID': 'LONEP',
'OrderDate': '1997-09-09T00:00:00.000Z',
'ShippedDate': '1997-09-18T00:00:00.000Z',
'Freight': 1.28,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10663,
'CustomerID': 'BONAP',
'OrderDate': '1997-09-10T00:00:00.000Z',
'ShippedDate': '1997-10-03T00:00:00.000Z',
'Freight': 113.15,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 400


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'France'
},
{
'OrderID': 10664,
'CustomerID': 'FURIB',
'OrderDate': '1997-09-10T00:00:00.000Z',
'ShippedDate': '1997-09-19T00:00:00.000Z',
'Freight': 1.27,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10665,
'CustomerID': 'LONEP',
'OrderDate': '1997-09-11T00:00:00.000Z',
'ShippedDate': '1997-09-17T00:00:00.000Z',
'Freight': 26.31,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10666,
'CustomerID': 'RICSU',
'OrderDate': '1997-09-12T00:00:00.000Z',
'ShippedDate': '1997-09-22T00:00:00.000Z',
'Freight': 232.42,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10667,
'CustomerID': 'ERNSH',
'OrderDate': '1997-09-12T00:00:00.000Z',
'ShippedDate': '1997-09-19T00:00:00.000Z',
'Freight': 78.09,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10668,
'CustomerID': 'WANDK',
'OrderDate': '1997-09-15T00:00:00.000Z',
'ShippedDate': '1997-09-23T00:00:00.000Z',
'Freight': 47.22,
'ShipName': 'Die Wandernde Kuh',

Copyright © 2001 -2024 Syncfusion Inc. 401


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Adenauerallee 900',


'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10669,
'CustomerID': 'SIMOB',
'OrderDate': '1997-09-15T00:00:00.000Z',
'ShippedDate': '1997-09-22T00:00:00.000Z',
'Freight': 24.39,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10670,
'CustomerID': 'FRANK',
'OrderDate': '1997-09-16T00:00:00.000Z',
'ShippedDate': '1997-09-18T00:00:00.000Z',
'Freight': 203.48,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10671,
'CustomerID': 'FRANR',
'OrderDate': '1997-09-17T00:00:00.000Z',
'ShippedDate': '1997-09-24T00:00:00.000Z',
'Freight': 30.34,
'ShipName': 'France restauration',
'ShipAddress': '54, rue Royale',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10672,
'CustomerID': 'BERGS',
'OrderDate': '1997-09-17T00:00:00.000Z',
'ShippedDate': '1997-09-26T00:00:00.000Z',
'Freight': 95.75,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10673,
'CustomerID': 'WILMK',
'OrderDate': '1997-09-18T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 402


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-09-19T00:00:00.000Z',
'Freight': 22.76,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10674,
'CustomerID': 'ISLAT',
'OrderDate': '1997-09-18T00:00:00.000Z',
'ShippedDate': '1997-09-30T00:00:00.000Z',
'Freight': 0.9,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10675,
'CustomerID': 'FRANK',
'OrderDate': '1997-09-19T00:00:00.000Z',
'ShippedDate': '1997-09-23T00:00:00.000Z',
'Freight': 31.85,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10676,
'CustomerID': 'TORTU',
'OrderDate': '1997-09-22T00:00:00.000Z',
'ShippedDate': '1997-09-29T00:00:00.000Z',
'Freight': 2.01,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10677,
'CustomerID': 'ANTON',
'OrderDate': '1997-09-22T00:00:00.000Z',
'ShippedDate': '1997-09-26T00:00:00.000Z',
'Freight': 4.03,
'ShipName': 'Antonio Moreno Taquería',
'ShipAddress': 'Mataderos 2312',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 403


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10678,
'CustomerID': 'SAVEA',
'OrderDate': '1997-09-23T00:00:00.000Z',
'ShippedDate': '1997-10-16T00:00:00.000Z',
'Freight': 388.98,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10679,
'CustomerID': 'BLONP',
'OrderDate': '1997-09-23T00:00:00.000Z',
'ShippedDate': '1997-09-30T00:00:00.000Z',
'Freight': 27.94,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10680,
'CustomerID': 'OLDWO',
'OrderDate': '1997-09-24T00:00:00.000Z',
'ShippedDate': '1997-09-26T00:00:00.000Z',
'Freight': 26.61,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10681,
'CustomerID': 'GREAL',
'OrderDate': '1997-09-25T00:00:00.000Z',
'ShippedDate': '1997-09-30T00:00:00.000Z',
'Freight': 76.13,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10682,
'CustomerID': 'ANTON',
'OrderDate': '1997-09-25T00:00:00.000Z',
'ShippedDate': '1997-10-01T00:00:00.000Z',
'Freight': 36.13,
'ShipName': 'Antonio Moreno Taquería',
'ShipAddress': 'Mataderos 2312',
'ShipCity': 'México D.F.',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 404


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Mexico'
},
{
'OrderID': 10683,
'CustomerID': 'DUMON',
'OrderDate': '1997-09-26T00:00:00.000Z',
'ShippedDate': '1997-10-01T00:00:00.000Z',
'Freight': 4.4,
'ShipName': 'Du monde entier',
'ShipAddress': '67, rue des Cinquante Otages',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10684,
'CustomerID': 'OTTIK',
'OrderDate': '1997-09-26T00:00:00.000Z',
'ShippedDate': '1997-09-30T00:00:00.000Z',
'Freight': 145.63,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10685,
'CustomerID': 'GOURL',
'OrderDate': '1997-09-29T00:00:00.000Z',
'ShippedDate': '1997-10-03T00:00:00.000Z',
'Freight': 33.75,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10686,
'CustomerID': 'PICCO',
'OrderDate': '1997-09-30T00:00:00.000Z',
'ShippedDate': '1997-10-08T00:00:00.000Z',
'Freight': 96.5,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10687,
'CustomerID': 'HUNGO',
'OrderDate': '1997-09-30T00:00:00.000Z',
'ShippedDate': '1997-10-30T00:00:00.000Z',
'Freight': 296.43,
'ShipName': 'Hungry Owl All-Night Grocers',

Copyright © 2001 -2024 Syncfusion Inc. 405


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '8 Johnstown Road',


'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10688,
'CustomerID': 'VAFFE',
'OrderDate': '1997-10-01T00:00:00.000Z',
'ShippedDate': '1997-10-07T00:00:00.000Z',
'Freight': 299.09,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10689,
'CustomerID': 'BERGS',
'OrderDate': '1997-10-01T00:00:00.000Z',
'ShippedDate': '1997-10-07T00:00:00.000Z',
'Freight': 13.42,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10690,
'CustomerID': 'HANAR',
'OrderDate': '1997-10-02T00:00:00.000Z',
'ShippedDate': '1997-10-03T00:00:00.000Z',
'Freight': 15.8,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10691,
'CustomerID': 'QUICK',
'OrderDate': '1997-10-03T00:00:00.000Z',
'ShippedDate': '1997-10-22T00:00:00.000Z',
'Freight': 810.05,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10692,
'CustomerID': 'ALFKI',
'OrderDate': '1997-10-03T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 406


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-10-13T00:00:00.000Z',
'Freight': 61.02,
'ShipName': 'Alfred\' Futterkiste',
'ShipAddress': 'Obere Str. 57',
'ShipCity': 'Berlin',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10693,
'CustomerID': 'WHITC',
'OrderDate': '1997-10-06T00:00:00.000Z',
'ShippedDate': '1997-10-10T00:00:00.000Z',
'Freight': 139.34,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10694,
'CustomerID': 'QUICK',
'OrderDate': '1997-10-06T00:00:00.000Z',
'ShippedDate': '1997-10-09T00:00:00.000Z',
'Freight': 398.36,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10695,
'CustomerID': 'WILMK',
'OrderDate': '1997-10-07T00:00:00.000Z',
'ShippedDate': '1997-10-14T00:00:00.000Z',
'Freight': 16.72,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10696,
'CustomerID': 'WHITC',
'OrderDate': '1997-10-08T00:00:00.000Z',
'ShippedDate': '1997-10-14T00:00:00.000Z',
'Freight': 102.55,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 407


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10697,
'CustomerID': 'LINOD',
'OrderDate': '1997-10-08T00:00:00.000Z',
'ShippedDate': '1997-10-14T00:00:00.000Z',
'Freight': 45.52,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10698,
'CustomerID': 'ERNSH',
'OrderDate': '1997-10-09T00:00:00.000Z',
'ShippedDate': '1997-10-17T00:00:00.000Z',
'Freight': 272.47,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10699,
'CustomerID': 'MORGK',
'OrderDate': '1997-10-09T00:00:00.000Z',
'ShippedDate': '1997-10-13T00:00:00.000Z',
'Freight': 0.58,
'ShipName': 'Morgenstern Gesundkost',
'ShipAddress': 'Heerstr. 22',
'ShipCity': 'Leipzig',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10700,
'CustomerID': 'SAVEA',
'OrderDate': '1997-10-10T00:00:00.000Z',
'ShippedDate': '1997-10-16T00:00:00.000Z',
'Freight': 65.1,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10701,
'CustomerID': 'HUNGO',
'OrderDate': '1997-10-13T00:00:00.000Z',
'ShippedDate': '1997-10-15T00:00:00.000Z',
'Freight': 220.31,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',

Copyright © 2001 -2024 Syncfusion Inc. 408


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Ireland'
},
{
'OrderID': 10702,
'CustomerID': 'ALFKI',
'OrderDate': '1997-10-13T00:00:00.000Z',
'ShippedDate': '1997-10-21T00:00:00.000Z',
'Freight': 23.94,
'ShipName': 'Alfred\' Futterkiste',
'ShipAddress': 'Obere Str. 57',
'ShipCity': 'Berlin',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10703,
'CustomerID': 'FOLKO',
'OrderDate': '1997-10-14T00:00:00.000Z',
'ShippedDate': '1997-10-20T00:00:00.000Z',
'Freight': 152.3,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10704,
'CustomerID': 'QUEEN',
'OrderDate': '1997-10-14T00:00:00.000Z',
'ShippedDate': '1997-11-07T00:00:00.000Z',
'Freight': 4.78,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10705,
'CustomerID': 'HILAA',
'OrderDate': '1997-10-15T00:00:00.000Z',
'ShippedDate': '1997-11-18T00:00:00.000Z',
'Freight': 3.52,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10706,
'CustomerID': 'OLDWO',
'OrderDate': '1997-10-16T00:00:00.000Z',
'ShippedDate': '1997-10-21T00:00:00.000Z',
'Freight': 135.63,
'ShipName': 'Old World Delicatessen',

Copyright © 2001 -2024 Syncfusion Inc. 409


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '2743 Bering St.',


'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10707,
'CustomerID': 'AROUT',
'OrderDate': '1997-10-16T00:00:00.000Z',
'ShippedDate': '1997-10-23T00:00:00.000Z',
'Freight': 21.74,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10708,
'CustomerID': 'THEBI',
'OrderDate': '1997-10-17T00:00:00.000Z',
'ShippedDate': '1997-11-05T00:00:00.000Z',
'Freight': 2.96,
'ShipName': 'The Big Cheese',
'ShipAddress': '89 Jefferson Way Suite 2',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10709,
'CustomerID': 'GOURL',
'OrderDate': '1997-10-17T00:00:00.000Z',
'ShippedDate': '1997-11-20T00:00:00.000Z',
'Freight': 210.8,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10710,
'CustomerID': 'FRANS',
'OrderDate': '1997-10-20T00:00:00.000Z',
'ShippedDate': '1997-10-23T00:00:00.000Z',
'Freight': 4.98,
'ShipName': 'Franchi S.p.A.',
'ShipAddress': 'Via Monte Bianco 34',
'ShipCity': 'Torino',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10711,
'CustomerID': 'SAVEA',
'OrderDate': '1997-10-21T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 410


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-10-29T00:00:00.000Z',
'Freight': 52.41,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10712,
'CustomerID': 'HUNGO',
'OrderDate': '1997-10-21T00:00:00.000Z',
'ShippedDate': '1997-10-31T00:00:00.000Z',
'Freight': 89.93,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10713,
'CustomerID': 'SAVEA',
'OrderDate': '1997-10-22T00:00:00.000Z',
'ShippedDate': '1997-10-24T00:00:00.000Z',
'Freight': 167.05,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10714,
'CustomerID': 'SAVEA',
'OrderDate': '1997-10-22T00:00:00.000Z',
'ShippedDate': '1997-10-27T00:00:00.000Z',
'Freight': 24.49,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10715,
'CustomerID': 'BONAP',
'OrderDate': '1997-10-23T00:00:00.000Z',
'ShippedDate': '1997-10-29T00:00:00.000Z',
'Freight': 63.2,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 411


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10716,
'CustomerID': 'RANCH',
'OrderDate': '1997-10-24T00:00:00.000Z',
'ShippedDate': '1997-10-27T00:00:00.000Z',
'Freight': 22.57,
'ShipName': 'Rancho grande',
'ShipAddress': 'Av. del Libertador 900',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10717,
'CustomerID': 'FRANK',
'OrderDate': '1997-10-24T00:00:00.000Z',
'ShippedDate': '1997-10-29T00:00:00.000Z',
'Freight': 59.25,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10718,
'CustomerID': 'KOENE',
'OrderDate': '1997-10-27T00:00:00.000Z',
'ShippedDate': '1997-10-29T00:00:00.000Z',
'Freight': 170.88,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10719,
'CustomerID': 'LETSS',
'OrderDate': '1997-10-27T00:00:00.000Z',
'ShippedDate': '1997-11-05T00:00:00.000Z',
'Freight': 51.44,
'ShipName': 'Let\' Stop N Shop',
'ShipAddress': '87 Polk St. Suite 5',
'ShipCity': 'San Francisco',
'ShipRegion': 'CA',
'ShipCountry': 'USA'
},
{
'OrderID': 10720,
'CustomerID': 'QUEDE',
'OrderDate': '1997-10-28T00:00:00.000Z',
'ShippedDate': '1997-11-05T00:00:00.000Z',
'Freight': 9.53,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',

Copyright © 2001 -2024 Syncfusion Inc. 412


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Brazil'
},
{
'OrderID': 10721,
'CustomerID': 'QUICK',
'OrderDate': '1997-10-29T00:00:00.000Z',
'ShippedDate': '1997-10-31T00:00:00.000Z',
'Freight': 48.92,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10722,
'CustomerID': 'SAVEA',
'OrderDate': '1997-10-29T00:00:00.000Z',
'ShippedDate': '1997-11-04T00:00:00.000Z',
'Freight': 74.58,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10723,
'CustomerID': 'WHITC',
'OrderDate': '1997-10-30T00:00:00.000Z',
'ShippedDate': '1997-11-25T00:00:00.000Z',
'Freight': 21.72,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10724,
'CustomerID': 'MEREP',
'OrderDate': '1997-10-30T00:00:00.000Z',
'ShippedDate': '1997-11-05T00:00:00.000Z',
'Freight': 57.75,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10725,
'CustomerID': 'FAMIA',
'OrderDate': '1997-10-31T00:00:00.000Z',
'ShippedDate': '1997-11-05T00:00:00.000Z',
'Freight': 10.83,
'ShipName': 'Familia Arquibaldo',

Copyright © 2001 -2024 Syncfusion Inc. 413


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Rua Orós, 92',


'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10726,
'CustomerID': 'EASTC',
'OrderDate': '1997-11-03T00:00:00.000Z',
'ShippedDate': '1997-12-05T00:00:00.000Z',
'Freight': 16.56,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10727,
'CustomerID': 'REGGC',
'OrderDate': '1997-11-03T00:00:00.000Z',
'ShippedDate': '1997-12-05T00:00:00.000Z',
'Freight': 89.9,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10728,
'CustomerID': 'QUEEN',
'OrderDate': '1997-11-04T00:00:00.000Z',
'ShippedDate': '1997-11-11T00:00:00.000Z',
'Freight': 58.33,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10729,
'CustomerID': 'LINOD',
'OrderDate': '1997-11-04T00:00:00.000Z',
'ShippedDate': '1997-11-14T00:00:00.000Z',
'Freight': 141.06,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10730,
'CustomerID': 'BONAP',
'OrderDate': '1997-11-05T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 414


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-11-14T00:00:00.000Z',
'Freight': 20.12,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10731,
'CustomerID': 'CHOPS',
'OrderDate': '1997-11-06T00:00:00.000Z',
'ShippedDate': '1997-11-14T00:00:00.000Z',
'Freight': 96.65,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10732,
'CustomerID': 'BONAP',
'OrderDate': '1997-11-06T00:00:00.000Z',
'ShippedDate': '1997-11-07T00:00:00.000Z',
'Freight': 16.97,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10733,
'CustomerID': 'BERGS',
'OrderDate': '1997-11-07T00:00:00.000Z',
'ShippedDate': '1997-11-10T00:00:00.000Z',
'Freight': 110.11,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10734,
'CustomerID': 'GOURL',
'OrderDate': '1997-11-07T00:00:00.000Z',
'ShippedDate': '1997-11-12T00:00:00.000Z',
'Freight': 1.63,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 415


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10735,
'CustomerID': 'LETSS',
'OrderDate': '1997-11-10T00:00:00.000Z',
'ShippedDate': '1997-11-21T00:00:00.000Z',
'Freight': 45.97,
'ShipName': 'Let\' Stop N Shop',
'ShipAddress': '87 Polk St. Suite 5',
'ShipCity': 'San Francisco',
'ShipRegion': 'CA',
'ShipCountry': 'USA'
},
{
'OrderID': 10736,
'CustomerID': 'HUNGO',
'OrderDate': '1997-11-11T00:00:00.000Z',
'ShippedDate': '1997-11-21T00:00:00.000Z',
'Freight': 44.1,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10737,
'CustomerID': 'VINET',
'OrderDate': '1997-11-11T00:00:00.000Z',
'ShippedDate': '1997-11-18T00:00:00.000Z',
'Freight': 7.79,
'ShipName': 'Vins et alcools Chevalier',
'ShipAddress': '59 rue de l\'Abbaye',
'ShipCity': 'Reims',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10738,
'CustomerID': 'SPECD',
'OrderDate': '1997-11-12T00:00:00.000Z',
'ShippedDate': '1997-11-18T00:00:00.000Z',
'Freight': 2.91,
'ShipName': 'Spécialités du monde',
'ShipAddress': '25, rue Lauriston',
'ShipCity': 'Paris',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10739,
'CustomerID': 'VINET',
'OrderDate': '1997-11-12T00:00:00.000Z',
'ShippedDate': '1997-11-17T00:00:00.000Z',
'Freight': 11.08,
'ShipName': 'Vins et alcools Chevalier',
'ShipAddress': '59 rue de lAbbaye',
'ShipCity': 'Reims',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 416


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'France'
},
{
'OrderID': 10740,
'CustomerID': 'WHITC',
'OrderDate': '1997-11-13T00:00:00.000Z',
'ShippedDate': '1997-11-25T00:00:00.000Z',
'Freight': 81.88,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10741,
'CustomerID': 'AROUT',
'OrderDate': '1997-11-14T00:00:00.000Z',
'ShippedDate': '1997-11-18T00:00:00.000Z',
'Freight': 10.96,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10742,
'CustomerID': 'BOTTM',
'OrderDate': '1997-11-14T00:00:00.000Z',
'ShippedDate': '1997-11-18T00:00:00.000Z',
'Freight': 243.73,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10743,
'CustomerID': 'AROUT',
'OrderDate': '1997-11-17T00:00:00.000Z',
'ShippedDate': '1997-11-21T00:00:00.000Z',
'Freight': 23.72,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10744,
'CustomerID': 'VAFFE',
'OrderDate': '1997-11-17T00:00:00.000Z',
'ShippedDate': '1997-11-24T00:00:00.000Z',
'Freight': 69.19,
'ShipName': 'Vaffeljernet',

Copyright © 2001 -2024 Syncfusion Inc. 417


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Smagsloget 45',


'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10745,
'CustomerID': 'QUICK',
'OrderDate': '1997-11-18T00:00:00.000Z',
'ShippedDate': '1997-11-27T00:00:00.000Z',
'Freight': 3.52,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10746,
'CustomerID': 'CHOPS',
'OrderDate': '1997-11-19T00:00:00.000Z',
'ShippedDate': '1997-11-21T00:00:00.000Z',
'Freight': 31.43,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10747,
'CustomerID': 'PICCO',
'OrderDate': '1997-11-19T00:00:00.000Z',
'ShippedDate': '1997-11-26T00:00:00.000Z',
'Freight': 117.33,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10748,
'CustomerID': 'SAVEA',
'OrderDate': '1997-11-20T00:00:00.000Z',
'ShippedDate': '1997-11-28T00:00:00.000Z',
'Freight': 232.55,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10749,
'CustomerID': 'ISLAT',
'OrderDate': '1997-11-20T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 418


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-12-19T00:00:00.000Z',
'Freight': 61.53,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10750,
'CustomerID': 'WARTH',
'OrderDate': '1997-11-21T00:00:00.000Z',
'ShippedDate': '1997-11-24T00:00:00.000Z',
'Freight': 79.3,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10751,
'CustomerID': 'RICSU',
'OrderDate': '1997-11-24T00:00:00.000Z',
'ShippedDate': '1997-12-03T00:00:00.000Z',
'Freight': 130.79,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10752,
'CustomerID': 'NORTS',
'OrderDate': '1997-11-24T00:00:00.000Z',
'ShippedDate': '1997-11-28T00:00:00.000Z',
'Freight': 1.39,
'ShipName': 'North/South',
'ShipAddress': 'South House 300 Queensbridge',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10753,
'CustomerID': 'FRANS',
'OrderDate': '1997-11-25T00:00:00.000Z',
'ShippedDate': '1997-11-27T00:00:00.000Z',
'Freight': 7.7,
'ShipName': 'Franchi S.p.A.',
'ShipAddress': 'Via Monte Bianco 34',
'ShipCity': 'Torino',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 419


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10754,
'CustomerID': 'MAGAA',
'OrderDate': '1997-11-25T00:00:00.000Z',
'ShippedDate': '1997-11-27T00:00:00.000Z',
'Freight': 2.38,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10755,
'CustomerID': 'BONAP',
'OrderDate': '1997-11-26T00:00:00.000Z',
'ShippedDate': '1997-11-28T00:00:00.000Z',
'Freight': 16.71,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10756,
'CustomerID': 'SPLIR',
'OrderDate': '1997-11-27T00:00:00.000Z',
'ShippedDate': '1997-12-02T00:00:00.000Z',
'Freight': 73.21,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10757,
'CustomerID': 'SAVEA',
'OrderDate': '1997-11-27T00:00:00.000Z',
'ShippedDate': '1997-12-15T00:00:00.000Z',
'Freight': 8.19,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10758,
'CustomerID': 'RICSU',
'OrderDate': '1997-11-28T00:00:00.000Z',
'ShippedDate': '1997-12-04T00:00:00.000Z',
'Freight': 138.17,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 420


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Switzerland'
},
{
'OrderID': 10759,
'CustomerID': 'ANATR',
'OrderDate': '1997-11-28T00:00:00.000Z',
'ShippedDate': '1997-12-12T00:00:00.000Z',
'Freight': 11.99,
'ShipName': 'Ana Trujillo Emparedados y helados',
'ShipAddress': 'Avda. de la Constitución 2222',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10760,
'CustomerID': 'MAISD',
'OrderDate': '1997-12-01T00:00:00.000Z',
'ShippedDate': '1997-12-10T00:00:00.000Z',
'Freight': 155.64,
'ShipName': 'Maison Dewey',
'ShipAddress': 'Rue Joseph-Bens 532',
'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10761,
'CustomerID': 'RATTC',
'OrderDate': '1997-12-02T00:00:00.000Z',
'ShippedDate': '1997-12-08T00:00:00.000Z',
'Freight': 18.66,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10762,
'CustomerID': 'FOLKO',
'OrderDate': '1997-12-02T00:00:00.000Z',
'ShippedDate': '1997-12-09T00:00:00.000Z',
'Freight': 328.74,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10763,
'CustomerID': 'FOLIG',
'OrderDate': '1997-12-03T00:00:00.000Z',
'ShippedDate': '1997-12-08T00:00:00.000Z',
'Freight': 37.35,
'ShipName': 'Folies gourmandes',

Copyright © 2001 -2024 Syncfusion Inc. 421


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '184, chaussée de Tournai',


'ShipCity': 'Lille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10764,
'CustomerID': 'ERNSH',
'OrderDate': '1997-12-03T00:00:00.000Z',
'ShippedDate': '1997-12-08T00:00:00.000Z',
'Freight': 145.45,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10765,
'CustomerID': 'QUICK',
'OrderDate': '1997-12-04T00:00:00.000Z',
'ShippedDate': '1997-12-09T00:00:00.000Z',
'Freight': 42.74,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10766,
'CustomerID': 'OTTIK',
'OrderDate': '1997-12-05T00:00:00.000Z',
'ShippedDate': '1997-12-09T00:00:00.000Z',
'Freight': 157.55,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10767,
'CustomerID': 'SUPRD',
'OrderDate': '1997-12-05T00:00:00.000Z',
'ShippedDate': '1997-12-15T00:00:00.000Z',
'Freight': 1.59,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10768,
'CustomerID': 'AROUT',
'OrderDate': '1997-12-08T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 422


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-12-15T00:00:00.000Z',
'Freight': 146.32,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10769,
'CustomerID': 'VAFFE',
'OrderDate': '1997-12-08T00:00:00.000Z',
'ShippedDate': '1997-12-12T00:00:00.000Z',
'Freight': 65.06,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10770,
'CustomerID': 'HANAR',
'OrderDate': '1997-12-09T00:00:00.000Z',
'ShippedDate': '1997-12-17T00:00:00.000Z',
'Freight': 5.32,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10771,
'CustomerID': 'ERNSH',
'OrderDate': '1997-12-10T00:00:00.000Z',
'ShippedDate': '1998-01-02T00:00:00.000Z',
'Freight': 11.19,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10772,
'CustomerID': 'LEHMS',
'OrderDate': '1997-12-10T00:00:00.000Z',
'ShippedDate': '1997-12-19T00:00:00.000Z',
'Freight': 91.28,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 423


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10773,
'CustomerID': 'ERNSH',
'OrderDate': '1997-12-11T00:00:00.000Z',
'ShippedDate': '1997-12-16T00:00:00.000Z',
'Freight': 96.43,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10774,
'CustomerID': 'FOLKO',
'OrderDate': '1997-12-11T00:00:00.000Z',
'ShippedDate': '1997-12-12T00:00:00.000Z',
'Freight': 48.2,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10775,
'CustomerID': 'THECR',
'OrderDate': '1997-12-12T00:00:00.000Z',
'ShippedDate': '1997-12-26T00:00:00.000Z',
'Freight': 20.25,
'ShipName': 'The Cracker Box',
'ShipAddress': '55 Grizzly Peak Rd.',
'ShipCity': 'Butte',
'ShipRegion': 'MT',
'ShipCountry': 'USA'
},
{
'OrderID': 10776,
'CustomerID': 'ERNSH',
'OrderDate': '1997-12-15T00:00:00.000Z',
'ShippedDate': '1997-12-18T00:00:00.000Z',
'Freight': 351.53,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10777,
'CustomerID': 'GOURL',
'OrderDate': '1997-12-15T00:00:00.000Z',
'ShippedDate': '1998-01-21T00:00:00.000Z',
'Freight': 3.01,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',

Copyright © 2001 -2024 Syncfusion Inc. 424


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Brazil'
},
{
'OrderID': 10778,
'CustomerID': 'BERGS',
'OrderDate': '1997-12-16T00:00:00.000Z',
'ShippedDate': '1997-12-24T00:00:00.000Z',
'Freight': 6.79,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10779,
'CustomerID': 'MORGK',
'OrderDate': '1997-12-16T00:00:00.000Z',
'ShippedDate': '1998-01-14T00:00:00.000Z',
'Freight': 58.13,
'ShipName': 'Morgenstern Gesundkost',
'ShipAddress': 'Heerstr. 22',
'ShipCity': 'Leipzig',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10780,
'CustomerID': 'LILAS',
'OrderDate': '1997-12-16T00:00:00.000Z',
'ShippedDate': '1997-12-25T00:00:00.000Z',
'Freight': 42.13,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10781,
'CustomerID': 'WARTH',
'OrderDate': '1997-12-17T00:00:00.000Z',
'ShippedDate': '1997-12-19T00:00:00.000Z',
'Freight': 73.16,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10782,
'CustomerID': 'CACTU',
'OrderDate': '1997-12-17T00:00:00.000Z',
'ShippedDate': '1997-12-22T00:00:00.000Z',
'Freight': 1.1,
'ShipName': 'Cactus Comidas para llevar',

Copyright © 2001 -2024 Syncfusion Inc. 425


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Cerrito 333',


'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10783,
'CustomerID': 'HANAR',
'OrderDate': '1997-12-18T00:00:00.000Z',
'ShippedDate': '1997-12-19T00:00:00.000Z',
'Freight': 124.98,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10784,
'CustomerID': 'MAGAA',
'OrderDate': '1997-12-18T00:00:00.000Z',
'ShippedDate': '1997-12-22T00:00:00.000Z',
'Freight': 70.09,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10785,
'CustomerID': 'GROSR',
'OrderDate': '1997-12-18T00:00:00.000Z',
'ShippedDate': '1997-12-24T00:00:00.000Z',
'Freight': 1.51,
'ShipName': 'GROSELLA-Restaurante',
'ShipAddress': '5ª Ave. Los Palos Grandes',
'ShipCity': 'Caracas',
'ShipRegion': 'DF',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10786,
'CustomerID': 'QUEEN',
'OrderDate': '1997-12-19T00:00:00.000Z',
'ShippedDate': '1997-12-23T00:00:00.000Z',
'Freight': 110.87,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10787,
'CustomerID': 'LAMAI',
'OrderDate': '1997-12-19T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 426


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-12-26T00:00:00.000Z',
'Freight': 249.93,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10788,
'CustomerID': 'QUICK',
'OrderDate': '1997-12-22T00:00:00.000Z',
'ShippedDate': '1998-01-19T00:00:00.000Z',
'Freight': 42.7,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10789,
'CustomerID': 'FOLIG',
'OrderDate': '1997-12-22T00:00:00.000Z',
'ShippedDate': '1997-12-31T00:00:00.000Z',
'Freight': 100.6,
'ShipName': 'Folies gourmandes',
'ShipAddress': '184, chaussée de Tournai',
'ShipCity': 'Lille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10790,
'CustomerID': 'GOURL',
'OrderDate': '1997-12-22T00:00:00.000Z',
'ShippedDate': '1997-12-26T00:00:00.000Z',
'Freight': 28.23,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10791,
'CustomerID': 'FRANK',
'OrderDate': '1997-12-23T00:00:00.000Z',
'ShippedDate': '1998-01-01T00:00:00.000Z',
'Freight': 16.85,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 427


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10792,
'CustomerID': 'WOLZA',
'OrderDate': '1997-12-23T00:00:00.000Z',
'ShippedDate': '1997-12-31T00:00:00.000Z',
'Freight': 23.79,
'ShipName': 'Wolski Zajazd',
'ShipAddress': 'ul. Filtrowa 68',
'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 10793,
'CustomerID': 'AROUT',
'OrderDate': '1997-12-24T00:00:00.000Z',
'ShippedDate': '1998-01-08T00:00:00.000Z',
'Freight': 4.52,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10794,
'CustomerID': 'QUEDE',
'OrderDate': '1997-12-24T00:00:00.000Z',
'ShippedDate': '1998-01-02T00:00:00.000Z',
'Freight': 21.49,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10795,
'CustomerID': 'ERNSH',
'OrderDate': '1997-12-24T00:00:00.000Z',
'ShippedDate': '1998-01-20T00:00:00.000Z',
'Freight': 126.66,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10796,
'CustomerID': 'HILAA',
'OrderDate': '1997-12-25T00:00:00.000Z',
'ShippedDate': '1998-01-14T00:00:00.000Z',
'Freight': 26.52,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',

Copyright © 2001 -2024 Syncfusion Inc. 428


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Venezuela'
},
{
'OrderID': 10797,
'CustomerID': 'DRACD',
'OrderDate': '1997-12-25T00:00:00.000Z',
'ShippedDate': '1998-01-05T00:00:00.000Z',
'Freight': 33.35,
'ShipName': 'Drachenblut Delikatessen',
'ShipAddress': 'Walserweg 21',
'ShipCity': 'Aachen',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10798,
'CustomerID': 'ISLAT',
'OrderDate': '1997-12-26T00:00:00.000Z',
'ShippedDate': '1998-01-05T00:00:00.000Z',
'Freight': 2.33,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10799,
'CustomerID': 'KOENE',
'OrderDate': '1997-12-26T00:00:00.000Z',
'ShippedDate': '1998-01-05T00:00:00.000Z',
'Freight': 30.76,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10800,
'CustomerID': 'SEVES',
'OrderDate': '1997-12-26T00:00:00.000Z',
'ShippedDate': '1998-01-05T00:00:00.000Z',
'Freight': 137.44,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10801,
'CustomerID': 'BOLID',
'OrderDate': '1997-12-29T00:00:00.000Z',
'ShippedDate': '1997-12-31T00:00:00.000Z',
'Freight': 97.09,
'ShipName': 'Bólido Comidas preparadas',

Copyright © 2001 -2024 Syncfusion Inc. 429


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'C/ Araquil, 67',


'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10802,
'CustomerID': 'SIMOB',
'OrderDate': '1997-12-29T00:00:00.000Z',
'ShippedDate': '1998-01-02T00:00:00.000Z',
'Freight': 257.26,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10803,
'CustomerID': 'WELLI',
'OrderDate': '1997-12-30T00:00:00.000Z',
'ShippedDate': '1998-01-06T00:00:00.000Z',
'Freight': 55.23,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10804,
'CustomerID': 'SEVES',
'OrderDate': '1997-12-30T00:00:00.000Z',
'ShippedDate': '1998-01-07T00:00:00.000Z',
'Freight': 27.33,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10805,
'CustomerID': 'THEBI',
'OrderDate': '1997-12-30T00:00:00.000Z',
'ShippedDate': '1998-01-09T00:00:00.000Z',
'Freight': 237.34,
'ShipName': 'The Big Cheese',
'ShipAddress': '89 Jefferson Way Suite 2',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10806,
'CustomerID': 'VICTE',
'OrderDate': '1997-12-31T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 430


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-01-05T00:00:00.000Z',
'Freight': 22.11,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10807,
'CustomerID': 'FRANS',
'OrderDate': '1997-12-31T00:00:00.000Z',
'ShippedDate': '1998-01-30T00:00:00.000Z',
'Freight': 1.36,
'ShipName': 'Franchi S.p.A.',
'ShipAddress': 'Via Monte Bianco 34',
'ShipCity': 'Torino',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10808,
'CustomerID': 'OLDWO',
'OrderDate': '1998-01-01T00:00:00.000Z',
'ShippedDate': '1998-01-09T00:00:00.000Z',
'Freight': 45.53,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10809,
'CustomerID': 'WELLI',
'OrderDate': '1998-01-01T00:00:00.000Z',
'ShippedDate': '1998-01-07T00:00:00.000Z',
'Freight': 4.87,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10810,
'CustomerID': 'LAUGB',
'OrderDate': '1998-01-01T00:00:00.000Z',
'ShippedDate': '1998-01-07T00:00:00.000Z',
'Freight': 4.33,
'ShipName': 'Laughing Bacchus Wine Cellars',
'ShipAddress': '2319 Elm St.',
'ShipCity': 'Vancouver',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 431


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10811,
'CustomerID': 'LINOD',
'OrderDate': '1998-01-02T00:00:00.000Z',
'ShippedDate': '1998-01-08T00:00:00.000Z',
'Freight': 31.22,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10812,
'CustomerID': 'REGGC',
'OrderDate': '1998-01-02T00:00:00.000Z',
'ShippedDate': '1998-01-12T00:00:00.000Z',
'Freight': 59.78,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10813,
'CustomerID': 'RICAR',
'OrderDate': '1998-01-05T00:00:00.000Z',
'ShippedDate': '1998-01-09T00:00:00.000Z',
'Freight': 47.38,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10814,
'CustomerID': 'VICTE',
'OrderDate': '1998-01-05T00:00:00.000Z',
'ShippedDate': '1998-01-14T00:00:00.000Z',
'Freight': 130.94,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10815,
'CustomerID': 'SAVEA',
'OrderDate': '1998-01-05T00:00:00.000Z',
'ShippedDate': '1998-01-14T00:00:00.000Z',
'Freight': 14.62,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',

Copyright © 2001 -2024 Syncfusion Inc. 432


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'USA'
},
{
'OrderID': 10816,
'CustomerID': 'GREAL',
'OrderDate': '1998-01-06T00:00:00.000Z',
'ShippedDate': '1998-02-04T00:00:00.000Z',
'Freight': 719.78,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10817,
'CustomerID': 'KOENE',
'OrderDate': '1998-01-06T00:00:00.000Z',
'ShippedDate': '1998-01-13T00:00:00.000Z',
'Freight': 306.07,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10818,
'CustomerID': 'MAGAA',
'OrderDate': '1998-01-07T00:00:00.000Z',
'ShippedDate': '1998-01-12T00:00:00.000Z',
'Freight': 65.48,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10819,
'CustomerID': 'CACTU',
'OrderDate': '1998-01-07T00:00:00.000Z',
'ShippedDate': '1998-01-16T00:00:00.000Z',
'Freight': 19.76,
'ShipName': 'Cactus Comidas para llevar',
'ShipAddress': 'Cerrito 333',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10820,
'CustomerID': 'RATTC',
'OrderDate': '1998-01-07T00:00:00.000Z',
'ShippedDate': '1998-01-13T00:00:00.000Z',
'Freight': 37.52,
'ShipName': 'Rattlesnake Canyon Grocery',

Copyright © 2001 -2024 Syncfusion Inc. 433


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '2817 Milton Dr.',


'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10821,
'CustomerID': 'SPLIR',
'OrderDate': '1998-01-08T00:00:00.000Z',
'ShippedDate': '1998-01-15T00:00:00.000Z',
'Freight': 36.68,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10822,
'CustomerID': 'TRAIH',
'OrderDate': '1998-01-08T00:00:00.000Z',
'ShippedDate': '1998-01-16T00:00:00.000Z',
'Freight': 7,
'ShipName': 'Trail\' Head Gourmet Provisioners',
'ShipAddress': '722 DaVinci Blvd.',
'ShipCity': 'Kirkland',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10823,
'CustomerID': 'LILAS',
'OrderDate': '1998-01-09T00:00:00.000Z',
'ShippedDate': '1998-01-13T00:00:00.000Z',
'Freight': 163.97,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10824,
'CustomerID': 'FOLKO',
'OrderDate': '1998-01-09T00:00:00.000Z',
'ShippedDate': '1998-01-30T00:00:00.000Z',
'Freight': 1.23,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10825,
'CustomerID': 'DRACD',
'OrderDate': '1998-01-09T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 434


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-01-14T00:00:00.000Z',
'Freight': 79.25,
'ShipName': 'Drachenblut Delikatessen',
'ShipAddress': 'Walserweg 21',
'ShipCity': 'Aachen',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10826,
'CustomerID': 'BLONP',
'OrderDate': '1998-01-12T00:00:00.000Z',
'ShippedDate': '1998-02-06T00:00:00.000Z',
'Freight': 7.09,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10827,
'CustomerID': 'BONAP',
'OrderDate': '1998-01-12T00:00:00.000Z',
'ShippedDate': '1998-02-06T00:00:00.000Z',
'Freight': 63.54,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10828,
'CustomerID': 'RANCH',
'OrderDate': '1998-01-13T00:00:00.000Z',
'ShippedDate': '1998-02-04T00:00:00.000Z',
'Freight': 90.85,
'ShipName': 'Rancho grande',
'ShipAddress': 'Av. del Libertador 900',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10829,
'CustomerID': 'ISLAT',
'OrderDate': '1998-01-13T00:00:00.000Z',
'ShippedDate': '1998-01-23T00:00:00.000Z',
'Freight': 154.72,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 435


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10830,
'CustomerID': 'TRADH',
'OrderDate': '1998-01-13T00:00:00.000Z',
'ShippedDate': '1998-01-21T00:00:00.000Z',
'Freight': 81.83,
'ShipName': 'Tradiçao Hipermercados',
'ShipAddress': 'Av. Inês de Castro, 414',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10831,
'CustomerID': 'SANTG',
'OrderDate': '1998-01-14T00:00:00.000Z',
'ShippedDate': '1998-01-23T00:00:00.000Z',
'Freight': 72.19,
'ShipName': 'Santé Gourmet',
'ShipAddress': 'Erling Skakkes gate 78',
'ShipCity': 'Stavern',
'ShipRegion': null,
'ShipCountry': 'Norway'
},
{
'OrderID': 10832,
'CustomerID': 'LAMAI',
'OrderDate': '1998-01-14T00:00:00.000Z',
'ShippedDate': '1998-01-19T00:00:00.000Z',
'Freight': 43.26,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10833,
'CustomerID': 'OTTIK',
'OrderDate': '1998-01-15T00:00:00.000Z',
'ShippedDate': '1998-01-23T00:00:00.000Z',
'Freight': 71.49,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10834,
'CustomerID': 'TRADH',
'OrderDate': '1998-01-15T00:00:00.000Z',
'ShippedDate': '1998-01-19T00:00:00.000Z',
'Freight': 29.78,
'ShipName': 'Tradiçao Hipermercados',
'ShipAddress': 'Av. Inês de Castro, 414',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',

Copyright © 2001 -2024 Syncfusion Inc. 436


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Brazil'
},
{
'OrderID': 10835,
'CustomerID': 'ALFKI',
'OrderDate': '1998-01-15T00:00:00.000Z',
'ShippedDate': '1998-01-21T00:00:00.000Z',
'Freight': 69.53,
'ShipName': 'Alfred\' Futterkiste',
'ShipAddress': 'Obere Str. 57',
'ShipCity': 'Berlin',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10836,
'CustomerID': 'ERNSH',
'OrderDate': '1998-01-16T00:00:00.000Z',
'ShippedDate': '1998-01-21T00:00:00.000Z',
'Freight': 411.88,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10837,
'CustomerID': 'BERGS',
'OrderDate': '1998-01-16T00:00:00.000Z',
'ShippedDate': '1998-01-23T00:00:00.000Z',
'Freight': 13.32,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10838,
'CustomerID': 'LINOD',
'OrderDate': '1998-01-19T00:00:00.000Z',
'ShippedDate': '1998-01-23T00:00:00.000Z',
'Freight': 59.28,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10839,
'CustomerID': 'TRADH',
'OrderDate': '1998-01-19T00:00:00.000Z',
'ShippedDate': '1998-01-22T00:00:00.000Z',
'Freight': 35.43,
'ShipName': 'Tradiçao Hipermercados',

Copyright © 2001 -2024 Syncfusion Inc. 437


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Av. Inês de Castro, 414',


'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10840,
'CustomerID': 'LINOD',
'OrderDate': '1998-01-19T00:00:00.000Z',
'ShippedDate': '1998-02-16T00:00:00.000Z',
'Freight': 2.71,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10841,
'CustomerID': 'SUPRD',
'OrderDate': '1998-01-20T00:00:00.000Z',
'ShippedDate': '1998-01-29T00:00:00.000Z',
'Freight': 424.3,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10842,
'CustomerID': 'TORTU',
'OrderDate': '1998-01-20T00:00:00.000Z',
'ShippedDate': '1998-01-29T00:00:00.000Z',
'Freight': 54.42,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10843,
'CustomerID': 'VICTE',
'OrderDate': '1998-01-21T00:00:00.000Z',
'ShippedDate': '1998-01-26T00:00:00.000Z',
'Freight': 9.26,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10844,
'CustomerID': 'PICCO',
'OrderDate': '1998-01-21T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 438


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-01-26T00:00:00.000Z',
'Freight': 25.22,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10845,
'CustomerID': 'QUICK',
'OrderDate': '1998-01-21T00:00:00.000Z',
'ShippedDate': '1998-01-30T00:00:00.000Z',
'Freight': 212.98,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10846,
'CustomerID': 'SUPRD',
'OrderDate': '1998-01-22T00:00:00.000Z',
'ShippedDate': '1998-01-23T00:00:00.000Z',
'Freight': 56.46,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10847,
'CustomerID': 'SAVEA',
'OrderDate': '1998-01-22T00:00:00.000Z',
'ShippedDate': '1998-02-10T00:00:00.000Z',
'Freight': 487.57,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10848,
'CustomerID': 'CONSH',
'OrderDate': '1998-01-23T00:00:00.000Z',
'ShippedDate': '1998-01-29T00:00:00.000Z',
'Freight': 38.24,
'ShipName': 'Consolidated Holdings',
'ShipAddress': 'Berkeley Gardens 12 Brewery',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 439


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10849,
'CustomerID': 'KOENE',
'OrderDate': '1998-01-23T00:00:00.000Z',
'ShippedDate': '1998-01-30T00:00:00.000Z',
'Freight': 0.56,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10850,
'CustomerID': 'VICTE',
'OrderDate': '1998-01-23T00:00:00.000Z',
'ShippedDate': '1998-01-30T00:00:00.000Z',
'Freight': 49.19,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10851,
'CustomerID': 'RICAR',
'OrderDate': '1998-01-26T00:00:00.000Z',
'ShippedDate': '1998-02-02T00:00:00.000Z',
'Freight': 160.55,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10852,
'CustomerID': 'RATTC',
'OrderDate': '1998-01-26T00:00:00.000Z',
'ShippedDate': '1998-01-30T00:00:00.000Z',
'Freight': 174.05,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10853,
'CustomerID': 'BLAUS',
'OrderDate': '1998-01-27T00:00:00.000Z',
'ShippedDate': '1998-02-03T00:00:00.000Z',
'Freight': 53.83,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 440


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Germany'
},
{
'OrderID': 10854,
'CustomerID': 'ERNSH',
'OrderDate': '1998-01-27T00:00:00.000Z',
'ShippedDate': '1998-02-05T00:00:00.000Z',
'Freight': 100.22,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10855,
'CustomerID': 'OLDWO',
'OrderDate': '1998-01-27T00:00:00.000Z',
'ShippedDate': '1998-02-04T00:00:00.000Z',
'Freight': 170.97,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10856,
'CustomerID': 'ANTON',
'OrderDate': '1998-01-28T00:00:00.000Z',
'ShippedDate': '1998-02-10T00:00:00.000Z',
'Freight': 58.43,
'ShipName': 'Antonio Moreno Taquería',
'ShipAddress': 'Mataderos 2312',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10857,
'CustomerID': 'BERGS',
'OrderDate': '1998-01-28T00:00:00.000Z',
'ShippedDate': '1998-02-06T00:00:00.000Z',
'Freight': 188.85,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10858,
'CustomerID': 'LACOR',
'OrderDate': '1998-01-29T00:00:00.000Z',
'ShippedDate': '1998-02-03T00:00:00.000Z',
'Freight': 52.51,
'ShipName': 'La corne d\'abondance',

Copyright © 2001 -2024 Syncfusion Inc. 441


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '67, avenue de l\'Europe',


'ShipCity': 'Versailles',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10859,
'CustomerID': 'FRANK',
'OrderDate': '1998-01-29T00:00:00.000Z',
'ShippedDate': '1998-02-02T00:00:00.000Z',
'Freight': 76.1,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10860,
'CustomerID': 'FRANR',
'OrderDate': '1998-01-29T00:00:00.000Z',
'ShippedDate': '1998-02-04T00:00:00.000Z',
'Freight': 19.26,
'ShipName': 'France restauration',
'ShipAddress': '54, rue Royale',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10861,
'CustomerID': 'WHITC',
'OrderDate': '1998-01-30T00:00:00.000Z',
'ShippedDate': '1998-02-17T00:00:00.000Z',
'Freight': 14.93,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10862,
'CustomerID': 'LEHMS',
'OrderDate': '1998-01-30T00:00:00.000Z',
'ShippedDate': '1998-02-02T00:00:00.000Z',
'Freight': 53.23,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10863,
'CustomerID': 'HILAA',
'OrderDate': '1998-02-02T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 442


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-02-17T00:00:00.000Z',
'Freight': 30.26,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10864,
'CustomerID': 'AROUT',
'OrderDate': '1998-02-02T00:00:00.000Z',
'ShippedDate': '1998-02-09T00:00:00.000Z',
'Freight': 3.04,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10865,
'CustomerID': 'QUICK',
'OrderDate': '1998-02-02T00:00:00.000Z',
'ShippedDate': '1998-02-12T00:00:00.000Z',
'Freight': 348.14,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10866,
'CustomerID': 'BERGS',
'OrderDate': '1998-02-03T00:00:00.000Z',
'ShippedDate': '1998-02-12T00:00:00.000Z',
'Freight': 109.11,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10867,
'CustomerID': 'LONEP',
'OrderDate': '1998-02-03T00:00:00.000Z',
'ShippedDate': '1998-02-11T00:00:00.000Z',
'Freight': 1.93,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 443


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10868,
'CustomerID': 'QUEEN',
'OrderDate': '1998-02-04T00:00:00.000Z',
'ShippedDate': '1998-02-23T00:00:00.000Z',
'Freight': 191.27,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10869,
'CustomerID': 'SEVES',
'OrderDate': '1998-02-04T00:00:00.000Z',
'ShippedDate': '1998-02-09T00:00:00.000Z',
'Freight': 143.28,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10870,
'CustomerID': 'WOLZA',
'OrderDate': '1998-02-04T00:00:00.000Z',
'ShippedDate': '1998-02-13T00:00:00.000Z',
'Freight': 12.04,
'ShipName': 'Wolski Zajazd',
'ShipAddress': 'ul. Filtrowa 68',
'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 10871,
'CustomerID': 'BONAP',
'OrderDate': '1998-02-05T00:00:00.000Z',
'ShippedDate': '1998-02-10T00:00:00.000Z',
'Freight': 112.27,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10872,
'CustomerID': 'GODOS',
'OrderDate': '1998-02-05T00:00:00.000Z',
'ShippedDate': '1998-02-09T00:00:00.000Z',
'Freight': 175.32,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 444


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Spain'
},
{
'OrderID': 10873,
'CustomerID': 'WILMK',
'OrderDate': '1998-02-06T00:00:00.000Z',
'ShippedDate': '1998-02-09T00:00:00.000Z',
'Freight': 0.82,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10874,
'CustomerID': 'GODOS',
'OrderDate': '1998-02-06T00:00:00.000Z',
'ShippedDate': '1998-02-11T00:00:00.000Z',
'Freight': 19.58,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10875,
'CustomerID': 'BERGS',
'OrderDate': '1998-02-06T00:00:00.000Z',
'ShippedDate': '1998-03-03T00:00:00.000Z',
'Freight': 32.37,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10876,
'CustomerID': 'BONAP',
'OrderDate': '1998-02-09T00:00:00.000Z',
'ShippedDate': '1998-02-12T00:00:00.000Z',
'Freight': 60.42,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10877,
'CustomerID': 'RICAR',
'OrderDate': '1998-02-09T00:00:00.000Z',
'ShippedDate': '1998-02-19T00:00:00.000Z',
'Freight': 38.06,
'ShipName': 'Ricardo Adocicados',

Copyright © 2001 -2024 Syncfusion Inc. 445


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Av. Copacabana, 267',


'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10878,
'CustomerID': 'QUICK',
'OrderDate': '1998-02-10T00:00:00.000Z',
'ShippedDate': '1998-02-12T00:00:00.000Z',
'Freight': 46.69,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10879,
'CustomerID': 'WILMK',
'OrderDate': '1998-02-10T00:00:00.000Z',
'ShippedDate': '1998-02-12T00:00:00.000Z',
'Freight': 8.5,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10880,
'CustomerID': 'FOLKO',
'OrderDate': '1998-02-10T00:00:00.000Z',
'ShippedDate': '1998-02-18T00:00:00.000Z',
'Freight': 88.01,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10881,
'CustomerID': 'CACTU',
'OrderDate': '1998-02-11T00:00:00.000Z',
'ShippedDate': '1998-02-18T00:00:00.000Z',
'Freight': 2.84,
'ShipName': 'Cactus Comidas para llevar',
'ShipAddress': 'Cerrito 333',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10882,
'CustomerID': 'SAVEA',
'OrderDate': '1998-02-11T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 446


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-02-20T00:00:00.000Z',
'Freight': 23.1,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10883,
'CustomerID': 'LONEP',
'OrderDate': '1998-02-12T00:00:00.000Z',
'ShippedDate': '1998-02-20T00:00:00.000Z',
'Freight': 0.53,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10884,
'CustomerID': 'LETSS',
'OrderDate': '1998-02-12T00:00:00.000Z',
'ShippedDate': '1998-02-13T00:00:00.000Z',
'Freight': 90.97,
'ShipName': 'Let\' Stop N Shop',
'ShipAddress': '87 Polk St. Suite 5',
'ShipCity': 'San Francisco',
'ShipRegion': 'CA',
'ShipCountry': 'USA'
},
{
'OrderID': 10885,
'CustomerID': 'SUPRD',
'OrderDate': '1998-02-12T00:00:00.000Z',
'ShippedDate': '1998-02-18T00:00:00.000Z',
'Freight': 5.64,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10886,
'CustomerID': 'HANAR',
'OrderDate': '1998-02-13T00:00:00.000Z',
'ShippedDate': '1998-03-02T00:00:00.000Z',
'Freight': 4.99,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 447


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10887,
'CustomerID': 'GALED',
'OrderDate': '1998-02-13T00:00:00.000Z',
'ShippedDate': '1998-02-16T00:00:00.000Z',
'Freight': 1.25,
'ShipName': 'Galería del gastronómo',
'ShipAddress': 'Rambla de Cataluña, 23',
'ShipCity': 'Barcelona',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10888,
'CustomerID': 'GODOS',
'OrderDate': '1998-02-16T00:00:00.000Z',
'ShippedDate': '1998-02-23T00:00:00.000Z',
'Freight': 51.87,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10889,
'CustomerID': 'RATTC',
'OrderDate': '1998-02-16T00:00:00.000Z',
'ShippedDate': '1998-02-23T00:00:00.000Z',
'Freight': 280.61,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10890,
'CustomerID': 'DUMON',
'OrderDate': '1998-02-16T00:00:00.000Z',
'ShippedDate': '1998-02-18T00:00:00.000Z',
'Freight': 32.76,
'ShipName': 'Du monde entier',
'ShipAddress': '67, rue des Cinquante Otages',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10891,
'CustomerID': 'LEHMS',
'OrderDate': '1998-02-17T00:00:00.000Z',
'ShippedDate': '1998-02-19T00:00:00.000Z',
'Freight': 20.37,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 448


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Germany'
},
{
'OrderID': 10892,
'CustomerID': 'MAISD',
'OrderDate': '1998-02-17T00:00:00.000Z',
'ShippedDate': '1998-02-19T00:00:00.000Z',
'Freight': 120.27,
'ShipName': 'Maison Dewey',
'ShipAddress': 'Rue Joseph-Bens 532',
'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10893,
'CustomerID': 'KOENE',
'OrderDate': '1998-02-18T00:00:00.000Z',
'ShippedDate': '1998-02-20T00:00:00.000Z',
'Freight': 77.78,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10894,
'CustomerID': 'SAVEA',
'OrderDate': '1998-02-18T00:00:00.000Z',
'ShippedDate': '1998-02-20T00:00:00.000Z',
'Freight': 116.13,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10895,
'CustomerID': 'ERNSH',
'OrderDate': '1998-02-18T00:00:00.000Z',
'ShippedDate': '1998-02-23T00:00:00.000Z',
'Freight': 162.75,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10896,
'CustomerID': 'MAISD',
'OrderDate': '1998-02-19T00:00:00.000Z',
'ShippedDate': '1998-02-27T00:00:00.000Z',
'Freight': 32.45,
'ShipName': 'Maison Dewey',

Copyright © 2001 -2024 Syncfusion Inc. 449


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Rue Joseph-Bens 532',


'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10897,
'CustomerID': 'HUNGO',
'OrderDate': '1998-02-19T00:00:00.000Z',
'ShippedDate': '1998-02-25T00:00:00.000Z',
'Freight': 603.54,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10898,
'CustomerID': 'OCEAN',
'OrderDate': '1998-02-20T00:00:00.000Z',
'ShippedDate': '1998-03-06T00:00:00.000Z',
'Freight': 1.27,
'ShipName': 'Océano Atlántico Ltda.',
'ShipAddress': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10899,
'CustomerID': 'LILAS',
'OrderDate': '1998-02-20T00:00:00.000Z',
'ShippedDate': '1998-02-26T00:00:00.000Z',
'Freight': 1.21,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10900,
'CustomerID': 'WELLI',
'OrderDate': '1998-02-20T00:00:00.000Z',
'ShippedDate': '1998-03-04T00:00:00.000Z',
'Freight': 1.66,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10901,
'CustomerID': 'HILAA',
'OrderDate': '1998-02-23T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 450


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-02-26T00:00:00.000Z',
'Freight': 62.09,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10902,
'CustomerID': 'FOLKO',
'OrderDate': '1998-02-23T00:00:00.000Z',
'ShippedDate': '1998-03-03T00:00:00.000Z',
'Freight': 44.15,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10903,
'CustomerID': 'HANAR',
'OrderDate': '1998-02-24T00:00:00.000Z',
'ShippedDate': '1998-03-04T00:00:00.000Z',
'Freight': 36.71,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10904,
'CustomerID': 'WHITC',
'OrderDate': '1998-02-24T00:00:00.000Z',
'ShippedDate': '1998-02-27T00:00:00.000Z',
'Freight': 162.95,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10905,
'CustomerID': 'WELLI',
'OrderDate': '1998-02-24T00:00:00.000Z',
'ShippedDate': '1998-03-06T00:00:00.000Z',
'Freight': 13.72,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 451


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10906,
'CustomerID': 'WOLZA',
'OrderDate': '1998-02-25T00:00:00.000Z',
'ShippedDate': '1998-03-03T00:00:00.000Z',
'Freight': 26.29,
'ShipName': 'Wolski Zajazd',
'ShipAddress': 'ul. Filtrowa 68',
'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 10907,
'CustomerID': 'SPECD',
'OrderDate': '1998-02-25T00:00:00.000Z',
'ShippedDate': '1998-02-27T00:00:00.000Z',
'Freight': 9.19,
'ShipName': 'Spécialités du monde',
'ShipAddress': '25, rue Lauriston',
'ShipCity': 'Paris',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10908,
'CustomerID': 'REGGC',
'OrderDate': '1998-02-26T00:00:00.000Z',
'ShippedDate': '1998-03-06T00:00:00.000Z',
'Freight': 32.96,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10909,
'CustomerID': 'SANTG',
'OrderDate': '1998-02-26T00:00:00.000Z',
'ShippedDate': '1998-03-10T00:00:00.000Z',
'Freight': 53.05,
'ShipName': 'Santé Gourmet',
'ShipAddress': 'Erling Skakkes gate 78',
'ShipCity': 'Stavern',
'ShipRegion': null,
'ShipCountry': 'Norway'
},
{
'OrderID': 10910,
'CustomerID': 'WILMK',
'OrderDate': '1998-02-26T00:00:00.000Z',
'ShippedDate': '1998-03-04T00:00:00.000Z',
'Freight': 38.11,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 452


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Finland'
},
{
'OrderID': 10911,
'CustomerID': 'GODOS',
'OrderDate': '1998-02-26T00:00:00.000Z',
'ShippedDate': '1998-03-05T00:00:00.000Z',
'Freight': 38.19,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10912,
'CustomerID': 'HUNGO',
'OrderDate': '1998-02-26T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 580.91,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10913,
'CustomerID': 'QUEEN',
'OrderDate': '1998-02-26T00:00:00.000Z',
'ShippedDate': '1998-03-04T00:00:00.000Z',
'Freight': 33.05,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10914,
'CustomerID': 'QUEEN',
'OrderDate': '1998-02-27T00:00:00.000Z',
'ShippedDate': '1998-03-02T00:00:00.000Z',
'Freight': 21.19,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10915,
'CustomerID': 'TORTU',
'OrderDate': '1998-02-27T00:00:00.000Z',
'ShippedDate': '1998-03-02T00:00:00.000Z',
'Freight': 3.51,
'ShipName': 'Tortuga Restaurante',

Copyright © 2001 -2024 Syncfusion Inc. 453


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Avda. Azteca 123',


'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10916,
'CustomerID': 'RANCH',
'OrderDate': '1998-02-27T00:00:00.000Z',
'ShippedDate': '1998-03-09T00:00:00.000Z',
'Freight': 63.77,
'ShipName': 'Rancho grande',
'ShipAddress': 'Av. del Libertador 900',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10917,
'CustomerID': 'ROMEY',
'OrderDate': '1998-03-02T00:00:00.000Z',
'ShippedDate': '1998-03-11T00:00:00.000Z',
'Freight': 8.29,
'ShipName': 'Romero y tomillo',
'ShipAddress': 'Gran Vía, 1',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10918,
'CustomerID': 'BOTTM',
'OrderDate': '1998-03-02T00:00:00.000Z',
'ShippedDate': '1998-03-11T00:00:00.000Z',
'Freight': 48.83,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10919,
'CustomerID': 'LINOD',
'OrderDate': '1998-03-02T00:00:00.000Z',
'ShippedDate': '1998-03-04T00:00:00.000Z',
'Freight': 19.8,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10920,
'CustomerID': 'AROUT',
'OrderDate': '1998-03-03T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 454


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-03-09T00:00:00.000Z',
'Freight': 29.61,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10921,
'CustomerID': 'VAFFE',
'OrderDate': '1998-03-03T00:00:00.000Z',
'ShippedDate': '1998-03-09T00:00:00.000Z',
'Freight': 176.48,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10922,
'CustomerID': 'HANAR',
'OrderDate': '1998-03-03T00:00:00.000Z',
'ShippedDate': '1998-03-05T00:00:00.000Z',
'Freight': 62.74,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10923,
'CustomerID': 'LAMAI',
'OrderDate': '1998-03-03T00:00:00.000Z',
'ShippedDate': '1998-03-13T00:00:00.000Z',
'Freight': 68.26,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10924,
'CustomerID': 'BERGS',
'OrderDate': '1998-03-04T00:00:00.000Z',
'ShippedDate': '1998-04-08T00:00:00.000Z',
'Freight': 151.52,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 455


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10925,
'CustomerID': 'HANAR',
'OrderDate': '1998-03-04T00:00:00.000Z',
'ShippedDate': '1998-03-13T00:00:00.000Z',
'Freight': 2.27,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10926,
'CustomerID': 'ANATR',
'OrderDate': '1998-03-04T00:00:00.000Z',
'ShippedDate': '1998-03-11T00:00:00.000Z',
'Freight': 39.92,
'ShipName': 'Ana Trujillo Emparedados y helados',
'ShipAddress': 'Avda. de la Constitución 2222',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10927,
'CustomerID': 'LACOR',
'OrderDate': '1998-03-05T00:00:00.000Z',
'ShippedDate': '1998-04-08T00:00:00.000Z',
'Freight': 19.79,
'ShipName': 'La corne d\'abondance',
'ShipAddress': '67, avenue de l\'Europe',
'ShipCity': 'Versailles',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10928,
'CustomerID': 'GALED',
'OrderDate': '1998-03-05T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 1.36,
'ShipName': 'Galería del gastronómo',
'ShipAddress': 'Rambla de Cataluña, 23',
'ShipCity': 'Barcelona',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10929,
'CustomerID': 'FRANK',
'OrderDate': '1998-03-05T00:00:00.000Z',
'ShippedDate': '1998-03-12T00:00:00.000Z',
'Freight': 33.93,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 456


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Germany'
},
{
'OrderID': 10930,
'CustomerID': 'SUPRD',
'OrderDate': '1998-03-06T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 15.55,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10931,
'CustomerID': 'RICSU',
'OrderDate': '1998-03-06T00:00:00.000Z',
'ShippedDate': '1998-03-19T00:00:00.000Z',
'Freight': 13.6,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10932,
'CustomerID': 'BONAP',
'OrderDate': '1998-03-06T00:00:00.000Z',
'ShippedDate': '1998-03-24T00:00:00.000Z',
'Freight': 134.64,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10933,
'CustomerID': 'ISLAT',
'OrderDate': '1998-03-06T00:00:00.000Z',
'ShippedDate': '1998-03-16T00:00:00.000Z',
'Freight': 54.15,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10934,
'CustomerID': 'LEHMS',
'OrderDate': '1998-03-09T00:00:00.000Z',
'ShippedDate': '1998-03-12T00:00:00.000Z',
'Freight': 32.01,
'ShipName': 'Lehmanns Marktstand',

Copyright © 2001 -2024 Syncfusion Inc. 457


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Magazinweg 7',


'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10935,
'CustomerID': 'WELLI',
'OrderDate': '1998-03-09T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 47.59,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10936,
'CustomerID': 'GREAL',
'OrderDate': '1998-03-09T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 33.68,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10937,
'CustomerID': 'CACTU',
'OrderDate': '1998-03-10T00:00:00.000Z',
'ShippedDate': '1998-03-13T00:00:00.000Z',
'Freight': 31.51,
'ShipName': 'Cactus Comidas para llevar',
'ShipAddress': 'Cerrito 333',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10938,
'CustomerID': 'QUICK',
'OrderDate': '1998-03-10T00:00:00.000Z',
'ShippedDate': '1998-03-16T00:00:00.000Z',
'Freight': 31.89,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10939,
'CustomerID': 'MAGAA',
'OrderDate': '1998-03-10T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 458


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-03-13T00:00:00.000Z',
'Freight': 76.33,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10940,
'CustomerID': 'BONAP',
'OrderDate': '1998-03-11T00:00:00.000Z',
'ShippedDate': '1998-03-23T00:00:00.000Z',
'Freight': 19.77,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10941,
'CustomerID': 'SAVEA',
'OrderDate': '1998-03-11T00:00:00.000Z',
'ShippedDate': '1998-03-20T00:00:00.000Z',
'Freight': 400.81,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10942,
'CustomerID': 'REGGC',
'OrderDate': '1998-03-11T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 17.95,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10943,
'CustomerID': 'BSBEV',
'OrderDate': '1998-03-11T00:00:00.000Z',
'ShippedDate': '1998-03-19T00:00:00.000Z',
'Freight': 2.17,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 459


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10944,
'CustomerID': 'BOTTM',
'OrderDate': '1998-03-12T00:00:00.000Z',
'ShippedDate': '1998-03-13T00:00:00.000Z',
'Freight': 52.92,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10945,
'CustomerID': 'MORGK',
'OrderDate': '1998-03-12T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 10.22,
'ShipName': 'Morgenstern Gesundkost',
'ShipAddress': 'Heerstr. 22',
'ShipCity': 'Leipzig',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10946,
'CustomerID': 'VAFFE',
'OrderDate': '1998-03-12T00:00:00.000Z',
'ShippedDate': '1998-03-19T00:00:00.000Z',
'Freight': 27.2,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10947,
'CustomerID': 'BSBEV',
'OrderDate': '1998-03-13T00:00:00.000Z',
'ShippedDate': '1998-03-16T00:00:00.000Z',
'Freight': 3.26,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10948,
'CustomerID': 'GODOS',
'OrderDate': '1998-03-13T00:00:00.000Z',
'ShippedDate': '1998-03-19T00:00:00.000Z',
'Freight': 23.39,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 460


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Spain'
},
{
'OrderID': 10949,
'CustomerID': 'BOTTM',
'OrderDate': '1998-03-13T00:00:00.000Z',
'ShippedDate': '1998-03-17T00:00:00.000Z',
'Freight': 74.44,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10950,
'CustomerID': 'MAGAA',
'OrderDate': '1998-03-16T00:00:00.000Z',
'ShippedDate': '1998-03-23T00:00:00.000Z',
'Freight': 2.5,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10951,
'CustomerID': 'RICSU',
'OrderDate': '1998-03-16T00:00:00.000Z',
'ShippedDate': '1998-04-07T00:00:00.000Z',
'Freight': 30.85,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10952,
'CustomerID': 'ALFKI',
'OrderDate': '1998-03-16T00:00:00.000Z',
'ShippedDate': '1998-03-24T00:00:00.000Z',
'Freight': 40.42,
'ShipName': 'Alfred\' Futterkiste',
'ShipAddress': 'Obere Str. 57',
'ShipCity': 'Berlin',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10953,
'CustomerID': 'AROUT',
'OrderDate': '1998-03-16T00:00:00.000Z',
'ShippedDate': '1998-03-25T00:00:00.000Z',
'Freight': 23.72,
'ShipName': 'Around the Horn',

Copyright © 2001 -2024 Syncfusion Inc. 461


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Brook Farm Stratford St. Mary',


'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10954,
'CustomerID': 'LINOD',
'OrderDate': '1998-03-17T00:00:00.000Z',
'ShippedDate': '1998-03-20T00:00:00.000Z',
'Freight': 27.91,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10955,
'CustomerID': 'FOLKO',
'OrderDate': '1998-03-17T00:00:00.000Z',
'ShippedDate': '1998-03-20T00:00:00.000Z',
'Freight': 3.26,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10956,
'CustomerID': 'BLAUS',
'OrderDate': '1998-03-17T00:00:00.000Z',
'ShippedDate': '1998-03-20T00:00:00.000Z',
'Freight': 44.65,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10957,
'CustomerID': 'HILAA',
'OrderDate': '1998-03-18T00:00:00.000Z',
'ShippedDate': '1998-03-27T00:00:00.000Z',
'Freight': 105.36,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10958,
'CustomerID': 'OCEAN',
'OrderDate': '1998-03-18T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 462


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-03-27T00:00:00.000Z',
'Freight': 49.56,
'ShipName': 'Océano Atlántico Ltda.',
'ShipAddress': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10959,
'CustomerID': 'GOURL',
'OrderDate': '1998-03-18T00:00:00.000Z',
'ShippedDate': '1998-03-23T00:00:00.000Z',
'Freight': 4.98,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10960,
'CustomerID': 'HILAA',
'OrderDate': '1998-03-19T00:00:00.000Z',
'ShippedDate': '1998-04-08T00:00:00.000Z',
'Freight': 2.08,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10961,
'CustomerID': 'QUEEN',
'OrderDate': '1998-03-19T00:00:00.000Z',
'ShippedDate': '1998-03-30T00:00:00.000Z',
'Freight': 104.47,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10962,
'CustomerID': 'QUICK',
'OrderDate': '1998-03-19T00:00:00.000Z',
'ShippedDate': '1998-03-23T00:00:00.000Z',
'Freight': 275.79,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 463


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10963,
'CustomerID': 'FURIB',
'OrderDate': '1998-03-19T00:00:00.000Z',
'ShippedDate': '1998-03-26T00:00:00.000Z',
'Freight': 2.7,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10964,
'CustomerID': 'SPECD',
'OrderDate': '1998-03-20T00:00:00.000Z',
'ShippedDate': '1998-03-24T00:00:00.000Z',
'Freight': 87.38,
'ShipName': 'Spécialités du monde',
'ShipAddress': '25, rue Lauriston',
'ShipCity': 'Paris',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10965,
'CustomerID': 'OLDWO',
'OrderDate': '1998-03-20T00:00:00.000Z',
'ShippedDate': '1998-03-30T00:00:00.000Z',
'Freight': 144.38,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10966,
'CustomerID': 'CHOPS',
'OrderDate': '1998-03-20T00:00:00.000Z',
'ShippedDate': '1998-04-08T00:00:00.000Z',
'Freight': 27.19,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10967,
'CustomerID': 'TOMSP',
'OrderDate': '1998-03-23T00:00:00.000Z',
'ShippedDate': '1998-04-02T00:00:00.000Z',
'Freight': 62.22,
'ShipName': 'Toms Spezialitäten',
'ShipAddress': 'Luisenstr. 48',
'ShipCity': 'Münster',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 464


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Germany'
},
{
'OrderID': 10968,
'CustomerID': 'ERNSH',
'OrderDate': '1998-03-23T00:00:00.000Z',
'ShippedDate': '1998-04-01T00:00:00.000Z',
'Freight': 74.6,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10969,
'CustomerID': 'COMMI',
'OrderDate': '1998-03-23T00:00:00.000Z',
'ShippedDate': '1998-03-30T00:00:00.000Z',
'Freight': 0.21,
'ShipName': 'Comércio Mineiro',
'ShipAddress': 'Av. dos Lusíadas, 23',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10970,
'CustomerID': 'BOLID',
'OrderDate': '1998-03-24T00:00:00.000Z',
'ShippedDate': '1998-04-24T00:00:00.000Z',
'Freight': 16.16,
'ShipName': 'Bólido Comidas preparadas',
'ShipAddress': 'C/ Araquil, 67',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10971,
'CustomerID': 'FRANR',
'OrderDate': '1998-03-24T00:00:00.000Z',
'ShippedDate': '1998-04-02T00:00:00.000Z',
'Freight': 121.82,
'ShipName': 'France restauration',
'ShipAddress': '54, rue Royale',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10972,
'CustomerID': 'LACOR',
'OrderDate': '1998-03-24T00:00:00.000Z',
'ShippedDate': '1998-03-26T00:00:00.000Z',
'Freight': 0.02,
'ShipName': 'La corne d\'abondance',

Copyright © 2001 -2024 Syncfusion Inc. 465


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '67, avenue de l\'Europe',


'ShipCity': 'Versailles',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10973,
'CustomerID': 'LACOR',
'OrderDate': '1998-03-24T00:00:00.000Z',
'ShippedDate': '1998-03-27T00:00:00.000Z',
'Freight': 15.17,
'ShipName': 'La corne d\'abondance',
'ShipAddress': '67, avenue de l\'Europe',
'ShipCity': 'Versailles',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10974,
'CustomerID': 'SPLIR',
'OrderDate': '1998-03-25T00:00:00.000Z',
'ShippedDate': '1998-04-03T00:00:00.000Z',
'Freight': 12.96,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10975,
'CustomerID': 'BOTTM',
'OrderDate': '1998-03-25T00:00:00.000Z',
'ShippedDate': '1998-03-27T00:00:00.000Z',
'Freight': 32.27,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10976,
'CustomerID': 'HILAA',
'OrderDate': '1998-03-25T00:00:00.000Z',
'ShippedDate': '1998-04-03T00:00:00.000Z',
'Freight': 37.97,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10977,
'CustomerID': 'FOLKO',
'OrderDate': '1998-03-26T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 466


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 208.5,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10978,
'CustomerID': 'MAISD',
'OrderDate': '1998-03-26T00:00:00.000Z',
'ShippedDate': '1998-04-23T00:00:00.000Z',
'Freight': 32.82,
'ShipName': 'Maison Dewey',
'ShipAddress': 'Rue Joseph-Bens 532',
'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10979,
'CustomerID': 'ERNSH',
'OrderDate': '1998-03-26T00:00:00.000Z',
'ShippedDate': '1998-03-31T00:00:00.000Z',
'Freight': 353.07,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10980,
'CustomerID': 'FOLKO',
'OrderDate': '1998-03-27T00:00:00.000Z',
'ShippedDate': '1998-04-17T00:00:00.000Z',
'Freight': 1.26,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10981,
'CustomerID': 'HANAR',
'OrderDate': '1998-03-27T00:00:00.000Z',
'ShippedDate': '1998-04-02T00:00:00.000Z',
'Freight': 193.37,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 467


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10982,
'CustomerID': 'BOTTM',
'OrderDate': '1998-03-27T00:00:00.000Z',
'ShippedDate': '1998-04-08T00:00:00.000Z',
'Freight': 14.01,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10983,
'CustomerID': 'SAVEA',
'OrderDate': '1998-03-27T00:00:00.000Z',
'ShippedDate': '1998-04-06T00:00:00.000Z',
'Freight': 657.54,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10984,
'CustomerID': 'SAVEA',
'OrderDate': '1998-03-30T00:00:00.000Z',
'ShippedDate': '1998-04-03T00:00:00.000Z',
'Freight': 211.22,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10985,
'CustomerID': 'HUNGO',
'OrderDate': '1998-03-30T00:00:00.000Z',
'ShippedDate': '1998-04-02T00:00:00.000Z',
'Freight': 91.51,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10986,
'CustomerID': 'OCEAN',
'OrderDate': '1998-03-30T00:00:00.000Z',
'ShippedDate': '1998-04-21T00:00:00.000Z',
'Freight': 217.86,
'ShipName': 'Océano Atlántico Ltda.',
'ShipAddress': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 468


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Argentina'
},
{
'OrderID': 10987,
'CustomerID': 'EASTC',
'OrderDate': '1998-03-31T00:00:00.000Z',
'ShippedDate': '1998-04-06T00:00:00.000Z',
'Freight': 185.48,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10988,
'CustomerID': 'RATTC',
'OrderDate': '1998-03-31T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 61.14,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10989,
'CustomerID': 'QUEDE',
'OrderDate': '1998-03-31T00:00:00.000Z',
'ShippedDate': '1998-04-02T00:00:00.000Z',
'Freight': 34.76,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10990,
'CustomerID': 'ERNSH',
'OrderDate': '1998-04-01T00:00:00.000Z',
'ShippedDate': '1998-04-07T00:00:00.000Z',
'Freight': 117.61,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10991,
'CustomerID': 'QUICK',
'OrderDate': '1998-04-01T00:00:00.000Z',
'ShippedDate': '1998-04-07T00:00:00.000Z',
'Freight': 38.51,
'ShipName': 'QUICK-Stop',

Copyright © 2001 -2024 Syncfusion Inc. 469


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Taucherstraße 10',


'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10992,
'CustomerID': 'THEBI',
'OrderDate': '1998-04-01T00:00:00.000Z',
'ShippedDate': '1998-04-03T00:00:00.000Z',
'Freight': 4.27,
'ShipName': 'The Big Cheese',
'ShipAddress': '89 Jefferson Way Suite 2',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10993,
'CustomerID': 'FOLKO',
'OrderDate': '1998-04-01T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 8.81,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10994,
'CustomerID': 'VAFFE',
'OrderDate': '1998-04-02T00:00:00.000Z',
'ShippedDate': '1998-04-09T00:00:00.000Z',
'Freight': 65.53,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10995,
'CustomerID': 'PERIC',
'OrderDate': '1998-04-02T00:00:00.000Z',
'ShippedDate': '1998-04-06T00:00:00.000Z',
'Freight': 46,
'ShipName': 'Pericles Comidas clásicas',
'ShipAddress': 'Calle Dr. Jorge Cash 321',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10996,
'CustomerID': 'QUICK',
'OrderDate': '1998-04-02T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 470


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 1.12,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10997,
'CustomerID': 'LILAS',
'OrderDate': '1998-04-03T00:00:00.000Z',
'ShippedDate': '1998-04-13T00:00:00.000Z',
'Freight': 73.91,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10998,
'CustomerID': 'WOLZA',
'OrderDate': '1998-04-03T00:00:00.000Z',
'ShippedDate': '1998-04-17T00:00:00.000Z',
'Freight': 20.31,
'ShipName': 'Wolski Zajazd',
'ShipAddress': 'ul. Filtrowa 68',
'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 10999,
'CustomerID': 'OTTIK',
'OrderDate': '1998-04-03T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 96.35,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11000,
'CustomerID': 'RATTC',
'OrderDate': '1998-04-06T00:00:00.000Z',
'ShippedDate': '1998-04-14T00:00:00.000Z',
'Freight': 55.12,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 471


TreeGrid Immutable mode in React Treegrid component

'OrderID': 11001,
'CustomerID': 'FOLKO',
'OrderDate': '1998-04-06T00:00:00.000Z',
'ShippedDate': '1998-04-14T00:00:00.000Z',
'Freight': 197.3,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 11002,
'CustomerID': 'SAVEA',
'OrderDate': '1998-04-06T00:00:00.000Z',
'ShippedDate': '1998-04-16T00:00:00.000Z',
'Freight': 141.16,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 11003,
'CustomerID': 'THECR',
'OrderDate': '1998-04-06T00:00:00.000Z',
'ShippedDate': '1998-04-08T00:00:00.000Z',
'Freight': 14.91,
'ShipName': 'The Cracker Box',
'ShipAddress': '55 Grizzly Peak Rd.',
'ShipCity': 'Butte',
'ShipRegion': 'MT',
'ShipCountry': 'USA'
},
{
'OrderID': 11004,
'CustomerID': 'MAISD',
'OrderDate': '1998-04-07T00:00:00.000Z',
'ShippedDate': '1998-04-20T00:00:00.000Z',
'Freight': 44.84,
'ShipName': 'Maison Dewey',
'ShipAddress': 'Rue Joseph-Bens 532',
'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 11005,
'CustomerID': 'WILMK',
'OrderDate': '1998-04-07T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 0.75,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 472


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Finland'
},
{
'OrderID': 11006,
'CustomerID': 'GREAL',
'OrderDate': '1998-04-07T00:00:00.000Z',
'ShippedDate': '1998-04-15T00:00:00.000Z',
'Freight': 25.19,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 11007,
'CustomerID': 'PRINI',
'OrderDate': '1998-04-08T00:00:00.000Z',
'ShippedDate': '1998-04-13T00:00:00.000Z',
'Freight': 202.24,
'ShipName': 'Princesa Isabel Vinhos',
'ShipAddress': 'Estrada da saúde n. 58',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 11008,
'CustomerID': 'ERNSH',
'OrderDate': '1998-04-08T00:00:00.000Z',
'ShippedDate': null,
'Freight': 79.46,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 11009,
'CustomerID': 'GODOS',
'OrderDate': '1998-04-08T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 59.11,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 11010,
'CustomerID': 'REGGC',
'OrderDate': '1998-04-09T00:00:00.000Z',
'ShippedDate': '1998-04-21T00:00:00.000Z',
'Freight': 28.71,
'ShipName': 'Reggiani Caseifici',

Copyright © 2001 -2024 Syncfusion Inc. 473


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Strada Provinciale 124',


'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 11011,
'CustomerID': 'ALFKI',
'OrderDate': '1998-04-09T00:00:00.000Z',
'ShippedDate': '1998-04-13T00:00:00.000Z',
'Freight': 1.21,
'ShipName': 'Alfred\' Futterkiste',
'ShipAddress': 'Obere Str. 57',
'ShipCity': 'Berlin',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11012,
'CustomerID': 'FRANK',
'OrderDate': '1998-04-09T00:00:00.000Z',
'ShippedDate': '1998-04-17T00:00:00.000Z',
'Freight': 242.95,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11013,
'CustomerID': 'ROMEY',
'OrderDate': '1998-04-09T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 32.99,
'ShipName': 'Romero y tomillo',
'ShipAddress': 'Gran Vía, 1',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 11014,
'CustomerID': 'LINOD',
'OrderDate': '1998-04-10T00:00:00.000Z',
'ShippedDate': '1998-04-15T00:00:00.000Z',
'Freight': 23.6,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 11015,
'CustomerID': 'SANTG',
'OrderDate': '1998-04-10T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 474


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-04-20T00:00:00.000Z',
'Freight': 4.62,
'ShipName': 'Santé Gourmet',
'ShipAddress': 'Erling Skakkes gate 78',
'ShipCity': 'Stavern',
'ShipRegion': null,
'ShipCountry': 'Norway'
},
{
'OrderID': 11016,
'CustomerID': 'AROUT',
'OrderDate': '1998-04-10T00:00:00.000Z',
'ShippedDate': '1998-04-13T00:00:00.000Z',
'Freight': 33.8,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 11017,
'CustomerID': 'ERNSH',
'OrderDate': '1998-04-13T00:00:00.000Z',
'ShippedDate': '1998-04-20T00:00:00.000Z',
'Freight': 754.26,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 11018,
'CustomerID': 'LONEP',
'OrderDate': '1998-04-13T00:00:00.000Z',
'ShippedDate': '1998-04-16T00:00:00.000Z',
'Freight': 11.65,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 11019,
'CustomerID': 'RANCH',
'OrderDate': '1998-04-13T00:00:00.000Z',
'ShippedDate': null,
'Freight': 3.17,
'ShipName': 'Rancho grande',
'ShipAddress': 'Av. del Libertador 900',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 475


TreeGrid Immutable mode in React Treegrid component

'OrderID': 11020,
'CustomerID': 'OTTIK',
'OrderDate': '1998-04-14T00:00:00.000Z',
'ShippedDate': '1998-04-16T00:00:00.000Z',
'Freight': 43.3,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11021,
'CustomerID': 'QUICK',
'OrderDate': '1998-04-14T00:00:00.000Z',
'ShippedDate': '1998-04-21T00:00:00.000Z',
'Freight': 297.18,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11022,
'CustomerID': 'HANAR',
'OrderDate': '1998-04-14T00:00:00.000Z',
'ShippedDate': '1998-05-04T00:00:00.000Z',
'Freight': 6.27,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 11023,
'CustomerID': 'BSBEV',
'OrderDate': '1998-04-14T00:00:00.000Z',
'ShippedDate': '1998-04-24T00:00:00.000Z',
'Freight': 123.83,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 11024,
'CustomerID': 'EASTC',
'OrderDate': '1998-04-15T00:00:00.000Z',
'ShippedDate': '1998-04-20T00:00:00.000Z',
'Freight': 74.36,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 476


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'UK'
},
{
'OrderID': 11025,
'CustomerID': 'WARTH',
'OrderDate': '1998-04-15T00:00:00.000Z',
'ShippedDate': '1998-04-24T00:00:00.000Z',
'Freight': 29.17,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 11026,
'CustomerID': 'FRANS',
'OrderDate': '1998-04-15T00:00:00.000Z',
'ShippedDate': '1998-04-28T00:00:00.000Z',
'Freight': 47.09,
'ShipName': 'Franchi S.p.A.',
'ShipAddress': 'Via Monte Bianco 34',
'ShipCity': 'Torino',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 11027,
'CustomerID': 'BOTTM',
'OrderDate': '1998-04-16T00:00:00.000Z',
'ShippedDate': '1998-04-20T00:00:00.000Z',
'Freight': 52.52,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 11028,
'CustomerID': 'KOENE',
'OrderDate': '1998-04-16T00:00:00.000Z',
'ShippedDate': '1998-04-22T00:00:00.000Z',
'Freight': 29.59,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11029,
'CustomerID': 'CHOPS',
'OrderDate': '1998-04-16T00:00:00.000Z',
'ShippedDate': '1998-04-27T00:00:00.000Z',
'Freight': 47.84,
'ShipName': 'Chop-suey Chinese',

Copyright © 2001 -2024 Syncfusion Inc. 477


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Hauptstr. 31',


'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 11030,
'CustomerID': 'SAVEA',
'OrderDate': '1998-04-17T00:00:00.000Z',
'ShippedDate': '1998-04-27T00:00:00.000Z',
'Freight': 830.75,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 11031,
'CustomerID': 'SAVEA',
'OrderDate': '1998-04-17T00:00:00.000Z',
'ShippedDate': '1998-04-24T00:00:00.000Z',
'Freight': 227.22,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 11032,
'CustomerID': 'WHITC',
'OrderDate': '1998-04-17T00:00:00.000Z',
'ShippedDate': '1998-04-23T00:00:00.000Z',
'Freight': 606.19,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 11033,
'CustomerID': 'RICSU',
'OrderDate': '1998-04-17T00:00:00.000Z',
'ShippedDate': '1998-04-23T00:00:00.000Z',
'Freight': 84.74,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 11034,
'CustomerID': 'OLDWO',
'OrderDate': '1998-04-20T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 478


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-04-27T00:00:00.000Z',
'Freight': 40.32,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 11035,
'CustomerID': 'SUPRD',
'OrderDate': '1998-04-20T00:00:00.000Z',
'ShippedDate': '1998-04-24T00:00:00.000Z',
'Freight': 0.17,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 11036,
'CustomerID': 'DRACD',
'OrderDate': '1998-04-20T00:00:00.000Z',
'ShippedDate': '1998-04-22T00:00:00.000Z',
'Freight': 149.47,
'ShipName': 'Drachenblut Delikatessen',
'ShipAddress': 'Walserweg 21',
'ShipCity': 'Aachen',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11037,
'CustomerID': 'GODOS',
'OrderDate': '1998-04-21T00:00:00.000Z',
'ShippedDate': '1998-04-27T00:00:00.000Z',
'Freight': 3.2,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 11038,
'CustomerID': 'SUPRD',
'OrderDate': '1998-04-21T00:00:00.000Z',
'ShippedDate': '1998-04-30T00:00:00.000Z',
'Freight': 29.59,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 479


TreeGrid Immutable mode in React Treegrid component

'OrderID': 11039,
'CustomerID': 'LINOD',
'OrderDate': '1998-04-21T00:00:00.000Z',
'ShippedDate': null,
'Freight': 65,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 11040,
'CustomerID': 'GREAL',
'OrderDate': '1998-04-22T00:00:00.000Z',
'ShippedDate': null,
'Freight': 18.84,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 11041,
'CustomerID': 'CHOPS',
'OrderDate': '1998-04-22T00:00:00.000Z',
'ShippedDate': '1998-04-28T00:00:00.000Z',
'Freight': 48.22,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 11042,
'CustomerID': 'COMMI',
'OrderDate': '1998-04-22T00:00:00.000Z',
'ShippedDate': '1998-05-01T00:00:00.000Z',
'Freight': 29.99,
'ShipName': 'Comércio Mineiro',
'ShipAddress': 'Av. dos Lusíadas, 23',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 11043,
'CustomerID': 'SPECD',
'OrderDate': '1998-04-22T00:00:00.000Z',
'ShippedDate': '1998-04-29T00:00:00.000Z',
'Freight': 8.8,
'ShipName': 'Spécialités du monde',
'ShipAddress': '25, rue Lauriston',
'ShipCity': 'Paris',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 480


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'France'
},
{
'OrderID': 11044,
'CustomerID': 'WOLZA',
'OrderDate': '1998-04-23T00:00:00.000Z',
'ShippedDate': '1998-05-01T00:00:00.000Z',
'Freight': 8.72,
'ShipName': 'Wolski Zajazd',
'ShipAddress': 'ul. Filtrowa 68',
'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 11045,
'CustomerID': 'BOTTM',
'OrderDate': '1998-04-23T00:00:00.000Z',
'ShippedDate': null,
'Freight': 70.58,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 11046,
'CustomerID': 'WANDK',
'OrderDate': '1998-04-23T00:00:00.000Z',
'ShippedDate': '1998-04-24T00:00:00.000Z',
'Freight': 71.64,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11047,
'CustomerID': 'EASTC',
'OrderDate': '1998-04-24T00:00:00.000Z',
'ShippedDate': '1998-05-01T00:00:00.000Z',
'Freight': 46.62,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 11048,
'CustomerID': 'BOTTM',
'OrderDate': '1998-04-24T00:00:00.000Z',
'ShippedDate': '1998-04-30T00:00:00.000Z',
'Freight': 24.12,
'ShipName': 'Bottom-Dollar Markets',

Copyright © 2001 -2024 Syncfusion Inc. 481


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '23 Tsawassen Blvd.',


'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 11049,
'CustomerID': 'GOURL',
'OrderDate': '1998-04-24T00:00:00.000Z',
'ShippedDate': '1998-05-04T00:00:00.000Z',
'Freight': 8.34,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 11050,
'CustomerID': 'FOLKO',
'OrderDate': '1998-04-27T00:00:00.000Z',
'ShippedDate': '1998-05-05T00:00:00.000Z',
'Freight': 59.41,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 11051,
'CustomerID': 'LAMAI',
'OrderDate': '1998-04-27T00:00:00.000Z',
'ShippedDate': null,
'Freight': 2.79,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 11052,
'CustomerID': 'HANAR',
'OrderDate': '1998-04-27T00:00:00.000Z',
'ShippedDate': '1998-05-01T00:00:00.000Z',
'Freight': 67.26,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 11053,
'CustomerID': 'PICCO',
'OrderDate': '1998-04-27T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 482


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-04-29T00:00:00.000Z',
'Freight': 53.05,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 11054,
'CustomerID': 'CACTU',
'OrderDate': '1998-04-28T00:00:00.000Z',
'ShippedDate': null,
'Freight': 0.33,
'ShipName': 'Cactus Comidas para llevar',
'ShipAddress': 'Cerrito 333',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 11055,
'CustomerID': 'HILAA',
'OrderDate': '1998-04-28T00:00:00.000Z',
'ShippedDate': '1998-05-05T00:00:00.000Z',
'Freight': 120.92,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 11056,
'CustomerID': 'EASTC',
'OrderDate': '1998-04-28T00:00:00.000Z',
'ShippedDate': '1998-05-01T00:00:00.000Z',
'Freight': 278.96,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 11057,
'CustomerID': 'NORTS',
'OrderDate': '1998-04-29T00:00:00.000Z',
'ShippedDate': '1998-05-01T00:00:00.000Z',
'Freight': 4.13,
'ShipName': 'North/South',
'ShipAddress': 'South House 300 Queensbridge',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 483


TreeGrid Immutable mode in React Treegrid component

'OrderID': 11058,
'CustomerID': 'BLAUS',
'OrderDate': '1998-04-29T00:00:00.000Z',
'ShippedDate': null,
'Freight': 31.14,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11059,
'CustomerID': 'RICAR',
'OrderDate': '1998-04-29T00:00:00.000Z',
'ShippedDate': null,
'Freight': 85.8,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 11060,
'CustomerID': 'FRANS',
'OrderDate': '1998-04-30T00:00:00.000Z',
'ShippedDate': '1998-05-04T00:00:00.000Z',
'Freight': 10.98,
'ShipName': 'Franchi S.p.A.',
'ShipAddress': 'Via Monte Bianco 34',
'ShipCity': 'Torino',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 11061,
'CustomerID': 'GREAL',
'OrderDate': '1998-04-30T00:00:00.000Z',
'ShippedDate': null,
'Freight': 14.01,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 11062,
'CustomerID': 'REGGC',
'OrderDate': '1998-04-30T00:00:00.000Z',
'ShippedDate': null,
'Freight': 29.93,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 484


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Italy'
},
{
'OrderID': 11063,
'CustomerID': 'HUNGO',
'OrderDate': '1998-04-30T00:00:00.000Z',
'ShippedDate': '1998-05-06T00:00:00.000Z',
'Freight': 81.73,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 11064,
'CustomerID': 'SAVEA',
'OrderDate': '1998-05-01T00:00:00.000Z',
'ShippedDate': '1998-05-04T00:00:00.000Z',
'Freight': 30.09,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 11065,
'CustomerID': 'LILAS',
'OrderDate': '1998-05-01T00:00:00.000Z',
'ShippedDate': null,
'Freight': 12.91,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 11066,
'CustomerID': 'WHITC',
'OrderDate': '1998-05-01T00:00:00.000Z',
'ShippedDate': '1998-05-04T00:00:00.000Z',
'Freight': 44.72,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 11067,
'CustomerID': 'DRACD',
'OrderDate': '1998-05-04T00:00:00.000Z',
'ShippedDate': '1998-05-06T00:00:00.000Z',
'Freight': 7.98,
'ShipName': 'Drachenblut Delikatessen',

Copyright © 2001 -2024 Syncfusion Inc. 485


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Walserweg 21',


'ShipCity': 'Aachen',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11068,
'CustomerID': 'QUEEN',
'OrderDate': '1998-05-04T00:00:00.000Z',
'ShippedDate': null,
'Freight': 81.75,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 11069,
'CustomerID': 'TORTU',
'OrderDate': '1998-05-04T00:00:00.000Z',
'ShippedDate': '1998-05-06T00:00:00.000Z',
'Freight': 15.67,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 11070,
'CustomerID': 'LEHMS',
'OrderDate': '1998-05-05T00:00:00.000Z',
'ShippedDate': null,
'Freight': 136,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11071,
'CustomerID': 'LILAS',
'OrderDate': '1998-05-05T00:00:00.000Z',
'ShippedDate': null,
'Freight': 0.93,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 11072,
'CustomerID': 'ERNSH',
'OrderDate': '1998-05-05T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 486


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': null,
'Freight': 258.64,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 11073,
'CustomerID': 'PERIC',
'OrderDate': '1998-05-05T00:00:00.000Z',
'ShippedDate': null,
'Freight': 24.95,
'ShipName': 'Pericles Comidas clásicas',
'ShipAddress': 'Calle Dr. Jorge Cash 321',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 11074,
'CustomerID': 'SIMOB',
'OrderDate': '1998-05-06T00:00:00.000Z',
'ShippedDate': null,
'Freight': 18.44,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 11075,
'CustomerID': 'RICSU',
'OrderDate': '1998-05-06T00:00:00.000Z',
'ShippedDate': null,
'Freight': 6.19,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 11076,
'CustomerID': 'BONAP',
'OrderDate': '1998-05-06T00:00:00.000Z',
'ShippedDate': null,
'Freight': 38.28,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 487


TreeGrid Immutable mode in React Treegrid component

'OrderID': 11077,
'CustomerID': 'RATTC',
'OrderDate': '1998-05-06T00:00:00.000Z',
'ShippedDate': null,
'Freight': 8.53,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
}
]);
export const orderData = JSON.parse(stringData, (field, value) => {
let dupValue = value;
if (typeof value === 'string' && /^(\d{4}\-\d\d\-
\d\d([tT][\d:\.]*){1})([zZ]|([+\-])(\d\d):?(\d\d))?$/.test(value)) {
let arr = dupValue.split(/[^0-9]/);
let arg = parseInt(arr[4], 10);
let arg1 = parseInt(arr[5], 10);
value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1,
parseInt(arr[2], 10), parseInt(arr[3], 10), arg, arg1);
}
return value;
});
export var ProjectsData = [
{ Project: "Villa", Locality: "Los Angeles", Duration: 120, Gender:
"Male", EstimateCost: 35.8,
workStatus: [
{ Project: "Construction", Locality: "Los Angeles", Gender:
"Male", Duration: 50, EstimateCost: 20.4,
StartDate: new Date("06-07-2018"), AssignedTo: "Nick Jones",
AssignedContactNumber: "+1903333", ProjectDone: 40,
ProjectStatus: "Active" },
{ Project: "Painting", Locality: "Los Angeles", Gender: "Male",
Duration: 25, EstimateCost: 5.2,
StartDate: new Date("11-25-2018"), AssignedTo: "Nick Jones",
AssignedContactNumber: "+1903333", ProjectDone: 10,
ProjectStatus: "InActive" },
{ Project: "Electricals", Locality: "Los Angeles", Gender:
"Male", Duration: 15, EstimateCost: 3.1,
StartDate: new Date("10-03-2018"), AssignedTo: "Nick Jones",
AssignedContactNumber: "+1903333", ProjectDone: 90,
ProjectStatus: "Active" },
{ Project: "Interior Designs", Locality: "Los Angeles", Gender:
"Male", Duration: 30, EstimateCost: 2.1,
StartDate: new Date("10-23-2018"), AssignedTo: "Nick Jones",
AssignedContactNumber: "+1903333", ProjectDone: 10,
ProjectStatus: "InActive" },
],
StartDate: new Date("06-07-2018"), AssignedTo: "Nick Jones",
AssignedContactNumber: "+1903333", ProjectDone: 60, ProjectStatus: "Active"
},
{ Project: "Apartment", Locality: "Boston", Duration: 250, EstimateCost:
80.55, Gender: "Female",
workStatus: [
{ Project: "Construction", Locality: "Boston", Duration: 110,
Gender: "Female", EstimateCost: 80.55,

Copyright © 2001 -2024 Syncfusion Inc. 488


TreeGrid Immutable mode in React Treegrid component

StartDate: new Date("08-25-2018"), AssignedTo: "Johan",


AssignedContactNumber: "+196088", ProjectDone: 90,
ProjectStatus: "Active" },
{ Project: "Painting", Locality: "Boston", Duration: 60,
EstimateCost: 55.32, Gender: "Female",
StartDate: new Date("12-20-2018"), AssignedTo: "Johan",
AssignedContactNumber: "+196088", ProjectDone: 0,
ProjectStatus: "InActive" },
{ Project: "Electricals", Locality: "Boston", Duration: 40,
EstimateCost: 20.23, Gender: "Female",
StartDate: new Date("01-26-2019"), AssignedTo: "Johan",
AssignedContactNumber: "+196088", ProjectDone: 40,
ProjectStatus: "Active" },
{ Project: "Interior Designs", Locality: "Boston", Duration: 40,
EstimateCost: 5.0, Gender: "Female",
StartDate: new Date("02-07-2019"), AssignedTo: "Johan",
AssignedContactNumber: "+196088", ProjectDone: 10,
ProjectStatus: "InActive" },
],
StartDate: new Date("08-25-2018"), AssignedTo: "Johan",
AssignedContactNumber: "+196088", ProjectDone: 55, ProjectStatus: "Active" }
];
export var treeGridDataSource = [
{
'Name': 'Windows',
'DateModified': new Date('06/26/2017'),
'Type': 'File Folder',
'DateCreated': new Date('06/16/2017'),
'Children': [
{
'Name': 'Users',
'DateModified': new Date('06/26/2017'),
'Type': 'File Folder',
'DateCreated': new Date('06/16/2017'),
'Children': [
{
'Name': 'Public',
'DateModified': new Date('06/26/2017'),
'Type': 'File Folder',
'DateCreated': new Date('06/16/2017'),
'Children': [
{
'Name': 'Documents ',
'DateModified': new Date('06/26/2017'),
'Type': 'File Folder',
'DateCreated': new Date('06/16/2017'),
'Children': [
{ 'Name': 'Document 1', 'DateModified':
new Date('06/26/2017'), 'Type': 'HTML document', 'DateCreated': new
Date('06/16/2017'), },
{ 'Name': 'Document 2', 'DateModified':
new Date('06/26/2017'), 'Type': 'HTML document', 'DateCreated': new
Date('06/16/2017'), },
{ 'Name': 'Document 3', 'DateModified':
new Date('06/26/2017'), 'Type': 'HTML document', 'DateCreated': new
Date('06/16/2017'), }
]

Copyright © 2001 -2024 Syncfusion Inc. 489


TreeGrid Immutable mode in React Treegrid component

}
]
}
]
}
]
}
];
export let sampleData2 = [];
export function dataSource1() {
for (let i = 1; i < 500; i++) {
sampleData2.push({
taskID: i,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
subtasks: [
{
taskID: ++i,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
subtasks: [{
taskID: ++i,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
}]
}
]
});
}
}
export var projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'),
'EndDate': new Date('02/27/2017'), 'Duration': 3, 'Progress': '40',
'Priority': 'Normal' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'),
'EndDate': new Date('02/27/2017'), 'Duration': 4, 'Progress': '40',
'parentID': 1, 'Priority': 'Low' },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'),
'EndDate': new Date('02/27/2017'), 'Duration': 2, 'Progress': '40',
'parentID': 2, 'Priority': 'Normal' },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 490


TreeGrid Immutable mode in React Treegrid component

'EndDate': new Date('02/27/2017'), 'Duration': 2, 'Progress': '40',


'parentID': 1, 'Priority': 'Low' },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'),
'EndDate': new Date('03/18/2017'), 'Duration': 6, 'Progress': '40',
'Priority': 'Normal' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'),
'EndDate': new Date('03/06/2017'), 'Duration': 11, 'Progress': '40',
'parentID': 5, 'Priority': 'High' },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'),
'EndDate': new Date('03/06/2017'), 'Duration': 7, 'Progress': '40',
'parentID': 5, 'Priority': 'Critical' },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'),
'EndDate': new Date('03/06/2017'), 'Duration': 10, 'Progress': '40',
'parentID': 5, 'Priority': 'Breaker' },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'),
'EndDate': new Date('03/06/2017'), 'Duration': 15, 'Progress': '40',
'parentID': 5, 'Priority': 'High' },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'),
'EndDate': new Date('03/13/2017'), 'Duration': 17, 'Progress': '40',
'Priority': 'Breaker' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'),
'EndDate': new Date('03/13/2017'), 'Duration': 0, 'Progress': '40',
'parentID': 10, 'Priority': 'Low' },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'),
'EndDate': new Date('03/13/2017'), 'Duration': 10, 'Progress': '40',
'parentID': 10, 'Priority': 'Breaker' },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'),
'EndDate': new Date('03/13/2017'), 'Duration': 11, 'Progress': '40',
'parentID': 10, 'Priority': 'Normal' },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'),
'EndDate': new Date('03/13/2017'), 'Duration': 1, 'Progress': '40',
'parentID': 10, 'Priority': 'Normal' },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'),
'EndDate': new Date('03/13/2017'), 'Duration': 14, 'Progress': '40',
'parentID': 10, 'Priority': 'Critical' }
];
export var sampleData = [
{
taskID: 1000,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,

Copyright © 2001 -2024 Syncfusion Inc. 491


TreeGrid Immutable mode in React Treegrid component

subtasks: [{
taskID: 1001,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 1002, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 1003, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 1004, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 1005, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 1006, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 1007, taskName: 'Phase 2 complete', startDate:
new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
}
];
export var templateData = [{
'Name': 'Robert King',
'FullName': 'Robert King',
'Designation': 'Chief Executive Officer',
'EmployeeID': 'EMP001',
'Address': '507 - 20th Ave. E.Apt. 2A, Seattle',
'Contact': '(206) 555-9857',
'Country': 'USA',
'DOB': new Date('2/15/1963'),
'DOJ': new Date('5/1/1983'),
'Children': [{
'Name': 'David william',
'FullName': 'David william',
'Designation': 'Vice President',
'EmployeeID': 'EMP004',
'Address': '722 Moss Bay Blvd., Kirkland',
'Country': 'USA',
'Contact': '(206) 555-3412',
'DOB': new Date('5/20/1971'),

Copyright © 2001 -2024 Syncfusion Inc. 492


TreeGrid Immutable mode in React Treegrid component

'DOJ': new Date('5/1/1991'),


'Children': [{
'Name': 'Nancy Davolio',
'FullName': 'Nancy Davolio',
'Designation': 'Marketing Executive',
'EmployeeID': 'EMP035',
'Address': '4110 Old Redmond Rd., Redmond',
'Country': 'USA',
'Contact': '(206) 555-8122',
'DOB': new Date('3/19/1966'),
'DOJ': new Date('5/1/1986'),
'Children': [
{
'Name': 'Andrew Fuller',
'FullName': 'Andrew Fuller',
'Designation': 'Sales Representative',
'EmployeeID': 'EMP045',
'Address': '14 Garrett Hill, London',
'Country': 'UK',
'Contact': '(71) 555-4848',
'DOB': new Date('9/20/1980'),
'DOJ': new Date('5/1/2000'),
},
{
'Name': 'Anne Dodsworth',
'FullName': 'Anne Dodsworth',
'Designation': 'Sales Representative',
'EmployeeID': 'EMP091',
'Address': '4726 - 11th Ave. N.E., Seattle',
'Country': 'USA',
'Contact': '(206) 555-1189',
'DOB': new Date('10/19/1989'),
'DOJ': new Date('5/1/2009'),
},
{
'Name': 'Michael Suyama',
'FullName': 'Michael Suyama',
'Designation': 'Sales Representative',
'EmployeeID': 'EMP110',
'Address': 'Coventry House Miner Rd.,
London',
'Country': 'UK',
'Contact': '(71) 555-3636',
'DOB': new Date('11/02/1987'),
'DOJ': new Date('5/1/2007'),
},
{
'Name': 'Janet Leverling',
'FullName': 'Janet Leverling',
'Designation': 'Sales Coordinator',
'EmployeeID': 'EMP131',
'Address': 'Edgeham Hollow Winchester Way,
London',
'Country': 'UK',
'Contact': '(71) 555-3636',
'DOB': new Date('11/06/1990'),
'DOJ': new Date('5/1/2010'),

Copyright © 2001 -2024 Syncfusion Inc. 493


TreeGrid Immutable mode in React Treegrid component

},
]
},
{
'Name': 'Romey Wilson',
'FullName': 'Romey Wilson',
'Designation': 'Sales Executive',
'EmployeeID': 'EMP039',
'Address': '7 Houndstooth Rd., London',
'Country': 'UK',
'Contact': '(71) 555-3690',
'DOB': new Date('02/02/1980'),
'DOJ': new Date('5/1/2000'),
'Children': [
{
'Name': 'Margaret Peacock',
'FullName': 'Margaret Peacock',
'Designation': 'Sales Representative',
'EmployeeID': 'EMP213',
'Address': '4726 - 11th Ave. N.E.,
California',
'Country': 'USA',
'Contact': '(206) 555-1989',
'DOB': new Date('01/21/1986'),
'DOJ': new Date('5/1/2006'),
},
{
'Name': 'Laura Callahan',
'FullName': 'Laura Callahan',
'Designation': 'Sales Coordinator',
'EmployeeID': 'EMP201',
'Address': 'Coventry House Miner Rd.,
London',
'Country': 'UK',
'Contact': '(71) 555-2222',
'DOB': new Date('12/01/1990'),
'DOJ': new Date('5/1/2010'),
},
{
'Name': 'Steven Buchanan',
'FullName': 'Steven Buchanan',
'Designation': 'Sales Representative',
'EmployeeID': 'EMP197',
'Address': '200 Lincoln Ave, Salinas, CA
93901',
'Country': 'USA',
'Contact': '(831) 758-7408',
'DOB': new Date('03/23/1987'),
'DOJ': new Date('5/1/2007'),
},
{
'Name': 'Tedd Lawson',
'FullName': 'Tedd Lawson',
'Designation': 'Sales Representative',
'EmployeeID': 'EMP167',
'Address': '200 Lincoln Ave, Salinas, CA
93901',

Copyright © 2001 -2024 Syncfusion Inc. 494


TreeGrid Immutable mode in React Treegrid component

'Country': 'USA',
'Contact': '(831) 758-7368 ',
'DOB': new Date('08/09/1989'),
'DOJ': new Date('5/1/2009'),
},
]
}]
}]
}];
export var summaryRowData = [{
'FreightID': 'CX2389NK',
'FreightName': 'Maersk Edibles Co.',
'TotalUnits': 598,
'TotalCosts': 27838,
'UnitWeight': 241,
'children': [{
'FreightID': 'QW4567OP',
'FreightName': 'Chang',
'TotalUnits': 123,
'TotalCosts': 3400,
'UnitWeight': 50,
}, {
'FreightID': 'QW3458BH',
'FreightName': 'Aniseed Syrup',
'TotalUnits': 89,
'TotalCosts': 5900,
'UnitWeight': 87,
}, {
'FreightID': 'QW8967OH',
'FreightName': 'Chef Antons Cajun Seasoning',
'TotalUnits': 46,
'TotalCosts': 9578,
'UnitWeight': 54,
}, {
'FreightID': 'QW6549NJ',
'FreightName': 'Chef Antons Gumbo Mix',
'TotalUnits': 340,
'TotalCosts': 8960,
'UnitWeight': 50,
}]
},
{
'FreightID': 'DW8954IO',
'FreightName': 'Aeon fitness inc.',
'TotalUnits': 1720,
'TotalCosts': 24367,
'UnitWeight': 296,
'children': [
{
'FreightID': 'UF5647YH',
'FreightName': 'Reebox CrossFit Back Bay',
'TotalUnits': 600,
'TotalCosts': 8700,
'UnitWeight': 73,
},
{
'FreightID': 'UF1290LK',

Copyright © 2001 -2024 Syncfusion Inc. 495


TreeGrid Immutable mode in React Treegrid component

'FreightName': 'The Green Microgym',


'TotalUnits': 569,
'TotalCosts': 8765,
'UnitWeight': 90,
},
{
'FreightID': 'UF8956KU',
'FreightName': 'DeFrancos',
'TotalUnits': 456,
'TotalCosts': 4589,
'UnitWeight': 68,
},
{
'FreightID': 'UF7464JK',
'FreightName': 'Westside Barbell',
'TotalUnits': 95,
'TotalCosts': 2313,
'UnitWeight': 65,
}
],
},
{
'FreightID': 'EJ9456KN',
'FreightName': 'Sun technologies inc',
'TotalUnits': 331,
'TotalCosts': 22933,
'UnitWeight': 192,
'children': [
{
'FreightID': 'GH2367OP',
'FreightName': 'Haier Group',
'TotalUnits': 78,
'TotalCosts': 6789,
'UnitWeight': 23,
},
{
'FreightID': 'GH4309TH',
'FreightName': 'Panda Electronics',
'TotalUnits': 90,
'TotalCosts': 8999,
'UnitWeight': 48,
},
{
'FreightID': 'GH3494SD',
'FreightName': 'Jiangsu Etern',
'TotalUnits': 36,
'TotalCosts': 4356,
'UnitWeight': 56,
},
{
'FreightID': 'GH3213FR',
'FreightName': 'Zhejiang Fuchunjiang',
'TotalUnits': 127,
'TotalCosts': 2789,
'UnitWeight': 65,
}
],

Copyright © 2001 -2024 Syncfusion Inc. 496


TreeGrid Immutable mode in React Treegrid component

}];
export var headerData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress:
'100', resourceId: '2' },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress:
'100', resourceId: '1' },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress:
'100', resourceId: '1' },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'), endDate: new Date('02/07/2017'), duration: 0,
predecessor: '3FS,4FS,5FS' }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress:
'60', predecessor: '6FS', resourceId: '2' },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress:
'100', predecessor: '6FS', resourceId: '3' },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2,
progress: '100', predecessor: '9FS', resourceId: '1' },
{ taskID: 10, taskName: 'Design complete', startDate: new
Date('02/14/2017'), endDate: new Date('02/14/2017'), duration: 0,
predecessor: '10FS' }
]
},
{
taskID: 11,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
subtasks: [
{
taskID: 12,
taskName: 'Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
subtasks: [{
taskID: 13,
taskName: 'Implementation Module',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 497


TreeGrid Immutable mode in React Treegrid component

endDate: new Date('02/27/2017'),


subtasks: [
{ taskID: 14, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'),
duration: 3, progress: '50', predecessor: '11FS', resourceId: '3' },
{ taskID: 15, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'),
duration: 3, progress: '50', predecessor: '11FS', resourceId: '3' },
{ taskID: 16, taskName: 'Testing', startDate:
new Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2,
progress: '0', predecessor: '15FS,16FS', resourceId: '4' },
{ taskID: 17, taskName: 'Bug fix', startDate:
new Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2,
progress: '0', predecessor: '17FS', resourceId: '4' },
{ taskID: 18, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'), endDate: new
Date('02/27/2017'), duration: 2, progress: '0', predecessor: '18FS',
resourceId: '1' },
{ taskID: 19, taskName: 'Phase complete',
startDate: new Date('02/27/2017'), endDate: new Date('02/27/2017'),
duration: 0, predecessor: '19FS' }
]
}]
}
]
}
];
export var projectResources = [
{ resourceId: 1, resourceName: 'Project Manager' },
{ resourceId: 2, resourceName: 'Software Analyst' },
{ resourceId: 3, resourceName: 'Developer' },
{ resourceId: 4, resourceName: 'Testing Engineer' }
];
export var pagingdata = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress:
100, priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress:
100, approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress:
100, priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'), endDate: new Date('02/07/2017'), duration: 0, progress:
0, priority: 'Low', approved: true }
]

Copyright © 2001 -2024 Syncfusion Inc. 498


TreeGrid Immutable mode in React Treegrid component

},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress:
60, priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress:
100, priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2,
progress: 100, approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress:
100, approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'), endDate: new Date('02/14/2017'), duration: 0, progress:
0, priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1', startDate:
new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2', startDate:
new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2, progress:
'0', priority: 'Normal', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 499


TreeGrid Immutable mode in React Treegrid component

{ taskID: 18, taskName: 'Bug fix', startDate: new


Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2, progress:
'0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'), endDate: new Date('02/27/2017'),
duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete', startDate:
new Date('02/27/2017'), endDate: new Date('02/27/2017'), duration: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1', startDate:
new Date('02/17/2017'), endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2', startDate:
new Date('02/17/2017'), endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'), endDate: new Date('02/24/2017'), duration: 2, progress:
'0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'), endDate: new Date('02/26/2017'), duration: 2, progress:
'0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'), endDate: new Date('02/28/2017'),
duration: 2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete', startDate:
new Date('02/28/2017'), endDate: new Date('02/28/2017'), duration: 0,
priority: 'Normal', approved: false }
]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1', startDate:
new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2', startDate:
new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 500


TreeGrid Immutable mode in React Treegrid component

{ taskID: 33, taskName: 'Testing', startDate: new


Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2, progress:
'0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2, progress:
'0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'), endDate: new Date('02/27/2017'),
duration: 2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete', startDate:
new Date('02/27/2017'), endDate: new Date('02/27/2017'), duration: 0,
priority: 'Critical', approved: false }
]
}
]
}
];
export var textWrapData = [
{
taskID: 1,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Software Specification', startDate: new
Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress:
60, priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress:
100, priority: 'Critical', approved: false },
{ taskID: 4, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2,
progress: 100, approved: true },
{ taskID: 5, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress:
100, approved: true },
{ taskID: 6, taskName: 'Design complete', startDate: new
Date('02/14/2017'), endDate: new Date('02/14/2017'), duration: 0, progress:
0, priority: 'Normal', approved: true }
]
},
{
taskID: 7,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
subtasks: [
{
taskID: 8,
taskName: 'Phase 1',

Copyright © 2001 -2024 Syncfusion Inc. 501


TreeGrid Immutable mode in React Treegrid component

startDate: new Date('02/17/2017'),


endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
subtasks: [{
taskID: 9,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
approved: false,
subtasks: [
{ taskID: 10, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'),
duration: 3, progress: '50', priority: 'High', approved: false },
{ taskID: 11, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'),
duration: 3, progress: '50', priority: 'Low', approved: true },
{ taskID: 12, taskName: 'Testing', startDate:
new Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 13, taskName: 'Bug fix', startDate:
new Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 14, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'), endDate: new
Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved:
false },
{ taskID: 15, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'), endDate: new Date('02/27/2017'),
duration: 0, priority: 'Low', approved: true }
]
}]
},
{
taskID: 16,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
subtasks: [{
taskID: 17,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
subtasks: [
{ taskID: 18, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'), endDate: new Date('02/20/2017'),
duration: 4, progress: '50', priority: 'Normal', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 502


TreeGrid Immutable mode in React Treegrid component

{ taskID: 19, taskName: 'Development Task 2',


startDate: new Date('02/17/2017'), endDate: new Date('02/20/2017'),
duration: 4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 20, taskName: 'Testing', startDate:
new Date('02/21/2017'), endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 21, taskName: 'Bug fix', startDate:
new Date('02/25/2017'), endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 22, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'), endDate: new
Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical',
approved: true },
{ taskID: 23, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'), endDate: new Date('02/28/2017'),
duration: 0, priority: 'Normal', approved: false }
]
}]
},
{
taskID: 24,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
subtasks: [{
taskID: 25,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
subtasks: [
{ taskID: 26, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'),
duration: 3, progress: '50', priority: 'Low', approved: true },
{ taskID: 27, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'),
duration: 3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 28, taskName: 'Testing', startDate:
new Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 29, taskName: 'Bug fix', startDate:
new Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 30, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'), endDate: new
Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal',
approved: true },
{ taskID: 31, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'), endDate: new Date('02/27/2017'),
duration: 0, priority: 'Critical', approved: false },
]
}]

Copyright © 2001 -2024 Syncfusion Inc. 503


TreeGrid Immutable mode in React Treegrid component

}
]
}
];

DATASOURCE.TSX
{% raw %}
/**
*Sample data
*/
export let virtualData: Object[] = [];
export function dataSource(): void {
let parent: number = -1;
let parentId: number = null;
let names: string[] = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD',
'HANAR', 'CHOPS', 'RICSU', 'WELLI', 'HILAA', 'ERNSH', 'CENTC',
'OTTIK', 'QUEDE', 'RATTC', 'ERNSH', 'FOLKO', 'BLONP', 'WARTH', 'FRANK',
'GROSR', 'WHITC', 'WARTH', 'SPLIR', 'RATTC', 'QUICK', 'VINET',
'MAGAA', 'TORTU', 'MORGK', 'BERGS', 'LEHMS', 'BERGS', 'ROMEY', 'ROMEY',
'LILAS', 'LEHMS', 'QUICK', 'QUICK', 'RICAR', 'REGGC', 'BSBEV',
'COMMI', 'QUEDE', 'TRADH', 'TORTU', 'RATTC', 'VINET', 'LILAS', 'BLONP',
'HUNGO', 'RICAR', 'MAGAA', 'WANDK', 'SUPRD', 'GODOS', 'TORTU',
'OLDWO', 'ROMEY', 'LONEP', 'ANATR', 'HUNGO', 'THEBI', 'DUMON', 'WANDK',
'QUICK', 'RATTC', 'ISLAT', 'RATTC', 'LONEP', 'ISLAT', 'TORTU',
'WARTH', 'ISLAT', 'PERIC', 'KOENE', 'SAVEA', 'KOENE', 'BOLID', 'FOLKO',
'FURIB', 'SPLIR', 'LILAS', 'BONAP', 'MEREP', 'WARTH', 'VICTE',
'HUNGO', 'PRINI', 'FRANK', 'OLDWO', 'MEREP', 'BONAP', 'SIMOB', 'FRANK',
'LEHMS', 'WHITC', 'QUICK', 'RATTC', 'FAMIA'];
for (let i: number = 0; i < 10000; i++) {
if (i % 5 === 0) {
parent = i;
}
if (i % 5 !== 0) {
let crew: string = 'Crew';
let num: number = isNaN((virtualData.length % parent) - 1) ? 0
: (virtualData.length % parent) - 1;
virtualData[num][crew].push({
'TaskID': i + 1,
'FIELD1': names[Math.floor(Math.random() * names.length)],
'FIELD2': 1967 + (i % 10),
'FIELD3': Math.floor(Math.random() * 200),
'FIELD4': Math.floor(Math.random() * 100),
'FIELD5': Math.floor(Math.random() * 2000),
'FIELD6': Math.floor(Math.random() * 1000),
'FIELD7': Math.floor(Math.random() * 100),
'FIELD8': Math.floor(Math.random() * 10),
'FIELD9': Math.floor(Math.random() * 10),
'FIELD10': Math.floor(Math.random() * 100),
'FIELD11': Math.floor(Math.random() * 100),
'FIELD12': Math.floor(Math.random() * 1000),
'FIELD13': Math.floor(Math.random() * 10),
'FIELD14': Math.floor(Math.random() * 10),
'FIELD15': Math.floor(Math.random() * 1000),
'FIELD16': Math.floor(Math.random() * 200),
'FIELD17': Math.floor(Math.random() * 300),

Copyright © 2001 -2024 Syncfusion Inc. 504


TreeGrid Immutable mode in React Treegrid component

'FIELD18': Math.floor(Math.random() * 400),


'FIELD19': Math.floor(Math.random() * 500),
'FIELD20': Math.floor(Math.random() * 700),
'FIELD21': Math.floor(Math.random() * 800),
'FIELD22': Math.floor(Math.random() * 1000),
'FIELD23': Math.floor(Math.random() * 2000),
'FIELD24': Math.floor(Math.random() * 150),
'FIELD25': Math.floor(Math.random() * 1000),
'FIELD26': Math.floor(Math.random() * 100),
'FIELD27': Math.floor(Math.random() * 400),
'FIELD28': Math.floor(Math.random() * 600),
'FIELD29': Math.floor(Math.random() * 500),
'FIELD30': Math.floor(Math.random() * 300),
});
} else {
virtualData.push({
'TaskID': i + 1,
'Crew': [],
'FIELD1': names[Math.floor(Math.random() * names.length)],
'FIELD2': 1967 + (i % 10),
'FIELD3': Math.floor(Math.random() * 200),
'FIELD4': Math.floor(Math.random() * 100),
'FIELD5': Math.floor(Math.random() * 2000),
'FIELD6': Math.floor(Math.random() * 1000),
'FIELD7': Math.floor(Math.random() * 100),
'FIELD8': Math.floor(Math.random() * 10),
'FIELD9': Math.floor(Math.random() * 10),
'FIELD10': Math.floor(Math.random() * 100),
'FIELD11': Math.floor(Math.random() * 100),
'FIELD12': Math.floor(Math.random() * 1000),
'FIELD13': Math.floor(Math.random() * 10),
'FIELD14': Math.floor(Math.random() * 10),
'FIELD15': Math.floor(Math.random() * 1000),
'FIELD16': Math.floor(Math.random() * 200),
'FIELD17': Math.floor(Math.random() * 300),
'FIELD18': Math.floor(Math.random() * 400),
'FIELD19': Math.floor(Math.random() * 500),
'FIELD20': Math.floor(Math.random() * 700),
'FIELD21': Math.floor(Math.random() * 800),
'FIELD22': Math.floor(Math.random() * 1000),
'FIELD23': Math.floor(Math.random() * 2000),
'FIELD24': Math.floor(Math.random() * 150),
'FIELD25': Math.floor(Math.random() * 1000),
'FIELD26': Math.floor(Math.random() * 100),
'FIELD27': Math.floor(Math.random() * 400),
'FIELD28': Math.floor(Math.random() * 600),
'FIELD29': Math.floor(Math.random() * 500),
'FIELD30': Math.floor(Math.random() * 300),
});
}
}
}
let stringData: string = JSON.stringify([
{
'OrderID': 10248,
'CustomerID': 'VINET',
'OrderDate': '1996-07-04T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 505


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-07-16T00:00:00.000Z',
'Freight': 32.38,
'ShipName': 'Vins et alcools Chevalier',
'ShipAddress': '59 rue de l\'Abbaye',
'ShipCity': 'Reims',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10249,
'CustomerID': 'TOMSP',
'OrderDate': '1996-07-05T00:00:00.000Z',
'ShippedDate': '1996-07-10T00:00:00.000Z',
'Freight': 11.61,
'ShipName': 'Toms Spezialitäten',
'ShipAddress': 'Luisenstr. 48',
'ShipCity': 'Münster',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10250,
'CustomerID': 'HANAR',
'OrderDate': '1996-07-08T00:00:00.000Z',
'ShippedDate': '1996-07-12T00:00:00.000Z',
'Freight': 65.83,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10251,
'CustomerID': 'VICTE',
'OrderDate': '1996-07-08T00:00:00.000Z',
'ShippedDate': '1996-07-15T00:00:00.000Z',
'Freight': 41.34,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10252,
'CustomerID': 'SUPRD',
'OrderDate': '1996-07-09T00:00:00.000Z',
'ShippedDate': '1996-07-11T00:00:00.000Z',
'Freight': 51.3,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 506


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10253,
'CustomerID': 'HANAR',
'OrderDate': '1996-07-10T00:00:00.000Z',
'ShippedDate': '1996-07-16T00:00:00.000Z',
'Freight': 58.17,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10254,
'CustomerID': 'CHOPS',
'OrderDate': '1996-07-11T00:00:00.000Z',
'ShippedDate': '1996-07-23T00:00:00.000Z',
'Freight': 22.98,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10255,
'CustomerID': 'RICSU',
'OrderDate': '1996-07-12T00:00:00.000Z',
'ShippedDate': '1996-07-15T00:00:00.000Z',
'Freight': 148.33,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10256,
'CustomerID': 'WELLI',
'OrderDate': '1996-07-15T00:00:00.000Z',
'ShippedDate': '1996-07-17T00:00:00.000Z',
'Freight': 13.97,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10257,
'CustomerID': 'HILAA',
'OrderDate': '1996-07-16T00:00:00.000Z',
'ShippedDate': '1996-07-22T00:00:00.000Z',
'Freight': 81.91,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',

Copyright © 2001 -2024 Syncfusion Inc. 507


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Venezuela'
},
{
'OrderID': 10258,
'CustomerID': 'ERNSH',
'OrderDate': '1996-07-17T00:00:00.000Z',
'ShippedDate': '1996-07-23T00:00:00.000Z',
'Freight': 140.51,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10259,
'CustomerID': 'CENTC',
'OrderDate': '1996-07-18T00:00:00.000Z',
'ShippedDate': '1996-07-25T00:00:00.000Z',
'Freight': 3.25,
'ShipName': 'Centro comercial Moctezuma',
'ShipAddress': 'Sierras de Granada 9993',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10260,
'CustomerID': 'OTTIK',
'OrderDate': '1996-07-19T00:00:00.000Z',
'ShippedDate': '1996-07-29T00:00:00.000Z',
'Freight': 55.09,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10261,
'CustomerID': 'QUEDE',
'OrderDate': '1996-07-19T00:00:00.000Z',
'ShippedDate': '1996-07-30T00:00:00.000Z',
'Freight': 3.05,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10262,
'CustomerID': 'RATTC',
'OrderDate': '1996-07-22T00:00:00.000Z',
'ShippedDate': '1996-07-25T00:00:00.000Z',
'Freight': 48.29,
'ShipName': 'Rattlesnake Canyon Grocery',

Copyright © 2001 -2024 Syncfusion Inc. 508


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '2817 Milton Dr.',


'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10263,
'CustomerID': 'ERNSH',
'OrderDate': '1996-07-23T00:00:00.000Z',
'ShippedDate': '1996-07-31T00:00:00.000Z',
'Freight': 146.06,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10264,
'CustomerID': 'FOLKO',
'OrderDate': '1996-07-24T00:00:00.000Z',
'ShippedDate': '1996-08-23T00:00:00.000Z',
'Freight': 3.67,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10265,
'CustomerID': 'BLONP',
'OrderDate': '1996-07-25T00:00:00.000Z',
'ShippedDate': '1996-08-12T00:00:00.000Z',
'Freight': 55.28,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10266,
'CustomerID': 'WARTH',
'OrderDate': '1996-07-26T00:00:00.000Z',
'ShippedDate': '1996-07-31T00:00:00.000Z',
'Freight': 25.73,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10267,
'CustomerID': 'FRANK',
'OrderDate': '1996-07-29T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 509


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-08-06T00:00:00.000Z',
'Freight': 208.58,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10268,
'CustomerID': 'GROSR',
'OrderDate': '1996-07-30T00:00:00.000Z',
'ShippedDate': '1996-08-02T00:00:00.000Z',
'Freight': 66.29,
'ShipName': 'GROSELLA-Restaurante',
'ShipAddress': '5ª Ave. Los Palos Grandes',
'ShipCity': 'Caracas',
'ShipRegion': 'DF',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10269,
'CustomerID': 'WHITC',
'OrderDate': '1996-07-31T00:00:00.000Z',
'ShippedDate': '1996-08-09T00:00:00.000Z',
'Freight': 4.56,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10270,
'CustomerID': 'WARTH',
'OrderDate': '1996-08-01T00:00:00.000Z',
'ShippedDate': '1996-08-02T00:00:00.000Z',
'Freight': 136.54,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10271,
'CustomerID': 'SPLIR',
'OrderDate': '1996-08-01T00:00:00.000Z',
'ShippedDate': '1996-08-30T00:00:00.000Z',
'Freight': 4.54,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 510


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10272,
'CustomerID': 'RATTC',
'OrderDate': '1996-08-02T00:00:00.000Z',
'ShippedDate': '1996-08-06T00:00:00.000Z',
'Freight': 98.03,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10273,
'CustomerID': 'QUICK',
'OrderDate': '1996-08-05T00:00:00.000Z',
'ShippedDate': '1996-08-12T00:00:00.000Z',
'Freight': 76.07,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10274,
'CustomerID': 'VINET',
'OrderDate': '1996-08-06T00:00:00.000Z',
'ShippedDate': '1996-08-16T00:00:00.000Z',
'Freight': 6.01,
'ShipName': 'Vins et alcools Chevalier',
'ShipAddress': '59 rue de l\'Abbaye',
'ShipCity': 'Reims',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10275,
'CustomerID': 'MAGAA',
'OrderDate': '1996-08-07T00:00:00.000Z',
'ShippedDate': '1996-08-09T00:00:00.000Z',
'Freight': 26.93,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10276,
'CustomerID': 'TORTU',
'OrderDate': '1996-08-08T00:00:00.000Z',
'ShippedDate': '1996-08-14T00:00:00.000Z',
'Freight': 13.84,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 511


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Mexico'
},
{
'OrderID': 10277,
'CustomerID': 'MORGK',
'OrderDate': '1996-08-09T00:00:00.000Z',
'ShippedDate': '1996-08-13T00:00:00.000Z',
'Freight': 125.77,
'ShipName': 'Morgenstern Gesundkost',
'ShipAddress': 'Heerstr. 22',
'ShipCity': 'Leipzig',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10278,
'CustomerID': 'BERGS',
'OrderDate': '1996-08-12T00:00:00.000Z',
'ShippedDate': '1996-08-16T00:00:00.000Z',
'Freight': 92.69,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10279,
'CustomerID': 'LEHMS',
'OrderDate': '1996-08-13T00:00:00.000Z',
'ShippedDate': '1996-08-16T00:00:00.000Z',
'Freight': 25.83,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10280,
'CustomerID': 'BERGS',
'OrderDate': '1996-08-14T00:00:00.000Z',
'ShippedDate': '1996-09-12T00:00:00.000Z',
'Freight': 8.98,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10281,
'CustomerID': 'ROMEY',
'OrderDate': '1996-08-14T00:00:00.000Z',
'ShippedDate': '1996-08-21T00:00:00.000Z',
'Freight': 2.94,
'ShipName': 'Romero y tomillo',

Copyright © 2001 -2024 Syncfusion Inc. 512


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Gran Vía, 1',


'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10282,
'CustomerID': 'ROMEY',
'OrderDate': '1996-08-15T00:00:00.000Z',
'ShippedDate': '1996-08-21T00:00:00.000Z',
'Freight': 12.69,
'ShipName': 'Romero y tomillo',
'ShipAddress': 'Gran Vía, 1',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10283,
'CustomerID': 'LILAS',
'OrderDate': '1996-08-16T00:00:00.000Z',
'ShippedDate': '1996-08-23T00:00:00.000Z',
'Freight': 84.81,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10284,
'CustomerID': 'LEHMS',
'OrderDate': '1996-08-19T00:00:00.000Z',
'ShippedDate': '1996-08-27T00:00:00.000Z',
'Freight': 76.56,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10285,
'CustomerID': 'QUICK',
'OrderDate': '1996-08-20T00:00:00.000Z',
'ShippedDate': '1996-08-26T00:00:00.000Z',
'Freight': 76.83,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10286,
'CustomerID': 'QUICK',
'OrderDate': '1996-08-21T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 513


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-08-30T00:00:00.000Z',
'Freight': 229.24,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10287,
'CustomerID': 'RICAR',
'OrderDate': '1996-08-22T00:00:00.000Z',
'ShippedDate': '1996-08-28T00:00:00.000Z',
'Freight': 12.76,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10288,
'CustomerID': 'REGGC',
'OrderDate': '1996-08-23T00:00:00.000Z',
'ShippedDate': '1996-09-03T00:00:00.000Z',
'Freight': 7.45,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10289,
'CustomerID': 'BSBEV',
'OrderDate': '1996-08-26T00:00:00.000Z',
'ShippedDate': '1996-08-28T00:00:00.000Z',
'Freight': 22.77,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10290,
'CustomerID': 'COMMI',
'OrderDate': '1996-08-27T00:00:00.000Z',
'ShippedDate': '1996-09-03T00:00:00.000Z',
'Freight': 79.7,
'ShipName': 'Comércio Mineiro',
'ShipAddress': 'Av. dos Lusíadas, 23',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 514


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10291,
'CustomerID': 'QUEDE',
'OrderDate': '1996-08-27T00:00:00.000Z',
'ShippedDate': '1996-09-04T00:00:00.000Z',
'Freight': 6.4,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10292,
'CustomerID': 'TRADH',
'OrderDate': '1996-08-28T00:00:00.000Z',
'ShippedDate': '1996-09-02T00:00:00.000Z',
'Freight': 1.35,
'ShipName': 'Tradiçao Hipermercados',
'ShipAddress': 'Av. Inês de Castro, 414',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10293,
'CustomerID': 'TORTU',
'OrderDate': '1996-08-29T00:00:00.000Z',
'ShippedDate': '1996-09-11T00:00:00.000Z',
'Freight': 21.18,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10294,
'CustomerID': 'RATTC',
'OrderDate': '1996-08-30T00:00:00.000Z',
'ShippedDate': '1996-09-05T00:00:00.000Z',
'Freight': 147.26,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10295,
'CustomerID': 'VINET',
'OrderDate': '1996-09-02T00:00:00.000Z',
'ShippedDate': '1996-09-10T00:00:00.000Z',
'Freight': 1.15,
'ShipName': 'Vins et alcools Chevalier',
'ShipAddress': '59 rue de l\'Abbaye',
'ShipCity': 'Reims',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 515


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'France'
},
{
'OrderID': 10296,
'CustomerID': 'LILAS',
'OrderDate': '1996-09-03T00:00:00.000Z',
'ShippedDate': '1996-09-11T00:00:00.000Z',
'Freight': 0.12,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10297,
'CustomerID': 'BLONP',
'OrderDate': '1996-09-04T00:00:00.000Z',
'ShippedDate': '1996-09-10T00:00:00.000Z',
'Freight': 5.74,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10298,
'CustomerID': 'HUNGO',
'OrderDate': '1996-09-05T00:00:00.000Z',
'ShippedDate': '1996-09-11T00:00:00.000Z',
'Freight': 168.22,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10299,
'CustomerID': 'RICAR',
'OrderDate': '1996-09-06T00:00:00.000Z',
'ShippedDate': '1996-09-13T00:00:00.000Z',
'Freight': 29.76,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10300,
'CustomerID': 'MAGAA',
'OrderDate': '1996-09-09T00:00:00.000Z',
'ShippedDate': '1996-09-18T00:00:00.000Z',
'Freight': 17.68,
'ShipName': 'Magazzini Alimentari Riuniti',

Copyright © 2001 -2024 Syncfusion Inc. 516


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Via Ludovico il Moro 22',


'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10301,
'CustomerID': 'WANDK',
'OrderDate': '1996-09-09T00:00:00.000Z',
'ShippedDate': '1996-09-17T00:00:00.000Z',
'Freight': 45.08,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10302,
'CustomerID': 'SUPRD',
'OrderDate': '1996-09-10T00:00:00.000Z',
'ShippedDate': '1996-10-09T00:00:00.000Z',
'Freight': 6.27,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10303,
'CustomerID': 'GODOS',
'OrderDate': '1996-09-11T00:00:00.000Z',
'ShippedDate': '1996-09-18T00:00:00.000Z',
'Freight': 107.83,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10304,
'CustomerID': 'TORTU',
'OrderDate': '1996-09-12T00:00:00.000Z',
'ShippedDate': '1996-09-17T00:00:00.000Z',
'Freight': 63.79,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10305,
'CustomerID': 'OLDWO',
'OrderDate': '1996-09-13T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 517


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-10-09T00:00:00.000Z',
'Freight': 257.62,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10306,
'CustomerID': 'ROMEY',
'OrderDate': '1996-09-16T00:00:00.000Z',
'ShippedDate': '1996-09-23T00:00:00.000Z',
'Freight': 7.56,
'ShipName': 'Romero y tomillo',
'ShipAddress': 'Gran Vía, 1',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10307,
'CustomerID': 'LONEP',
'OrderDate': '1996-09-17T00:00:00.000Z',
'ShippedDate': '1996-09-25T00:00:00.000Z',
'Freight': 0.56,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10308,
'CustomerID': 'ANATR',
'OrderDate': '1996-09-18T00:00:00.000Z',
'ShippedDate': '1996-09-24T00:00:00.000Z',
'Freight': 1.61,
'ShipName': 'Ana Trujillo Emparedados y helados',
'ShipAddress': 'Avda. de la Constitución 2222',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10309,
'CustomerID': 'HUNGO',
'OrderDate': '1996-09-19T00:00:00.000Z',
'ShippedDate': '1996-10-23T00:00:00.000Z',
'Freight': 47.3,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 518


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10310,
'CustomerID': 'THEBI',
'OrderDate': '1996-09-20T00:00:00.000Z',
'ShippedDate': '1996-09-27T00:00:00.000Z',
'Freight': 17.52,
'ShipName': 'The Big Cheese',
'ShipAddress': '89 Jefferson Way Suite 2',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10311,
'CustomerID': 'DUMON',
'OrderDate': '1996-09-20T00:00:00.000Z',
'ShippedDate': '1996-09-26T00:00:00.000Z',
'Freight': 24.69,
'ShipName': 'Du monde entier',
'ShipAddress': '67, rue des Cinquante Otages',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10312,
'CustomerID': 'WANDK',
'OrderDate': '1996-09-23T00:00:00.000Z',
'ShippedDate': '1996-10-03T00:00:00.000Z',
'Freight': 40.26,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10313,
'CustomerID': 'QUICK',
'OrderDate': '1996-09-24T00:00:00.000Z',
'ShippedDate': '1996-10-04T00:00:00.000Z',
'Freight': 1.96,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10314,
'CustomerID': 'RATTC',
'OrderDate': '1996-09-25T00:00:00.000Z',
'ShippedDate': '1996-10-04T00:00:00.000Z',
'Freight': 74.16,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',

Copyright © 2001 -2024 Syncfusion Inc. 519


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'USA'
},
{
'OrderID': 10315,
'CustomerID': 'ISLAT',
'OrderDate': '1996-09-26T00:00:00.000Z',
'ShippedDate': '1996-10-03T00:00:00.000Z',
'Freight': 41.76,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10316,
'CustomerID': 'RATTC',
'OrderDate': '1996-09-27T00:00:00.000Z',
'ShippedDate': '1996-10-08T00:00:00.000Z',
'Freight': 150.15,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10317,
'CustomerID': 'LONEP',
'OrderDate': '1996-09-30T00:00:00.000Z',
'ShippedDate': '1996-10-10T00:00:00.000Z',
'Freight': 12.69,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10318,
'CustomerID': 'ISLAT',
'OrderDate': '1996-10-01T00:00:00.000Z',
'ShippedDate': '1996-10-04T00:00:00.000Z',
'Freight': 4.73,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10319,
'CustomerID': 'TORTU',
'OrderDate': '1996-10-02T00:00:00.000Z',
'ShippedDate': '1996-10-11T00:00:00.000Z',
'Freight': 64.5,
'ShipName': 'Tortuga Restaurante',

Copyright © 2001 -2024 Syncfusion Inc. 520


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Avda. Azteca 123',


'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10320,
'CustomerID': 'WARTH',
'OrderDate': '1996-10-03T00:00:00.000Z',
'ShippedDate': '1996-10-18T00:00:00.000Z',
'Freight': 34.57,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10321,
'CustomerID': 'ISLAT',
'OrderDate': '1996-10-03T00:00:00.000Z',
'ShippedDate': '1996-10-11T00:00:00.000Z',
'Freight': 3.43,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10322,
'CustomerID': 'PERIC',
'OrderDate': '1996-10-04T00:00:00.000Z',
'ShippedDate': '1996-10-23T00:00:00.000Z',
'Freight': 0.4,
'ShipName': 'Pericles Comidas clásicas',
'ShipAddress': 'Calle Dr. Jorge Cash 321',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10323,
'CustomerID': 'KOENE',
'OrderDate': '1996-10-07T00:00:00.000Z',
'ShippedDate': '1996-10-14T00:00:00.000Z',
'Freight': 4.88,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10324,
'CustomerID': 'SAVEA',
'OrderDate': '1996-10-08T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 521


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-10-10T00:00:00.000Z',
'Freight': 214.27,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10325,
'CustomerID': 'KOENE',
'OrderDate': '1996-10-09T00:00:00.000Z',
'ShippedDate': '1996-10-14T00:00:00.000Z',
'Freight': 64.86,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10326,
'CustomerID': 'BOLID',
'OrderDate': '1996-10-10T00:00:00.000Z',
'ShippedDate': '1996-10-14T00:00:00.000Z',
'Freight': 77.92,
'ShipName': 'Bólido Comidas preparadas',
'ShipAddress': 'C/ Araquil, 67',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10327,
'CustomerID': 'FOLKO',
'OrderDate': '1996-10-11T00:00:00.000Z',
'ShippedDate': '1996-10-14T00:00:00.000Z',
'Freight': 63.36,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10328,
'CustomerID': 'FURIB',
'OrderDate': '1996-10-14T00:00:00.000Z',
'ShippedDate': '1996-10-17T00:00:00.000Z',
'Freight': 87.03,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 522


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10329,
'CustomerID': 'SPLIR',
'OrderDate': '1996-10-15T00:00:00.000Z',
'ShippedDate': '1996-10-23T00:00:00.000Z',
'Freight': 191.67,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10330,
'CustomerID': 'LILAS',
'OrderDate': '1996-10-16T00:00:00.000Z',
'ShippedDate': '1996-10-28T00:00:00.000Z',
'Freight': 12.75,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10331,
'CustomerID': 'BONAP',
'OrderDate': '1996-10-16T00:00:00.000Z',
'ShippedDate': '1996-10-21T00:00:00.000Z',
'Freight': 10.19,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10332,
'CustomerID': 'MEREP',
'OrderDate': '1996-10-17T00:00:00.000Z',
'ShippedDate': '1996-10-21T00:00:00.000Z',
'Freight': 52.84,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10333,
'CustomerID': 'WARTH',
'OrderDate': '1996-10-18T00:00:00.000Z',
'ShippedDate': '1996-10-25T00:00:00.000Z',
'Freight': 0.59,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 523


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Finland'
},
{
'OrderID': 10334,
'CustomerID': 'VICTE',
'OrderDate': '1996-10-21T00:00:00.000Z',
'ShippedDate': '1996-10-28T00:00:00.000Z',
'Freight': 8.56,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10335,
'CustomerID': 'HUNGO',
'OrderDate': '1996-10-22T00:00:00.000Z',
'ShippedDate': '1996-10-24T00:00:00.000Z',
'Freight': 42.11,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10336,
'CustomerID': 'PRINI',
'OrderDate': '1996-10-23T00:00:00.000Z',
'ShippedDate': '1996-10-25T00:00:00.000Z',
'Freight': 15.51,
'ShipName': 'Princesa Isabel Vinhos',
'ShipAddress': 'Estrada da saúde n. 58',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10337,
'CustomerID': 'FRANK',
'OrderDate': '1996-10-24T00:00:00.000Z',
'ShippedDate': '1996-10-29T00:00:00.000Z',
'Freight': 108.26,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10338,
'CustomerID': 'OLDWO',
'OrderDate': '1996-10-25T00:00:00.000Z',
'ShippedDate': '1996-10-29T00:00:00.000Z',
'Freight': 84.21,
'ShipName': 'Old World Delicatessen',

Copyright © 2001 -2024 Syncfusion Inc. 524


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '2743 Bering St.',


'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10339,
'CustomerID': 'MEREP',
'OrderDate': '1996-10-28T00:00:00.000Z',
'ShippedDate': '1996-11-04T00:00:00.000Z',
'Freight': 15.66,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10340,
'CustomerID': 'BONAP',
'OrderDate': '1996-10-29T00:00:00.000Z',
'ShippedDate': '1996-11-08T00:00:00.000Z',
'Freight': 166.31,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10341,
'CustomerID': 'SIMOB',
'OrderDate': '1996-10-29T00:00:00.000Z',
'ShippedDate': '1996-11-05T00:00:00.000Z',
'Freight': 26.78,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10342,
'CustomerID': 'FRANK',
'OrderDate': '1996-10-30T00:00:00.000Z',
'ShippedDate': '1996-11-04T00:00:00.000Z',
'Freight': 54.83,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10343,
'CustomerID': 'LEHMS',
'OrderDate': '1996-10-31T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 525


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-11-06T00:00:00.000Z',
'Freight': 110.37,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10344,
'CustomerID': 'WHITC',
'OrderDate': '1996-11-01T00:00:00.000Z',
'ShippedDate': '1996-11-05T00:00:00.000Z',
'Freight': 23.29,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10345,
'CustomerID': 'QUICK',
'OrderDate': '1996-11-04T00:00:00.000Z',
'ShippedDate': '1996-11-11T00:00:00.000Z',
'Freight': 249.06,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10346,
'CustomerID': 'RATTC',
'OrderDate': '1996-11-05T00:00:00.000Z',
'ShippedDate': '1996-11-08T00:00:00.000Z',
'Freight': 142.08,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10347,
'CustomerID': 'FAMIA',
'OrderDate': '1996-11-06T00:00:00.000Z',
'ShippedDate': '1996-11-08T00:00:00.000Z',
'Freight': 3.1,
'ShipName': 'Familia Arquibaldo',
'ShipAddress': 'Rua Orós, 92',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 526


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10348,
'CustomerID': 'WANDK',
'OrderDate': '1996-11-07T00:00:00.000Z',
'ShippedDate': '1996-11-15T00:00:00.000Z',
'Freight': 0.78,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10349,
'CustomerID': 'SPLIR',
'OrderDate': '1996-11-08T00:00:00.000Z',
'ShippedDate': '1996-11-15T00:00:00.000Z',
'Freight': 8.63,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10350,
'CustomerID': 'LAMAI',
'OrderDate': '1996-11-11T00:00:00.000Z',
'ShippedDate': '1996-12-03T00:00:00.000Z',
'Freight': 64.19,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10351,
'CustomerID': 'ERNSH',
'OrderDate': '1996-11-11T00:00:00.000Z',
'ShippedDate': '1996-11-20T00:00:00.000Z',
'Freight': 162.33,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10352,
'CustomerID': 'FURIB',
'OrderDate': '1996-11-12T00:00:00.000Z',
'ShippedDate': '1996-11-18T00:00:00.000Z',
'Freight': 1.3,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 527


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Portugal'
},
{
'OrderID': 10353,
'CustomerID': 'PICCO',
'OrderDate': '1996-11-13T00:00:00.000Z',
'ShippedDate': '1996-11-25T00:00:00.000Z',
'Freight': 360.63,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10354,
'CustomerID': 'PERIC',
'OrderDate': '1996-11-14T00:00:00.000Z',
'ShippedDate': '1996-11-20T00:00:00.000Z',
'Freight': 53.8,
'ShipName': 'Pericles Comidas clásicas',
'ShipAddress': 'Calle Dr. Jorge Cash 321',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10355,
'CustomerID': 'AROUT',
'OrderDate': '1996-11-15T00:00:00.000Z',
'ShippedDate': '1996-11-20T00:00:00.000Z',
'Freight': 41.95,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10356,
'CustomerID': 'WANDK',
'OrderDate': '1996-11-18T00:00:00.000Z',
'ShippedDate': '1996-11-27T00:00:00.000Z',
'Freight': 36.71,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10357,
'CustomerID': 'LILAS',
'OrderDate': '1996-11-19T00:00:00.000Z',
'ShippedDate': '1996-12-02T00:00:00.000Z',
'Freight': 34.88,
'ShipName': 'LILA-Supermercado',

Copyright © 2001 -2024 Syncfusion Inc. 528


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',


'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10358,
'CustomerID': 'LAMAI',
'OrderDate': '1996-11-20T00:00:00.000Z',
'ShippedDate': '1996-11-27T00:00:00.000Z',
'Freight': 19.64,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10359,
'CustomerID': 'SEVES',
'OrderDate': '1996-11-21T00:00:00.000Z',
'ShippedDate': '1996-11-26T00:00:00.000Z',
'Freight': 288.43,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10360,
'CustomerID': 'BLONP',
'OrderDate': '1996-11-22T00:00:00.000Z',
'ShippedDate': '1996-12-02T00:00:00.000Z',
'Freight': 131.7,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10361,
'CustomerID': 'QUICK',
'OrderDate': '1996-11-22T00:00:00.000Z',
'ShippedDate': '1996-12-03T00:00:00.000Z',
'Freight': 183.17,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10362,
'CustomerID': 'BONAP',
'OrderDate': '1996-11-25T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 529


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-11-28T00:00:00.000Z',
'Freight': 96.04,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10363,
'CustomerID': 'DRACD',
'OrderDate': '1996-11-26T00:00:00.000Z',
'ShippedDate': '1996-12-04T00:00:00.000Z',
'Freight': 30.54,
'ShipName': 'Drachenblut Delikatessen',
'ShipAddress': 'Walserweg 21',
'ShipCity': 'Aachen',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10364,
'CustomerID': 'EASTC',
'OrderDate': '1996-11-26T00:00:00.000Z',
'ShippedDate': '1996-12-04T00:00:00.000Z',
'Freight': 71.97,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10365,
'CustomerID': 'ANTON',
'OrderDate': '1996-11-27T00:00:00.000Z',
'ShippedDate': '1996-12-02T00:00:00.000Z',
'Freight': 22,
'ShipName': 'Antonio Moreno Taquería',
'ShipAddress': 'Mataderos 2312',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10366,
'CustomerID': 'GALED',
'OrderDate': '1996-11-28T00:00:00.000Z',
'ShippedDate': '1996-12-30T00:00:00.000Z',
'Freight': 10.14,
'ShipName': 'Galería del gastronómo',
'ShipAddress': 'Rambla de Cataluña, 23',
'ShipCity': 'Barcelona',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 530


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10367,
'CustomerID': 'VAFFE',
'OrderDate': '1996-11-28T00:00:00.000Z',
'ShippedDate': '1996-12-02T00:00:00.000Z',
'Freight': 13.55,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10368,
'CustomerID': 'ERNSH',
'OrderDate': '1996-11-29T00:00:00.000Z',
'ShippedDate': '1996-12-02T00:00:00.000Z',
'Freight': 101.95,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10369,
'CustomerID': 'SPLIR',
'OrderDate': '1996-12-02T00:00:00.000Z',
'ShippedDate': '1996-12-09T00:00:00.000Z',
'Freight': 195.68,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10370,
'CustomerID': 'CHOPS',
'OrderDate': '1996-12-03T00:00:00.000Z',
'ShippedDate': '1996-12-27T00:00:00.000Z',
'Freight': 1.17,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10371,
'CustomerID': 'LAMAI',
'OrderDate': '1996-12-03T00:00:00.000Z',
'ShippedDate': '1996-12-24T00:00:00.000Z',
'Freight': 0.45,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 531


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'France'
},
{
'OrderID': 10372,
'CustomerID': 'QUEEN',
'OrderDate': '1996-12-04T00:00:00.000Z',
'ShippedDate': '1996-12-09T00:00:00.000Z',
'Freight': 890.78,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10373,
'CustomerID': 'HUNGO',
'OrderDate': '1996-12-05T00:00:00.000Z',
'ShippedDate': '1996-12-11T00:00:00.000Z',
'Freight': 124.12,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10374,
'CustomerID': 'WOLZA',
'OrderDate': '1996-12-05T00:00:00.000Z',
'ShippedDate': '1996-12-09T00:00:00.000Z',
'Freight': 3.94,
'ShipName': 'Wolski Zajazd',
'ShipAddress': 'ul. Filtrowa 68',
'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 10375,
'CustomerID': 'HUNGC',
'OrderDate': '1996-12-06T00:00:00.000Z',
'ShippedDate': '1996-12-09T00:00:00.000Z',
'Freight': 20.12,
'ShipName': 'Hungry Coyote Import Store',
'ShipAddress': 'City Center Plaza 516 Main St.',
'ShipCity': 'Elgin',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10376,
'CustomerID': 'MEREP',
'OrderDate': '1996-12-09T00:00:00.000Z',
'ShippedDate': '1996-12-13T00:00:00.000Z',
'Freight': 20.39,
'ShipName': 'Mère Paillarde',

Copyright © 2001 -2024 Syncfusion Inc. 532


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '43 rue St. Laurent',


'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10377,
'CustomerID': 'SEVES',
'OrderDate': '1996-12-09T00:00:00.000Z',
'ShippedDate': '1996-12-13T00:00:00.000Z',
'Freight': 22.21,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10378,
'CustomerID': 'FOLKO',
'OrderDate': '1996-12-10T00:00:00.000Z',
'ShippedDate': '1996-12-19T00:00:00.000Z',
'Freight': 5.44,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10379,
'CustomerID': 'QUEDE',
'OrderDate': '1996-12-11T00:00:00.000Z',
'ShippedDate': '1996-12-13T00:00:00.000Z',
'Freight': 45.03,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10380,
'CustomerID': 'HUNGO',
'OrderDate': '1996-12-12T00:00:00.000Z',
'ShippedDate': '1997-01-16T00:00:00.000Z',
'Freight': 35.03,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10381,
'CustomerID': 'LILAS',
'OrderDate': '1996-12-12T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 533


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1996-12-13T00:00:00.000Z',
'Freight': 7.99,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10382,
'CustomerID': 'ERNSH',
'OrderDate': '1996-12-13T00:00:00.000Z',
'ShippedDate': '1996-12-16T00:00:00.000Z',
'Freight': 94.77,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10383,
'CustomerID': 'AROUT',
'OrderDate': '1996-12-16T00:00:00.000Z',
'ShippedDate': '1996-12-18T00:00:00.000Z',
'Freight': 34.24,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10384,
'CustomerID': 'BERGS',
'OrderDate': '1996-12-16T00:00:00.000Z',
'ShippedDate': '1996-12-20T00:00:00.000Z',
'Freight': 168.64,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10385,
'CustomerID': 'SPLIR',
'OrderDate': '1996-12-17T00:00:00.000Z',
'ShippedDate': '1996-12-23T00:00:00.000Z',
'Freight': 30.96,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 534


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10386,
'CustomerID': 'FAMIA',
'OrderDate': '1996-12-18T00:00:00.000Z',
'ShippedDate': '1996-12-25T00:00:00.000Z',
'Freight': 13.99,
'ShipName': 'Familia Arquibaldo',
'ShipAddress': 'Rua Orós, 92',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10387,
'CustomerID': 'SANTG',
'OrderDate': '1996-12-18T00:00:00.000Z',
'ShippedDate': '1996-12-20T00:00:00.000Z',
'Freight': 93.63,
'ShipName': 'Santé Gourmet',
'ShipAddress': 'Erling Skakkes gate 78',
'ShipCity': 'Stavern',
'ShipRegion': null,
'ShipCountry': 'Norway'
},
{
'OrderID': 10388,
'CustomerID': 'SEVES',
'OrderDate': '1996-12-19T00:00:00.000Z',
'ShippedDate': '1996-12-20T00:00:00.000Z',
'Freight': 34.86,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10389,
'CustomerID': 'BOTTM',
'OrderDate': '1996-12-20T00:00:00.000Z',
'ShippedDate': '1996-12-24T00:00:00.000Z',
'Freight': 47.42,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10390,
'CustomerID': 'ERNSH',
'OrderDate': '1996-12-23T00:00:00.000Z',
'ShippedDate': '1996-12-26T00:00:00.000Z',
'Freight': 126.38,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 535


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Austria'
},
{
'OrderID': 10391,
'CustomerID': 'DRACD',
'OrderDate': '1996-12-23T00:00:00.000Z',
'ShippedDate': '1996-12-31T00:00:00.000Z',
'Freight': 5.45,
'ShipName': 'Drachenblut Delikatessen',
'ShipAddress': 'Walserweg 21',
'ShipCity': 'Aachen',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10392,
'CustomerID': 'PICCO',
'OrderDate': '1996-12-24T00:00:00.000Z',
'ShippedDate': '1997-01-01T00:00:00.000Z',
'Freight': 122.46,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10393,
'CustomerID': 'SAVEA',
'OrderDate': '1996-12-25T00:00:00.000Z',
'ShippedDate': '1997-01-03T00:00:00.000Z',
'Freight': 126.56,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10394,
'CustomerID': 'HUNGC',
'OrderDate': '1996-12-25T00:00:00.000Z',
'ShippedDate': '1997-01-03T00:00:00.000Z',
'Freight': 30.34,
'ShipName': 'Hungry Coyote Import Store',
'ShipAddress': 'City Center Plaza 516 Main St.',
'ShipCity': 'Elgin',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10395,
'CustomerID': 'HILAA',
'OrderDate': '1996-12-26T00:00:00.000Z',
'ShippedDate': '1997-01-03T00:00:00.000Z',
'Freight': 184.41,
'ShipName': 'HILARION-Abastos',

Copyright © 2001 -2024 Syncfusion Inc. 536


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',


'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10396,
'CustomerID': 'FRANK',
'OrderDate': '1996-12-27T00:00:00.000Z',
'ShippedDate': '1997-01-06T00:00:00.000Z',
'Freight': 135.35,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10397,
'CustomerID': 'PRINI',
'OrderDate': '1996-12-27T00:00:00.000Z',
'ShippedDate': '1997-01-02T00:00:00.000Z',
'Freight': 60.26,
'ShipName': 'Princesa Isabel Vinhos',
'ShipAddress': 'Estrada da saúde n. 58',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10398,
'CustomerID': 'SAVEA',
'OrderDate': '1996-12-30T00:00:00.000Z',
'ShippedDate': '1997-01-09T00:00:00.000Z',
'Freight': 89.16,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10399,
'CustomerID': 'VAFFE',
'OrderDate': '1996-12-31T00:00:00.000Z',
'ShippedDate': '1997-01-08T00:00:00.000Z',
'Freight': 27.36,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10400,
'CustomerID': 'EASTC',
'OrderDate': '1997-01-01T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 537


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-01-16T00:00:00.000Z',
'Freight': 83.93,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10401,
'CustomerID': 'RATTC',
'OrderDate': '1997-01-01T00:00:00.000Z',
'ShippedDate': '1997-01-10T00:00:00.000Z',
'Freight': 12.51,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10402,
'CustomerID': 'ERNSH',
'OrderDate': '1997-01-02T00:00:00.000Z',
'ShippedDate': '1997-01-10T00:00:00.000Z',
'Freight': 67.88,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10403,
'CustomerID': 'ERNSH',
'OrderDate': '1997-01-03T00:00:00.000Z',
'ShippedDate': '1997-01-09T00:00:00.000Z',
'Freight': 73.79,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10404,
'CustomerID': 'MAGAA',
'OrderDate': '1997-01-03T00:00:00.000Z',
'ShippedDate': '1997-01-08T00:00:00.000Z',
'Freight': 155.97,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 538


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10405,
'CustomerID': 'LINOD',
'OrderDate': '1997-01-06T00:00:00.000Z',
'ShippedDate': '1997-01-22T00:00:00.000Z',
'Freight': 34.82,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10406,
'CustomerID': 'QUEEN',
'OrderDate': '1997-01-07T00:00:00.000Z',
'ShippedDate': '1997-01-13T00:00:00.000Z',
'Freight': 108.04,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10407,
'CustomerID': 'OTTIK',
'OrderDate': '1997-01-07T00:00:00.000Z',
'ShippedDate': '1997-01-30T00:00:00.000Z',
'Freight': 91.48,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10408,
'CustomerID': 'FOLIG',
'OrderDate': '1997-01-08T00:00:00.000Z',
'ShippedDate': '1997-01-14T00:00:00.000Z',
'Freight': 11.26,
'ShipName': 'Folies gourmandes',
'ShipAddress': '184, chaussée de Tournai',
'ShipCity': 'Lille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10409,
'CustomerID': 'OCEAN',
'OrderDate': '1997-01-09T00:00:00.000Z',
'ShippedDate': '1997-01-14T00:00:00.000Z',
'Freight': 29.83,
'ShipName': 'Océano Atlántico Ltda.',
'ShipAddress': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 539


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Argentina'
},
{
'OrderID': 10410,
'CustomerID': 'BOTTM',
'OrderDate': '1997-01-10T00:00:00.000Z',
'ShippedDate': '1997-01-15T00:00:00.000Z',
'Freight': 2.4,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10411,
'CustomerID': 'BOTTM',
'OrderDate': '1997-01-10T00:00:00.000Z',
'ShippedDate': '1997-01-21T00:00:00.000Z',
'Freight': 23.65,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10412,
'CustomerID': 'WARTH',
'OrderDate': '1997-01-13T00:00:00.000Z',
'ShippedDate': '1997-01-15T00:00:00.000Z',
'Freight': 3.77,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10413,
'CustomerID': 'LAMAI',
'OrderDate': '1997-01-14T00:00:00.000Z',
'ShippedDate': '1997-01-16T00:00:00.000Z',
'Freight': 95.66,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10414,
'CustomerID': 'FAMIA',
'OrderDate': '1997-01-14T00:00:00.000Z',
'ShippedDate': '1997-01-17T00:00:00.000Z',
'Freight': 21.48,
'ShipName': 'Familia Arquibaldo',

Copyright © 2001 -2024 Syncfusion Inc. 540


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Rua Orós, 92',


'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10415,
'CustomerID': 'HUNGC',
'OrderDate': '1997-01-15T00:00:00.000Z',
'ShippedDate': '1997-01-24T00:00:00.000Z',
'Freight': 0.2,
'ShipName': 'Hungry Coyote Import Store',
'ShipAddress': 'City Center Plaza 516 Main St.',
'ShipCity': 'Elgin',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10416,
'CustomerID': 'WARTH',
'OrderDate': '1997-01-16T00:00:00.000Z',
'ShippedDate': '1997-01-27T00:00:00.000Z',
'Freight': 22.72,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10417,
'CustomerID': 'SIMOB',
'OrderDate': '1997-01-16T00:00:00.000Z',
'ShippedDate': '1997-01-28T00:00:00.000Z',
'Freight': 70.29,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10418,
'CustomerID': 'QUICK',
'OrderDate': '1997-01-17T00:00:00.000Z',
'ShippedDate': '1997-01-24T00:00:00.000Z',
'Freight': 17.55,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10419,
'CustomerID': 'RICSU',
'OrderDate': '1997-01-20T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 541


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-01-30T00:00:00.000Z',
'Freight': 137.35,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10420,
'CustomerID': 'WELLI',
'OrderDate': '1997-01-21T00:00:00.000Z',
'ShippedDate': '1997-01-27T00:00:00.000Z',
'Freight': 44.12,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10421,
'CustomerID': 'QUEDE',
'OrderDate': '1997-01-21T00:00:00.000Z',
'ShippedDate': '1997-01-27T00:00:00.000Z',
'Freight': 99.23,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10422,
'CustomerID': 'FRANS',
'OrderDate': '1997-01-22T00:00:00.000Z',
'ShippedDate': '1997-01-31T00:00:00.000Z',
'Freight': 3.02,
'ShipName': 'Franchi S.p.A.',
'ShipAddress': 'Via Monte Bianco 34',
'ShipCity': 'Torino',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10423,
'CustomerID': 'GOURL',
'OrderDate': '1997-01-23T00:00:00.000Z',
'ShippedDate': '1997-02-24T00:00:00.000Z',
'Freight': 24.5,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 542


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10424,
'CustomerID': 'MEREP',
'OrderDate': '1997-01-23T00:00:00.000Z',
'ShippedDate': '1997-01-27T00:00:00.000Z',
'Freight': 370.61,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10425,
'CustomerID': 'LAMAI',
'OrderDate': '1997-01-24T00:00:00.000Z',
'ShippedDate': '1997-02-14T00:00:00.000Z',
'Freight': 7.93,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10426,
'CustomerID': 'GALED',
'OrderDate': '1997-01-27T00:00:00.000Z',
'ShippedDate': '1997-02-06T00:00:00.000Z',
'Freight': 18.69,
'ShipName': 'Galería del gastronómo',
'ShipAddress': 'Rambla de Cataluña, 23',
'ShipCity': 'Barcelona',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10427,
'CustomerID': 'PICCO',
'OrderDate': '1997-01-27T00:00:00.000Z',
'ShippedDate': '1997-03-03T00:00:00.000Z',
'Freight': 31.29,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10428,
'CustomerID': 'REGGC',
'OrderDate': '1997-01-28T00:00:00.000Z',
'ShippedDate': '1997-02-04T00:00:00.000Z',
'Freight': 11.09,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 543


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Italy'
},
{
'OrderID': 10429,
'CustomerID': 'HUNGO',
'OrderDate': '1997-01-29T00:00:00.000Z',
'ShippedDate': '1997-02-07T00:00:00.000Z',
'Freight': 56.63,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10430,
'CustomerID': 'ERNSH',
'OrderDate': '1997-01-30T00:00:00.000Z',
'ShippedDate': '1997-02-03T00:00:00.000Z',
'Freight': 458.78,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10431,
'CustomerID': 'BOTTM',
'OrderDate': '1997-01-30T00:00:00.000Z',
'ShippedDate': '1997-02-07T00:00:00.000Z',
'Freight': 44.17,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10432,
'CustomerID': 'SPLIR',
'OrderDate': '1997-01-31T00:00:00.000Z',
'ShippedDate': '1997-02-07T00:00:00.000Z',
'Freight': 4.34,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10433,
'CustomerID': 'PRINI',
'OrderDate': '1997-02-03T00:00:00.000Z',
'ShippedDate': '1997-03-04T00:00:00.000Z',
'Freight': 73.83,
'ShipName': 'Princesa Isabel Vinhos',

Copyright © 2001 -2024 Syncfusion Inc. 544


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Estrada da saúde n. 58',


'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10434,
'CustomerID': 'FOLKO',
'OrderDate': '1997-02-03T00:00:00.000Z',
'ShippedDate': '1997-02-13T00:00:00.000Z',
'Freight': 17.92,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10435,
'CustomerID': 'CONSH',
'OrderDate': '1997-02-04T00:00:00.000Z',
'ShippedDate': '1997-02-07T00:00:00.000Z',
'Freight': 9.21,
'ShipName': 'Consolidated Holdings',
'ShipAddress': 'Berkeley Gardens 12 Brewery',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10436,
'CustomerID': 'BLONP',
'OrderDate': '1997-02-05T00:00:00.000Z',
'ShippedDate': '1997-02-11T00:00:00.000Z',
'Freight': 156.66,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10437,
'CustomerID': 'WARTH',
'OrderDate': '1997-02-05T00:00:00.000Z',
'ShippedDate': '1997-02-12T00:00:00.000Z',
'Freight': 19.97,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10438,
'CustomerID': 'TOMSP',
'OrderDate': '1997-02-06T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 545


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-02-14T00:00:00.000Z',
'Freight': 8.24,
'ShipName': 'Toms Spezialitäten',
'ShipAddress': 'Luisenstr. 48',
'ShipCity': 'Münster',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10439,
'CustomerID': 'MEREP',
'OrderDate': '1997-02-07T00:00:00.000Z',
'ShippedDate': '1997-02-10T00:00:00.000Z',
'Freight': 4.07,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10440,
'CustomerID': 'SAVEA',
'OrderDate': '1997-02-10T00:00:00.000Z',
'ShippedDate': '1997-02-28T00:00:00.000Z',
'Freight': 86.53,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10441,
'CustomerID': 'OLDWO',
'OrderDate': '1997-02-10T00:00:00.000Z',
'ShippedDate': '1997-03-14T00:00:00.000Z',
'Freight': 73.02,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10442,
'CustomerID': 'ERNSH',
'OrderDate': '1997-02-11T00:00:00.000Z',
'ShippedDate': '1997-02-18T00:00:00.000Z',
'Freight': 47.94,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 546


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10443,
'CustomerID': 'REGGC',
'OrderDate': '1997-02-12T00:00:00.000Z',
'ShippedDate': '1997-02-14T00:00:00.000Z',
'Freight': 13.95,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10444,
'CustomerID': 'BERGS',
'OrderDate': '1997-02-12T00:00:00.000Z',
'ShippedDate': '1997-02-21T00:00:00.000Z',
'Freight': 3.5,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10445,
'CustomerID': 'BERGS',
'OrderDate': '1997-02-13T00:00:00.000Z',
'ShippedDate': '1997-02-20T00:00:00.000Z',
'Freight': 9.3,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10446,
'CustomerID': 'TOMSP',
'OrderDate': '1997-02-14T00:00:00.000Z',
'ShippedDate': '1997-02-19T00:00:00.000Z',
'Freight': 14.68,
'ShipName': 'Toms Spezialitäten',
'ShipAddress': 'Luisenstr. 48',
'ShipCity': 'Münster',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10447,
'CustomerID': 'RICAR',
'OrderDate': '1997-02-14T00:00:00.000Z',
'ShippedDate': '1997-03-07T00:00:00.000Z',
'Freight': 68.66,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',

Copyright © 2001 -2024 Syncfusion Inc. 547


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Brazil'
},
{
'OrderID': 10448,
'CustomerID': 'RANCH',
'OrderDate': '1997-02-17T00:00:00.000Z',
'ShippedDate': '1997-02-24T00:00:00.000Z',
'Freight': 38.82,
'ShipName': 'Rancho grande',
'ShipAddress': 'Av. del Libertador 900',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10449,
'CustomerID': 'BLONP',
'OrderDate': '1997-02-18T00:00:00.000Z',
'ShippedDate': '1997-02-27T00:00:00.000Z',
'Freight': 53.3,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10450,
'CustomerID': 'VICTE',
'OrderDate': '1997-02-19T00:00:00.000Z',
'ShippedDate': '1997-03-11T00:00:00.000Z',
'Freight': 7.23,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10451,
'CustomerID': 'QUICK',
'OrderDate': '1997-02-19T00:00:00.000Z',
'ShippedDate': '1997-03-12T00:00:00.000Z',
'Freight': 189.09,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10452,
'CustomerID': 'SAVEA',
'OrderDate': '1997-02-20T00:00:00.000Z',
'ShippedDate': '1997-02-26T00:00:00.000Z',
'Freight': 140.26,
'ShipName': 'Save-a-lot Markets',

Copyright © 2001 -2024 Syncfusion Inc. 548


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '187 Suffolk Ln.',


'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10453,
'CustomerID': 'AROUT',
'OrderDate': '1997-02-21T00:00:00.000Z',
'ShippedDate': '1997-02-26T00:00:00.000Z',
'Freight': 25.36,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10454,
'CustomerID': 'LAMAI',
'OrderDate': '1997-02-21T00:00:00.000Z',
'ShippedDate': '1997-02-25T00:00:00.000Z',
'Freight': 2.74,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10455,
'CustomerID': 'WARTH',
'OrderDate': '1997-02-24T00:00:00.000Z',
'ShippedDate': '1997-03-03T00:00:00.000Z',
'Freight': 180.45,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10456,
'CustomerID': 'KOENE',
'OrderDate': '1997-02-25T00:00:00.000Z',
'ShippedDate': '1997-02-28T00:00:00.000Z',
'Freight': 8.12,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10457,
'CustomerID': 'KOENE',
'OrderDate': '1997-02-25T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 549


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-03-03T00:00:00.000Z',
'Freight': 11.57,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10458,
'CustomerID': 'SUPRD',
'OrderDate': '1997-02-26T00:00:00.000Z',
'ShippedDate': '1997-03-04T00:00:00.000Z',
'Freight': 147.06,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10459,
'CustomerID': 'VICTE',
'OrderDate': '1997-02-27T00:00:00.000Z',
'ShippedDate': '1997-02-28T00:00:00.000Z',
'Freight': 25.09,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10460,
'CustomerID': 'FOLKO',
'OrderDate': '1997-02-28T00:00:00.000Z',
'ShippedDate': '1997-03-03T00:00:00.000Z',
'Freight': 16.27,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10461,
'CustomerID': 'LILAS',
'OrderDate': '1997-02-28T00:00:00.000Z',
'ShippedDate': '1997-03-05T00:00:00.000Z',
'Freight': 148.61,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 550


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10462,
'CustomerID': 'CONSH',
'OrderDate': '1997-03-03T00:00:00.000Z',
'ShippedDate': '1997-03-18T00:00:00.000Z',
'Freight': 6.17,
'ShipName': 'Consolidated Holdings',
'ShipAddress': 'Berkeley Gardens 12 Brewery',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10463,
'CustomerID': 'SUPRD',
'OrderDate': '1997-03-04T00:00:00.000Z',
'ShippedDate': '1997-03-06T00:00:00.000Z',
'Freight': 14.78,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10464,
'CustomerID': 'FURIB',
'OrderDate': '1997-03-04T00:00:00.000Z',
'ShippedDate': '1997-03-14T00:00:00.000Z',
'Freight': 89,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10465,
'CustomerID': 'VAFFE',
'OrderDate': '1997-03-05T00:00:00.000Z',
'ShippedDate': '1997-03-14T00:00:00.000Z',
'Freight': 145.04,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10466,
'CustomerID': 'COMMI',
'OrderDate': '1997-03-06T00:00:00.000Z',
'ShippedDate': '1997-03-13T00:00:00.000Z',
'Freight': 11.93,
'ShipName': 'Comércio Mineiro',
'ShipAddress': 'Av. dos Lusíadas, 23',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',

Copyright © 2001 -2024 Syncfusion Inc. 551


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Brazil'
},
{
'OrderID': 10467,
'CustomerID': 'MAGAA',
'OrderDate': '1997-03-06T00:00:00.000Z',
'ShippedDate': '1997-03-11T00:00:00.000Z',
'Freight': 4.93,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10468,
'CustomerID': 'KOENE',
'OrderDate': '1997-03-07T00:00:00.000Z',
'ShippedDate': '1997-03-12T00:00:00.000Z',
'Freight': 44.12,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10469,
'CustomerID': 'WHITC',
'OrderDate': '1997-03-10T00:00:00.000Z',
'ShippedDate': '1997-03-14T00:00:00.000Z',
'Freight': 60.18,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10470,
'CustomerID': 'BONAP',
'OrderDate': '1997-03-11T00:00:00.000Z',
'ShippedDate': '1997-03-14T00:00:00.000Z',
'Freight': 64.56,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10471,
'CustomerID': 'BSBEV',
'OrderDate': '1997-03-11T00:00:00.000Z',
'ShippedDate': '1997-03-18T00:00:00.000Z',
'Freight': 45.59,
'ShipName': 'B\' Beverages',

Copyright © 2001 -2024 Syncfusion Inc. 552


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Fauntleroy Circus',


'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10472,
'CustomerID': 'SEVES',
'OrderDate': '1997-03-12T00:00:00.000Z',
'ShippedDate': '1997-03-19T00:00:00.000Z',
'Freight': 4.2,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10473,
'CustomerID': 'ISLAT',
'OrderDate': '1997-03-13T00:00:00.000Z',
'ShippedDate': '1997-03-21T00:00:00.000Z',
'Freight': 16.37,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10474,
'CustomerID': 'PERIC',
'OrderDate': '1997-03-13T00:00:00.000Z',
'ShippedDate': '1997-03-21T00:00:00.000Z',
'Freight': 83.49,
'ShipName': 'Pericles Comidas clásicas',
'ShipAddress': 'Calle Dr. Jorge Cash 321',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10475,
'CustomerID': 'SUPRD',
'OrderDate': '1997-03-14T00:00:00.000Z',
'ShippedDate': '1997-04-04T00:00:00.000Z',
'Freight': 68.52,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10476,
'CustomerID': 'HILAA',
'OrderDate': '1997-03-17T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 553


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-03-24T00:00:00.000Z',
'Freight': 4.41,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10477,
'CustomerID': 'PRINI',
'OrderDate': '1997-03-17T00:00:00.000Z',
'ShippedDate': '1997-03-25T00:00:00.000Z',
'Freight': 13.02,
'ShipName': 'Princesa Isabel Vinhos',
'ShipAddress': 'Estrada da saúde n. 58',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10478,
'CustomerID': 'VICTE',
'OrderDate': '1997-03-18T00:00:00.000Z',
'ShippedDate': '1997-03-26T00:00:00.000Z',
'Freight': 4.81,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10479,
'CustomerID': 'RATTC',
'OrderDate': '1997-03-19T00:00:00.000Z',
'ShippedDate': '1997-03-21T00:00:00.000Z',
'Freight': 708.95,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10480,
'CustomerID': 'FOLIG',
'OrderDate': '1997-03-20T00:00:00.000Z',
'ShippedDate': '1997-03-24T00:00:00.000Z',
'Freight': 1.35,
'ShipName': 'Folies gourmandes',
'ShipAddress': '184, chaussée de Tournai',
'ShipCity': 'Lille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 554


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10481,
'CustomerID': 'RICAR',
'OrderDate': '1997-03-20T00:00:00.000Z',
'ShippedDate': '1997-03-25T00:00:00.000Z',
'Freight': 64.33,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10482,
'CustomerID': 'LAZYK',
'OrderDate': '1997-03-21T00:00:00.000Z',
'ShippedDate': '1997-04-10T00:00:00.000Z',
'Freight': 7.48,
'ShipName': 'Lazy K Kountry Store',
'ShipAddress': '12 Orchestra Terrace',
'ShipCity': 'Walla Walla',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10483,
'CustomerID': 'WHITC',
'OrderDate': '1997-03-24T00:00:00.000Z',
'ShippedDate': '1997-04-25T00:00:00.000Z',
'Freight': 15.28,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10484,
'CustomerID': 'BSBEV',
'OrderDate': '1997-03-24T00:00:00.000Z',
'ShippedDate': '1997-04-01T00:00:00.000Z',
'Freight': 6.88,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10485,
'CustomerID': 'LINOD',
'OrderDate': '1997-03-25T00:00:00.000Z',
'ShippedDate': '1997-03-31T00:00:00.000Z',
'Freight': 64.45,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',

Copyright © 2001 -2024 Syncfusion Inc. 555


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Venezuela'
},
{
'OrderID': 10486,
'CustomerID': 'HILAA',
'OrderDate': '1997-03-26T00:00:00.000Z',
'ShippedDate': '1997-04-02T00:00:00.000Z',
'Freight': 30.53,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10487,
'CustomerID': 'QUEEN',
'OrderDate': '1997-03-26T00:00:00.000Z',
'ShippedDate': '1997-03-28T00:00:00.000Z',
'Freight': 71.07,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10488,
'CustomerID': 'FRANK',
'OrderDate': '1997-03-27T00:00:00.000Z',
'ShippedDate': '1997-04-02T00:00:00.000Z',
'Freight': 4.93,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10489,
'CustomerID': 'PICCO',
'OrderDate': '1997-03-28T00:00:00.000Z',
'ShippedDate': '1997-04-09T00:00:00.000Z',
'Freight': 5.29,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10490,
'CustomerID': 'HILAA',
'OrderDate': '1997-03-31T00:00:00.000Z',
'ShippedDate': '1997-04-03T00:00:00.000Z',
'Freight': 210.19,
'ShipName': 'HILARION-Abastos',

Copyright © 2001 -2024 Syncfusion Inc. 556


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',


'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10491,
'CustomerID': 'FURIB',
'OrderDate': '1997-03-31T00:00:00.000Z',
'ShippedDate': '1997-04-08T00:00:00.000Z',
'Freight': 16.96,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10492,
'CustomerID': 'BOTTM',
'OrderDate': '1997-04-01T00:00:00.000Z',
'ShippedDate': '1997-04-11T00:00:00.000Z',
'Freight': 62.89,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10493,
'CustomerID': 'LAMAI',
'OrderDate': '1997-04-02T00:00:00.000Z',
'ShippedDate': '1997-04-10T00:00:00.000Z',
'Freight': 10.64,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10494,
'CustomerID': 'COMMI',
'OrderDate': '1997-04-02T00:00:00.000Z',
'ShippedDate': '1997-04-09T00:00:00.000Z',
'Freight': 65.99,
'ShipName': 'Comércio Mineiro',
'ShipAddress': 'Av. dos Lusíadas, 23',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10495,
'CustomerID': 'LAUGB',
'OrderDate': '1997-04-03T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 557


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-04-11T00:00:00.000Z',
'Freight': 4.65,
'ShipName': 'Laughing Bacchus Wine Cellars',
'ShipAddress': '2319 Elm St.',
'ShipCity': 'Vancouver',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10496,
'CustomerID': 'TRADH',
'OrderDate': '1997-04-04T00:00:00.000Z',
'ShippedDate': '1997-04-07T00:00:00.000Z',
'Freight': 46.77,
'ShipName': 'Tradiçao Hipermercados',
'ShipAddress': 'Av. Inês de Castro, 414',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10497,
'CustomerID': 'LEHMS',
'OrderDate': '1997-04-04T00:00:00.000Z',
'ShippedDate': '1997-04-07T00:00:00.000Z',
'Freight': 36.21,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10498,
'CustomerID': 'HILAA',
'OrderDate': '1997-04-07T00:00:00.000Z',
'ShippedDate': '1997-04-11T00:00:00.000Z',
'Freight': 29.75,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10499,
'CustomerID': 'LILAS',
'OrderDate': '1997-04-08T00:00:00.000Z',
'ShippedDate': '1997-04-16T00:00:00.000Z',
'Freight': 102.02,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 558


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10500,
'CustomerID': 'LAMAI',
'OrderDate': '1997-04-09T00:00:00.000Z',
'ShippedDate': '1997-04-17T00:00:00.000Z',
'Freight': 42.68,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10501,
'CustomerID': 'BLAUS',
'OrderDate': '1997-04-09T00:00:00.000Z',
'ShippedDate': '1997-04-16T00:00:00.000Z',
'Freight': 8.85,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10502,
'CustomerID': 'PERIC',
'OrderDate': '1997-04-10T00:00:00.000Z',
'ShippedDate': '1997-04-29T00:00:00.000Z',
'Freight': 69.32,
'ShipName': 'Pericles Comidas clásicas',
'ShipAddress': 'Calle Dr. Jorge Cash 321',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10503,
'CustomerID': 'HUNGO',
'OrderDate': '1997-04-11T00:00:00.000Z',
'ShippedDate': '1997-04-16T00:00:00.000Z',
'Freight': 16.74,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10504,
'CustomerID': 'WHITC',
'OrderDate': '1997-04-11T00:00:00.000Z',
'ShippedDate': '1997-04-18T00:00:00.000Z',
'Freight': 59.13,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',

Copyright © 2001 -2024 Syncfusion Inc. 559


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'USA'
},
{
'OrderID': 10505,
'CustomerID': 'MEREP',
'OrderDate': '1997-04-14T00:00:00.000Z',
'ShippedDate': '1997-04-21T00:00:00.000Z',
'Freight': 7.13,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10506,
'CustomerID': 'KOENE',
'OrderDate': '1997-04-15T00:00:00.000Z',
'ShippedDate': '1997-05-02T00:00:00.000Z',
'Freight': 21.19,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10507,
'CustomerID': 'ANTON',
'OrderDate': '1997-04-15T00:00:00.000Z',
'ShippedDate': '1997-04-22T00:00:00.000Z',
'Freight': 47.45,
'ShipName': 'Antonio Moreno Taquería',
'ShipAddress': 'Mataderos 2312',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10508,
'CustomerID': 'OTTIK',
'OrderDate': '1997-04-16T00:00:00.000Z',
'ShippedDate': '1997-05-13T00:00:00.000Z',
'Freight': 4.99,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10509,
'CustomerID': 'BLAUS',
'OrderDate': '1997-04-17T00:00:00.000Z',
'ShippedDate': '1997-04-29T00:00:00.000Z',
'Freight': 0.15,
'ShipName': 'Blauer See Delikatessen',

Copyright © 2001 -2024 Syncfusion Inc. 560


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Forsterstr. 57',


'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10510,
'CustomerID': 'SAVEA',
'OrderDate': '1997-04-18T00:00:00.000Z',
'ShippedDate': '1997-04-28T00:00:00.000Z',
'Freight': 367.63,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10511,
'CustomerID': 'BONAP',
'OrderDate': '1997-04-18T00:00:00.000Z',
'ShippedDate': '1997-04-21T00:00:00.000Z',
'Freight': 350.64,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10512,
'CustomerID': 'FAMIA',
'OrderDate': '1997-04-21T00:00:00.000Z',
'ShippedDate': '1997-04-24T00:00:00.000Z',
'Freight': 3.53,
'ShipName': 'Familia Arquibaldo',
'ShipAddress': 'Rua Orós, 92',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10513,
'CustomerID': 'WANDK',
'OrderDate': '1997-04-22T00:00:00.000Z',
'ShippedDate': '1997-04-28T00:00:00.000Z',
'Freight': 105.65,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10514,
'CustomerID': 'ERNSH',
'OrderDate': '1997-04-22T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 561


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-05-16T00:00:00.000Z',
'Freight': 789.95,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10515,
'CustomerID': 'QUICK',
'OrderDate': '1997-04-23T00:00:00.000Z',
'ShippedDate': '1997-05-23T00:00:00.000Z',
'Freight': 204.47,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10516,
'CustomerID': 'HUNGO',
'OrderDate': '1997-04-24T00:00:00.000Z',
'ShippedDate': '1997-05-01T00:00:00.000Z',
'Freight': 62.78,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10517,
'CustomerID': 'NORTS',
'OrderDate': '1997-04-24T00:00:00.000Z',
'ShippedDate': '1997-04-29T00:00:00.000Z',
'Freight': 32.07,
'ShipName': 'North/South',
'ShipAddress': 'South House 300 Queensbridge',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10518,
'CustomerID': 'TORTU',
'OrderDate': '1997-04-25T00:00:00.000Z',
'ShippedDate': '1997-05-05T00:00:00.000Z',
'Freight': 218.15,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 562


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10519,
'CustomerID': 'CHOPS',
'OrderDate': '1997-04-28T00:00:00.000Z',
'ShippedDate': '1997-05-01T00:00:00.000Z',
'Freight': 91.76,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10520,
'CustomerID': 'SANTG',
'OrderDate': '1997-04-29T00:00:00.000Z',
'ShippedDate': '1997-05-01T00:00:00.000Z',
'Freight': 13.37,
'ShipName': 'Santé Gourmet',
'ShipAddress': 'Erling Skakkes gate 78',
'ShipCity': 'Stavern',
'ShipRegion': null,
'ShipCountry': 'Norway'
},
{
'OrderID': 10521,
'CustomerID': 'CACTU',
'OrderDate': '1997-04-29T00:00:00.000Z',
'ShippedDate': '1997-05-02T00:00:00.000Z',
'Freight': 17.22,
'ShipName': 'Cactus Comidas para llevar',
'ShipAddress': 'Cerrito 333',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10522,
'CustomerID': 'LEHMS',
'OrderDate': '1997-04-30T00:00:00.000Z',
'ShippedDate': '1997-05-06T00:00:00.000Z',
'Freight': 45.33,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10523,
'CustomerID': 'SEVES',
'OrderDate': '1997-05-01T00:00:00.000Z',
'ShippedDate': '1997-05-30T00:00:00.000Z',
'Freight': 77.63,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 563


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'UK'
},
{
'OrderID': 10524,
'CustomerID': 'BERGS',
'OrderDate': '1997-05-01T00:00:00.000Z',
'ShippedDate': '1997-05-07T00:00:00.000Z',
'Freight': 244.79,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10525,
'CustomerID': 'BONAP',
'OrderDate': '1997-05-02T00:00:00.000Z',
'ShippedDate': '1997-05-23T00:00:00.000Z',
'Freight': 11.06,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10526,
'CustomerID': 'WARTH',
'OrderDate': '1997-05-05T00:00:00.000Z',
'ShippedDate': '1997-05-15T00:00:00.000Z',
'Freight': 58.59,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10527,
'CustomerID': 'QUICK',
'OrderDate': '1997-05-05T00:00:00.000Z',
'ShippedDate': '1997-05-07T00:00:00.000Z',
'Freight': 41.9,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10528,
'CustomerID': 'GREAL',
'OrderDate': '1997-05-06T00:00:00.000Z',
'ShippedDate': '1997-05-09T00:00:00.000Z',
'Freight': 3.35,
'ShipName': 'Great Lakes Food Market',

Copyright © 2001 -2024 Syncfusion Inc. 564


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '2732 Baker Blvd.',


'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10529,
'CustomerID': 'MAISD',
'OrderDate': '1997-05-07T00:00:00.000Z',
'ShippedDate': '1997-05-09T00:00:00.000Z',
'Freight': 66.69,
'ShipName': 'Maison Dewey',
'ShipAddress': 'Rue Joseph-Bens 532',
'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10530,
'CustomerID': 'PICCO',
'OrderDate': '1997-05-08T00:00:00.000Z',
'ShippedDate': '1997-05-12T00:00:00.000Z',
'Freight': 339.22,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10531,
'CustomerID': 'OCEAN',
'OrderDate': '1997-05-08T00:00:00.000Z',
'ShippedDate': '1997-05-19T00:00:00.000Z',
'Freight': 8.12,
'ShipName': 'Océano Atlántico Ltda.',
'ShipAddress': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10532,
'CustomerID': 'EASTC',
'OrderDate': '1997-05-09T00:00:00.000Z',
'ShippedDate': '1997-05-12T00:00:00.000Z',
'Freight': 74.46,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10533,
'CustomerID': 'FOLKO',
'OrderDate': '1997-05-12T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 565


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-05-22T00:00:00.000Z',
'Freight': 188.04,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10534,
'CustomerID': 'LEHMS',
'OrderDate': '1997-05-12T00:00:00.000Z',
'ShippedDate': '1997-05-14T00:00:00.000Z',
'Freight': 27.94,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10535,
'CustomerID': 'ANTON',
'OrderDate': '1997-05-13T00:00:00.000Z',
'ShippedDate': '1997-05-21T00:00:00.000Z',
'Freight': 15.64,
'ShipName': 'Antonio Moreno Taquería',
'ShipAddress': 'Mataderos 2312',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10536,
'CustomerID': 'LEHMS',
'OrderDate': '1997-05-14T00:00:00.000Z',
'ShippedDate': '1997-06-06T00:00:00.000Z',
'Freight': 58.88,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10537,
'CustomerID': 'RICSU',
'OrderDate': '1997-05-14T00:00:00.000Z',
'ShippedDate': '1997-05-19T00:00:00.000Z',
'Freight': 78.85,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 566


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10538,
'CustomerID': 'BSBEV',
'OrderDate': '1997-05-15T00:00:00.000Z',
'ShippedDate': '1997-05-16T00:00:00.000Z',
'Freight': 4.87,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10539,
'CustomerID': 'BSBEV',
'OrderDate': '1997-05-16T00:00:00.000Z',
'ShippedDate': '1997-05-23T00:00:00.000Z',
'Freight': 12.36,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10540,
'CustomerID': 'QUICK',
'OrderDate': '1997-05-19T00:00:00.000Z',
'ShippedDate': '1997-06-13T00:00:00.000Z',
'Freight': 1007.64,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10541,
'CustomerID': 'HANAR',
'OrderDate': '1997-05-19T00:00:00.000Z',
'ShippedDate': '1997-05-29T00:00:00.000Z',
'Freight': 68.65,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10542,
'CustomerID': 'KOENE',
'OrderDate': '1997-05-20T00:00:00.000Z',
'ShippedDate': '1997-05-26T00:00:00.000Z',
'Freight': 10.95,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 567


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Germany'
},
{
'OrderID': 10543,
'CustomerID': 'LILAS',
'OrderDate': '1997-05-21T00:00:00.000Z',
'ShippedDate': '1997-05-23T00:00:00.000Z',
'Freight': 48.17,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10544,
'CustomerID': 'LONEP',
'OrderDate': '1997-05-21T00:00:00.000Z',
'ShippedDate': '1997-05-30T00:00:00.000Z',
'Freight': 24.91,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10545,
'CustomerID': 'LAZYK',
'OrderDate': '1997-05-22T00:00:00.000Z',
'ShippedDate': '1997-06-26T00:00:00.000Z',
'Freight': 11.92,
'ShipName': 'Lazy K Kountry Store',
'ShipAddress': '12 Orchestra Terrace',
'ShipCity': 'Walla Walla',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10546,
'CustomerID': 'VICTE',
'OrderDate': '1997-05-23T00:00:00.000Z',
'ShippedDate': '1997-05-27T00:00:00.000Z',
'Freight': 194.72,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10547,
'CustomerID': 'SEVES',
'OrderDate': '1997-05-23T00:00:00.000Z',
'ShippedDate': '1997-06-02T00:00:00.000Z',
'Freight': 178.43,
'ShipName': 'Seven Seas Imports',

Copyright © 2001 -2024 Syncfusion Inc. 568


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '90 Wadhurst Rd.',


'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10548,
'CustomerID': 'TOMSP',
'OrderDate': '1997-05-26T00:00:00.000Z',
'ShippedDate': '1997-06-02T00:00:00.000Z',
'Freight': 1.43,
'ShipName': 'Toms Spezialitäten',
'ShipAddress': 'Luisenstr. 48',
'ShipCity': 'Münster',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10549,
'CustomerID': 'QUICK',
'OrderDate': '1997-05-27T00:00:00.000Z',
'ShippedDate': '1997-05-30T00:00:00.000Z',
'Freight': 171.24,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10550,
'CustomerID': 'GODOS',
'OrderDate': '1997-05-28T00:00:00.000Z',
'ShippedDate': '1997-06-06T00:00:00.000Z',
'Freight': 4.32,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10551,
'CustomerID': 'FURIB',
'OrderDate': '1997-05-28T00:00:00.000Z',
'ShippedDate': '1997-06-06T00:00:00.000Z',
'Freight': 72.95,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10552,
'CustomerID': 'HILAA',
'OrderDate': '1997-05-29T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 569


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-06-05T00:00:00.000Z',
'Freight': 83.22,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10553,
'CustomerID': 'WARTH',
'OrderDate': '1997-05-30T00:00:00.000Z',
'ShippedDate': '1997-06-03T00:00:00.000Z',
'Freight': 149.49,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10554,
'CustomerID': 'OTTIK',
'OrderDate': '1997-05-30T00:00:00.000Z',
'ShippedDate': '1997-06-05T00:00:00.000Z',
'Freight': 120.97,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10555,
'CustomerID': 'SAVEA',
'OrderDate': '1997-06-02T00:00:00.000Z',
'ShippedDate': '1997-06-04T00:00:00.000Z',
'Freight': 252.49,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10556,
'CustomerID': 'SIMOB',
'OrderDate': '1997-06-03T00:00:00.000Z',
'ShippedDate': '1997-06-13T00:00:00.000Z',
'Freight': 9.8,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 570


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10557,
'CustomerID': 'LEHMS',
'OrderDate': '1997-06-03T00:00:00.000Z',
'ShippedDate': '1997-06-06T00:00:00.000Z',
'Freight': 96.72,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10558,
'CustomerID': 'AROUT',
'OrderDate': '1997-06-04T00:00:00.000Z',
'ShippedDate': '1997-06-10T00:00:00.000Z',
'Freight': 72.97,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10559,
'CustomerID': 'BLONP',
'OrderDate': '1997-06-05T00:00:00.000Z',
'ShippedDate': '1997-06-13T00:00:00.000Z',
'Freight': 8.05,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10560,
'CustomerID': 'FRANK',
'OrderDate': '1997-06-06T00:00:00.000Z',
'ShippedDate': '1997-06-09T00:00:00.000Z',
'Freight': 36.65,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10561,
'CustomerID': 'FOLKO',
'OrderDate': '1997-06-06T00:00:00.000Z',
'ShippedDate': '1997-06-09T00:00:00.000Z',
'Freight': 242.21,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 571


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Sweden'
},
{
'OrderID': 10562,
'CustomerID': 'REGGC',
'OrderDate': '1997-06-09T00:00:00.000Z',
'ShippedDate': '1997-06-12T00:00:00.000Z',
'Freight': 22.95,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10563,
'CustomerID': 'RICAR',
'OrderDate': '1997-06-10T00:00:00.000Z',
'ShippedDate': '1997-06-24T00:00:00.000Z',
'Freight': 60.43,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10564,
'CustomerID': 'RATTC',
'OrderDate': '1997-06-10T00:00:00.000Z',
'ShippedDate': '1997-06-16T00:00:00.000Z',
'Freight': 13.75,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10565,
'CustomerID': 'MEREP',
'OrderDate': '1997-06-11T00:00:00.000Z',
'ShippedDate': '1997-06-18T00:00:00.000Z',
'Freight': 7.15,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10566,
'CustomerID': 'BLONP',
'OrderDate': '1997-06-12T00:00:00.000Z',
'ShippedDate': '1997-06-18T00:00:00.000Z',
'Freight': 88.4,
'ShipName': 'Blondel père et fils',

Copyright © 2001 -2024 Syncfusion Inc. 572


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '24, place Kléber',


'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10567,
'CustomerID': 'HUNGO',
'OrderDate': '1997-06-12T00:00:00.000Z',
'ShippedDate': '1997-06-17T00:00:00.000Z',
'Freight': 33.97,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10568,
'CustomerID': 'GALED',
'OrderDate': '1997-06-13T00:00:00.000Z',
'ShippedDate': '1997-07-09T00:00:00.000Z',
'Freight': 6.54,
'ShipName': 'Galería del gastronómo',
'ShipAddress': 'Rambla de Cataluña, 23',
'ShipCity': 'Barcelona',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10569,
'CustomerID': 'RATTC',
'OrderDate': '1997-06-16T00:00:00.000Z',
'ShippedDate': '1997-07-11T00:00:00.000Z',
'Freight': 58.98,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10570,
'CustomerID': 'MEREP',
'OrderDate': '1997-06-17T00:00:00.000Z',
'ShippedDate': '1997-06-19T00:00:00.000Z',
'Freight': 188.99,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10571,
'CustomerID': 'ERNSH',
'OrderDate': '1997-06-17T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 573


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-07-04T00:00:00.000Z',
'Freight': 26.06,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10572,
'CustomerID': 'BERGS',
'OrderDate': '1997-06-18T00:00:00.000Z',
'ShippedDate': '1997-06-25T00:00:00.000Z',
'Freight': 116.43,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10573,
'CustomerID': 'ANTON',
'OrderDate': '1997-06-19T00:00:00.000Z',
'ShippedDate': '1997-06-20T00:00:00.000Z',
'Freight': 84.84,
'ShipName': 'Antonio Moreno Taquería',
'ShipAddress': 'Mataderos 2312',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10574,
'CustomerID': 'TRAIH',
'OrderDate': '1997-06-19T00:00:00.000Z',
'ShippedDate': '1997-06-30T00:00:00.000Z',
'Freight': 37.6,
'ShipName': 'Trail\' Head Gourmet Provisioners',
'ShipAddress': '722 DaVinci Blvd.',
'ShipCity': 'Kirkland',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10575,
'CustomerID': 'MORGK',
'OrderDate': '1997-06-20T00:00:00.000Z',
'ShippedDate': '1997-06-30T00:00:00.000Z',
'Freight': 127.34,
'ShipName': 'Morgenstern Gesundkost',
'ShipAddress': 'Heerstr. 22',
'ShipCity': 'Leipzig',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 574


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10576,
'CustomerID': 'TORTU',
'OrderDate': '1997-06-23T00:00:00.000Z',
'ShippedDate': '1997-06-30T00:00:00.000Z',
'Freight': 18.56,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10577,
'CustomerID': 'TRAIH',
'OrderDate': '1997-06-23T00:00:00.000Z',
'ShippedDate': '1997-06-30T00:00:00.000Z',
'Freight': 25.41,
'ShipName': 'Trail\' Head Gourmet Provisioners',
'ShipAddress': '722 DaVinci Blvd.',
'ShipCity': 'Kirkland',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10578,
'CustomerID': 'BSBEV',
'OrderDate': '1997-06-24T00:00:00.000Z',
'ShippedDate': '1997-07-25T00:00:00.000Z',
'Freight': 29.6,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10579,
'CustomerID': 'LETSS',
'OrderDate': '1997-06-25T00:00:00.000Z',
'ShippedDate': '1997-07-04T00:00:00.000Z',
'Freight': 13.73,
'ShipName': 'Let\' Stop N Shop',
'ShipAddress': '87 Polk St. Suite 5',
'ShipCity': 'San Francisco',
'ShipRegion': 'CA',
'ShipCountry': 'USA'
},
{
'OrderID': 10580,
'CustomerID': 'OTTIK',
'OrderDate': '1997-06-26T00:00:00.000Z',
'ShippedDate': '1997-07-01T00:00:00.000Z',
'Freight': 75.89,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 575


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Germany'
},
{
'OrderID': 10581,
'CustomerID': 'FAMIA',
'OrderDate': '1997-06-26T00:00:00.000Z',
'ShippedDate': '1997-07-02T00:00:00.000Z',
'Freight': 3.01,
'ShipName': 'Familia Arquibaldo',
'ShipAddress': 'Rua Orós, 92',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10582,
'CustomerID': 'BLAUS',
'OrderDate': '1997-06-27T00:00:00.000Z',
'ShippedDate': '1997-07-14T00:00:00.000Z',
'Freight': 27.71,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10583,
'CustomerID': 'WARTH',
'OrderDate': '1997-06-30T00:00:00.000Z',
'ShippedDate': '1997-07-04T00:00:00.000Z',
'Freight': 7.28,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10584,
'CustomerID': 'BLONP',
'OrderDate': '1997-06-30T00:00:00.000Z',
'ShippedDate': '1997-07-04T00:00:00.000Z',
'Freight': 59.14,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10585,
'CustomerID': 'WELLI',
'OrderDate': '1997-07-01T00:00:00.000Z',
'ShippedDate': '1997-07-10T00:00:00.000Z',
'Freight': 13.41,
'ShipName': 'Wellington Importadora',

Copyright © 2001 -2024 Syncfusion Inc. 576


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Rua do Mercado, 12',


'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10586,
'CustomerID': 'REGGC',
'OrderDate': '1997-07-02T00:00:00.000Z',
'ShippedDate': '1997-07-09T00:00:00.000Z',
'Freight': 0.48,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10587,
'CustomerID': 'QUEDE',
'OrderDate': '1997-07-02T00:00:00.000Z',
'ShippedDate': '1997-07-09T00:00:00.000Z',
'Freight': 62.52,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10588,
'CustomerID': 'QUICK',
'OrderDate': '1997-07-03T00:00:00.000Z',
'ShippedDate': '1997-07-10T00:00:00.000Z',
'Freight': 194.67,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10589,
'CustomerID': 'GREAL',
'OrderDate': '1997-07-04T00:00:00.000Z',
'ShippedDate': '1997-07-14T00:00:00.000Z',
'Freight': 4.42,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10590,
'CustomerID': 'MEREP',
'OrderDate': '1997-07-07T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 577


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-07-14T00:00:00.000Z',
'Freight': 44.77,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10591,
'CustomerID': 'VAFFE',
'OrderDate': '1997-07-07T00:00:00.000Z',
'ShippedDate': '1997-07-16T00:00:00.000Z',
'Freight': 55.92,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10592,
'CustomerID': 'LEHMS',
'OrderDate': '1997-07-08T00:00:00.000Z',
'ShippedDate': '1997-07-16T00:00:00.000Z',
'Freight': 32.1,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10593,
'CustomerID': 'LEHMS',
'OrderDate': '1997-07-09T00:00:00.000Z',
'ShippedDate': '1997-08-13T00:00:00.000Z',
'Freight': 174.2,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10594,
'CustomerID': 'OLDWO',
'OrderDate': '1997-07-09T00:00:00.000Z',
'ShippedDate': '1997-07-16T00:00:00.000Z',
'Freight': 5.24,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 578


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10595,
'CustomerID': 'ERNSH',
'OrderDate': '1997-07-10T00:00:00.000Z',
'ShippedDate': '1997-07-14T00:00:00.000Z',
'Freight': 96.78,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10596,
'CustomerID': 'WHITC',
'OrderDate': '1997-07-11T00:00:00.000Z',
'ShippedDate': '1997-08-12T00:00:00.000Z',
'Freight': 16.34,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10597,
'CustomerID': 'PICCO',
'OrderDate': '1997-07-11T00:00:00.000Z',
'ShippedDate': '1997-07-18T00:00:00.000Z',
'Freight': 35.12,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10598,
'CustomerID': 'RATTC',
'OrderDate': '1997-07-14T00:00:00.000Z',
'ShippedDate': '1997-07-18T00:00:00.000Z',
'Freight': 44.42,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10599,
'CustomerID': 'BSBEV',
'OrderDate': '1997-07-15T00:00:00.000Z',
'ShippedDate': '1997-07-21T00:00:00.000Z',
'Freight': 29.98,
'ShipName': 'B Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 579


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'UK'
},
{
'OrderID': 10600,
'CustomerID': 'HUNGC',
'OrderDate': '1997-07-16T00:00:00.000Z',
'ShippedDate': '1997-07-21T00:00:00.000Z',
'Freight': 45.13,
'ShipName': 'Hungry Coyote Import Store',
'ShipAddress': 'City Center Plaza 516 Main St.',
'ShipCity': 'Elgin',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10601,
'CustomerID': 'HILAA',
'OrderDate': '1997-07-16T00:00:00.000Z',
'ShippedDate': '1997-07-22T00:00:00.000Z',
'Freight': 58.3,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10602,
'CustomerID': 'VAFFE',
'OrderDate': '1997-07-17T00:00:00.000Z',
'ShippedDate': '1997-07-22T00:00:00.000Z',
'Freight': 2.92,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10603,
'CustomerID': 'SAVEA',
'OrderDate': '1997-07-18T00:00:00.000Z',
'ShippedDate': '1997-08-08T00:00:00.000Z',
'Freight': 48.77,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10604,
'CustomerID': 'FURIB',
'OrderDate': '1997-07-18T00:00:00.000Z',
'ShippedDate': '1997-07-29T00:00:00.000Z',
'Freight': 7.46,
'ShipName': 'Furia Bacalhau e Frutos do Mar',

Copyright © 2001 -2024 Syncfusion Inc. 580


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Jardim das rosas n. 32',


'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10605,
'CustomerID': 'MEREP',
'OrderDate': '1997-07-21T00:00:00.000Z',
'ShippedDate': '1997-07-29T00:00:00.000Z',
'Freight': 379.13,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10606,
'CustomerID': 'TRADH',
'OrderDate': '1997-07-22T00:00:00.000Z',
'ShippedDate': '1997-07-31T00:00:00.000Z',
'Freight': 79.4,
'ShipName': 'Tradiçao Hipermercados',
'ShipAddress': 'Av. Inês de Castro, 414',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10607,
'CustomerID': 'SAVEA',
'OrderDate': '1997-07-22T00:00:00.000Z',
'ShippedDate': '1997-07-25T00:00:00.000Z',
'Freight': 200.24,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10608,
'CustomerID': 'TOMSP',
'OrderDate': '1997-07-23T00:00:00.000Z',
'ShippedDate': '1997-08-01T00:00:00.000Z',
'Freight': 27.79,
'ShipName': 'Toms Spezialitäten',
'ShipAddress': 'Luisenstr. 48',
'ShipCity': 'Münster',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10609,
'CustomerID': 'DUMON',
'OrderDate': '1997-07-24T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 581


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-07-30T00:00:00.000Z',
'Freight': 1.85,
'ShipName': 'Du monde entier',
'ShipAddress': '67, rue des Cinquante Otages',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10610,
'CustomerID': 'LAMAI',
'OrderDate': '1997-07-25T00:00:00.000Z',
'ShippedDate': '1997-08-06T00:00:00.000Z',
'Freight': 26.78,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10611,
'CustomerID': 'WOLZA',
'OrderDate': '1997-07-25T00:00:00.000Z',
'ShippedDate': '1997-08-01T00:00:00.000Z',
'Freight': 80.65,
'ShipName': 'Wolski Zajazd',
'ShipAddress': 'ul. Filtrowa 68',
'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 10612,
'CustomerID': 'SAVEA',
'OrderDate': '1997-07-28T00:00:00.000Z',
'ShippedDate': '1997-08-01T00:00:00.000Z',
'Freight': 544.08,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10613,
'CustomerID': 'HILAA',
'OrderDate': '1997-07-29T00:00:00.000Z',
'ShippedDate': '1997-08-01T00:00:00.000Z',
'Freight': 8.11,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 582


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10614,
'CustomerID': 'BLAUS',
'OrderDate': '1997-07-29T00:00:00.000Z',
'ShippedDate': '1997-08-01T00:00:00.000Z',
'Freight': 1.93,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10615,
'CustomerID': 'WILMK',
'OrderDate': '1997-07-30T00:00:00.000Z',
'ShippedDate': '1997-08-06T00:00:00.000Z',
'Freight': 0.75,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10616,
'CustomerID': 'GREAL',
'OrderDate': '1997-07-31T00:00:00.000Z',
'ShippedDate': '1997-08-05T00:00:00.000Z',
'Freight': 116.53,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10617,
'CustomerID': 'GREAL',
'OrderDate': '1997-07-31T00:00:00.000Z',
'ShippedDate': '1997-08-04T00:00:00.000Z',
'Freight': 18.53,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10618,
'CustomerID': 'MEREP',
'OrderDate': '1997-08-01T00:00:00.000Z',
'ShippedDate': '1997-08-08T00:00:00.000Z',
'Freight': 154.68,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',

Copyright © 2001 -2024 Syncfusion Inc. 583


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Canada'
},
{
'OrderID': 10619,
'CustomerID': 'MEREP',
'OrderDate': '1997-08-04T00:00:00.000Z',
'ShippedDate': '1997-08-07T00:00:00.000Z',
'Freight': 91.05,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10620,
'CustomerID': 'LAUGB',
'OrderDate': '1997-08-05T00:00:00.000Z',
'ShippedDate': '1997-08-14T00:00:00.000Z',
'Freight': 0.94,
'ShipName': 'Laughing Bacchus Wine Cellars',
'ShipAddress': '2319 Elm St.',
'ShipCity': 'Vancouver',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10621,
'CustomerID': 'ISLAT',
'OrderDate': '1997-08-05T00:00:00.000Z',
'ShippedDate': '1997-08-11T00:00:00.000Z',
'Freight': 23.73,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10622,
'CustomerID': 'RICAR',
'OrderDate': '1997-08-06T00:00:00.000Z',
'ShippedDate': '1997-08-11T00:00:00.000Z',
'Freight': 50.97,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10623,
'CustomerID': 'FRANK',
'OrderDate': '1997-08-07T00:00:00.000Z',
'ShippedDate': '1997-08-12T00:00:00.000Z',
'Freight': 97.18,
'ShipName': 'Frankenversand',

Copyright © 2001 -2024 Syncfusion Inc. 584


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Berliner Platz 43',


'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10624,
'CustomerID': 'THECR',
'OrderDate': '1997-08-07T00:00:00.000Z',
'ShippedDate': '1997-08-19T00:00:00.000Z',
'Freight': 94.8,
'ShipName': 'The Cracker Box',
'ShipAddress': '55 Grizzly Peak Rd.',
'ShipCity': 'Butte',
'ShipRegion': 'MT',
'ShipCountry': 'USA'
},
{
'OrderID': 10625,
'CustomerID': 'ANATR',
'OrderDate': '1997-08-08T00:00:00.000Z',
'ShippedDate': '1997-08-14T00:00:00.000Z',
'Freight': 43.9,
'ShipName': 'Ana Trujillo Emparedados y helados',
'ShipAddress': 'Avda. de la Constitución 2222',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10626,
'CustomerID': 'BERGS',
'OrderDate': '1997-08-11T00:00:00.000Z',
'ShippedDate': '1997-08-20T00:00:00.000Z',
'Freight': 138.69,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10627,
'CustomerID': 'SAVEA',
'OrderDate': '1997-08-11T00:00:00.000Z',
'ShippedDate': '1997-08-21T00:00:00.000Z',
'Freight': 107.46,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10628,
'CustomerID': 'BLONP',
'OrderDate': '1997-08-12T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 585


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-08-20T00:00:00.000Z',
'Freight': 30.36,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10629,
'CustomerID': 'GODOS',
'OrderDate': '1997-08-12T00:00:00.000Z',
'ShippedDate': '1997-08-20T00:00:00.000Z',
'Freight': 85.46,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10630,
'CustomerID': 'KOENE',
'OrderDate': '1997-08-13T00:00:00.000Z',
'ShippedDate': '1997-08-19T00:00:00.000Z',
'Freight': 32.35,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10631,
'CustomerID': 'LAMAI',
'OrderDate': '1997-08-14T00:00:00.000Z',
'ShippedDate': '1997-08-15T00:00:00.000Z',
'Freight': 0.87,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10632,
'CustomerID': 'WANDK',
'OrderDate': '1997-08-14T00:00:00.000Z',
'ShippedDate': '1997-08-19T00:00:00.000Z',
'Freight': 41.38,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 586


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10633,
'CustomerID': 'ERNSH',
'OrderDate': '1997-08-15T00:00:00.000Z',
'ShippedDate': '1997-08-18T00:00:00.000Z',
'Freight': 477.9,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10634,
'CustomerID': 'FOLIG',
'OrderDate': '1997-08-15T00:00:00.000Z',
'ShippedDate': '1997-08-21T00:00:00.000Z',
'Freight': 487.38,
'ShipName': 'Folies gourmandes',
'ShipAddress': '184, chaussée de Tournai',
'ShipCity': 'Lille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10635,
'CustomerID': 'MAGAA',
'OrderDate': '1997-08-18T00:00:00.000Z',
'ShippedDate': '1997-08-21T00:00:00.000Z',
'Freight': 47.46,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10636,
'CustomerID': 'WARTH',
'OrderDate': '1997-08-19T00:00:00.000Z',
'ShippedDate': '1997-08-26T00:00:00.000Z',
'Freight': 1.15,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10637,
'CustomerID': 'QUEEN',
'OrderDate': '1997-08-19T00:00:00.000Z',
'ShippedDate': '1997-08-26T00:00:00.000Z',
'Freight': 201.29,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',

Copyright © 2001 -2024 Syncfusion Inc. 587


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Brazil'
},
{
'OrderID': 10638,
'CustomerID': 'LINOD',
'OrderDate': '1997-08-20T00:00:00.000Z',
'ShippedDate': '1997-09-01T00:00:00.000Z',
'Freight': 158.44,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10639,
'CustomerID': 'SANTG',
'OrderDate': '1997-08-20T00:00:00.000Z',
'ShippedDate': '1997-08-27T00:00:00.000Z',
'Freight': 38.64,
'ShipName': 'Santé Gourmet',
'ShipAddress': 'Erling Skakkes gate 78',
'ShipCity': 'Stavern',
'ShipRegion': null,
'ShipCountry': 'Norway'
},
{
'OrderID': 10640,
'CustomerID': 'WANDK',
'OrderDate': '1997-08-21T00:00:00.000Z',
'ShippedDate': '1997-08-28T00:00:00.000Z',
'Freight': 23.55,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10641,
'CustomerID': 'HILAA',
'OrderDate': '1997-08-22T00:00:00.000Z',
'ShippedDate': '1997-08-26T00:00:00.000Z',
'Freight': 179.61,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10642,
'CustomerID': 'SIMOB',
'OrderDate': '1997-08-22T00:00:00.000Z',
'ShippedDate': '1997-09-05T00:00:00.000Z',
'Freight': 41.89,
'ShipName': 'Simons bistro',

Copyright © 2001 -2024 Syncfusion Inc. 588


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Vinbæltet 34',


'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10643,
'CustomerID': 'ALFKI',
'OrderDate': '1997-08-25T00:00:00.000Z',
'ShippedDate': '1997-09-02T00:00:00.000Z',
'Freight': 29.46,
'ShipName': 'Alfreds Futterkiste',
'ShipAddress': 'Obere Str. 57',
'ShipCity': 'Berlin',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10644,
'CustomerID': 'WELLI',
'OrderDate': '1997-08-25T00:00:00.000Z',
'ShippedDate': '1997-09-01T00:00:00.000Z',
'Freight': 0.14,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10645,
'CustomerID': 'HANAR',
'OrderDate': '1997-08-26T00:00:00.000Z',
'ShippedDate': '1997-09-02T00:00:00.000Z',
'Freight': 12.41,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10646,
'CustomerID': 'HUNGO',
'OrderDate': '1997-08-27T00:00:00.000Z',
'ShippedDate': '1997-09-03T00:00:00.000Z',
'Freight': 142.33,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10647,
'CustomerID': 'QUEDE',
'OrderDate': '1997-08-27T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 589


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-09-03T00:00:00.000Z',
'Freight': 45.54,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10648,
'CustomerID': 'RICAR',
'OrderDate': '1997-08-28T00:00:00.000Z',
'ShippedDate': '1997-09-09T00:00:00.000Z',
'Freight': 14.25,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10649,
'CustomerID': 'MAISD',
'OrderDate': '1997-08-28T00:00:00.000Z',
'ShippedDate': '1997-08-29T00:00:00.000Z',
'Freight': 6.2,
'ShipName': 'Maison Dewey',
'ShipAddress': 'Rue Joseph-Bens 532',
'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10650,
'CustomerID': 'FAMIA',
'OrderDate': '1997-08-29T00:00:00.000Z',
'ShippedDate': '1997-09-03T00:00:00.000Z',
'Freight': 176.81,
'ShipName': 'Familia Arquibaldo',
'ShipAddress': 'Rua Orós, 92',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10651,
'CustomerID': 'WANDK',
'OrderDate': '1997-09-01T00:00:00.000Z',
'ShippedDate': '1997-09-11T00:00:00.000Z',
'Freight': 20.6,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 590


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10652,
'CustomerID': 'GOURL',
'OrderDate': '1997-09-01T00:00:00.000Z',
'ShippedDate': '1997-09-08T00:00:00.000Z',
'Freight': 7.14,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10653,
'CustomerID': 'FRANK',
'OrderDate': '1997-09-02T00:00:00.000Z',
'ShippedDate': '1997-09-19T00:00:00.000Z',
'Freight': 93.25,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10654,
'CustomerID': 'BERGS',
'OrderDate': '1997-09-02T00:00:00.000Z',
'ShippedDate': '1997-09-11T00:00:00.000Z',
'Freight': 55.26,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10655,
'CustomerID': 'REGGC',
'OrderDate': '1997-09-03T00:00:00.000Z',
'ShippedDate': '1997-09-11T00:00:00.000Z',
'Freight': 4.41,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10656,
'CustomerID': 'GREAL',
'OrderDate': '1997-09-04T00:00:00.000Z',
'ShippedDate': '1997-09-10T00:00:00.000Z',
'Freight': 57.15,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',

Copyright © 2001 -2024 Syncfusion Inc. 591


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'USA'
},
{
'OrderID': 10657,
'CustomerID': 'SAVEA',
'OrderDate': '1997-09-04T00:00:00.000Z',
'ShippedDate': '1997-09-15T00:00:00.000Z',
'Freight': 352.69,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10658,
'CustomerID': 'QUICK',
'OrderDate': '1997-09-05T00:00:00.000Z',
'ShippedDate': '1997-09-08T00:00:00.000Z',
'Freight': 364.15,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10659,
'CustomerID': 'QUEEN',
'OrderDate': '1997-09-05T00:00:00.000Z',
'ShippedDate': '1997-09-10T00:00:00.000Z',
'Freight': 105.81,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10660,
'CustomerID': 'HUNGC',
'OrderDate': '1997-09-08T00:00:00.000Z',
'ShippedDate': '1997-10-15T00:00:00.000Z',
'Freight': 111.29,
'ShipName': 'Hungry Coyote Import Store',
'ShipAddress': 'City Center Plaza 516 Main St.',
'ShipCity': 'Elgin',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10661,
'CustomerID': 'HUNGO',
'OrderDate': '1997-09-09T00:00:00.000Z',
'ShippedDate': '1997-09-15T00:00:00.000Z',
'Freight': 17.55,
'ShipName': 'Hungry Owl All-Night Grocers',

Copyright © 2001 -2024 Syncfusion Inc. 592


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '8 Johnstown Road',


'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10662,
'CustomerID': 'LONEP',
'OrderDate': '1997-09-09T00:00:00.000Z',
'ShippedDate': '1997-09-18T00:00:00.000Z',
'Freight': 1.28,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10663,
'CustomerID': 'BONAP',
'OrderDate': '1997-09-10T00:00:00.000Z',
'ShippedDate': '1997-10-03T00:00:00.000Z',
'Freight': 113.15,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10664,
'CustomerID': 'FURIB',
'OrderDate': '1997-09-10T00:00:00.000Z',
'ShippedDate': '1997-09-19T00:00:00.000Z',
'Freight': 1.27,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10665,
'CustomerID': 'LONEP',
'OrderDate': '1997-09-11T00:00:00.000Z',
'ShippedDate': '1997-09-17T00:00:00.000Z',
'Freight': 26.31,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10666,
'CustomerID': 'RICSU',
'OrderDate': '1997-09-12T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 593


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-09-22T00:00:00.000Z',
'Freight': 232.42,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10667,
'CustomerID': 'ERNSH',
'OrderDate': '1997-09-12T00:00:00.000Z',
'ShippedDate': '1997-09-19T00:00:00.000Z',
'Freight': 78.09,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10668,
'CustomerID': 'WANDK',
'OrderDate': '1997-09-15T00:00:00.000Z',
'ShippedDate': '1997-09-23T00:00:00.000Z',
'Freight': 47.22,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10669,
'CustomerID': 'SIMOB',
'OrderDate': '1997-09-15T00:00:00.000Z',
'ShippedDate': '1997-09-22T00:00:00.000Z',
'Freight': 24.39,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10670,
'CustomerID': 'FRANK',
'OrderDate': '1997-09-16T00:00:00.000Z',
'ShippedDate': '1997-09-18T00:00:00.000Z',
'Freight': 203.48,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 594


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10671,
'CustomerID': 'FRANR',
'OrderDate': '1997-09-17T00:00:00.000Z',
'ShippedDate': '1997-09-24T00:00:00.000Z',
'Freight': 30.34,
'ShipName': 'France restauration',
'ShipAddress': '54, rue Royale',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10672,
'CustomerID': 'BERGS',
'OrderDate': '1997-09-17T00:00:00.000Z',
'ShippedDate': '1997-09-26T00:00:00.000Z',
'Freight': 95.75,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10673,
'CustomerID': 'WILMK',
'OrderDate': '1997-09-18T00:00:00.000Z',
'ShippedDate': '1997-09-19T00:00:00.000Z',
'Freight': 22.76,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10674,
'CustomerID': 'ISLAT',
'OrderDate': '1997-09-18T00:00:00.000Z',
'ShippedDate': '1997-09-30T00:00:00.000Z',
'Freight': 0.9,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10675,
'CustomerID': 'FRANK',
'OrderDate': '1997-09-19T00:00:00.000Z',
'ShippedDate': '1997-09-23T00:00:00.000Z',
'Freight': 31.85,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 595


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Germany'
},
{
'OrderID': 10676,
'CustomerID': 'TORTU',
'OrderDate': '1997-09-22T00:00:00.000Z',
'ShippedDate': '1997-09-29T00:00:00.000Z',
'Freight': 2.01,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10677,
'CustomerID': 'ANTON',
'OrderDate': '1997-09-22T00:00:00.000Z',
'ShippedDate': '1997-09-26T00:00:00.000Z',
'Freight': 4.03,
'ShipName': 'Antonio Moreno Taquería',
'ShipAddress': 'Mataderos 2312',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10678,
'CustomerID': 'SAVEA',
'OrderDate': '1997-09-23T00:00:00.000Z',
'ShippedDate': '1997-10-16T00:00:00.000Z',
'Freight': 388.98,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10679,
'CustomerID': 'BLONP',
'OrderDate': '1997-09-23T00:00:00.000Z',
'ShippedDate': '1997-09-30T00:00:00.000Z',
'Freight': 27.94,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10680,
'CustomerID': 'OLDWO',
'OrderDate': '1997-09-24T00:00:00.000Z',
'ShippedDate': '1997-09-26T00:00:00.000Z',
'Freight': 26.61,
'ShipName': 'Old World Delicatessen',

Copyright © 2001 -2024 Syncfusion Inc. 596


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '2743 Bering St.',


'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10681,
'CustomerID': 'GREAL',
'OrderDate': '1997-09-25T00:00:00.000Z',
'ShippedDate': '1997-09-30T00:00:00.000Z',
'Freight': 76.13,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10682,
'CustomerID': 'ANTON',
'OrderDate': '1997-09-25T00:00:00.000Z',
'ShippedDate': '1997-10-01T00:00:00.000Z',
'Freight': 36.13,
'ShipName': 'Antonio Moreno Taquería',
'ShipAddress': 'Mataderos 2312',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10683,
'CustomerID': 'DUMON',
'OrderDate': '1997-09-26T00:00:00.000Z',
'ShippedDate': '1997-10-01T00:00:00.000Z',
'Freight': 4.4,
'ShipName': 'Du monde entier',
'ShipAddress': '67, rue des Cinquante Otages',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10684,
'CustomerID': 'OTTIK',
'OrderDate': '1997-09-26T00:00:00.000Z',
'ShippedDate': '1997-09-30T00:00:00.000Z',
'Freight': 145.63,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10685,
'CustomerID': 'GOURL',
'OrderDate': '1997-09-29T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 597


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-10-03T00:00:00.000Z',
'Freight': 33.75,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10686,
'CustomerID': 'PICCO',
'OrderDate': '1997-09-30T00:00:00.000Z',
'ShippedDate': '1997-10-08T00:00:00.000Z',
'Freight': 96.5,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10687,
'CustomerID': 'HUNGO',
'OrderDate': '1997-09-30T00:00:00.000Z',
'ShippedDate': '1997-10-30T00:00:00.000Z',
'Freight': 296.43,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10688,
'CustomerID': 'VAFFE',
'OrderDate': '1997-10-01T00:00:00.000Z',
'ShippedDate': '1997-10-07T00:00:00.000Z',
'Freight': 299.09,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10689,
'CustomerID': 'BERGS',
'OrderDate': '1997-10-01T00:00:00.000Z',
'ShippedDate': '1997-10-07T00:00:00.000Z',
'Freight': 13.42,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 598


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10690,
'CustomerID': 'HANAR',
'OrderDate': '1997-10-02T00:00:00.000Z',
'ShippedDate': '1997-10-03T00:00:00.000Z',
'Freight': 15.8,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10691,
'CustomerID': 'QUICK',
'OrderDate': '1997-10-03T00:00:00.000Z',
'ShippedDate': '1997-10-22T00:00:00.000Z',
'Freight': 810.05,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10692,
'CustomerID': 'ALFKI',
'OrderDate': '1997-10-03T00:00:00.000Z',
'ShippedDate': '1997-10-13T00:00:00.000Z',
'Freight': 61.02,
'ShipName': 'Alfred\' Futterkiste',
'ShipAddress': 'Obere Str. 57',
'ShipCity': 'Berlin',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10693,
'CustomerID': 'WHITC',
'OrderDate': '1997-10-06T00:00:00.000Z',
'ShippedDate': '1997-10-10T00:00:00.000Z',
'Freight': 139.34,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10694,
'CustomerID': 'QUICK',
'OrderDate': '1997-10-06T00:00:00.000Z',
'ShippedDate': '1997-10-09T00:00:00.000Z',
'Freight': 398.36,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 599


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Germany'
},
{
'OrderID': 10695,
'CustomerID': 'WILMK',
'OrderDate': '1997-10-07T00:00:00.000Z',
'ShippedDate': '1997-10-14T00:00:00.000Z',
'Freight': 16.72,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10696,
'CustomerID': 'WHITC',
'OrderDate': '1997-10-08T00:00:00.000Z',
'ShippedDate': '1997-10-14T00:00:00.000Z',
'Freight': 102.55,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10697,
'CustomerID': 'LINOD',
'OrderDate': '1997-10-08T00:00:00.000Z',
'ShippedDate': '1997-10-14T00:00:00.000Z',
'Freight': 45.52,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10698,
'CustomerID': 'ERNSH',
'OrderDate': '1997-10-09T00:00:00.000Z',
'ShippedDate': '1997-10-17T00:00:00.000Z',
'Freight': 272.47,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10699,
'CustomerID': 'MORGK',
'OrderDate': '1997-10-09T00:00:00.000Z',
'ShippedDate': '1997-10-13T00:00:00.000Z',
'Freight': 0.58,
'ShipName': 'Morgenstern Gesundkost',

Copyright © 2001 -2024 Syncfusion Inc. 600


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Heerstr. 22',


'ShipCity': 'Leipzig',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10700,
'CustomerID': 'SAVEA',
'OrderDate': '1997-10-10T00:00:00.000Z',
'ShippedDate': '1997-10-16T00:00:00.000Z',
'Freight': 65.1,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10701,
'CustomerID': 'HUNGO',
'OrderDate': '1997-10-13T00:00:00.000Z',
'ShippedDate': '1997-10-15T00:00:00.000Z',
'Freight': 220.31,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10702,
'CustomerID': 'ALFKI',
'OrderDate': '1997-10-13T00:00:00.000Z',
'ShippedDate': '1997-10-21T00:00:00.000Z',
'Freight': 23.94,
'ShipName': 'Alfred\' Futterkiste',
'ShipAddress': 'Obere Str. 57',
'ShipCity': 'Berlin',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10703,
'CustomerID': 'FOLKO',
'OrderDate': '1997-10-14T00:00:00.000Z',
'ShippedDate': '1997-10-20T00:00:00.000Z',
'Freight': 152.3,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10704,
'CustomerID': 'QUEEN',
'OrderDate': '1997-10-14T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 601


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-11-07T00:00:00.000Z',
'Freight': 4.78,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10705,
'CustomerID': 'HILAA',
'OrderDate': '1997-10-15T00:00:00.000Z',
'ShippedDate': '1997-11-18T00:00:00.000Z',
'Freight': 3.52,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10706,
'CustomerID': 'OLDWO',
'OrderDate': '1997-10-16T00:00:00.000Z',
'ShippedDate': '1997-10-21T00:00:00.000Z',
'Freight': 135.63,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10707,
'CustomerID': 'AROUT',
'OrderDate': '1997-10-16T00:00:00.000Z',
'ShippedDate': '1997-10-23T00:00:00.000Z',
'Freight': 21.74,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10708,
'CustomerID': 'THEBI',
'OrderDate': '1997-10-17T00:00:00.000Z',
'ShippedDate': '1997-11-05T00:00:00.000Z',
'Freight': 2.96,
'ShipName': 'The Big Cheese',
'ShipAddress': '89 Jefferson Way Suite 2',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 602


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10709,
'CustomerID': 'GOURL',
'OrderDate': '1997-10-17T00:00:00.000Z',
'ShippedDate': '1997-11-20T00:00:00.000Z',
'Freight': 210.8,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10710,
'CustomerID': 'FRANS',
'OrderDate': '1997-10-20T00:00:00.000Z',
'ShippedDate': '1997-10-23T00:00:00.000Z',
'Freight': 4.98,
'ShipName': 'Franchi S.p.A.',
'ShipAddress': 'Via Monte Bianco 34',
'ShipCity': 'Torino',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10711,
'CustomerID': 'SAVEA',
'OrderDate': '1997-10-21T00:00:00.000Z',
'ShippedDate': '1997-10-29T00:00:00.000Z',
'Freight': 52.41,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10712,
'CustomerID': 'HUNGO',
'OrderDate': '1997-10-21T00:00:00.000Z',
'ShippedDate': '1997-10-31T00:00:00.000Z',
'Freight': 89.93,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10713,
'CustomerID': 'SAVEA',
'OrderDate': '1997-10-22T00:00:00.000Z',
'ShippedDate': '1997-10-24T00:00:00.000Z',
'Freight': 167.05,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',

Copyright © 2001 -2024 Syncfusion Inc. 603


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'USA'
},
{
'OrderID': 10714,
'CustomerID': 'SAVEA',
'OrderDate': '1997-10-22T00:00:00.000Z',
'ShippedDate': '1997-10-27T00:00:00.000Z',
'Freight': 24.49,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10715,
'CustomerID': 'BONAP',
'OrderDate': '1997-10-23T00:00:00.000Z',
'ShippedDate': '1997-10-29T00:00:00.000Z',
'Freight': 63.2,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10716,
'CustomerID': 'RANCH',
'OrderDate': '1997-10-24T00:00:00.000Z',
'ShippedDate': '1997-10-27T00:00:00.000Z',
'Freight': 22.57,
'ShipName': 'Rancho grande',
'ShipAddress': 'Av. del Libertador 900',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10717,
'CustomerID': 'FRANK',
'OrderDate': '1997-10-24T00:00:00.000Z',
'ShippedDate': '1997-10-29T00:00:00.000Z',
'Freight': 59.25,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10718,
'CustomerID': 'KOENE',
'OrderDate': '1997-10-27T00:00:00.000Z',
'ShippedDate': '1997-10-29T00:00:00.000Z',
'Freight': 170.88,
'ShipName': 'Königlich Essen',

Copyright © 2001 -2024 Syncfusion Inc. 604


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Maubelstr. 90',


'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10719,
'CustomerID': 'LETSS',
'OrderDate': '1997-10-27T00:00:00.000Z',
'ShippedDate': '1997-11-05T00:00:00.000Z',
'Freight': 51.44,
'ShipName': 'Let\' Stop N Shop',
'ShipAddress': '87 Polk St. Suite 5',
'ShipCity': 'San Francisco',
'ShipRegion': 'CA',
'ShipCountry': 'USA'
},
{
'OrderID': 10720,
'CustomerID': 'QUEDE',
'OrderDate': '1997-10-28T00:00:00.000Z',
'ShippedDate': '1997-11-05T00:00:00.000Z',
'Freight': 9.53,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10721,
'CustomerID': 'QUICK',
'OrderDate': '1997-10-29T00:00:00.000Z',
'ShippedDate': '1997-10-31T00:00:00.000Z',
'Freight': 48.92,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10722,
'CustomerID': 'SAVEA',
'OrderDate': '1997-10-29T00:00:00.000Z',
'ShippedDate': '1997-11-04T00:00:00.000Z',
'Freight': 74.58,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10723,
'CustomerID': 'WHITC',
'OrderDate': '1997-10-30T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 605


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-11-25T00:00:00.000Z',
'Freight': 21.72,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10724,
'CustomerID': 'MEREP',
'OrderDate': '1997-10-30T00:00:00.000Z',
'ShippedDate': '1997-11-05T00:00:00.000Z',
'Freight': 57.75,
'ShipName': 'Mère Paillarde',
'ShipAddress': '43 rue St. Laurent',
'ShipCity': 'Montréal',
'ShipRegion': 'Québec',
'ShipCountry': 'Canada'
},
{
'OrderID': 10725,
'CustomerID': 'FAMIA',
'OrderDate': '1997-10-31T00:00:00.000Z',
'ShippedDate': '1997-11-05T00:00:00.000Z',
'Freight': 10.83,
'ShipName': 'Familia Arquibaldo',
'ShipAddress': 'Rua Orós, 92',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10726,
'CustomerID': 'EASTC',
'OrderDate': '1997-11-03T00:00:00.000Z',
'ShippedDate': '1997-12-05T00:00:00.000Z',
'Freight': 16.56,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10727,
'CustomerID': 'REGGC',
'OrderDate': '1997-11-03T00:00:00.000Z',
'ShippedDate': '1997-12-05T00:00:00.000Z',
'Freight': 89.9,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 606


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10728,
'CustomerID': 'QUEEN',
'OrderDate': '1997-11-04T00:00:00.000Z',
'ShippedDate': '1997-11-11T00:00:00.000Z',
'Freight': 58.33,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10729,
'CustomerID': 'LINOD',
'OrderDate': '1997-11-04T00:00:00.000Z',
'ShippedDate': '1997-11-14T00:00:00.000Z',
'Freight': 141.06,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10730,
'CustomerID': 'BONAP',
'OrderDate': '1997-11-05T00:00:00.000Z',
'ShippedDate': '1997-11-14T00:00:00.000Z',
'Freight': 20.12,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10731,
'CustomerID': 'CHOPS',
'OrderDate': '1997-11-06T00:00:00.000Z',
'ShippedDate': '1997-11-14T00:00:00.000Z',
'Freight': 96.65,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10732,
'CustomerID': 'BONAP',
'OrderDate': '1997-11-06T00:00:00.000Z',
'ShippedDate': '1997-11-07T00:00:00.000Z',
'Freight': 16.97,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 607


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'France'
},
{
'OrderID': 10733,
'CustomerID': 'BERGS',
'OrderDate': '1997-11-07T00:00:00.000Z',
'ShippedDate': '1997-11-10T00:00:00.000Z',
'Freight': 110.11,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10734,
'CustomerID': 'GOURL',
'OrderDate': '1997-11-07T00:00:00.000Z',
'ShippedDate': '1997-11-12T00:00:00.000Z',
'Freight': 1.63,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10735,
'CustomerID': 'LETSS',
'OrderDate': '1997-11-10T00:00:00.000Z',
'ShippedDate': '1997-11-21T00:00:00.000Z',
'Freight': 45.97,
'ShipName': 'Let\' Stop N Shop',
'ShipAddress': '87 Polk St. Suite 5',
'ShipCity': 'San Francisco',
'ShipRegion': 'CA',
'ShipCountry': 'USA'
},
{
'OrderID': 10736,
'CustomerID': 'HUNGO',
'OrderDate': '1997-11-11T00:00:00.000Z',
'ShippedDate': '1997-11-21T00:00:00.000Z',
'Freight': 44.1,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10737,
'CustomerID': 'VINET',
'OrderDate': '1997-11-11T00:00:00.000Z',
'ShippedDate': '1997-11-18T00:00:00.000Z',
'Freight': 7.79,
'ShipName': 'Vins et alcools Chevalier',

Copyright © 2001 -2024 Syncfusion Inc. 608


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '59 rue de l\'Abbaye',


'ShipCity': 'Reims',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10738,
'CustomerID': 'SPECD',
'OrderDate': '1997-11-12T00:00:00.000Z',
'ShippedDate': '1997-11-18T00:00:00.000Z',
'Freight': 2.91,
'ShipName': 'Spécialités du monde',
'ShipAddress': '25, rue Lauriston',
'ShipCity': 'Paris',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10739,
'CustomerID': 'VINET',
'OrderDate': '1997-11-12T00:00:00.000Z',
'ShippedDate': '1997-11-17T00:00:00.000Z',
'Freight': 11.08,
'ShipName': 'Vins et alcools Chevalier',
'ShipAddress': '59 rue de lAbbaye',
'ShipCity': 'Reims',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10740,
'CustomerID': 'WHITC',
'OrderDate': '1997-11-13T00:00:00.000Z',
'ShippedDate': '1997-11-25T00:00:00.000Z',
'Freight': 81.88,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10741,
'CustomerID': 'AROUT',
'OrderDate': '1997-11-14T00:00:00.000Z',
'ShippedDate': '1997-11-18T00:00:00.000Z',
'Freight': 10.96,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10742,
'CustomerID': 'BOTTM',
'OrderDate': '1997-11-14T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 609


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-11-18T00:00:00.000Z',
'Freight': 243.73,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10743,
'CustomerID': 'AROUT',
'OrderDate': '1997-11-17T00:00:00.000Z',
'ShippedDate': '1997-11-21T00:00:00.000Z',
'Freight': 23.72,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10744,
'CustomerID': 'VAFFE',
'OrderDate': '1997-11-17T00:00:00.000Z',
'ShippedDate': '1997-11-24T00:00:00.000Z',
'Freight': 69.19,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10745,
'CustomerID': 'QUICK',
'OrderDate': '1997-11-18T00:00:00.000Z',
'ShippedDate': '1997-11-27T00:00:00.000Z',
'Freight': 3.52,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10746,
'CustomerID': 'CHOPS',
'OrderDate': '1997-11-19T00:00:00.000Z',
'ShippedDate': '1997-11-21T00:00:00.000Z',
'Freight': 31.43,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 610


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10747,
'CustomerID': 'PICCO',
'OrderDate': '1997-11-19T00:00:00.000Z',
'ShippedDate': '1997-11-26T00:00:00.000Z',
'Freight': 117.33,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10748,
'CustomerID': 'SAVEA',
'OrderDate': '1997-11-20T00:00:00.000Z',
'ShippedDate': '1997-11-28T00:00:00.000Z',
'Freight': 232.55,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10749,
'CustomerID': 'ISLAT',
'OrderDate': '1997-11-20T00:00:00.000Z',
'ShippedDate': '1997-12-19T00:00:00.000Z',
'Freight': 61.53,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10750,
'CustomerID': 'WARTH',
'OrderDate': '1997-11-21T00:00:00.000Z',
'ShippedDate': '1997-11-24T00:00:00.000Z',
'Freight': 79.3,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10751,
'CustomerID': 'RICSU',
'OrderDate': '1997-11-24T00:00:00.000Z',
'ShippedDate': '1997-12-03T00:00:00.000Z',
'Freight': 130.79,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 611


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Switzerland'
},
{
'OrderID': 10752,
'CustomerID': 'NORTS',
'OrderDate': '1997-11-24T00:00:00.000Z',
'ShippedDate': '1997-11-28T00:00:00.000Z',
'Freight': 1.39,
'ShipName': 'North/South',
'ShipAddress': 'South House 300 Queensbridge',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10753,
'CustomerID': 'FRANS',
'OrderDate': '1997-11-25T00:00:00.000Z',
'ShippedDate': '1997-11-27T00:00:00.000Z',
'Freight': 7.7,
'ShipName': 'Franchi S.p.A.',
'ShipAddress': 'Via Monte Bianco 34',
'ShipCity': 'Torino',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10754,
'CustomerID': 'MAGAA',
'OrderDate': '1997-11-25T00:00:00.000Z',
'ShippedDate': '1997-11-27T00:00:00.000Z',
'Freight': 2.38,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10755,
'CustomerID': 'BONAP',
'OrderDate': '1997-11-26T00:00:00.000Z',
'ShippedDate': '1997-11-28T00:00:00.000Z',
'Freight': 16.71,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10756,
'CustomerID': 'SPLIR',
'OrderDate': '1997-11-27T00:00:00.000Z',
'ShippedDate': '1997-12-02T00:00:00.000Z',
'Freight': 73.21,
'ShipName': 'Split Rail Beer & Ale',

Copyright © 2001 -2024 Syncfusion Inc. 612


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'P.O. Box 555',


'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10757,
'CustomerID': 'SAVEA',
'OrderDate': '1997-11-27T00:00:00.000Z',
'ShippedDate': '1997-12-15T00:00:00.000Z',
'Freight': 8.19,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10758,
'CustomerID': 'RICSU',
'OrderDate': '1997-11-28T00:00:00.000Z',
'ShippedDate': '1997-12-04T00:00:00.000Z',
'Freight': 138.17,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10759,
'CustomerID': 'ANATR',
'OrderDate': '1997-11-28T00:00:00.000Z',
'ShippedDate': '1997-12-12T00:00:00.000Z',
'Freight': 11.99,
'ShipName': 'Ana Trujillo Emparedados y helados',
'ShipAddress': 'Avda. de la Constitución 2222',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10760,
'CustomerID': 'MAISD',
'OrderDate': '1997-12-01T00:00:00.000Z',
'ShippedDate': '1997-12-10T00:00:00.000Z',
'Freight': 155.64,
'ShipName': 'Maison Dewey',
'ShipAddress': 'Rue Joseph-Bens 532',
'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10761,
'CustomerID': 'RATTC',
'OrderDate': '1997-12-02T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 613


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-12-08T00:00:00.000Z',
'Freight': 18.66,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10762,
'CustomerID': 'FOLKO',
'OrderDate': '1997-12-02T00:00:00.000Z',
'ShippedDate': '1997-12-09T00:00:00.000Z',
'Freight': 328.74,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10763,
'CustomerID': 'FOLIG',
'OrderDate': '1997-12-03T00:00:00.000Z',
'ShippedDate': '1997-12-08T00:00:00.000Z',
'Freight': 37.35,
'ShipName': 'Folies gourmandes',
'ShipAddress': '184, chaussée de Tournai',
'ShipCity': 'Lille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10764,
'CustomerID': 'ERNSH',
'OrderDate': '1997-12-03T00:00:00.000Z',
'ShippedDate': '1997-12-08T00:00:00.000Z',
'Freight': 145.45,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10765,
'CustomerID': 'QUICK',
'OrderDate': '1997-12-04T00:00:00.000Z',
'ShippedDate': '1997-12-09T00:00:00.000Z',
'Freight': 42.74,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 614


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10766,
'CustomerID': 'OTTIK',
'OrderDate': '1997-12-05T00:00:00.000Z',
'ShippedDate': '1997-12-09T00:00:00.000Z',
'Freight': 157.55,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10767,
'CustomerID': 'SUPRD',
'OrderDate': '1997-12-05T00:00:00.000Z',
'ShippedDate': '1997-12-15T00:00:00.000Z',
'Freight': 1.59,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10768,
'CustomerID': 'AROUT',
'OrderDate': '1997-12-08T00:00:00.000Z',
'ShippedDate': '1997-12-15T00:00:00.000Z',
'Freight': 146.32,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10769,
'CustomerID': 'VAFFE',
'OrderDate': '1997-12-08T00:00:00.000Z',
'ShippedDate': '1997-12-12T00:00:00.000Z',
'Freight': 65.06,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10770,
'CustomerID': 'HANAR',
'OrderDate': '1997-12-09T00:00:00.000Z',
'ShippedDate': '1997-12-17T00:00:00.000Z',
'Freight': 5.32,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',

Copyright © 2001 -2024 Syncfusion Inc. 615


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Brazil'
},
{
'OrderID': 10771,
'CustomerID': 'ERNSH',
'OrderDate': '1997-12-10T00:00:00.000Z',
'ShippedDate': '1998-01-02T00:00:00.000Z',
'Freight': 11.19,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10772,
'CustomerID': 'LEHMS',
'OrderDate': '1997-12-10T00:00:00.000Z',
'ShippedDate': '1997-12-19T00:00:00.000Z',
'Freight': 91.28,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10773,
'CustomerID': 'ERNSH',
'OrderDate': '1997-12-11T00:00:00.000Z',
'ShippedDate': '1997-12-16T00:00:00.000Z',
'Freight': 96.43,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10774,
'CustomerID': 'FOLKO',
'OrderDate': '1997-12-11T00:00:00.000Z',
'ShippedDate': '1997-12-12T00:00:00.000Z',
'Freight': 48.2,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10775,
'CustomerID': 'THECR',
'OrderDate': '1997-12-12T00:00:00.000Z',
'ShippedDate': '1997-12-26T00:00:00.000Z',
'Freight': 20.25,
'ShipName': 'The Cracker Box',

Copyright © 2001 -2024 Syncfusion Inc. 616


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '55 Grizzly Peak Rd.',


'ShipCity': 'Butte',
'ShipRegion': 'MT',
'ShipCountry': 'USA'
},
{
'OrderID': 10776,
'CustomerID': 'ERNSH',
'OrderDate': '1997-12-15T00:00:00.000Z',
'ShippedDate': '1997-12-18T00:00:00.000Z',
'Freight': 351.53,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10777,
'CustomerID': 'GOURL',
'OrderDate': '1997-12-15T00:00:00.000Z',
'ShippedDate': '1998-01-21T00:00:00.000Z',
'Freight': 3.01,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10778,
'CustomerID': 'BERGS',
'OrderDate': '1997-12-16T00:00:00.000Z',
'ShippedDate': '1997-12-24T00:00:00.000Z',
'Freight': 6.79,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10779,
'CustomerID': 'MORGK',
'OrderDate': '1997-12-16T00:00:00.000Z',
'ShippedDate': '1998-01-14T00:00:00.000Z',
'Freight': 58.13,
'ShipName': 'Morgenstern Gesundkost',
'ShipAddress': 'Heerstr. 22',
'ShipCity': 'Leipzig',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10780,
'CustomerID': 'LILAS',
'OrderDate': '1997-12-16T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 617


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1997-12-25T00:00:00.000Z',
'Freight': 42.13,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10781,
'CustomerID': 'WARTH',
'OrderDate': '1997-12-17T00:00:00.000Z',
'ShippedDate': '1997-12-19T00:00:00.000Z',
'Freight': 73.16,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10782,
'CustomerID': 'CACTU',
'OrderDate': '1997-12-17T00:00:00.000Z',
'ShippedDate': '1997-12-22T00:00:00.000Z',
'Freight': 1.1,
'ShipName': 'Cactus Comidas para llevar',
'ShipAddress': 'Cerrito 333',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10783,
'CustomerID': 'HANAR',
'OrderDate': '1997-12-18T00:00:00.000Z',
'ShippedDate': '1997-12-19T00:00:00.000Z',
'Freight': 124.98,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10784,
'CustomerID': 'MAGAA',
'OrderDate': '1997-12-18T00:00:00.000Z',
'ShippedDate': '1997-12-22T00:00:00.000Z',
'Freight': 70.09,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 618


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10785,
'CustomerID': 'GROSR',
'OrderDate': '1997-12-18T00:00:00.000Z',
'ShippedDate': '1997-12-24T00:00:00.000Z',
'Freight': 1.51,
'ShipName': 'GROSELLA-Restaurante',
'ShipAddress': '5ª Ave. Los Palos Grandes',
'ShipCity': 'Caracas',
'ShipRegion': 'DF',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10786,
'CustomerID': 'QUEEN',
'OrderDate': '1997-12-19T00:00:00.000Z',
'ShippedDate': '1997-12-23T00:00:00.000Z',
'Freight': 110.87,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10787,
'CustomerID': 'LAMAI',
'OrderDate': '1997-12-19T00:00:00.000Z',
'ShippedDate': '1997-12-26T00:00:00.000Z',
'Freight': 249.93,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10788,
'CustomerID': 'QUICK',
'OrderDate': '1997-12-22T00:00:00.000Z',
'ShippedDate': '1998-01-19T00:00:00.000Z',
'Freight': 42.7,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10789,
'CustomerID': 'FOLIG',
'OrderDate': '1997-12-22T00:00:00.000Z',
'ShippedDate': '1997-12-31T00:00:00.000Z',
'Freight': 100.6,
'ShipName': 'Folies gourmandes',
'ShipAddress': '184, chaussée de Tournai',
'ShipCity': 'Lille',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 619


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'France'
},
{
'OrderID': 10790,
'CustomerID': 'GOURL',
'OrderDate': '1997-12-22T00:00:00.000Z',
'ShippedDate': '1997-12-26T00:00:00.000Z',
'Freight': 28.23,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10791,
'CustomerID': 'FRANK',
'OrderDate': '1997-12-23T00:00:00.000Z',
'ShippedDate': '1998-01-01T00:00:00.000Z',
'Freight': 16.85,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10792,
'CustomerID': 'WOLZA',
'OrderDate': '1997-12-23T00:00:00.000Z',
'ShippedDate': '1997-12-31T00:00:00.000Z',
'Freight': 23.79,
'ShipName': 'Wolski Zajazd',
'ShipAddress': 'ul. Filtrowa 68',
'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 10793,
'CustomerID': 'AROUT',
'OrderDate': '1997-12-24T00:00:00.000Z',
'ShippedDate': '1998-01-08T00:00:00.000Z',
'Freight': 4.52,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10794,
'CustomerID': 'QUEDE',
'OrderDate': '1997-12-24T00:00:00.000Z',
'ShippedDate': '1998-01-02T00:00:00.000Z',
'Freight': 21.49,
'ShipName': 'Que Delícia',

Copyright © 2001 -2024 Syncfusion Inc. 620


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Rua da Panificadora, 12',


'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10795,
'CustomerID': 'ERNSH',
'OrderDate': '1997-12-24T00:00:00.000Z',
'ShippedDate': '1998-01-20T00:00:00.000Z',
'Freight': 126.66,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10796,
'CustomerID': 'HILAA',
'OrderDate': '1997-12-25T00:00:00.000Z',
'ShippedDate': '1998-01-14T00:00:00.000Z',
'Freight': 26.52,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10797,
'CustomerID': 'DRACD',
'OrderDate': '1997-12-25T00:00:00.000Z',
'ShippedDate': '1998-01-05T00:00:00.000Z',
'Freight': 33.35,
'ShipName': 'Drachenblut Delikatessen',
'ShipAddress': 'Walserweg 21',
'ShipCity': 'Aachen',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10798,
'CustomerID': 'ISLAT',
'OrderDate': '1997-12-26T00:00:00.000Z',
'ShippedDate': '1998-01-05T00:00:00.000Z',
'Freight': 2.33,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10799,
'CustomerID': 'KOENE',
'OrderDate': '1997-12-26T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 621


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-01-05T00:00:00.000Z',
'Freight': 30.76,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10800,
'CustomerID': 'SEVES',
'OrderDate': '1997-12-26T00:00:00.000Z',
'ShippedDate': '1998-01-05T00:00:00.000Z',
'Freight': 137.44,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10801,
'CustomerID': 'BOLID',
'OrderDate': '1997-12-29T00:00:00.000Z',
'ShippedDate': '1997-12-31T00:00:00.000Z',
'Freight': 97.09,
'ShipName': 'Bólido Comidas preparadas',
'ShipAddress': 'C/ Araquil, 67',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10802,
'CustomerID': 'SIMOB',
'OrderDate': '1997-12-29T00:00:00.000Z',
'ShippedDate': '1998-01-02T00:00:00.000Z',
'Freight': 257.26,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10803,
'CustomerID': 'WELLI',
'OrderDate': '1997-12-30T00:00:00.000Z',
'ShippedDate': '1998-01-06T00:00:00.000Z',
'Freight': 55.23,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 622


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10804,
'CustomerID': 'SEVES',
'OrderDate': '1997-12-30T00:00:00.000Z',
'ShippedDate': '1998-01-07T00:00:00.000Z',
'Freight': 27.33,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10805,
'CustomerID': 'THEBI',
'OrderDate': '1997-12-30T00:00:00.000Z',
'ShippedDate': '1998-01-09T00:00:00.000Z',
'Freight': 237.34,
'ShipName': 'The Big Cheese',
'ShipAddress': '89 Jefferson Way Suite 2',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10806,
'CustomerID': 'VICTE',
'OrderDate': '1997-12-31T00:00:00.000Z',
'ShippedDate': '1998-01-05T00:00:00.000Z',
'Freight': 22.11,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10807,
'CustomerID': 'FRANS',
'OrderDate': '1997-12-31T00:00:00.000Z',
'ShippedDate': '1998-01-30T00:00:00.000Z',
'Freight': 1.36,
'ShipName': 'Franchi S.p.A.',
'ShipAddress': 'Via Monte Bianco 34',
'ShipCity': 'Torino',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10808,
'CustomerID': 'OLDWO',
'OrderDate': '1998-01-01T00:00:00.000Z',
'ShippedDate': '1998-01-09T00:00:00.000Z',
'Freight': 45.53,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',

Copyright © 2001 -2024 Syncfusion Inc. 623


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'USA'
},
{
'OrderID': 10809,
'CustomerID': 'WELLI',
'OrderDate': '1998-01-01T00:00:00.000Z',
'ShippedDate': '1998-01-07T00:00:00.000Z',
'Freight': 4.87,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10810,
'CustomerID': 'LAUGB',
'OrderDate': '1998-01-01T00:00:00.000Z',
'ShippedDate': '1998-01-07T00:00:00.000Z',
'Freight': 4.33,
'ShipName': 'Laughing Bacchus Wine Cellars',
'ShipAddress': '2319 Elm St.',
'ShipCity': 'Vancouver',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10811,
'CustomerID': 'LINOD',
'OrderDate': '1998-01-02T00:00:00.000Z',
'ShippedDate': '1998-01-08T00:00:00.000Z',
'Freight': 31.22,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10812,
'CustomerID': 'REGGC',
'OrderDate': '1998-01-02T00:00:00.000Z',
'ShippedDate': '1998-01-12T00:00:00.000Z',
'Freight': 59.78,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10813,
'CustomerID': 'RICAR',
'OrderDate': '1998-01-05T00:00:00.000Z',
'ShippedDate': '1998-01-09T00:00:00.000Z',
'Freight': 47.38,
'ShipName': 'Ricardo Adocicados',

Copyright © 2001 -2024 Syncfusion Inc. 624


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Av. Copacabana, 267',


'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10814,
'CustomerID': 'VICTE',
'OrderDate': '1998-01-05T00:00:00.000Z',
'ShippedDate': '1998-01-14T00:00:00.000Z',
'Freight': 130.94,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10815,
'CustomerID': 'SAVEA',
'OrderDate': '1998-01-05T00:00:00.000Z',
'ShippedDate': '1998-01-14T00:00:00.000Z',
'Freight': 14.62,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10816,
'CustomerID': 'GREAL',
'OrderDate': '1998-01-06T00:00:00.000Z',
'ShippedDate': '1998-02-04T00:00:00.000Z',
'Freight': 719.78,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10817,
'CustomerID': 'KOENE',
'OrderDate': '1998-01-06T00:00:00.000Z',
'ShippedDate': '1998-01-13T00:00:00.000Z',
'Freight': 306.07,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10818,
'CustomerID': 'MAGAA',
'OrderDate': '1998-01-07T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 625


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-01-12T00:00:00.000Z',
'Freight': 65.48,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10819,
'CustomerID': 'CACTU',
'OrderDate': '1998-01-07T00:00:00.000Z',
'ShippedDate': '1998-01-16T00:00:00.000Z',
'Freight': 19.76,
'ShipName': 'Cactus Comidas para llevar',
'ShipAddress': 'Cerrito 333',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10820,
'CustomerID': 'RATTC',
'OrderDate': '1998-01-07T00:00:00.000Z',
'ShippedDate': '1998-01-13T00:00:00.000Z',
'Freight': 37.52,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10821,
'CustomerID': 'SPLIR',
'OrderDate': '1998-01-08T00:00:00.000Z',
'ShippedDate': '1998-01-15T00:00:00.000Z',
'Freight': 36.68,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{
'OrderID': 10822,
'CustomerID': 'TRAIH',
'OrderDate': '1998-01-08T00:00:00.000Z',
'ShippedDate': '1998-01-16T00:00:00.000Z',
'Freight': 7,
'ShipName': 'Trail\' Head Gourmet Provisioners',
'ShipAddress': '722 DaVinci Blvd.',
'ShipCity': 'Kirkland',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 626


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10823,
'CustomerID': 'LILAS',
'OrderDate': '1998-01-09T00:00:00.000Z',
'ShippedDate': '1998-01-13T00:00:00.000Z',
'Freight': 163.97,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10824,
'CustomerID': 'FOLKO',
'OrderDate': '1998-01-09T00:00:00.000Z',
'ShippedDate': '1998-01-30T00:00:00.000Z',
'Freight': 1.23,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10825,
'CustomerID': 'DRACD',
'OrderDate': '1998-01-09T00:00:00.000Z',
'ShippedDate': '1998-01-14T00:00:00.000Z',
'Freight': 79.25,
'ShipName': 'Drachenblut Delikatessen',
'ShipAddress': 'Walserweg 21',
'ShipCity': 'Aachen',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10826,
'CustomerID': 'BLONP',
'OrderDate': '1998-01-12T00:00:00.000Z',
'ShippedDate': '1998-02-06T00:00:00.000Z',
'Freight': 7.09,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10827,
'CustomerID': 'BONAP',
'OrderDate': '1998-01-12T00:00:00.000Z',
'ShippedDate': '1998-02-06T00:00:00.000Z',
'Freight': 63.54,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 627


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'France'
},
{
'OrderID': 10828,
'CustomerID': 'RANCH',
'OrderDate': '1998-01-13T00:00:00.000Z',
'ShippedDate': '1998-02-04T00:00:00.000Z',
'Freight': 90.85,
'ShipName': 'Rancho grande',
'ShipAddress': 'Av. del Libertador 900',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10829,
'CustomerID': 'ISLAT',
'OrderDate': '1998-01-13T00:00:00.000Z',
'ShippedDate': '1998-01-23T00:00:00.000Z',
'Freight': 154.72,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10830,
'CustomerID': 'TRADH',
'OrderDate': '1998-01-13T00:00:00.000Z',
'ShippedDate': '1998-01-21T00:00:00.000Z',
'Freight': 81.83,
'ShipName': 'Tradiçao Hipermercados',
'ShipAddress': 'Av. Inês de Castro, 414',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10831,
'CustomerID': 'SANTG',
'OrderDate': '1998-01-14T00:00:00.000Z',
'ShippedDate': '1998-01-23T00:00:00.000Z',
'Freight': 72.19,
'ShipName': 'Santé Gourmet',
'ShipAddress': 'Erling Skakkes gate 78',
'ShipCity': 'Stavern',
'ShipRegion': null,
'ShipCountry': 'Norway'
},
{
'OrderID': 10832,
'CustomerID': 'LAMAI',
'OrderDate': '1998-01-14T00:00:00.000Z',
'ShippedDate': '1998-01-19T00:00:00.000Z',
'Freight': 43.26,
'ShipName': 'La maison d\'Asie',

Copyright © 2001 -2024 Syncfusion Inc. 628


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '1 rue Alsace-Lorraine',


'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10833,
'CustomerID': 'OTTIK',
'OrderDate': '1998-01-15T00:00:00.000Z',
'ShippedDate': '1998-01-23T00:00:00.000Z',
'Freight': 71.49,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10834,
'CustomerID': 'TRADH',
'OrderDate': '1998-01-15T00:00:00.000Z',
'ShippedDate': '1998-01-19T00:00:00.000Z',
'Freight': 29.78,
'ShipName': 'Tradiçao Hipermercados',
'ShipAddress': 'Av. Inês de Castro, 414',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10835,
'CustomerID': 'ALFKI',
'OrderDate': '1998-01-15T00:00:00.000Z',
'ShippedDate': '1998-01-21T00:00:00.000Z',
'Freight': 69.53,
'ShipName': 'Alfred\' Futterkiste',
'ShipAddress': 'Obere Str. 57',
'ShipCity': 'Berlin',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10836,
'CustomerID': 'ERNSH',
'OrderDate': '1998-01-16T00:00:00.000Z',
'ShippedDate': '1998-01-21T00:00:00.000Z',
'Freight': 411.88,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10837,
'CustomerID': 'BERGS',
'OrderDate': '1998-01-16T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 629


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-01-23T00:00:00.000Z',
'Freight': 13.32,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10838,
'CustomerID': 'LINOD',
'OrderDate': '1998-01-19T00:00:00.000Z',
'ShippedDate': '1998-01-23T00:00:00.000Z',
'Freight': 59.28,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10839,
'CustomerID': 'TRADH',
'OrderDate': '1998-01-19T00:00:00.000Z',
'ShippedDate': '1998-01-22T00:00:00.000Z',
'Freight': 35.43,
'ShipName': 'Tradiçao Hipermercados',
'ShipAddress': 'Av. Inês de Castro, 414',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10840,
'CustomerID': 'LINOD',
'OrderDate': '1998-01-19T00:00:00.000Z',
'ShippedDate': '1998-02-16T00:00:00.000Z',
'Freight': 2.71,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10841,
'CustomerID': 'SUPRD',
'OrderDate': '1998-01-20T00:00:00.000Z',
'ShippedDate': '1998-01-29T00:00:00.000Z',
'Freight': 424.3,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 630


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10842,
'CustomerID': 'TORTU',
'OrderDate': '1998-01-20T00:00:00.000Z',
'ShippedDate': '1998-01-29T00:00:00.000Z',
'Freight': 54.42,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10843,
'CustomerID': 'VICTE',
'OrderDate': '1998-01-21T00:00:00.000Z',
'ShippedDate': '1998-01-26T00:00:00.000Z',
'Freight': 9.26,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10844,
'CustomerID': 'PICCO',
'OrderDate': '1998-01-21T00:00:00.000Z',
'ShippedDate': '1998-01-26T00:00:00.000Z',
'Freight': 25.22,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10845,
'CustomerID': 'QUICK',
'OrderDate': '1998-01-21T00:00:00.000Z',
'ShippedDate': '1998-01-30T00:00:00.000Z',
'Freight': 212.98,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10846,
'CustomerID': 'SUPRD',
'OrderDate': '1998-01-22T00:00:00.000Z',
'ShippedDate': '1998-01-23T00:00:00.000Z',
'Freight': 56.46,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 631


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Belgium'
},
{
'OrderID': 10847,
'CustomerID': 'SAVEA',
'OrderDate': '1998-01-22T00:00:00.000Z',
'ShippedDate': '1998-02-10T00:00:00.000Z',
'Freight': 487.57,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10848,
'CustomerID': 'CONSH',
'OrderDate': '1998-01-23T00:00:00.000Z',
'ShippedDate': '1998-01-29T00:00:00.000Z',
'Freight': 38.24,
'ShipName': 'Consolidated Holdings',
'ShipAddress': 'Berkeley Gardens 12 Brewery',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10849,
'CustomerID': 'KOENE',
'OrderDate': '1998-01-23T00:00:00.000Z',
'ShippedDate': '1998-01-30T00:00:00.000Z',
'Freight': 0.56,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10850,
'CustomerID': 'VICTE',
'OrderDate': '1998-01-23T00:00:00.000Z',
'ShippedDate': '1998-01-30T00:00:00.000Z',
'Freight': 49.19,
'ShipName': 'Victuailles en stock',
'ShipAddress': '2, rue du Commerce',
'ShipCity': 'Lyon',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10851,
'CustomerID': 'RICAR',
'OrderDate': '1998-01-26T00:00:00.000Z',
'ShippedDate': '1998-02-02T00:00:00.000Z',
'Freight': 160.55,
'ShipName': 'Ricardo Adocicados',

Copyright © 2001 -2024 Syncfusion Inc. 632


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Av. Copacabana, 267',


'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10852,
'CustomerID': 'RATTC',
'OrderDate': '1998-01-26T00:00:00.000Z',
'ShippedDate': '1998-01-30T00:00:00.000Z',
'Freight': 174.05,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10853,
'CustomerID': 'BLAUS',
'OrderDate': '1998-01-27T00:00:00.000Z',
'ShippedDate': '1998-02-03T00:00:00.000Z',
'Freight': 53.83,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10854,
'CustomerID': 'ERNSH',
'OrderDate': '1998-01-27T00:00:00.000Z',
'ShippedDate': '1998-02-05T00:00:00.000Z',
'Freight': 100.22,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10855,
'CustomerID': 'OLDWO',
'OrderDate': '1998-01-27T00:00:00.000Z',
'ShippedDate': '1998-02-04T00:00:00.000Z',
'Freight': 170.97,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10856,
'CustomerID': 'ANTON',
'OrderDate': '1998-01-28T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 633


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-02-10T00:00:00.000Z',
'Freight': 58.43,
'ShipName': 'Antonio Moreno Taquería',
'ShipAddress': 'Mataderos 2312',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10857,
'CustomerID': 'BERGS',
'OrderDate': '1998-01-28T00:00:00.000Z',
'ShippedDate': '1998-02-06T00:00:00.000Z',
'Freight': 188.85,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10858,
'CustomerID': 'LACOR',
'OrderDate': '1998-01-29T00:00:00.000Z',
'ShippedDate': '1998-02-03T00:00:00.000Z',
'Freight': 52.51,
'ShipName': 'La corne d\'abondance',
'ShipAddress': '67, avenue de l\'Europe',
'ShipCity': 'Versailles',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10859,
'CustomerID': 'FRANK',
'OrderDate': '1998-01-29T00:00:00.000Z',
'ShippedDate': '1998-02-02T00:00:00.000Z',
'Freight': 76.1,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10860,
'CustomerID': 'FRANR',
'OrderDate': '1998-01-29T00:00:00.000Z',
'ShippedDate': '1998-02-04T00:00:00.000Z',
'Freight': 19.26,
'ShipName': 'France restauration',
'ShipAddress': '54, rue Royale',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 634


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10861,
'CustomerID': 'WHITC',
'OrderDate': '1998-01-30T00:00:00.000Z',
'ShippedDate': '1998-02-17T00:00:00.000Z',
'Freight': 14.93,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10862,
'CustomerID': 'LEHMS',
'OrderDate': '1998-01-30T00:00:00.000Z',
'ShippedDate': '1998-02-02T00:00:00.000Z',
'Freight': 53.23,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10863,
'CustomerID': 'HILAA',
'OrderDate': '1998-02-02T00:00:00.000Z',
'ShippedDate': '1998-02-17T00:00:00.000Z',
'Freight': 30.26,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10864,
'CustomerID': 'AROUT',
'OrderDate': '1998-02-02T00:00:00.000Z',
'ShippedDate': '1998-02-09T00:00:00.000Z',
'Freight': 3.04,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10865,
'CustomerID': 'QUICK',
'OrderDate': '1998-02-02T00:00:00.000Z',
'ShippedDate': '1998-02-12T00:00:00.000Z',
'Freight': 348.14,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 635


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Germany'
},
{
'OrderID': 10866,
'CustomerID': 'BERGS',
'OrderDate': '1998-02-03T00:00:00.000Z',
'ShippedDate': '1998-02-12T00:00:00.000Z',
'Freight': 109.11,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10867,
'CustomerID': 'LONEP',
'OrderDate': '1998-02-03T00:00:00.000Z',
'ShippedDate': '1998-02-11T00:00:00.000Z',
'Freight': 1.93,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10868,
'CustomerID': 'QUEEN',
'OrderDate': '1998-02-04T00:00:00.000Z',
'ShippedDate': '1998-02-23T00:00:00.000Z',
'Freight': 191.27,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10869,
'CustomerID': 'SEVES',
'OrderDate': '1998-02-04T00:00:00.000Z',
'ShippedDate': '1998-02-09T00:00:00.000Z',
'Freight': 143.28,
'ShipName': 'Seven Seas Imports',
'ShipAddress': '90 Wadhurst Rd.',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10870,
'CustomerID': 'WOLZA',
'OrderDate': '1998-02-04T00:00:00.000Z',
'ShippedDate': '1998-02-13T00:00:00.000Z',
'Freight': 12.04,
'ShipName': 'Wolski Zajazd',

Copyright © 2001 -2024 Syncfusion Inc. 636


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'ul. Filtrowa 68',


'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 10871,
'CustomerID': 'BONAP',
'OrderDate': '1998-02-05T00:00:00.000Z',
'ShippedDate': '1998-02-10T00:00:00.000Z',
'Freight': 112.27,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10872,
'CustomerID': 'GODOS',
'OrderDate': '1998-02-05T00:00:00.000Z',
'ShippedDate': '1998-02-09T00:00:00.000Z',
'Freight': 175.32,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10873,
'CustomerID': 'WILMK',
'OrderDate': '1998-02-06T00:00:00.000Z',
'ShippedDate': '1998-02-09T00:00:00.000Z',
'Freight': 0.82,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10874,
'CustomerID': 'GODOS',
'OrderDate': '1998-02-06T00:00:00.000Z',
'ShippedDate': '1998-02-11T00:00:00.000Z',
'Freight': 19.58,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10875,
'CustomerID': 'BERGS',
'OrderDate': '1998-02-06T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 637


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-03-03T00:00:00.000Z',
'Freight': 32.37,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10876,
'CustomerID': 'BONAP',
'OrderDate': '1998-02-09T00:00:00.000Z',
'ShippedDate': '1998-02-12T00:00:00.000Z',
'Freight': 60.42,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10877,
'CustomerID': 'RICAR',
'OrderDate': '1998-02-09T00:00:00.000Z',
'ShippedDate': '1998-02-19T00:00:00.000Z',
'Freight': 38.06,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10878,
'CustomerID': 'QUICK',
'OrderDate': '1998-02-10T00:00:00.000Z',
'ShippedDate': '1998-02-12T00:00:00.000Z',
'Freight': 46.69,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10879,
'CustomerID': 'WILMK',
'OrderDate': '1998-02-10T00:00:00.000Z',
'ShippedDate': '1998-02-12T00:00:00.000Z',
'Freight': 8.5,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 638


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10880,
'CustomerID': 'FOLKO',
'OrderDate': '1998-02-10T00:00:00.000Z',
'ShippedDate': '1998-02-18T00:00:00.000Z',
'Freight': 88.01,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10881,
'CustomerID': 'CACTU',
'OrderDate': '1998-02-11T00:00:00.000Z',
'ShippedDate': '1998-02-18T00:00:00.000Z',
'Freight': 2.84,
'ShipName': 'Cactus Comidas para llevar',
'ShipAddress': 'Cerrito 333',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10882,
'CustomerID': 'SAVEA',
'OrderDate': '1998-02-11T00:00:00.000Z',
'ShippedDate': '1998-02-20T00:00:00.000Z',
'Freight': 23.1,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10883,
'CustomerID': 'LONEP',
'OrderDate': '1998-02-12T00:00:00.000Z',
'ShippedDate': '1998-02-20T00:00:00.000Z',
'Freight': 0.53,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10884,
'CustomerID': 'LETSS',
'OrderDate': '1998-02-12T00:00:00.000Z',
'ShippedDate': '1998-02-13T00:00:00.000Z',
'Freight': 90.97,
'ShipName': 'Let\' Stop N Shop',
'ShipAddress': '87 Polk St. Suite 5',
'ShipCity': 'San Francisco',
'ShipRegion': 'CA',

Copyright © 2001 -2024 Syncfusion Inc. 639


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'USA'
},
{
'OrderID': 10885,
'CustomerID': 'SUPRD',
'OrderDate': '1998-02-12T00:00:00.000Z',
'ShippedDate': '1998-02-18T00:00:00.000Z',
'Freight': 5.64,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10886,
'CustomerID': 'HANAR',
'OrderDate': '1998-02-13T00:00:00.000Z',
'ShippedDate': '1998-03-02T00:00:00.000Z',
'Freight': 4.99,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10887,
'CustomerID': 'GALED',
'OrderDate': '1998-02-13T00:00:00.000Z',
'ShippedDate': '1998-02-16T00:00:00.000Z',
'Freight': 1.25,
'ShipName': 'Galería del gastronómo',
'ShipAddress': 'Rambla de Cataluña, 23',
'ShipCity': 'Barcelona',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10888,
'CustomerID': 'GODOS',
'OrderDate': '1998-02-16T00:00:00.000Z',
'ShippedDate': '1998-02-23T00:00:00.000Z',
'Freight': 51.87,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10889,
'CustomerID': 'RATTC',
'OrderDate': '1998-02-16T00:00:00.000Z',
'ShippedDate': '1998-02-23T00:00:00.000Z',
'Freight': 280.61,
'ShipName': 'Rattlesnake Canyon Grocery',

Copyright © 2001 -2024 Syncfusion Inc. 640


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '2817 Milton Dr.',


'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10890,
'CustomerID': 'DUMON',
'OrderDate': '1998-02-16T00:00:00.000Z',
'ShippedDate': '1998-02-18T00:00:00.000Z',
'Freight': 32.76,
'ShipName': 'Du monde entier',
'ShipAddress': '67, rue des Cinquante Otages',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10891,
'CustomerID': 'LEHMS',
'OrderDate': '1998-02-17T00:00:00.000Z',
'ShippedDate': '1998-02-19T00:00:00.000Z',
'Freight': 20.37,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10892,
'CustomerID': 'MAISD',
'OrderDate': '1998-02-17T00:00:00.000Z',
'ShippedDate': '1998-02-19T00:00:00.000Z',
'Freight': 120.27,
'ShipName': 'Maison Dewey',
'ShipAddress': 'Rue Joseph-Bens 532',
'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10893,
'CustomerID': 'KOENE',
'OrderDate': '1998-02-18T00:00:00.000Z',
'ShippedDate': '1998-02-20T00:00:00.000Z',
'Freight': 77.78,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10894,
'CustomerID': 'SAVEA',
'OrderDate': '1998-02-18T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 641


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-02-20T00:00:00.000Z',
'Freight': 116.13,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10895,
'CustomerID': 'ERNSH',
'OrderDate': '1998-02-18T00:00:00.000Z',
'ShippedDate': '1998-02-23T00:00:00.000Z',
'Freight': 162.75,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10896,
'CustomerID': 'MAISD',
'OrderDate': '1998-02-19T00:00:00.000Z',
'ShippedDate': '1998-02-27T00:00:00.000Z',
'Freight': 32.45,
'ShipName': 'Maison Dewey',
'ShipAddress': 'Rue Joseph-Bens 532',
'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10897,
'CustomerID': 'HUNGO',
'OrderDate': '1998-02-19T00:00:00.000Z',
'ShippedDate': '1998-02-25T00:00:00.000Z',
'Freight': 603.54,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10898,
'CustomerID': 'OCEAN',
'OrderDate': '1998-02-20T00:00:00.000Z',
'ShippedDate': '1998-03-06T00:00:00.000Z',
'Freight': 1.27,
'ShipName': 'Océano Atlántico Ltda.',
'ShipAddress': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 642


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10899,
'CustomerID': 'LILAS',
'OrderDate': '1998-02-20T00:00:00.000Z',
'ShippedDate': '1998-02-26T00:00:00.000Z',
'Freight': 1.21,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10900,
'CustomerID': 'WELLI',
'OrderDate': '1998-02-20T00:00:00.000Z',
'ShippedDate': '1998-03-04T00:00:00.000Z',
'Freight': 1.66,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10901,
'CustomerID': 'HILAA',
'OrderDate': '1998-02-23T00:00:00.000Z',
'ShippedDate': '1998-02-26T00:00:00.000Z',
'Freight': 62.09,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10902,
'CustomerID': 'FOLKO',
'OrderDate': '1998-02-23T00:00:00.000Z',
'ShippedDate': '1998-03-03T00:00:00.000Z',
'Freight': 44.15,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10903,
'CustomerID': 'HANAR',
'OrderDate': '1998-02-24T00:00:00.000Z',
'ShippedDate': '1998-03-04T00:00:00.000Z',
'Freight': 36.71,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',

Copyright © 2001 -2024 Syncfusion Inc. 643


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Brazil'
},
{
'OrderID': 10904,
'CustomerID': 'WHITC',
'OrderDate': '1998-02-24T00:00:00.000Z',
'ShippedDate': '1998-02-27T00:00:00.000Z',
'Freight': 162.95,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 10905,
'CustomerID': 'WELLI',
'OrderDate': '1998-02-24T00:00:00.000Z',
'ShippedDate': '1998-03-06T00:00:00.000Z',
'Freight': 13.72,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10906,
'CustomerID': 'WOLZA',
'OrderDate': '1998-02-25T00:00:00.000Z',
'ShippedDate': '1998-03-03T00:00:00.000Z',
'Freight': 26.29,
'ShipName': 'Wolski Zajazd',
'ShipAddress': 'ul. Filtrowa 68',
'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 10907,
'CustomerID': 'SPECD',
'OrderDate': '1998-02-25T00:00:00.000Z',
'ShippedDate': '1998-02-27T00:00:00.000Z',
'Freight': 9.19,
'ShipName': 'Spécialités du monde',
'ShipAddress': '25, rue Lauriston',
'ShipCity': 'Paris',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10908,
'CustomerID': 'REGGC',
'OrderDate': '1998-02-26T00:00:00.000Z',
'ShippedDate': '1998-03-06T00:00:00.000Z',
'Freight': 32.96,
'ShipName': 'Reggiani Caseifici',

Copyright © 2001 -2024 Syncfusion Inc. 644


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Strada Provinciale 124',


'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10909,
'CustomerID': 'SANTG',
'OrderDate': '1998-02-26T00:00:00.000Z',
'ShippedDate': '1998-03-10T00:00:00.000Z',
'Freight': 53.05,
'ShipName': 'Santé Gourmet',
'ShipAddress': 'Erling Skakkes gate 78',
'ShipCity': 'Stavern',
'ShipRegion': null,
'ShipCountry': 'Norway'
},
{
'OrderID': 10910,
'CustomerID': 'WILMK',
'OrderDate': '1998-02-26T00:00:00.000Z',
'ShippedDate': '1998-03-04T00:00:00.000Z',
'Freight': 38.11,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 10911,
'CustomerID': 'GODOS',
'OrderDate': '1998-02-26T00:00:00.000Z',
'ShippedDate': '1998-03-05T00:00:00.000Z',
'Freight': 38.19,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10912,
'CustomerID': 'HUNGO',
'OrderDate': '1998-02-26T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 580.91,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10913,
'CustomerID': 'QUEEN',
'OrderDate': '1998-02-26T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 645


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-03-04T00:00:00.000Z',
'Freight': 33.05,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10914,
'CustomerID': 'QUEEN',
'OrderDate': '1998-02-27T00:00:00.000Z',
'ShippedDate': '1998-03-02T00:00:00.000Z',
'Freight': 21.19,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10915,
'CustomerID': 'TORTU',
'OrderDate': '1998-02-27T00:00:00.000Z',
'ShippedDate': '1998-03-02T00:00:00.000Z',
'Freight': 3.51,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10916,
'CustomerID': 'RANCH',
'OrderDate': '1998-02-27T00:00:00.000Z',
'ShippedDate': '1998-03-09T00:00:00.000Z',
'Freight': 63.77,
'ShipName': 'Rancho grande',
'ShipAddress': 'Av. del Libertador 900',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10917,
'CustomerID': 'ROMEY',
'OrderDate': '1998-03-02T00:00:00.000Z',
'ShippedDate': '1998-03-11T00:00:00.000Z',
'Freight': 8.29,
'ShipName': 'Romero y tomillo',
'ShipAddress': 'Gran Vía, 1',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 646


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10918,
'CustomerID': 'BOTTM',
'OrderDate': '1998-03-02T00:00:00.000Z',
'ShippedDate': '1998-03-11T00:00:00.000Z',
'Freight': 48.83,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10919,
'CustomerID': 'LINOD',
'OrderDate': '1998-03-02T00:00:00.000Z',
'ShippedDate': '1998-03-04T00:00:00.000Z',
'Freight': 19.8,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10920,
'CustomerID': 'AROUT',
'OrderDate': '1998-03-03T00:00:00.000Z',
'ShippedDate': '1998-03-09T00:00:00.000Z',
'Freight': 29.61,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10921,
'CustomerID': 'VAFFE',
'OrderDate': '1998-03-03T00:00:00.000Z',
'ShippedDate': '1998-03-09T00:00:00.000Z',
'Freight': 176.48,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10922,
'CustomerID': 'HANAR',
'OrderDate': '1998-03-03T00:00:00.000Z',
'ShippedDate': '1998-03-05T00:00:00.000Z',
'Freight': 62.74,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',

Copyright © 2001 -2024 Syncfusion Inc. 647


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Brazil'
},
{
'OrderID': 10923,
'CustomerID': 'LAMAI',
'OrderDate': '1998-03-03T00:00:00.000Z',
'ShippedDate': '1998-03-13T00:00:00.000Z',
'Freight': 68.26,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10924,
'CustomerID': 'BERGS',
'OrderDate': '1998-03-04T00:00:00.000Z',
'ShippedDate': '1998-04-08T00:00:00.000Z',
'Freight': 151.52,
'ShipName': 'Berglunds snabbköp',
'ShipAddress': 'Berguvsvägen 8',
'ShipCity': 'Luleå',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10925,
'CustomerID': 'HANAR',
'OrderDate': '1998-03-04T00:00:00.000Z',
'ShippedDate': '1998-03-13T00:00:00.000Z',
'Freight': 2.27,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10926,
'CustomerID': 'ANATR',
'OrderDate': '1998-03-04T00:00:00.000Z',
'ShippedDate': '1998-03-11T00:00:00.000Z',
'Freight': 39.92,
'ShipName': 'Ana Trujillo Emparedados y helados',
'ShipAddress': 'Avda. de la Constitución 2222',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10927,
'CustomerID': 'LACOR',
'OrderDate': '1998-03-05T00:00:00.000Z',
'ShippedDate': '1998-04-08T00:00:00.000Z',
'Freight': 19.79,
'ShipName': 'La corne d\'abondance',

Copyright © 2001 -2024 Syncfusion Inc. 648


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '67, avenue de l\'Europe',


'ShipCity': 'Versailles',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10928,
'CustomerID': 'GALED',
'OrderDate': '1998-03-05T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 1.36,
'ShipName': 'Galería del gastronómo',
'ShipAddress': 'Rambla de Cataluña, 23',
'ShipCity': 'Barcelona',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10929,
'CustomerID': 'FRANK',
'OrderDate': '1998-03-05T00:00:00.000Z',
'ShippedDate': '1998-03-12T00:00:00.000Z',
'Freight': 33.93,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10930,
'CustomerID': 'SUPRD',
'OrderDate': '1998-03-06T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 15.55,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10931,
'CustomerID': 'RICSU',
'OrderDate': '1998-03-06T00:00:00.000Z',
'ShippedDate': '1998-03-19T00:00:00.000Z',
'Freight': 13.6,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10932,
'CustomerID': 'BONAP',
'OrderDate': '1998-03-06T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 649


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-03-24T00:00:00.000Z',
'Freight': 134.64,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10933,
'CustomerID': 'ISLAT',
'OrderDate': '1998-03-06T00:00:00.000Z',
'ShippedDate': '1998-03-16T00:00:00.000Z',
'Freight': 54.15,
'ShipName': 'Island Trading',
'ShipAddress': 'Garden House Crowther Way',
'ShipCity': 'Cowes',
'ShipRegion': 'Isle of Wight',
'ShipCountry': 'UK'
},
{
'OrderID': 10934,
'CustomerID': 'LEHMS',
'OrderDate': '1998-03-09T00:00:00.000Z',
'ShippedDate': '1998-03-12T00:00:00.000Z',
'Freight': 32.01,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10935,
'CustomerID': 'WELLI',
'OrderDate': '1998-03-09T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 47.59,
'ShipName': 'Wellington Importadora',
'ShipAddress': 'Rua do Mercado, 12',
'ShipCity': 'Resende',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10936,
'CustomerID': 'GREAL',
'OrderDate': '1998-03-09T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 33.68,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 650


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10937,
'CustomerID': 'CACTU',
'OrderDate': '1998-03-10T00:00:00.000Z',
'ShippedDate': '1998-03-13T00:00:00.000Z',
'Freight': 31.51,
'ShipName': 'Cactus Comidas para llevar',
'ShipAddress': 'Cerrito 333',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10938,
'CustomerID': 'QUICK',
'OrderDate': '1998-03-10T00:00:00.000Z',
'ShippedDate': '1998-03-16T00:00:00.000Z',
'Freight': 31.89,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10939,
'CustomerID': 'MAGAA',
'OrderDate': '1998-03-10T00:00:00.000Z',
'ShippedDate': '1998-03-13T00:00:00.000Z',
'Freight': 76.33,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10940,
'CustomerID': 'BONAP',
'OrderDate': '1998-03-11T00:00:00.000Z',
'ShippedDate': '1998-03-23T00:00:00.000Z',
'Freight': 19.77,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10941,
'CustomerID': 'SAVEA',
'OrderDate': '1998-03-11T00:00:00.000Z',
'ShippedDate': '1998-03-20T00:00:00.000Z',
'Freight': 400.81,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',

Copyright © 2001 -2024 Syncfusion Inc. 651


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'USA'
},
{
'OrderID': 10942,
'CustomerID': 'REGGC',
'OrderDate': '1998-03-11T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 17.95,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10943,
'CustomerID': 'BSBEV',
'OrderDate': '1998-03-11T00:00:00.000Z',
'ShippedDate': '1998-03-19T00:00:00.000Z',
'Freight': 2.17,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10944,
'CustomerID': 'BOTTM',
'OrderDate': '1998-03-12T00:00:00.000Z',
'ShippedDate': '1998-03-13T00:00:00.000Z',
'Freight': 52.92,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10945,
'CustomerID': 'MORGK',
'OrderDate': '1998-03-12T00:00:00.000Z',
'ShippedDate': '1998-03-18T00:00:00.000Z',
'Freight': 10.22,
'ShipName': 'Morgenstern Gesundkost',
'ShipAddress': 'Heerstr. 22',
'ShipCity': 'Leipzig',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10946,
'CustomerID': 'VAFFE',
'OrderDate': '1998-03-12T00:00:00.000Z',
'ShippedDate': '1998-03-19T00:00:00.000Z',
'Freight': 27.2,
'ShipName': 'Vaffeljernet',

Copyright © 2001 -2024 Syncfusion Inc. 652


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Smagsloget 45',


'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10947,
'CustomerID': 'BSBEV',
'OrderDate': '1998-03-13T00:00:00.000Z',
'ShippedDate': '1998-03-16T00:00:00.000Z',
'Freight': 3.26,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10948,
'CustomerID': 'GODOS',
'OrderDate': '1998-03-13T00:00:00.000Z',
'ShippedDate': '1998-03-19T00:00:00.000Z',
'Freight': 23.39,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10949,
'CustomerID': 'BOTTM',
'OrderDate': '1998-03-13T00:00:00.000Z',
'ShippedDate': '1998-03-17T00:00:00.000Z',
'Freight': 74.44,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10950,
'CustomerID': 'MAGAA',
'OrderDate': '1998-03-16T00:00:00.000Z',
'ShippedDate': '1998-03-23T00:00:00.000Z',
'Freight': 2.5,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 10951,
'CustomerID': 'RICSU',
'OrderDate': '1998-03-16T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 653


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-04-07T00:00:00.000Z',
'Freight': 30.85,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10952,
'CustomerID': 'ALFKI',
'OrderDate': '1998-03-16T00:00:00.000Z',
'ShippedDate': '1998-03-24T00:00:00.000Z',
'Freight': 40.42,
'ShipName': 'Alfred\' Futterkiste',
'ShipAddress': 'Obere Str. 57',
'ShipCity': 'Berlin',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10953,
'CustomerID': 'AROUT',
'OrderDate': '1998-03-16T00:00:00.000Z',
'ShippedDate': '1998-03-25T00:00:00.000Z',
'Freight': 23.72,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 10954,
'CustomerID': 'LINOD',
'OrderDate': '1998-03-17T00:00:00.000Z',
'ShippedDate': '1998-03-20T00:00:00.000Z',
'Freight': 27.91,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10955,
'CustomerID': 'FOLKO',
'OrderDate': '1998-03-17T00:00:00.000Z',
'ShippedDate': '1998-03-20T00:00:00.000Z',
'Freight': 3.26,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 654


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10956,
'CustomerID': 'BLAUS',
'OrderDate': '1998-03-17T00:00:00.000Z',
'ShippedDate': '1998-03-20T00:00:00.000Z',
'Freight': 44.65,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10957,
'CustomerID': 'HILAA',
'OrderDate': '1998-03-18T00:00:00.000Z',
'ShippedDate': '1998-03-27T00:00:00.000Z',
'Freight': 105.36,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10958,
'CustomerID': 'OCEAN',
'OrderDate': '1998-03-18T00:00:00.000Z',
'ShippedDate': '1998-03-27T00:00:00.000Z',
'Freight': 49.56,
'ShipName': 'Océano Atlántico Ltda.',
'ShipAddress': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10959,
'CustomerID': 'GOURL',
'OrderDate': '1998-03-18T00:00:00.000Z',
'ShippedDate': '1998-03-23T00:00:00.000Z',
'Freight': 4.98,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10960,
'CustomerID': 'HILAA',
'OrderDate': '1998-03-19T00:00:00.000Z',
'ShippedDate': '1998-04-08T00:00:00.000Z',
'Freight': 2.08,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',

Copyright © 2001 -2024 Syncfusion Inc. 655


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Venezuela'
},
{
'OrderID': 10961,
'CustomerID': 'QUEEN',
'OrderDate': '1998-03-19T00:00:00.000Z',
'ShippedDate': '1998-03-30T00:00:00.000Z',
'Freight': 104.47,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10962,
'CustomerID': 'QUICK',
'OrderDate': '1998-03-19T00:00:00.000Z',
'ShippedDate': '1998-03-23T00:00:00.000Z',
'Freight': 275.79,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10963,
'CustomerID': 'FURIB',
'OrderDate': '1998-03-19T00:00:00.000Z',
'ShippedDate': '1998-03-26T00:00:00.000Z',
'Freight': 2.7,
'ShipName': 'Furia Bacalhau e Frutos do Mar',
'ShipAddress': 'Jardim das rosas n. 32',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 10964,
'CustomerID': 'SPECD',
'OrderDate': '1998-03-20T00:00:00.000Z',
'ShippedDate': '1998-03-24T00:00:00.000Z',
'Freight': 87.38,
'ShipName': 'Spécialités du monde',
'ShipAddress': '25, rue Lauriston',
'ShipCity': 'Paris',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10965,
'CustomerID': 'OLDWO',
'OrderDate': '1998-03-20T00:00:00.000Z',
'ShippedDate': '1998-03-30T00:00:00.000Z',
'Freight': 144.38,
'ShipName': 'Old World Delicatessen',

Copyright © 2001 -2024 Syncfusion Inc. 656


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '2743 Bering St.',


'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 10966,
'CustomerID': 'CHOPS',
'OrderDate': '1998-03-20T00:00:00.000Z',
'ShippedDate': '1998-04-08T00:00:00.000Z',
'Freight': 27.19,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 10967,
'CustomerID': 'TOMSP',
'OrderDate': '1998-03-23T00:00:00.000Z',
'ShippedDate': '1998-04-02T00:00:00.000Z',
'Freight': 62.22,
'ShipName': 'Toms Spezialitäten',
'ShipAddress': 'Luisenstr. 48',
'ShipCity': 'Münster',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10968,
'CustomerID': 'ERNSH',
'OrderDate': '1998-03-23T00:00:00.000Z',
'ShippedDate': '1998-04-01T00:00:00.000Z',
'Freight': 74.6,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10969,
'CustomerID': 'COMMI',
'OrderDate': '1998-03-23T00:00:00.000Z',
'ShippedDate': '1998-03-30T00:00:00.000Z',
'Freight': 0.21,
'ShipName': 'Comércio Mineiro',
'ShipAddress': 'Av. dos Lusíadas, 23',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10970,
'CustomerID': 'BOLID',
'OrderDate': '1998-03-24T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 657


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-04-24T00:00:00.000Z',
'Freight': 16.16,
'ShipName': 'Bólido Comidas preparadas',
'ShipAddress': 'C/ Araquil, 67',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 10971,
'CustomerID': 'FRANR',
'OrderDate': '1998-03-24T00:00:00.000Z',
'ShippedDate': '1998-04-02T00:00:00.000Z',
'Freight': 121.82,
'ShipName': 'France restauration',
'ShipAddress': '54, rue Royale',
'ShipCity': 'Nantes',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10972,
'CustomerID': 'LACOR',
'OrderDate': '1998-03-24T00:00:00.000Z',
'ShippedDate': '1998-03-26T00:00:00.000Z',
'Freight': 0.02,
'ShipName': 'La corne d\'abondance',
'ShipAddress': '67, avenue de l\'Europe',
'ShipCity': 'Versailles',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10973,
'CustomerID': 'LACOR',
'OrderDate': '1998-03-24T00:00:00.000Z',
'ShippedDate': '1998-03-27T00:00:00.000Z',
'Freight': 15.17,
'ShipName': 'La corne d\'abondance',
'ShipAddress': '67, avenue de l\'Europe',
'ShipCity': 'Versailles',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 10974,
'CustomerID': 'SPLIR',
'OrderDate': '1998-03-25T00:00:00.000Z',
'ShippedDate': '1998-04-03T00:00:00.000Z',
'Freight': 12.96,
'ShipName': 'Split Rail Beer & Ale',
'ShipAddress': 'P.O. Box 555',
'ShipCity': 'Lander',
'ShipRegion': 'WY',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 658


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10975,
'CustomerID': 'BOTTM',
'OrderDate': '1998-03-25T00:00:00.000Z',
'ShippedDate': '1998-03-27T00:00:00.000Z',
'Freight': 32.27,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10976,
'CustomerID': 'HILAA',
'OrderDate': '1998-03-25T00:00:00.000Z',
'ShippedDate': '1998-04-03T00:00:00.000Z',
'Freight': 37.97,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10977,
'CustomerID': 'FOLKO',
'OrderDate': '1998-03-26T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 208.5,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10978,
'CustomerID': 'MAISD',
'OrderDate': '1998-03-26T00:00:00.000Z',
'ShippedDate': '1998-04-23T00:00:00.000Z',
'Freight': 32.82,
'ShipName': 'Maison Dewey',
'ShipAddress': 'Rue Joseph-Bens 532',
'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 10979,
'CustomerID': 'ERNSH',
'OrderDate': '1998-03-26T00:00:00.000Z',
'ShippedDate': '1998-03-31T00:00:00.000Z',
'Freight': 353.07,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 659


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Austria'
},
{
'OrderID': 10980,
'CustomerID': 'FOLKO',
'OrderDate': '1998-03-27T00:00:00.000Z',
'ShippedDate': '1998-04-17T00:00:00.000Z',
'Freight': 1.26,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 10981,
'CustomerID': 'HANAR',
'OrderDate': '1998-03-27T00:00:00.000Z',
'ShippedDate': '1998-04-02T00:00:00.000Z',
'Freight': 193.37,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10982,
'CustomerID': 'BOTTM',
'OrderDate': '1998-03-27T00:00:00.000Z',
'ShippedDate': '1998-04-08T00:00:00.000Z',
'Freight': 14.01,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 10983,
'CustomerID': 'SAVEA',
'OrderDate': '1998-03-27T00:00:00.000Z',
'ShippedDate': '1998-04-06T00:00:00.000Z',
'Freight': 657.54,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10984,
'CustomerID': 'SAVEA',
'OrderDate': '1998-03-30T00:00:00.000Z',
'ShippedDate': '1998-04-03T00:00:00.000Z',
'Freight': 211.22,
'ShipName': 'Save-a-lot Markets',

Copyright © 2001 -2024 Syncfusion Inc. 660


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '187 Suffolk Ln.',


'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 10985,
'CustomerID': 'HUNGO',
'OrderDate': '1998-03-30T00:00:00.000Z',
'ShippedDate': '1998-04-02T00:00:00.000Z',
'Freight': 91.51,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 10986,
'CustomerID': 'OCEAN',
'OrderDate': '1998-03-30T00:00:00.000Z',
'ShippedDate': '1998-04-21T00:00:00.000Z',
'Freight': 217.86,
'ShipName': 'Océano Atlántico Ltda.',
'ShipAddress': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 10987,
'CustomerID': 'EASTC',
'OrderDate': '1998-03-31T00:00:00.000Z',
'ShippedDate': '1998-04-06T00:00:00.000Z',
'Freight': 185.48,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 10988,
'CustomerID': 'RATTC',
'OrderDate': '1998-03-31T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 61.14,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 10989,
'CustomerID': 'QUEDE',
'OrderDate': '1998-03-31T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 661


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-04-02T00:00:00.000Z',
'Freight': 34.76,
'ShipName': 'Que Delícia',
'ShipAddress': 'Rua da Panificadora, 12',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 10990,
'CustomerID': 'ERNSH',
'OrderDate': '1998-04-01T00:00:00.000Z',
'ShippedDate': '1998-04-07T00:00:00.000Z',
'Freight': 117.61,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 10991,
'CustomerID': 'QUICK',
'OrderDate': '1998-04-01T00:00:00.000Z',
'ShippedDate': '1998-04-07T00:00:00.000Z',
'Freight': 38.51,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10992,
'CustomerID': 'THEBI',
'OrderDate': '1998-04-01T00:00:00.000Z',
'ShippedDate': '1998-04-03T00:00:00.000Z',
'Freight': 4.27,
'ShipName': 'The Big Cheese',
'ShipAddress': '89 Jefferson Way Suite 2',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 10993,
'CustomerID': 'FOLKO',
'OrderDate': '1998-04-01T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 8.81,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 662


TreeGrid Immutable mode in React Treegrid component

'OrderID': 10994,
'CustomerID': 'VAFFE',
'OrderDate': '1998-04-02T00:00:00.000Z',
'ShippedDate': '1998-04-09T00:00:00.000Z',
'Freight': 65.53,
'ShipName': 'Vaffeljernet',
'ShipAddress': 'Smagsloget 45',
'ShipCity': 'Århus',
'ShipRegion': null,
'ShipCountry': 'Denmark'
},
{
'OrderID': 10995,
'CustomerID': 'PERIC',
'OrderDate': '1998-04-02T00:00:00.000Z',
'ShippedDate': '1998-04-06T00:00:00.000Z',
'Freight': 46,
'ShipName': 'Pericles Comidas clásicas',
'ShipAddress': 'Calle Dr. Jorge Cash 321',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 10996,
'CustomerID': 'QUICK',
'OrderDate': '1998-04-02T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 1.12,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 10997,
'CustomerID': 'LILAS',
'OrderDate': '1998-04-03T00:00:00.000Z',
'ShippedDate': '1998-04-13T00:00:00.000Z',
'Freight': 73.91,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 10998,
'CustomerID': 'WOLZA',
'OrderDate': '1998-04-03T00:00:00.000Z',
'ShippedDate': '1998-04-17T00:00:00.000Z',
'Freight': 20.31,
'ShipName': 'Wolski Zajazd',
'ShipAddress': 'ul. Filtrowa 68',
'ShipCity': 'Warszawa',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 663


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Poland'
},
{
'OrderID': 10999,
'CustomerID': 'OTTIK',
'OrderDate': '1998-04-03T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 96.35,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11000,
'CustomerID': 'RATTC',
'OrderDate': '1998-04-06T00:00:00.000Z',
'ShippedDate': '1998-04-14T00:00:00.000Z',
'Freight': 55.12,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
},
{
'OrderID': 11001,
'CustomerID': 'FOLKO',
'OrderDate': '1998-04-06T00:00:00.000Z',
'ShippedDate': '1998-04-14T00:00:00.000Z',
'Freight': 197.3,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{
'OrderID': 11002,
'CustomerID': 'SAVEA',
'OrderDate': '1998-04-06T00:00:00.000Z',
'ShippedDate': '1998-04-16T00:00:00.000Z',
'Freight': 141.16,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 11003,
'CustomerID': 'THECR',
'OrderDate': '1998-04-06T00:00:00.000Z',
'ShippedDate': '1998-04-08T00:00:00.000Z',
'Freight': 14.91,
'ShipName': 'The Cracker Box',

Copyright © 2001 -2024 Syncfusion Inc. 664


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': '55 Grizzly Peak Rd.',


'ShipCity': 'Butte',
'ShipRegion': 'MT',
'ShipCountry': 'USA'
},
{
'OrderID': 11004,
'CustomerID': 'MAISD',
'OrderDate': '1998-04-07T00:00:00.000Z',
'ShippedDate': '1998-04-20T00:00:00.000Z',
'Freight': 44.84,
'ShipName': 'Maison Dewey',
'ShipAddress': 'Rue Joseph-Bens 532',
'ShipCity': 'Bruxelles',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 11005,
'CustomerID': 'WILMK',
'OrderDate': '1998-04-07T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 0.75,
'ShipName': 'Wilman Kala',
'ShipAddress': 'Keskuskatu 45',
'ShipCity': 'Helsinki',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 11006,
'CustomerID': 'GREAL',
'OrderDate': '1998-04-07T00:00:00.000Z',
'ShippedDate': '1998-04-15T00:00:00.000Z',
'Freight': 25.19,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 11007,
'CustomerID': 'PRINI',
'OrderDate': '1998-04-08T00:00:00.000Z',
'ShippedDate': '1998-04-13T00:00:00.000Z',
'Freight': 202.24,
'ShipName': 'Princesa Isabel Vinhos',
'ShipAddress': 'Estrada da saúde n. 58',
'ShipCity': 'Lisboa',
'ShipRegion': null,
'ShipCountry': 'Portugal'
},
{
'OrderID': 11008,
'CustomerID': 'ERNSH',
'OrderDate': '1998-04-08T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 665


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': null,
'Freight': 79.46,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 11009,
'CustomerID': 'GODOS',
'OrderDate': '1998-04-08T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 59.11,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 11010,
'CustomerID': 'REGGC',
'OrderDate': '1998-04-09T00:00:00.000Z',
'ShippedDate': '1998-04-21T00:00:00.000Z',
'Freight': 28.71,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 11011,
'CustomerID': 'ALFKI',
'OrderDate': '1998-04-09T00:00:00.000Z',
'ShippedDate': '1998-04-13T00:00:00.000Z',
'Freight': 1.21,
'ShipName': 'Alfred\' Futterkiste',
'ShipAddress': 'Obere Str. 57',
'ShipCity': 'Berlin',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11012,
'CustomerID': 'FRANK',
'OrderDate': '1998-04-09T00:00:00.000Z',
'ShippedDate': '1998-04-17T00:00:00.000Z',
'Freight': 242.95,
'ShipName': 'Frankenversand',
'ShipAddress': 'Berliner Platz 43',
'ShipCity': 'München',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 666


TreeGrid Immutable mode in React Treegrid component

'OrderID': 11013,
'CustomerID': 'ROMEY',
'OrderDate': '1998-04-09T00:00:00.000Z',
'ShippedDate': '1998-04-10T00:00:00.000Z',
'Freight': 32.99,
'ShipName': 'Romero y tomillo',
'ShipAddress': 'Gran Vía, 1',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 11014,
'CustomerID': 'LINOD',
'OrderDate': '1998-04-10T00:00:00.000Z',
'ShippedDate': '1998-04-15T00:00:00.000Z',
'Freight': 23.6,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 11015,
'CustomerID': 'SANTG',
'OrderDate': '1998-04-10T00:00:00.000Z',
'ShippedDate': '1998-04-20T00:00:00.000Z',
'Freight': 4.62,
'ShipName': 'Santé Gourmet',
'ShipAddress': 'Erling Skakkes gate 78',
'ShipCity': 'Stavern',
'ShipRegion': null,
'ShipCountry': 'Norway'
},
{
'OrderID': 11016,
'CustomerID': 'AROUT',
'OrderDate': '1998-04-10T00:00:00.000Z',
'ShippedDate': '1998-04-13T00:00:00.000Z',
'Freight': 33.8,
'ShipName': 'Around the Horn',
'ShipAddress': 'Brook Farm Stratford St. Mary',
'ShipCity': 'Colchester',
'ShipRegion': 'Essex',
'ShipCountry': 'UK'
},
{
'OrderID': 11017,
'CustomerID': 'ERNSH',
'OrderDate': '1998-04-13T00:00:00.000Z',
'ShippedDate': '1998-04-20T00:00:00.000Z',
'Freight': 754.26,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 667


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Austria'
},
{
'OrderID': 11018,
'CustomerID': 'LONEP',
'OrderDate': '1998-04-13T00:00:00.000Z',
'ShippedDate': '1998-04-16T00:00:00.000Z',
'Freight': 11.65,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 11019,
'CustomerID': 'RANCH',
'OrderDate': '1998-04-13T00:00:00.000Z',
'ShippedDate': null,
'Freight': 3.17,
'ShipName': 'Rancho grande',
'ShipAddress': 'Av. del Libertador 900',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 11020,
'CustomerID': 'OTTIK',
'OrderDate': '1998-04-14T00:00:00.000Z',
'ShippedDate': '1998-04-16T00:00:00.000Z',
'Freight': 43.3,
'ShipName': 'Ottilies Käseladen',
'ShipAddress': 'Mehrheimerstr. 369',
'ShipCity': 'Köln',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11021,
'CustomerID': 'QUICK',
'OrderDate': '1998-04-14T00:00:00.000Z',
'ShippedDate': '1998-04-21T00:00:00.000Z',
'Freight': 297.18,
'ShipName': 'QUICK-Stop',
'ShipAddress': 'Taucherstraße 10',
'ShipCity': 'Cunewalde',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11022,
'CustomerID': 'HANAR',
'OrderDate': '1998-04-14T00:00:00.000Z',
'ShippedDate': '1998-05-04T00:00:00.000Z',
'Freight': 6.27,
'ShipName': 'Hanari Carnes',

Copyright © 2001 -2024 Syncfusion Inc. 668


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Rua do Paço, 67',


'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 11023,
'CustomerID': 'BSBEV',
'OrderDate': '1998-04-14T00:00:00.000Z',
'ShippedDate': '1998-04-24T00:00:00.000Z',
'Freight': 123.83,
'ShipName': 'B\' Beverages',
'ShipAddress': 'Fauntleroy Circus',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 11024,
'CustomerID': 'EASTC',
'OrderDate': '1998-04-15T00:00:00.000Z',
'ShippedDate': '1998-04-20T00:00:00.000Z',
'Freight': 74.36,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 11025,
'CustomerID': 'WARTH',
'OrderDate': '1998-04-15T00:00:00.000Z',
'ShippedDate': '1998-04-24T00:00:00.000Z',
'Freight': 29.17,
'ShipName': 'Wartian Herkku',
'ShipAddress': 'Torikatu 38',
'ShipCity': 'Oulu',
'ShipRegion': null,
'ShipCountry': 'Finland'
},
{
'OrderID': 11026,
'CustomerID': 'FRANS',
'OrderDate': '1998-04-15T00:00:00.000Z',
'ShippedDate': '1998-04-28T00:00:00.000Z',
'Freight': 47.09,
'ShipName': 'Franchi S.p.A.',
'ShipAddress': 'Via Monte Bianco 34',
'ShipCity': 'Torino',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 11027,
'CustomerID': 'BOTTM',
'OrderDate': '1998-04-16T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 669


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-04-20T00:00:00.000Z',
'Freight': 52.52,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 11028,
'CustomerID': 'KOENE',
'OrderDate': '1998-04-16T00:00:00.000Z',
'ShippedDate': '1998-04-22T00:00:00.000Z',
'Freight': 29.59,
'ShipName': 'Königlich Essen',
'ShipAddress': 'Maubelstr. 90',
'ShipCity': 'Brandenburg',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11029,
'CustomerID': 'CHOPS',
'OrderDate': '1998-04-16T00:00:00.000Z',
'ShippedDate': '1998-04-27T00:00:00.000Z',
'Freight': 47.84,
'ShipName': 'Chop-suey Chinese',
'ShipAddress': 'Hauptstr. 31',
'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 11030,
'CustomerID': 'SAVEA',
'OrderDate': '1998-04-17T00:00:00.000Z',
'ShippedDate': '1998-04-27T00:00:00.000Z',
'Freight': 830.75,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 11031,
'CustomerID': 'SAVEA',
'OrderDate': '1998-04-17T00:00:00.000Z',
'ShippedDate': '1998-04-24T00:00:00.000Z',
'Freight': 227.22,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 670


TreeGrid Immutable mode in React Treegrid component

'OrderID': 11032,
'CustomerID': 'WHITC',
'OrderDate': '1998-04-17T00:00:00.000Z',
'ShippedDate': '1998-04-23T00:00:00.000Z',
'Freight': 606.19,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 11033,
'CustomerID': 'RICSU',
'OrderDate': '1998-04-17T00:00:00.000Z',
'ShippedDate': '1998-04-23T00:00:00.000Z',
'Freight': 84.74,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 11034,
'CustomerID': 'OLDWO',
'OrderDate': '1998-04-20T00:00:00.000Z',
'ShippedDate': '1998-04-27T00:00:00.000Z',
'Freight': 40.32,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA'
},
{
'OrderID': 11035,
'CustomerID': 'SUPRD',
'OrderDate': '1998-04-20T00:00:00.000Z',
'ShippedDate': '1998-04-24T00:00:00.000Z',
'Freight': 0.17,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 11036,
'CustomerID': 'DRACD',
'OrderDate': '1998-04-20T00:00:00.000Z',
'ShippedDate': '1998-04-22T00:00:00.000Z',
'Freight': 149.47,
'ShipName': 'Drachenblut Delikatessen',
'ShipAddress': 'Walserweg 21',
'ShipCity': 'Aachen',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 671


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Germany'
},
{
'OrderID': 11037,
'CustomerID': 'GODOS',
'OrderDate': '1998-04-21T00:00:00.000Z',
'ShippedDate': '1998-04-27T00:00:00.000Z',
'Freight': 3.2,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain'
},
{
'OrderID': 11038,
'CustomerID': 'SUPRD',
'OrderDate': '1998-04-21T00:00:00.000Z',
'ShippedDate': '1998-04-30T00:00:00.000Z',
'Freight': 29.59,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium'
},
{
'OrderID': 11039,
'CustomerID': 'LINOD',
'OrderDate': '1998-04-21T00:00:00.000Z',
'ShippedDate': null,
'Freight': 65,
'ShipName': 'LINO-Delicateses',
'ShipAddress': 'Ave. 5 de Mayo Porlamar',
'ShipCity': 'I. de Margarita',
'ShipRegion': 'Nueva Esparta',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 11040,
'CustomerID': 'GREAL',
'OrderDate': '1998-04-22T00:00:00.000Z',
'ShippedDate': null,
'Freight': 18.84,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 11041,
'CustomerID': 'CHOPS',
'OrderDate': '1998-04-22T00:00:00.000Z',
'ShippedDate': '1998-04-28T00:00:00.000Z',
'Freight': 48.22,
'ShipName': 'Chop-suey Chinese',

Copyright © 2001 -2024 Syncfusion Inc. 672


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Hauptstr. 31',


'ShipCity': 'Bern',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 11042,
'CustomerID': 'COMMI',
'OrderDate': '1998-04-22T00:00:00.000Z',
'ShippedDate': '1998-05-01T00:00:00.000Z',
'Freight': 29.99,
'ShipName': 'Comércio Mineiro',
'ShipAddress': 'Av. dos Lusíadas, 23',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 11043,
'CustomerID': 'SPECD',
'OrderDate': '1998-04-22T00:00:00.000Z',
'ShippedDate': '1998-04-29T00:00:00.000Z',
'Freight': 8.8,
'ShipName': 'Spécialités du monde',
'ShipAddress': '25, rue Lauriston',
'ShipCity': 'Paris',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 11044,
'CustomerID': 'WOLZA',
'OrderDate': '1998-04-23T00:00:00.000Z',
'ShippedDate': '1998-05-01T00:00:00.000Z',
'Freight': 8.72,
'ShipName': 'Wolski Zajazd',
'ShipAddress': 'ul. Filtrowa 68',
'ShipCity': 'Warszawa',
'ShipRegion': null,
'ShipCountry': 'Poland'
},
{
'OrderID': 11045,
'CustomerID': 'BOTTM',
'OrderDate': '1998-04-23T00:00:00.000Z',
'ShippedDate': null,
'Freight': 70.58,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 11046,
'CustomerID': 'WANDK',
'OrderDate': '1998-04-23T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 673


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': '1998-04-24T00:00:00.000Z',
'Freight': 71.64,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11047,
'CustomerID': 'EASTC',
'OrderDate': '1998-04-24T00:00:00.000Z',
'ShippedDate': '1998-05-01T00:00:00.000Z',
'Freight': 46.62,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 11048,
'CustomerID': 'BOTTM',
'OrderDate': '1998-04-24T00:00:00.000Z',
'ShippedDate': '1998-04-30T00:00:00.000Z',
'Freight': 24.12,
'ShipName': 'Bottom-Dollar Markets',
'ShipAddress': '23 Tsawassen Blvd.',
'ShipCity': 'Tsawassen',
'ShipRegion': 'BC',
'ShipCountry': 'Canada'
},
{
'OrderID': 11049,
'CustomerID': 'GOURL',
'OrderDate': '1998-04-24T00:00:00.000Z',
'ShippedDate': '1998-05-04T00:00:00.000Z',
'Freight': 8.34,
'ShipName': 'Gourmet Lanchonetes',
'ShipAddress': 'Av. Brasil, 442',
'ShipCity': 'Campinas',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 11050,
'CustomerID': 'FOLKO',
'OrderDate': '1998-04-27T00:00:00.000Z',
'ShippedDate': '1998-05-05T00:00:00.000Z',
'Freight': 59.41,
'ShipName': 'Folk och fä HB',
'ShipAddress': 'Åkergatan 24',
'ShipCity': 'Bräcke',
'ShipRegion': null,
'ShipCountry': 'Sweden'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 674


TreeGrid Immutable mode in React Treegrid component

'OrderID': 11051,
'CustomerID': 'LAMAI',
'OrderDate': '1998-04-27T00:00:00.000Z',
'ShippedDate': null,
'Freight': 2.79,
'ShipName': 'La maison d\'Asie',
'ShipAddress': '1 rue Alsace-Lorraine',
'ShipCity': 'Toulouse',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 11052,
'CustomerID': 'HANAR',
'OrderDate': '1998-04-27T00:00:00.000Z',
'ShippedDate': '1998-05-01T00:00:00.000Z',
'Freight': 67.26,
'ShipName': 'Hanari Carnes',
'ShipAddress': 'Rua do Paço, 67',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 11053,
'CustomerID': 'PICCO',
'OrderDate': '1998-04-27T00:00:00.000Z',
'ShippedDate': '1998-04-29T00:00:00.000Z',
'Freight': 53.05,
'ShipName': 'Piccolo und mehr',
'ShipAddress': 'Geislweg 14',
'ShipCity': 'Salzburg',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 11054,
'CustomerID': 'CACTU',
'OrderDate': '1998-04-28T00:00:00.000Z',
'ShippedDate': null,
'Freight': 0.33,
'ShipName': 'Cactus Comidas para llevar',
'ShipAddress': 'Cerrito 333',
'ShipCity': 'Buenos Aires',
'ShipRegion': null,
'ShipCountry': 'Argentina'
},
{
'OrderID': 11055,
'CustomerID': 'HILAA',
'OrderDate': '1998-04-28T00:00:00.000Z',
'ShippedDate': '1998-05-05T00:00:00.000Z',
'Freight': 120.92,
'ShipName': 'HILARION-Abastos',
'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'ShipCity': 'San Cristóbal',
'ShipRegion': 'Táchira',

Copyright © 2001 -2024 Syncfusion Inc. 675


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Venezuela'
},
{
'OrderID': 11056,
'CustomerID': 'EASTC',
'OrderDate': '1998-04-28T00:00:00.000Z',
'ShippedDate': '1998-05-01T00:00:00.000Z',
'Freight': 278.96,
'ShipName': 'Eastern Connection',
'ShipAddress': '35 King George',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 11057,
'CustomerID': 'NORTS',
'OrderDate': '1998-04-29T00:00:00.000Z',
'ShippedDate': '1998-05-01T00:00:00.000Z',
'Freight': 4.13,
'ShipName': 'North/South',
'ShipAddress': 'South House 300 Queensbridge',
'ShipCity': 'London',
'ShipRegion': null,
'ShipCountry': 'UK'
},
{
'OrderID': 11058,
'CustomerID': 'BLAUS',
'OrderDate': '1998-04-29T00:00:00.000Z',
'ShippedDate': null,
'Freight': 31.14,
'ShipName': 'Blauer See Delikatessen',
'ShipAddress': 'Forsterstr. 57',
'ShipCity': 'Mannheim',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11059,
'CustomerID': 'RICAR',
'OrderDate': '1998-04-29T00:00:00.000Z',
'ShippedDate': null,
'Freight': 85.8,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil'
},
{
'OrderID': 11060,
'CustomerID': 'FRANS',
'OrderDate': '1998-04-30T00:00:00.000Z',
'ShippedDate': '1998-05-04T00:00:00.000Z',
'Freight': 10.98,
'ShipName': 'Franchi S.p.A.',

Copyright © 2001 -2024 Syncfusion Inc. 676


TreeGrid Immutable mode in React Treegrid component

'ShipAddress': 'Via Monte Bianco 34',


'ShipCity': 'Torino',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 11061,
'CustomerID': 'GREAL',
'OrderDate': '1998-04-30T00:00:00.000Z',
'ShippedDate': null,
'Freight': 14.01,
'ShipName': 'Great Lakes Food Market',
'ShipAddress': '2732 Baker Blvd.',
'ShipCity': 'Eugene',
'ShipRegion': 'OR',
'ShipCountry': 'USA'
},
{
'OrderID': 11062,
'CustomerID': 'REGGC',
'OrderDate': '1998-04-30T00:00:00.000Z',
'ShippedDate': null,
'Freight': 29.93,
'ShipName': 'Reggiani Caseifici',
'ShipAddress': 'Strada Provinciale 124',
'ShipCity': 'Reggio Emilia',
'ShipRegion': null,
'ShipCountry': 'Italy'
},
{
'OrderID': 11063,
'CustomerID': 'HUNGO',
'OrderDate': '1998-04-30T00:00:00.000Z',
'ShippedDate': '1998-05-06T00:00:00.000Z',
'Freight': 81.73,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland'
},
{
'OrderID': 11064,
'CustomerID': 'SAVEA',
'OrderDate': '1998-05-01T00:00:00.000Z',
'ShippedDate': '1998-05-04T00:00:00.000Z',
'Freight': 30.09,
'ShipName': 'Save-a-lot Markets',
'ShipAddress': '187 Suffolk Ln.',
'ShipCity': 'Boise',
'ShipRegion': 'ID',
'ShipCountry': 'USA'
},
{
'OrderID': 11065,
'CustomerID': 'LILAS',
'OrderDate': '1998-05-01T00:00:00.000Z',

Copyright © 2001 -2024 Syncfusion Inc. 677


TreeGrid Immutable mode in React Treegrid component

'ShippedDate': null,
'Freight': 12.91,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 11066,
'CustomerID': 'WHITC',
'OrderDate': '1998-05-01T00:00:00.000Z',
'ShippedDate': '1998-05-04T00:00:00.000Z',
'Freight': 44.72,
'ShipName': 'White Clover Markets',
'ShipAddress': '1029 - 12th Ave. S.',
'ShipCity': 'Seattle',
'ShipRegion': 'WA',
'ShipCountry': 'USA'
},
{
'OrderID': 11067,
'CustomerID': 'DRACD',
'OrderDate': '1998-05-04T00:00:00.000Z',
'ShippedDate': '1998-05-06T00:00:00.000Z',
'Freight': 7.98,
'ShipName': 'Drachenblut Delikatessen',
'ShipAddress': 'Walserweg 21',
'ShipCity': 'Aachen',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11068,
'CustomerID': 'QUEEN',
'OrderDate': '1998-05-04T00:00:00.000Z',
'ShippedDate': null,
'Freight': 81.75,
'ShipName': 'Queen Cozinha',
'ShipAddress': 'Alameda dos Canàrios, 891',
'ShipCity': 'Sao Paulo',
'ShipRegion': 'SP',
'ShipCountry': 'Brazil'
},
{
'OrderID': 11069,
'CustomerID': 'TORTU',
'OrderDate': '1998-05-04T00:00:00.000Z',
'ShippedDate': '1998-05-06T00:00:00.000Z',
'Freight': 15.67,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{

Copyright © 2001 -2024 Syncfusion Inc. 678


TreeGrid Immutable mode in React Treegrid component

'OrderID': 11070,
'CustomerID': 'LEHMS',
'OrderDate': '1998-05-05T00:00:00.000Z',
'ShippedDate': null,
'Freight': 136,
'ShipName': 'Lehmanns Marktstand',
'ShipAddress': 'Magazinweg 7',
'ShipCity': 'Frankfurt a.M.',
'ShipRegion': null,
'ShipCountry': 'Germany'
},
{
'OrderID': 11071,
'CustomerID': 'LILAS',
'OrderDate': '1998-05-05T00:00:00.000Z',
'ShippedDate': null,
'Freight': 0.93,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela'
},
{
'OrderID': 11072,
'CustomerID': 'ERNSH',
'OrderDate': '1998-05-05T00:00:00.000Z',
'ShippedDate': null,
'Freight': 258.64,
'ShipName': 'Ernst Handel',
'ShipAddress': 'Kirchgasse 6',
'ShipCity': 'Graz',
'ShipRegion': null,
'ShipCountry': 'Austria'
},
{
'OrderID': 11073,
'CustomerID': 'PERIC',
'OrderDate': '1998-05-05T00:00:00.000Z',
'ShippedDate': null,
'Freight': 24.95,
'ShipName': 'Pericles Comidas clásicas',
'ShipAddress': 'Calle Dr. Jorge Cash 321',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico'
},
{
'OrderID': 11074,
'CustomerID': 'SIMOB',
'OrderDate': '1998-05-06T00:00:00.000Z',
'ShippedDate': null,
'Freight': 18.44,
'ShipName': 'Simons bistro',
'ShipAddress': 'Vinbæltet 34',
'ShipCity': 'Kobenhavn',
'ShipRegion': null,

Copyright © 2001 -2024 Syncfusion Inc. 679


TreeGrid Immutable mode in React Treegrid component

'ShipCountry': 'Denmark'
},
{
'OrderID': 11075,
'CustomerID': 'RICSU',
'OrderDate': '1998-05-06T00:00:00.000Z',
'ShippedDate': null,
'Freight': 6.19,
'ShipName': 'Richter Supermarkt',
'ShipAddress': 'Starenweg 5',
'ShipCity': 'Genève',
'ShipRegion': null,
'ShipCountry': 'Switzerland'
},
{
'OrderID': 11076,
'CustomerID': 'BONAP',
'OrderDate': '1998-05-06T00:00:00.000Z',
'ShippedDate': null,
'Freight': 38.28,
'ShipName': 'Bon app',
'ShipAddress': '12, rue des Bouchers',
'ShipCity': 'Marseille',
'ShipRegion': null,
'ShipCountry': 'France'
},
{
'OrderID': 11077,
'CustomerID': 'RATTC',
'OrderDate': '1998-05-06T00:00:00.000Z',
'ShippedDate': null,
'Freight': 8.53,
'ShipName': 'Rattlesnake Canyon Grocery',
'ShipAddress': '2817 Milton Dr.',
'ShipCity': 'Albuquerque',
'ShipRegion': 'NM',
'ShipCountry': 'USA'
}
]);
export const orderData: Object[] = JSON.parse(stringData, (field: any,
value: any) => {
let dupValue: any = value;
if (typeof value === 'string' && /^(\d{4}\-\d\d\-
\d\d([tT][\d:\.]*){1})([zZ]|([+\-])(\d\d):?(\d\d))?$/.test(value)) {
let arr: any = dupValue.split(/[^0-9]/);
let arg: any = parseInt(arr[4], 10);
let arg1: any = parseInt(arr[5], 10);
value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1,
parseInt(arr[2], 10), parseInt(arr[3], 10), arg, arg1);
}
return value;
});
export var ProjectsData = [
{ Project: "Villa", Locality: "Los Angeles", Duration: 120, Gender:
"Male", EstimateCost: 35.8,
workStatus: [

Copyright © 2001 -2024 Syncfusion Inc. 680


TreeGrid Immutable mode in React Treegrid component

{Project: "Construction", Locality: "Los Angeles",


Gender: "Male", Duration: 50, EstimateCost: 20.4,
StartDate: new Date("06-07-2018"),
AssignedTo: "Nick Jones",
AssignedContactNumber: "+1903333",
ProjectDone: 40, ProjectStatus: "Active" },
{Project: "Painting", Locality: "Los Angeles",
Gender: "Male", Duration: 25, EstimateCost: 5.2,
StartDate: new Date("11-25-2018"),
AssignedTo: "Nick Jones",
AssignedContactNumber: "+1903333",
ProjectDone: 10, ProjectStatus: "InActive" },
{Project: "Electricals", Locality: "Los Angeles",
Gender: "Male", Duration: 15, EstimateCost: 3.1,
StartDate: new Date("10-03-2018"),
AssignedTo: "Nick Jones",
AssignedContactNumber: "+1903333",
ProjectDone: 90, ProjectStatus: "Active" },
{Project: "Interior Designs", Locality: "Los
Angeles", Gender: "Male", Duration: 30, EstimateCost: 2.1,
StartDate: new Date("10-23-2018"),
AssignedTo: "Nick Jones",
AssignedContactNumber: "+1903333",
ProjectDone: 10, ProjectStatus: "InActive" },
],
StartDate: new Date("06-07-2018"), AssignedTo: "Nick Jones",
AssignedContactNumber: "+1903333", ProjectDone: 60, ProjectStatus: "Active"
},
{ Project: "Apartment", Locality: "Boston", Duration: 250,
EstimateCost: 80.55, Gender: "Female",
workStatus: [
{Project: "Construction", Locality: "Boston",
Duration: 110, Gender: "Female", EstimateCost: 80.55,
StartDate: new Date("08-25-2018"),
AssignedTo: "Johan",
AssignedContactNumber: "+196088",
ProjectDone: 90, ProjectStatus: "Active" },
{Project: "Painting", Locality: "Boston", Duration:
60, EstimateCost: 55.32, Gender: "Female",
StartDate: new Date("12-20-2018"),
AssignedTo: "Johan",
AssignedContactNumber: "+196088",
ProjectDone: 0, ProjectStatus: "InActive" },
{Project: "Electricals", Locality: "Boston",
Duration: 40, EstimateCost: 20.23, Gender: "Female",
StartDate: new Date("01-26-2019"),
AssignedTo: "Johan",
AssignedContactNumber: "+196088",
ProjectDone: 40, ProjectStatus: "Active" },
{Project: "Interior Designs", Locality: "Boston",
Duration: 40, EstimateCost: 5.0, Gender: "Female",
StartDate: new Date("02-07-2019"),
AssignedTo: "Johan",
AssignedContactNumber: "+196088",
ProjectDone: 10, ProjectStatus: "InActive" },
],

Copyright © 2001 -2024 Syncfusion Inc. 681


TreeGrid Immutable mode in React Treegrid component

StartDate: new Date("08-25-2018"), AssignedTo: "Johan",


AssignedContactNumber: "+196088", ProjectDone: 55, ProjectStatus: "Active" }

]
export var treeGridDataSource = [
{
'Name': 'Windows',
'DateModified': new Date('06/26/2017'),
'Type': 'File Folder',
'DateCreated': new Date('06/16/2017'),
'Children': [
{
'Name': 'Users',
'DateModified': new Date('06/26/2017'),
'Type': 'File Folder',
'DateCreated': new Date('06/16/2017'),
'Children': [
{
'Name': 'Public',
'DateModified': new Date('06/26/2017'),
'Type': 'File Folder',
'DateCreated': new Date('06/16/2017'),
'Children': [
{
'Name': 'Documents ',
'DateModified': new Date('06/26/2017'),
'Type': 'File Folder',
'DateCreated': new Date('06/16/2017'),
'Children': [
{ 'Name': 'Document 1', 'DateModified':
new Date('06/26/2017'), 'Type': 'HTML document', 'DateCreated': new
Date('06/16/2017'), },
{ 'Name': 'Document 2', 'DateModified':
new Date('06/26/2017'), 'Type': 'HTML document', 'DateCreated':new Date(
'06/16/2017'), },
{ 'Name': 'Document 3', 'DateModified':
new Date('06/26/2017'), 'Type': 'HTML document', 'DateCreated': new
Date('06/16/2017'), }
]
}
]
}
]
}
]
}
];
export let sampleData2: any[] = [];
export function dataSource1(): void {
for (let i: number = 1; i < 500; i++)
{
sampleData2.push({
taskID: i,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',

Copyright © 2001 -2024 Syncfusion Inc. 682


TreeGrid Immutable mode in React Treegrid component

approved: false,
duration: 11,
subtasks: [
{
taskID: ++i,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
subtasks: [{
taskID: ++i,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,

}]

}]
})
}}
export var projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'),
'EndDate': new Date('02/27/2017'), 'Duration': 3, 'Progress': '40',
'Priority': 'Normal' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'),
'EndDate': new Date('02/27/2017'), 'Duration': 4, 'Progress': '40',
'parentID': 1, 'Priority': 'Low' },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'),
'EndDate': new Date('02/27/2017'), 'Duration': 2, 'Progress': '40',
'parentID': 2, 'Priority': 'Normal' },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'),
'EndDate': new Date('02/27/2017'), 'Duration': 2, 'Progress': '40',
'parentID': 1, 'Priority': 'Low' },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'),
'EndDate': new Date('03/18/2017'), 'Duration': 6, 'Progress': '40',
'Priority': 'Normal' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'),
'EndDate': new Date('03/06/2017'), 'Duration': 11, 'Progress': '40',
'parentID': 5, 'Priority': 'High' },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'),
'EndDate': new Date('03/06/2017'), 'Duration': 7, 'Progress': '40',
'parentID': 5, 'Priority': 'Critical' },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 683


TreeGrid Immutable mode in React Treegrid component

'EndDate': new Date('03/06/2017'), 'Duration': 10, 'Progress': '40',


'parentID': 5, 'Priority': 'Breaker' },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'),
'EndDate': new Date('03/06/2017'), 'Duration': 15, 'Progress': '40',
'parentID': 5, 'Priority': 'High' },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'),
'EndDate': new Date('03/13/2017'), 'Duration': 17, 'Progress': '40',
'Priority': 'Breaker' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'),
'EndDate': new Date('03/13/2017'), 'Duration': 0, 'Progress': '40',
'parentID': 10, 'Priority': 'Low' },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'),
'EndDate': new Date('03/13/2017'), 'Duration': 10, 'Progress': '40',
'parentID': 10, 'Priority': 'Breaker' },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'),
'EndDate': new Date('03/13/2017'), 'Duration': 11, 'Progress': '40',
'parentID': 10, 'Priority': 'Normal' },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'),
'EndDate': new Date('03/13/2017'), 'Duration': 1, 'Progress': '40',
'parentID': 10, 'Priority': 'Normal' },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'),
'EndDate': new Date('03/13/2017'), 'Duration': 14, 'Progress': '40',
'parentID': 10, 'Priority': 'Critical'}
];
export var sampleData = [

{
taskID: 1000,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 1001,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 1002, taskName: 'Development Task 1', startDate:
new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4, progress:
'50', priority: 'Normal', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 684


TreeGrid Immutable mode in React Treegrid component

{ taskID: 1003, taskName: 'Development Task 2', startDate:


new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4, progress:
'50', priority: 'Critical', approved: true },
{ taskID: 1004, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2, progress:
'0', priority: 'High', approved: false },
{ taskID: 1005, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2, progress:
'0', priority: 'Low', approved: false },
{ taskID: 1006, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2, progress:
'0', priority: 'Critical', approved: true },
{ taskID: 1007, taskName: 'Phase 2 complete', startDate: new
Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0, progress:
'50', priority: 'Normal', approved: false }
]
}]
}
];
export var templateData = [{
'Name': 'Robert King',
'FullName': 'Robert King',
'Designation': 'Chief Executive Officer',
'EmployeeID': 'EMP001',
'Address': '507 - 20th Ave. E.Apt. 2A, Seattle',
'Contact': '(206) 555-9857',
'Country': 'USA',
'DOB': new Date('2/15/1963'),
'DOJ': new Date('5/1/1983'),
'Children': [{
'Name': 'David william',
'FullName': 'David william',
'Designation': 'Vice President',
'EmployeeID': 'EMP004',
'Address': '722 Moss Bay Blvd., Kirkland',
'Country': 'USA',
'Contact': '(206) 555-3412',
'DOB': new Date('5/20/1971'),
'DOJ': new Date('5/1/1991'),
'Children': [{
'Name': 'Nancy Davolio',
'FullName': 'Nancy Davolio',
'Designation': 'Marketing Executive',
'EmployeeID': 'EMP035',
'Address': '4110 Old Redmond Rd., Redmond',
'Country': 'USA',
'Contact': '(206) 555-8122',
'DOB': new Date('3/19/1966'),
'DOJ': new Date('5/1/1986'),
'Children': [
{
'Name': 'Andrew Fuller',

Copyright © 2001 -2024 Syncfusion Inc. 685


TreeGrid Immutable mode in React Treegrid component

'FullName': 'Andrew Fuller',


'Designation': 'Sales Representative',
'EmployeeID': 'EMP045',
'Address': '14 Garrett Hill, London',
'Country': 'UK',
'Contact': '(71) 555-4848',
'DOB': new Date('9/20/1980'),
'DOJ': new Date('5/1/2000'),
},
{
'Name': 'Anne Dodsworth',
'FullName': 'Anne Dodsworth',
'Designation': 'Sales Representative',
'EmployeeID': 'EMP091',
'Address': '4726 - 11th Ave. N.E., Seattle',
'Country': 'USA',
'Contact': '(206) 555-1189',
'DOB': new Date('10/19/1989'),
'DOJ': new Date('5/1/2009'),
},
{
'Name': 'Michael Suyama',
'FullName': 'Michael Suyama',
'Designation': 'Sales Representative',
'EmployeeID': 'EMP110',
'Address': 'Coventry House Miner Rd., London',
'Country': 'UK',
'Contact': '(71) 555-3636',
'DOB': new Date('11/02/1987'),
'DOJ': new Date('5/1/2007'),
},
{
'Name': 'Janet Leverling',
'FullName': 'Janet Leverling',
'Designation': 'Sales Coordinator',
'EmployeeID': 'EMP131',
'Address': 'Edgeham Hollow Winchester Way, London',
'Country': 'UK',
'Contact': '(71) 555-3636',
'DOB': new Date('11/06/1990'),
'DOJ': new Date('5/1/2010'),
},
]
},
{
'Name': 'Romey Wilson',
'FullName': 'Romey Wilson',
'Designation': 'Sales Executive',
'EmployeeID': 'EMP039',
'Address': '7 Houndstooth Rd., London',
'Country': 'UK',
'Contact': '(71) 555-3690',
'DOB': new Date('02/02/1980'),
'DOJ': new Date('5/1/2000'),
'Children': [
{
'Name': 'Margaret Peacock',

Copyright © 2001 -2024 Syncfusion Inc. 686


TreeGrid Immutable mode in React Treegrid component

'FullName': 'Margaret Peacock',


'Designation': 'Sales Representative',
'EmployeeID': 'EMP213',
'Address': '4726 - 11th Ave. N.E., California',
'Country': 'USA',
'Contact': '(206) 555-1989',
'DOB': new Date('01/21/1986'),
'DOJ': new Date('5/1/2006'),
},
{
'Name': 'Laura Callahan',
'FullName': 'Laura Callahan',
'Designation': 'Sales Coordinator',
'EmployeeID': 'EMP201',
'Address': 'Coventry House Miner Rd., London',
'Country': 'UK',
'Contact': '(71) 555-2222',
'DOB': new Date('12/01/1990'),
'DOJ': new Date('5/1/2010'),
},
{
'Name': 'Steven Buchanan',
'FullName': 'Steven Buchanan',
'Designation': 'Sales Representative',
'EmployeeID': 'EMP197',
'Address': '200 Lincoln Ave, Salinas, CA 93901',
'Country': 'USA',
'Contact': '(831) 758-7408',
'DOB': new Date('03/23/1987'),
'DOJ': new Date('5/1/2007'),
},
{
'Name': 'Tedd Lawson',
'FullName': 'Tedd Lawson',
'Designation': 'Sales Representative',
'EmployeeID': 'EMP167',
'Address': '200 Lincoln Ave, Salinas, CA 93901',
'Country': 'USA',
'Contact': '(831) 758-7368 ',
'DOB': new Date('08/09/1989'),
'DOJ': new Date('5/1/2009'),
},
]
}]
}]
}];
export var summaryRowData = [{
'FreightID': 'CX2389NK',
'FreightName': 'Maersk Edibles Co.',
'TotalUnits': 598,
'TotalCosts': 27838,
'UnitWeight': 241,
'children': [{
'FreightID': 'QW4567OP',
'FreightName': 'Chang',
'TotalUnits': 123,
'TotalCosts': 3400,

Copyright © 2001 -2024 Syncfusion Inc. 687


TreeGrid Immutable mode in React Treegrid component

'UnitWeight': 50,
}, {
'FreightID': 'QW3458BH',
'FreightName': 'Aniseed Syrup',
'TotalUnits': 89,
'TotalCosts': 5900,
'UnitWeight': 87,
}, {
'FreightID': 'QW8967OH',
'FreightName': 'Chef Antons Cajun Seasoning',
'TotalUnits': 46,
'TotalCosts': 9578,
'UnitWeight': 54,
}, {
'FreightID': 'QW6549NJ',
'FreightName': 'Chef Antons Gumbo Mix',
'TotalUnits': 340,
'TotalCosts': 8960,
'UnitWeight': 50,
}]
},
{
'FreightID': 'DW8954IO',
'FreightName': 'Aeon fitness inc.',
'TotalUnits': 1720,
'TotalCosts': 24367,
'UnitWeight': 296,
'children': [
{
'FreightID': 'UF5647YH',
'FreightName': 'Reebox CrossFit Back Bay',
'TotalUnits': 600,
'TotalCosts': 8700,
'UnitWeight': 73,
},
{
'FreightID': 'UF1290LK',
'FreightName': 'The Green Microgym',
'TotalUnits': 569,
'TotalCosts': 8765,
'UnitWeight': 90,
},
{
'FreightID': 'UF8956KU',
'FreightName': 'DeFrancos',
'TotalUnits': 456,
'TotalCosts': 4589,
'UnitWeight': 68,
},
{
'FreightID': 'UF7464JK',
'FreightName': 'Westside Barbell',
'TotalUnits': 95,
'TotalCosts': 2313,
'UnitWeight': 65,
}],
},

Copyright © 2001 -2024 Syncfusion Inc. 688


TreeGrid Immutable mode in React Treegrid component

{
'FreightID': 'EJ9456KN',
'FreightName': 'Sun technologies inc',
'TotalUnits': 331,
'TotalCosts': 22933,
'UnitWeight': 192,
'children': [
{
'FreightID': 'GH2367OP',
'FreightName': 'Haier Group',
'TotalUnits': 78,
'TotalCosts': 6789,
'UnitWeight': 23,
},
{
'FreightID': 'GH4309TH',
'FreightName': 'Panda Electronics',
'TotalUnits': 90,
'TotalCosts': 8999,
'UnitWeight': 48,
},
{
'FreightID': 'GH3494SD',
'FreightName': 'Jiangsu Etern',
'TotalUnits': 36,
'TotalCosts': 4356,
'UnitWeight': 56,
},
{
'FreightID': 'GH3213FR',
'FreightName': 'Zhejiang Fuchunjiang',
'TotalUnits': 127,
'TotalCosts': 2789,
'UnitWeight': 65,
}],
}];
export var headerData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress:
'100', resourceId: '2' },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress:
'100', resourceId:'1' },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress:
'100', resourceId: '1' },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'), endDate: new Date('02/07/2017'), duration: 0,
predecessor: '3FS,4FS,5FS' }
]
},

Copyright © 2001 -2024 Syncfusion Inc. 689


TreeGrid Immutable mode in React Treegrid component

{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress:
'60', predecessor: '6FS', resourceId: '2' },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress:
'100', predecessor: '6FS', resourceId: '3' },
{ taskID: 9, taskName: 'Get approval from customer', startDate: new
Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress:
'100', predecessor: '9FS', resourceId: '1' },
{ taskID: 10, taskName: 'Design complete', startDate: new
Date('02/14/2017'), endDate: new Date('02/14/2017'), duration: 0,
predecessor: '10FS' }
]
},
{
taskID: 11,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
subtasks: [
{
taskID: 12,
taskName: 'Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
subtasks: [{
taskID: 13,
taskName: 'Implementation Module',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
subtasks: [
{ taskID: 14, taskName: 'Development Task 1', startDate:
new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3,
progress: '50', predecessor: '11FS', resourceId: '3' },
{ taskID: 15, taskName: 'Development Task 2', startDate:
new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3,
progress: '50', predecessor: '11FS', resourceId: '3' },
{ taskID: 16, taskName: 'Testing', startDate: new
Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2, progress:
'0', predecessor: '15FS,16FS', resourceId: '4' },
{ taskID: 17, taskName: 'Bug fix', startDate: new
Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2, progress:
'0', predecessor: '17FS', resourceId: '4' },
{ taskID: 18, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'), endDate: new Date('02/27/2017'),
duration: 2, progress: '0', predecessor: '18FS', resourceId: '1' },
{ taskID: 19, taskName: 'Phase complete', startDate: new
Date('02/27/2017'), endDate: new Date('02/27/2017'), duration: 0,
predecessor: '19FS' }
]
}]

Copyright © 2001 -2024 Syncfusion Inc. 690


TreeGrid Immutable mode in React Treegrid component

}
]
}
];
export var projectResources = [
{ resourceId: 1, resourceName: 'Project Manager' },
{ resourceId: 2, resourceName: 'Software Analyst' },
{ resourceId: 3, resourceName: 'Developer' },
{ resourceId: 4, resourceName: 'Testing Engineer' }
];
export var pagingdata = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress:
100, priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress:
100, approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress:
100, priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'), endDate: new Date('02/07/2017'), duration: 0, progress:
0, priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress:
60, priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress:
100, priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate: new
Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress:
100, approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress:
100, approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 691


TreeGrid Immutable mode in React Treegrid component

{ taskID: 11, taskName: 'Design complete', startDate: new


Date('02/14/2017'), endDate: new Date('02/14/2017'), duration: 0, progress:
0, priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1', startDate: new
Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress:
'50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2', startDate: new
Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress:
'50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2, progress:
'0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2, progress:
'0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting', startDate:
new Date('02/26/2017'), endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete', startDate: new
Date('02/27/2017'), endDate: new Date('02/27/2017'), duration: 0, priority:
'Low', approved: true }
]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1', startDate: new
Date('02/17/2017'), endDate: new Date('02/20/2017'), duration: 4, progress:
'50', priority: 'Normal', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 692


TreeGrid Immutable mode in React Treegrid component

{ taskID: 24, taskName: 'Development Task 2', startDate: new


Date('02/17/2017'), endDate: new Date('02/20/2017'), duration: 4, progress:
'50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'), endDate: new Date('02/24/2017'), duration: 2, progress:
'0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'), endDate: new Date('02/26/2017'), duration: 2, progress:
'0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting', startDate:
new Date('02/27/2017'), endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete', startDate: new
Date('02/28/2017'), endDate: new Date('02/28/2017'), duration: 0, priority:
'Normal', approved: false }
]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1', startDate: new
Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress:
'50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2', startDate: new
Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress:
'50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2, progress:
'0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2, progress:
'0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting', startDate:
new Date('02/26/2017'), endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete', startDate: new
Date('02/27/2017'), endDate: new Date('02/27/2017'), duration: 0, priority:
'Critical', approved: false }
]
}
]
}
];
export var textWrapData = [
{
taskID: 1,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,

Copyright © 2001 -2024 Syncfusion Inc. 693


TreeGrid Immutable mode in React Treegrid component

priority: 'High',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Software Specification', startDate: new
Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress:
60, priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress:
100, priority: 'Critical', approved: false },
{ taskID: 4, taskName: 'Get approval from customer', startDate: new
Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress:
100, approved: true },
{ taskID: 5, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress:
100, approved: true },
{ taskID: 6, taskName: 'Design complete', startDate: new
Date('02/14/2017'), endDate: new Date('02/14/2017'), duration: 0, progress:
0, priority: 'Normal', approved: true }
]
},
{
taskID: 7,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
subtasks: [
{
taskID: 8,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
subtasks: [{
taskID: 9,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
approved: false,
subtasks: [
{ taskID: 10, taskName: 'Development Task 1', startDate:
new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 11, taskName: 'Development Task 2', startDate:
new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 12, taskName: 'Testing', startDate: new
Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2, progress:
'0', priority: 'Normal', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 694


TreeGrid Immutable mode in React Treegrid component

{ taskID: 13, taskName: 'Bug fix', startDate: new


Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2, progress:
'0', priority: 'Critical', approved: false },
{ taskID: 14, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'), endDate: new Date('02/27/2017'),
duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 15, taskName: 'Phase 1 complete', startDate: new
Date('02/27/2017'), endDate: new Date('02/27/2017'), duration: 0, priority:
'Low', approved: true }
]
}]
},
{
taskID: 16,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
subtasks: [{
taskID: 17,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
subtasks: [
{ taskID: 18, taskName: 'Development Task 1', startDate:
new Date('02/17/2017'), endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 19, taskName: 'Development Task 2', startDate:
new Date('02/17/2017'), endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 20, taskName: 'Testing', startDate: new
Date('02/21/2017'), endDate: new Date('02/24/2017'), duration: 2, progress:
'0', priority: 'High', approved: false },
{ taskID: 21, taskName: 'Bug fix', startDate: new
Date('02/25/2017'), endDate: new Date('02/26/2017'), duration: 2, progress:
'0', priority: 'Low', approved: false },
{ taskID: 22, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'), endDate: new Date('02/28/2017'),
duration: 2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 23, taskName: 'Phase 2 complete', startDate: new
Date('02/28/2017'), endDate: new Date('02/28/2017'), duration: 0, priority:
'Normal', approved: false }
]
}]
},
{
taskID: 24,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,

Copyright © 2001 -2024 Syncfusion Inc. 695


TreeGrid Module in React Treegrid component

duration: 11,
subtasks: [{
taskID: 25,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
subtasks: [
{ taskID: 26, taskName: 'Development Task 1', startDate:
new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 27, taskName: 'Development Task 2', startDate:
new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 28, taskName: 'Testing', startDate: new
Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2, progress:
'0', priority: 'Critical', approved: true },
{ taskID: 29, taskName: 'Bug fix', startDate: new
Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2, progress:
'0', priority: 'High', approved: false },
{ taskID: 30, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'), endDate: new Date('02/27/2017'),
duration: 2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 31, taskName: 'Phase 3 complete', startDate: new
Date('02/27/2017'), endDate: new Date('02/27/2017'), duration: 0, priority:
'Critical', approved: false },
]
}]
}
]
}
];{% endraw %}

Limitations
The following features are not supported in the immutable mode:

• Frozen rows and columns


• Row Template
• Detail Template
• Column reorder
• Virtualization
• Infinite scroll

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Module in React Treegrid component
The following modules should be injected to extend treegrid's functionality.
| Module | Description |
|------|-------------|

Copyright © 2001 -2024 Syncfusion Inc. 696


TreeGrid Columns

| PageService| Inject this module to use paging feature.|


| SortService| Inject this module to use sorting feature.|
| FilterService| Inject this module to use filtering feature.|
| EditService| Inject this module to use editing feature.|
| AggregateService| Inject this module to use aggregate feature.|
| ColumnMenuService| Inject this module to use column menu feature.|
| CommandColumnService| Inject this module to use command column feature.|
| ContextMenuService| Inject this module to use context menu feature.
| ResizeService| Inject this module to use resize feature.|
| ReorderService| Inject this module to use reorder feature.|
| PrintService| Inject this module to use to use print feature and this is a default injected module.|
| ToolbarService| Inject this module to use toolbar feature.|
| ExcelExportService| Inject this module to use Excel export feature.|
| PdfExportService| Inject this module to use PDF export feature.|
These modules should be injected into the treegrid using the Inject directive.
You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Columns
Columns in React Treegrid component
The column definitions are used as the dataSource schema in the TreeGrid. This plays a vital role in
rendering column values in the required format. The treegrid operations such as sorting, filtering and
searching etc. are performed based on column definitions. The field property of the columns is
necessary to map the data source values in TreeGrid columns.
1. If the column field is not specified in the dataSource, the column values will be empty.
2. If the field name contains “dot” operator, it is considered as complex binding.
treeColumnIndex property denotes the column that is used to expand and collapse child rows.
Format
To format cell values based on specific culture, use the columns.format property. The TreeGrid uses
Internalization library to format number and date
values.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
return <TreeGridComponent dataSource={orderData} treeColumnIndex={1}
childMapping='subtasks' height='315'>

Copyright © 2001 -2024 Syncfusion Inc. 697


TreeGrid Columns

<ColumnsDirective>
<ColumnDirective field='orderID' headerText='Order ID' width='90'
textAlign='Right'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='180'/>
<ColumnDirective field='unitPrice' headerText='Price Per Unit'
width='90' format='c2' textAlign='Right' type='number'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
return <TreeGridComponent dataSource={orderData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='orderID' headerText='Order ID' width='90'
textAlign='Right'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='180'/>
<ColumnDirective field='unitPrice' headerText='Price Per Unit'
width='90' format='c2' textAlign='Right' type='number' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

By default, the number and date values are formatted in en-US locale.
Number formatting
The number or integer values can be formatted using the below format strings.
Format |Description |Remarks
{ type:'date', format:'dd/MM/yyyy' } | 04/07/1996
{ type:'date', format:'dd.MM.yyyy' } | 04.07.1996
{ type:'date', skeleton:'short' } | 7/4/96
{ type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' } | 04/07/1996 12:00 AM
{ type: 'dateTime', format: 'MM/dd/yyyy hh:mm:ss a' } | 07/04/1996 12:00:00 AM
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {

Copyright © 2001 -2024 Syncfusion Inc. 698


TreeGrid Columns

const formatOption = { type: 'date', format: 'dd/MM/yyyy' };


return <TreeGridComponent dataSource={orderData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='orderID' headerText='Order ID' width='90'
textAlign='Right'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='180'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='160' textAlign='Right' format={formatOption}/>
<ColumnDirective field='price' headerText='Price' width='90'
format='c2' textAlign='Right' type='number'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
const formatOption: object = {type:'date', format:'dd/MM/yyyy'};
return <TreeGridComponent dataSource={orderData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='orderID' headerText='Order ID' width='90'
textAlign='Right'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='180'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='160' textAlign='Right' format={formatOption}/>
<ColumnDirective field='price' headerText='Price' width='90'
format='c2' textAlign='Right' type='number' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Lock Columns
You can lock columns by using column.lockColumn property. The locked columns will be moved to the
first position. Also you can’t reorder its position.
In the below example, duration column is locked and its reordering functionality is disabled.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, Reorder,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './custom.css';
import { sampleData } from './datasource';
function App() {

Copyright © 2001 -2024 Syncfusion Inc. 699


TreeGrid Columns

const customAttributes = { class: 'customcss' };


return <TreeGridComponent dataSource={sampleData} allowReordering={true}
allowSelection={false} treeColumnIndex={1} childMapping='subtasks'
height='315'>
<Inject services={[Reorder]}/>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='110' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='110' lockColumn={true} textAlign='Right'
customAttributes={customAttributes}/>
<ColumnDirective field='progress' headerText='Progress'
width='180'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, Reorder,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const customAttributes: any = {class: 'customcss'};
return <TreeGridComponent dataSource={sampleData} allowReordering={true}
allowSelection={false}
treeColumnIndex={1} childMapping='subtasks' height='315'>
<Inject services={[Reorder]}/>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='110' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='110' lockColumn= {true} textAlign='Right'
customAttributes={customAttributes} />
<ColumnDirective field='progress' headerText='Progress'
width='180'/>
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Column Type

Copyright © 2001 -2024 Syncfusion Inc. 700


TreeGrid Columns

Column type can be specified using the columns.type property. It specifies the type of data the column
binds.
If the format is defined for a column, the column uses type to select the appropriate format option
(number or date).
TreeGrid column supports the following types:

• string
• number
• boolean
• date
• datetime

If the type is not defined, it will be determined from the first record of the dataSource.
Checkbox Column
To render checkboxes in existing column, you need to set columns.showCheckbox property as true
It is also possible to select the rows hierarchically using checkboxes in TreeGrid by enabling
autoCheckHierarchy property. When we check on any parent record checkbox then the child record
checkboxes will get checked.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='315' autoCheckHierarchy={true}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='120'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180' showCheckbox={true}/>
<ColumnDirective field='startDate' headerText='Start Date'
width='150' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='130' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {

Copyright © 2001 -2024 Syncfusion Inc. 701


TreeGrid Columns

return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}


childMapping='subtasks'
height='315' autoCheckHierarchy={true}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='120'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180' showCheckbox={true}/>
<ColumnDirective field='startDate' headerText='Start Date'
width='150' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='130' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

For hierarchy selection between the records, we need to enable the autoCheckHierarchy property.
Controlling TreeGrid actions
You can enable or disable treegrid action for a particular column by setting the allowFiltering, and
allowSorting properties.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowSorting={true} allowFiltering={true}
height='270'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' allowSorting={false}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'
allowFiltering={false}/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter, Sort]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Sort } from '@syncfusion/ej2-react-treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 702


TreeGrid Columns

import * as React from 'react';


import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowSorting={true} allowFiltering={true} height='270'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' allowSorting={false}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' allowFiltering={false}
/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter,Sort]}/>
</TreeGridComponent>
};
export default App;

Show/Hide Columns by External Button


You can show or hide treegrid columns dynamically using external buttons by invoking the showColumns
or hideColumns method.
APP.JSX
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const show = () => {
if (treegrid) {
treegrid.showColumns(['Task ID', 'Duration']); // show by
HeaderText
}
};
const hide = () => {
if (treegrid) {
treegrid.hideColumns(['Task ID', 'Duration']); // hide by
HeaderText
}
};
return (<div>
<ButtonComponent cssClass='e-flat' onClick={show}>Show</ButtonComponent>
<ButtonComponent cssClass='e-flat'
onClick={hide}>Hide</ButtonComponent><TreeGridComponent
dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
height='270' ref={g => treegrid = g}>
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 703


TreeGrid Columns

<ColumnDirective field='taskID' headerText='Task ID' width='90'


textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
</div>);
}
;
export default App;

APP.TSX
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Page, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const show = () => {
if (treegrid) {
treegrid.showColumns(['Task ID', 'Duration']); // show by
HeaderText
}
}
const hide = () => {
if (treegrid) {
treegrid.hideColumns(['Task ID', 'Duration']); // hide by
HeaderText
}
}
return (<div>
<ButtonComponent cssClass= 'e-flat' onClick= { show
}>Show</ButtonComponent>
<ButtonComponent cssClass= 'e-flat' onClick= { hide
}>Hide</ButtonComponent><TreeGridComponent dataSource={sampleData}
treeColumnIndex={1} childMapping='subtasks' height='270' ref={g => treegrid
= g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>

Copyright © 2001 -2024 Syncfusion Inc. 704


TreeGrid Columns

</TreeGridComponent>
</div>)
};
export default App;

ValueAccessor
The valueAccessor is used to access/manipulate the value of display data. You can achieve custom value
formatting by using the valueAccessor.
APP.JSX
import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
const currencyFormatter = (field, data, column) => {
return '€' + getValue('price', data);
};
const orderFormatter = (field, data, column) => {
return data[field] + '-' + getValue('Category', data);
};
return <TreeGridComponent dataSource={orderData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='orderID' headerText='Order ID'
width='90' textAlign='Right'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='210' valueAccessor={orderFormatter}/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='110' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='price' headerText='Price' width='80'
valueAccessor={currencyFormatter} textAlign='Right' type='number'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
const currencyFormatter = (field: string, data: object, column: object)
=> {
return '€' + getValue('price', data);
}
const orderFormatter = (field: string, data: object, column: object) =>
{

Copyright © 2001 -2024 Syncfusion Inc. 705


TreeGrid Columns

return data[field] + '-' + getValue('Category', data);


}
return <TreeGridComponent dataSource={orderData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='orderID' headerText='Order ID'
width='90' textAlign='Right'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='210' valueAccessor={orderFormatter}/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='110' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='price' headerText='Price' width='80'
valueAccessor={currencyFormatter} textAlign='Right' type='number' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Display Array type Columns


You can bind an array of objects in a column by using the valueAccessor property. In this example, the
name field has an array of two objects, FirstName and LastName. These two objects are joined and
bound to a column using the valueAccessor.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { stringData } from './datasource';
function App() {
const orderFormatter = (field, data, column) => {
return data[field].map((s) => {
return s.lastName || s.firstName;
}).join(' ');
};
return <TreeGridComponent dataSource={stringData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='110'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='name' headerText='Assignee' width='150'
textAlign='Left' valueAccessor={orderFormatter}/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX

Copyright © 2001 -2024 Syncfusion Inc. 706


TreeGrid Columns

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from


'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { stringData } from './datasource';
function App() {
const orderFormatter = (field: string, data: object, column: object):
string => {
return data[field].map((s: {lastName: string, firstName: string}):
string => {
return s.lastName || s.firstName }).join(' ');
}
return <TreeGridComponent dataSource={stringData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='110'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='name' headerText='Assignee' width='150'
textAlign='Left'
valueAccessor={orderFormatter} />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Expression Column
You can achieve the expression column by using the valueAccessorproperty.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
const totalPrice = (field, data, column) => {
return data.units * data.unitPrice;
};
return <TreeGridComponent dataSource={orderData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='orderID' headerText='Order ID'
width='110' textAlign='Right'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='210' textAlign='Left'/>
<ColumnDirective field='units' headerText='Units' width='120'
textAlign='Right'/>
<ColumnDirective field='unitPrice' headerText='Unit Price'
width='120' textAlign='Right' format='c2' type='number'/>
<ColumnDirective field='price' headerText='Total Price'
width='120' textAlign='Right' format='c2' type='number'
valueAccessor={totalPrice}/>
</ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 707


TreeGrid Columns

</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
const totalPrice = (field: string, data: { units: number, unitPrice:
number }, column: object): number => {
return data.units * data.unitPrice;
};
return <TreeGridComponent dataSource={orderData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='orderID' headerText='Order ID'
width='110' textAlign='Right'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='210' textAlign='Left'/>
<ColumnDirective field='units' headerText='Units' width='120'
textAlign='Right'/>
<ColumnDirective field='unitPrice' headerText='Unit Price'
width='120' textAlign='Right'
format='c2' type='number'/>
<ColumnDirective field='price' headerText='Total Price'
width='120' textAlign='Right'
format='c2' type='number' valueAccessor= {totalPrice}/>
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Render boolean value as checkbox


To render boolean values as checkbox in columns, you need to set displayAsCheckBox property as true.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='approved' headerText='Approved' width='90'
format='yMd' textAlign='Right' displayAsCheckBox={true}/>

Copyright © 2001 -2024 Syncfusion Inc. 708


TreeGrid Columns

<ColumnDirective field='duration' headerText='Duration' width='80'


textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='approved' headerText='Approved' width='90'
format='yMd' textAlign='Right' displayAsCheckBox={true} />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Headers in React Treegrid component
Header text
By default, column header title is displayed from column field value. To override the default header title,
you have to define the headerTextvalue.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>

Copyright © 2001 -2024 Syncfusion Inc. 709


TreeGrid Columns

<ColumnDirective field='duration' headerText='Duration' width='80'


textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

* If both the field and headerText are not defined in the column, the column renders with “empty”
header text.
Header template
You can customize the header element by using the headerTemplateproperty.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const taskName = () => {
return (<div><img src="taskname.png" width="20" height="20"
className="e-image"/>
<b>Task Name</b></div>);
};
const startDate = () => {
return (<div><img src="startdate.png" width="20" height="20"
className="e-image"/>
<b>Start Date</b></div>);
};
const duration = () => {

Copyright © 2001 -2024 Syncfusion Inc. 710


TreeGrid Columns

return (<div><img src="duration.png" width="20" height="20"


className="e-image"/>
<b>Duration</b></div>);
};
const progress = () => {
return (<div><img src="progress.png" width="20" height="20"
className="e-image"/>
<b>Progress</b></div>);
};
return <TreeGridComponent dataSource={sampleData}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='taskName' width='220'
headerTemplate={taskName}/>
<ColumnDirective field='startDate' headerText='Start Date'
format='yMd' type='date' textAlign='Right' headerTemplate={startDate}/>
<ColumnDirective field='duration' textAlign='Right'
headerTemplate={duration}/>
<ColumnDirective field='progress' headerText='progress'
textAlign='Right' headerTemplate={progress}/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const taskName = () => {
return (<div><img src="taskname.png" width="20" height="20"
className="e-image" />
<b>Task Name</b></div>);
}
const startDate = () => {
return (<div><img src="startdate.png" width="20" height="20"
className="e-image" />
<b>Start Date</b></div>);
}
const duration = () => {
return (<div><img src="duration.png" width="20" height="20"
className="e-image" />
<b>Duration</b></div>);
}
const progress = () => {
return (<div><img src="progress.png" width="20" height="20"
className="e-image" />
<b>Progress</b></div>);
}
return <TreeGridComponent dataSource={sampleData}
childMapping='subtasks' height='315'>
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 711


TreeGrid Columns

<ColumnDirective field='taskName' width='220'


headerTemplate={taskName}/>
<ColumnDirective field='startDate' headerText='Start Date'
format='yMd' type='date' textAlign='Right' headerTemplate={startDate}/>
<ColumnDirective field='duration' textAlign='Right'
headerTemplate={duration}/>
<ColumnDirective field='progress' headerText='progress'
textAlign='Right' headerTemplate={progress}/>
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Column template in React Treegrid component


The column Link to the Video has options to display custom element instead of a field value in the
column.
You can check this video to learn about how to use templates for column(based on conditions) and
headers in Tree Grid.
APP.JSX
import { getObject } from '@syncfusion/ej2-grids';
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { getSparkData, textdata } from './datasource';
function App() {
const load = (args) => {
let theme = location.hash.split('/')[1];
theme = theme ? theme : 'Material';
args.sparkline.theme = (theme.charAt(0).toUpperCase() +
theme.slice(1));
};
const taxColTemplate = (props) => {
return (<SparklineComponent id={"spkline" + getObject('EmployeeID',
props)} fill='#3C78EF' height='50px' load={load} lineWidth={2}
valueType='Numeric' width='150px' dataSource={getSparkData('line',
+getObject('EmployeeID', props))}/>);
};
const dayColTemplate = (props) => {
return (<SparklineComponent id={"spkarea" + getObject('EmployeeID',
props)} fill='#3C78EF' height='50px' load={load}
negativePointColor='#f7a816' type='Column' valueType='Numeric' width='150px'
dataSource={getSparkData('column', +getObject('EmployeeID', props))}/>);
};
const yearColTemplate = (props) => {
return (<SparklineComponent id={"spkwl" + getObject('EmployeeID',
props)} fill='#3C78EF' height='50px' load={load}
negativePointColor='#f7a816' type='WinLoss' tiePointColor='darkgray'
valueType='Numeric' width='150px' dataSource={getSparkData('column',
+getObject('EmployeeID', props))}/>);
};
return <TreeGridComponent dataSource={textdata} treeColumnIndex={0}
childMapping='Children' allowPaging={true} height='410'>

Copyright © 2001 -2024 Syncfusion Inc. 712


TreeGrid Columns

<ColumnsDirective>
<ColumnDirective field='EmpID' headerText='Employee ID'
width='95'/>
<ColumnDirective field='Name' headerText='Name' width='90'/>
<ColumnDirective field='DOB' headerText='DOB' width='90'
format='yMd' textAlign='Right'/>
<ColumnDirective headerText='Tax per annum' width='90'
template={taxColTemplate} textAlign='Center'/>
<ColumnDirective headerText='One Day Index'
template={dayColTemplate} textAlign='Center' width='100'/>
<ColumnDirective headerText='Year GR' template={yearColTemplate}
textAlign='Center' width='100'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { getObject } from '@syncfusion/ej2-grids';
import { ISparklineLoadedEventArgs, SparklineComponent, SparklineTheme }
from '@syncfusion/ej2-react-charts';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { getSparkData, textdata } from './datasource';
function App() {
const load = (args: ISparklineLoadedEventArgs): void => {
let theme: string = location.hash.split('/')[1];
theme = theme ? theme : 'Material';
args.sparkline.theme = (theme.charAt(0).toUpperCase() + theme.slice(1))
as SparklineTheme;
}

const taxColTemplate = (props: object) => {


return (<SparklineComponent id={"spkline" + getObject('EmployeeID',
props)}
fill='#3C78EF'
height='50px'
load={load}
lineWidth= {2}
valueType='Numeric'
width='150px'
dataSource={getSparkData('line', +getObject('EmployeeID',
props))}/>);
}
const dayColTemplate = (props: object) => {
return (<SparklineComponent id={"spkarea" + getObject('EmployeeID',
props)}
fill='#3C78EF'
height='50px'
load={load}
negativePointColor='#f7a816'
type='Column'

Copyright © 2001 -2024 Syncfusion Inc. 713


TreeGrid Columns

valueType='Numeric'
width='150px'
dataSource={getSparkData('column', +getObject('EmployeeID', props))}/>);
}
const yearColTemplate = (props: object) => {
return (<SparklineComponent id={"spkwl" + getObject('EmployeeID',
props)}
fill='#3C78EF'
height='50px'
load={load}
negativePointColor='#f7a816'
type='WinLoss'
tiePointColor= 'darkgray'
valueType='Numeric'
width='150px'
dataSource={getSparkData('column', +getObject('EmployeeID', props))}/>);
}
return <TreeGridComponent dataSource={textdata} treeColumnIndex={0}
childMapping='Children'
allowPaging={true} height='410'>
<ColumnsDirective>
<ColumnDirective field='EmpID' headerText='Employee ID'
width='95'/>
<ColumnDirective field='Name' headerText='Name' width='90'/>
<ColumnDirective field='DOB' headerText='DOB' width='90'
format='yMd' textAlign='Right'/>
<ColumnDirective headerText='Tax per annum' width='90'
template={taxColTemplate} textAlign='Center'/>
<ColumnDirective headerText='One Day Index'
template={dayColTemplate} textAlign='Center' width='100'/>
<ColumnDirective headerText='Year GR' template={yearColTemplate}
textAlign='Center' width='100'/>
</ColumnsDirective>
<Inject services={[Page]} />
</TreeGridComponent>
};
export default App;

Using condition template


You can render the template elements based on condition.
In the following code, checkbox is rendered based on Approved field value.
APP.JSX
import { getObject } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const treegridTemplate = (props) => {
if (getObject('approved', props)) {
return (<div className="template_checkbox">
<input type="checkbox" defaultChecked/>
</div>);

Copyright © 2001 -2024 Syncfusion Inc. 714


TreeGrid Columns

}
else {
return (<div className="template_checkbox">
<input type="checkbox"/>
</div>);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective headerText='approved' width='120'
template={treegridTemplate} textAlign='Center'/>
<ColumnDirective field='progress' headerText='Progress' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { getObject } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const treegridTemplate = (props: object) => {
if(getObject('approved', props)){
return (<div className="template_checkbox">
<input type="checkbox" defaultChecked/>
</div>);
} else {
return (<div className="template_checkbox">
<input type="checkbox"/>
</div>);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective headerText='approved' width='120'
template={treegridTemplate} textAlign='Center' />
<ColumnDirective field='progress' headerText='Progress' width='80'
textAlign='Right' />
</ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 715


TreeGrid Columns

<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Complex data binding in React Treegrid component


You can achieve complex data binding in the treegrid by using the dot(.) operator in the column.field.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { complexData } from './datasource';
function App() {
return <TreeGridComponent dataSource={complexData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='assignee.firstName' headerText='Assignee'
width='90'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { complexData } from './datasource';
function App() {
return <TreeGridComponent dataSource={complexData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='assignee.firstName' headerText='Assignee'
width='90' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 716


TreeGrid Columns

Auto fit columns in React Treegrid component


The autoFitColumns method resizes the column to fit the widest cell's content without wrapping. You
can autofit a specific column at initial rendering by invoking the autoFitColumns method in dataBound
event.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, Resize,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const dataBound = () => {
if (treegrid) {
treegrid.autoFitColumns(['taskName']);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='315' allowResizing={true}
dataBound={dataBound} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='60'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='120' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='120' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='120' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Resize]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, Resize, TreeGrid,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const dataBound = () =>{
if (treegrid) {
treegrid.autoFitColumns(['taskName']);
}
}
return <TreeGridComponent dataSource={sampleData}
treeColumnIndex={1} childMapping='subtasks'
height='315' allowResizing={true} dataBound= { dataBound }
ref={g => treegrid = g}>

Copyright © 2001 -2024 Syncfusion Inc. 717


TreeGrid Columns

<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='60'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='120' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='120' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='120' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Resize]}/>
</TreeGridComponent>
};
export default App;

You can autofit all columns, by invoking autoFitColumns method without column name.
Column reorder in React Treegrid component
Reordering can be done by drag and drop of a particular column header from one index to another
index within the treegrid. To enable reordering, set the allowReordering to true.
To use reordering, inject the Reorder module in the treegrid.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, Reorder,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowReordering={true} height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Reorder]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, Reorder,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

Copyright © 2001 -2024 Syncfusion Inc. 718


TreeGrid Columns

function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowReordering={true} height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Reorder]}/>
</TreeGridComponent>
};
export default App;

You can disable reordering a particular column by setting the columns.allowReordering to false.
Reorder multiple columns
Multiple columns can be reordered at a time by using the reorderColumns method.
APP.JSX
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, Inject, Reorder,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const reorder = () => {
if (treegrid) {
treegrid.reorderColumns(['taskID', 'duration'], 'progress');
}
};
return (<div>
<ButtonComponent id='reorderMultipleCols' onClick={reorder}>Reorder Task
ID and Duration to Last</ButtonComponent>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowReordering={true} height='285' ref={g =>
treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Reorder]}/>
</TreeGridComponent></div>);

Copyright © 2001 -2024 Syncfusion Inc. 719


TreeGrid Columns

}
;
export default App;

APP.TSX
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, Inject, Reorder, TreeGrid,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const reorder = () => {
if (treegrid) {
treegrid.reorderColumns(['taskID','duration'],'progress');
}
}
return (<div>
<ButtonComponent id='reorderMultipleCols' onClick= { reorder }>Reorder
Task ID and Duration to Last</ButtonComponent>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowReordering={true} height='285' ref={g =>
treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Reorder]}/>
</TreeGridComponent></div>)
};
export default App;

Column resizing in React Treegrid component


Column width can be resized by clicking and dragging the right edge of the column header. While
dragging, the width of the respective column will be resized immediately. Each column can be auto
resized by double-clicking the right edge of the column header to fit the width of that column based on
the widest cell content. To enable column resize, set the allowResizing property to true.
To use the column resize, inject Resize module in the treegrid.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, Resize,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {

Copyright © 2001 -2024 Syncfusion Inc. 720


TreeGrid Columns

return <TreeGridComponent dataSource={sampleData} allowResizing={true}


allowSelection={false} treeColumnIndex={1} childMapping='subtasks'
height='315'>
<Inject services={[Resize]}/>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, Resize,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} allowResizing={true}
allowSelection={false} treeColumnIndex={1} childMapping='subtasks'
height='315'>
<Inject services={[Resize]}/>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

You can disable Resizing for a particular column, by specifying columns.allowResizing to false.
In RTL mode, you can click and drag the left edge of header cell to resize the column.
Min and max width
Column resize can be restricted between minimum and maximum width by defining the columns-
>minWidth and columns->maxWidth.
In the following sample, minimum and maximum width are defined for Duration, and Task Name
columns.
APP.JSX

Copyright © 2001 -2024 Syncfusion Inc. 721


TreeGrid Columns

import { ColumnDirective, ColumnsDirective, Inject, Resize,


TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowResizing={true} height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
minWidth='130' width='180' maxWidth='300'/>
<ColumnDirective field='duration' headerText='Duration'
minWidth='50' width='80' maxWidth='150' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Resize]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, Resize,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowResizing={true} height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' minWidth=
'130' width='180' maxWidth='300'/>
<ColumnDirective field='duration' headerText='Duration' minWidth=
'50' width='80' maxWidth='150' textAlign='Right' />
<ColumnDirective field='progress' headerText='Progress' width='80'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Resize]}/>
</TreeGridComponent>
};
export default App;

Resize stacked column


Stacked columns can be resized by clicking and dragging the right edge of the stacked column header.
While dragging, the width of the respective child columns will be resized at the same time. You can
disable resize for particular stacked column by setting allowResizing as false to its columns.
APP.JSX

Copyright © 2001 -2024 Syncfusion Inc. 722


TreeGrid Columns

import { ColumnDirective, ColumnsDirective, Inject, Resize,


TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
const colStack1 = [
{ field: 'orderID', headerText: 'Order ID', width: 90, textAlign:
'Right' },
{ field: 'orderName', headerText: 'Order Name', width: 170,
textAlign: 'Left' }
];
const colStack2 = [
{ field: 'Category', allowResizing: false, headerText: 'Shipment
Category', width: 150, textAlign: 'Left' },
{ field: 'shippedDate', headerText: 'Shipped Date', width: 120,
textAlign: 'Right', format: 'yMd' }
];
return <TreeGridComponent dataSource={orderData} treeColumnIndex={1}
childMapping='subtasks' allowResizing={true} height='260'>
<ColumnsDirective>
<ColumnDirective columns={colStack1} headerText='Order Details'
textAlign='Center'/>
<ColumnDirective columns={colStack2} headerText='Shipment
Details' textAlign='Center'/>
</ColumnsDirective>
<Inject services={[Resize]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnModel, ColumnsDirective, Inject, Resize,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
const colStack1: ColumnModel[] = [
{ field: 'orderID', headerText: 'Order ID', width: 90, textAlign:
'Right' },
{ field: 'orderName', headerText: 'Order Name', width: 170,
textAlign: 'Left' }
];
const colStack2: ColumnModel[] = [
{ field: 'Category', allowResizing: false, headerText: 'Shipment
Category', width: 150, textAlign: 'Left' },
{ field: 'shippedDate', headerText: 'Shipped Date', width: 120,
textAlign: 'Right', format:'yMd' }
];
return <TreeGridComponent dataSource={orderData} treeColumnIndex={1}
childMapping='subtasks' allowResizing={true} height='260'>
<ColumnsDirective>
<ColumnDirective columns={colStack1} headerText='Order Details'
textAlign='Center'/>

Copyright © 2001 -2024 Syncfusion Inc. 723


TreeGrid Columns

<ColumnDirective columns={colStack2} headerText='Shipment


Details' textAlign='Center' />
</ColumnsDirective>
<Inject services={[Resize]}/>
</TreeGridComponent>
};
export default App;

Touch interaction
When the right edge of the header cell is tapped, a floating handler will be visible over the right border
of the column. To resize the column, tap and drag the floating handler as needed.
The following screenshot represents the column resizing in touch device.
<!-- markdownlint-disable MD033 -->
<img src="../images/column-resizing.png" alt="Touch interaction image" style="width:320px;height:
620px">
<!-- markdownlint-enable MD033 -->
Column menu in React Treegrid component
The column menu has options to integrate features like sorting, filtering, and autofit. It will show a
menu with the integrated feature when users click on multiple icon of the column. To enable column
menu, you need to define the showColumnMenu property as true.
To use the column menu, inject the ColumnMenu module in the treegrid.
The default items are displayed in following table.
| Item | Description |
|-----|-----|
| SortAscending | Sort the current column in ascending order. |
| SortDescending | Sort the current column in descending order. |
| AutoFit | Auto fit the current column. |
| AutoFitAll | Auto fit all columns. |
| Filter | Show the filter option as given in filterSettings.type |
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { ColumnMenu, Filter, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const filterSettings = { type: 'Menu' };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='315' allowFiltering={true}
allowSorting={true} showColumnMenu={true} filterSettings={filterSettings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='120'
textAlign='Right'/>

Copyright © 2001 -2024 Syncfusion Inc. 724


TreeGrid Columns

<ColumnDirective field='taskName' headerText='Task Name'


width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='150' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='130' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Sort, Filter, ColumnMenu]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent }
from '@syncfusion/ej2-react-treegrid';
import { ColumnMenu, Filter, FilterSettingsModel, Sort } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const filterSettings: FilterSettingsModel = { type:'Menu' };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='315' allowFiltering={true}
allowSorting={true} showColumnMenu={true}
filterSettings={filterSettings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='120'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='150' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='130' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Sort, Filter, ColumnMenu]}/>
</TreeGridComponent>
};
export default App;

You can disable column menu for a particular column by defining the columns.showColumnMenu as
false.
Responsive columns in React Treegrid component
You can toggle column visibility based on media queries which are defined at the hideAtMedia. The Link
to the Video accepts valid Media Queries.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

Copyright © 2001 -2024 Syncfusion Inc. 725


TreeGrid Row

function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' hideAtMedia='(min-width:700px)'/>
// column hides when browser screen width lessthan 700px;
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' hideAtMedia='(max-
width:500px)'/>
// column shows when browser screen width lessthan or equalto
500px;
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='315'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' hideAtMedia='(min-width:700px)'/>
// column hides when browser screen width lessthan 700px;
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd'
textAlign='Right' type='date' hideAtMedia = '(max-
width:500px)'/>
// column shows when browser screen width lessthan or equalto
500px;
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Row
Row in React Treegrid component
The row represents record details fetched from data source.
To get start quickly with features in Row, you can check on this video:

Copyright © 2001 -2024 Syncfusion Inc. 726


TreeGrid Row

Customize rows
You can customize the appearance of a row by using the rowDataBound event. The rowDataBound
event triggers for every row. In the event handler, you can get the RowDataBoundEventArgs that
contains details of the row.
APP.JSX
import { getObject } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const rowDataBound = (args) => {
if (getObject('duration', args.data) === 0) {
args.row.style.background = '#336c12';
}
else if (getObject('duration', args.data) < 3) {
args.row.style.background = '#7b2b1d';
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' rowDataBound={rowDataBound}
enableHover={false}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { getObject, RowDataBoundEventArgs } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const rowDataBound = (args: RowDataBoundEventArgs) => {
if (getObject('duration', args.data) === 0 ) {
(args.row as HTMLTableRowElement).style.background= '#336c12';
} else if (getObject('duration', args.data) < 3) {
(args.row as HTMLTableRowElement).style.background= '#7b2b1d';
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'

Copyright © 2001 -2024 Syncfusion Inc. 727


TreeGrid Row

height='275' rowDataBound={rowDataBound} enableHover={false}>


<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Styling alternate row


You can change the treegrid's alternative rows' background color by overriding the .e-altrow class.
`css
.e-treegrid .e-altrow {
background-color: #fafafa;
}
`
Please refer the following example.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' enableHover={false}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX

Copyright © 2001 -2024 Syncfusion Inc. 728


TreeGrid Row

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from


'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' enableHover={false}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Refer to our React Tree Grid feature tour page for its groundbreaking feature representations. You can
also explore our React Tree Grid example to know how to present and manipulate data.
Row height in React Treegrid component
You can customize the row height of treegrid rows through the rowHeight property. The rowHeight
property is used to change the row height of entire treegrid rows.
In the below example, the rowHeight is set as 60px.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
export default class App extends React.Component {
render() {
return <TreeGridComponent dataSource={sampleData}
treeColumnIndex={1} childMapping='subtasks' height='275' rowHeight='60'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
}

APP.TSX

Copyright © 2001 -2024 Syncfusion Inc. 729


TreeGrid Row

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from


'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <TreeGridComponent dataSource={sampleData}
treeColumnIndex={1} childMapping='subtasks'
height='275' rowHeight='60'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
}
}

Customize row height for particular row


TreeGrid row height for particular row can be customized using the rowDataBound event by setting the
rowHeight in arguments for each row based on the requirement.
In the below example, the row height for the row with Task ID as 3 is set as 90px using the
rowDataBound event.
APP.JSX
import { getObject } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
export default class App extends React.Component {
rowDataBound(args) {
if (getObject('taskID', args.data) === 3) {
args.rowHeight = 90;
}
}
render() {
this.rowDataBound = this.rowDataBound.bind(this);
return <TreeGridComponent dataSource={sampleData}
treeColumnIndex={1} childMapping='subtasks' height='275'
rowDataBound={this.rowDataBound}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>

Copyright © 2001 -2024 Syncfusion Inc. 730


TreeGrid Row

<ColumnDirective field='duration' headerText='Duration'


width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
}

APP.TSX
import { getObject, RowDataBoundEventArgs } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public rowDataBound(args: RowDataBoundEventArgs) {
if(getObject('taskID', args.data) === 3){
args.rowHeight = 90;
}
}
public render() {
this.rowDataBound = this.rowDataBound.bind(this);
return <TreeGridComponent dataSource={sampleData}
treeColumnIndex={1} childMapping='subtasks'
height='275' rowDataBound={this.rowDataBound}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
}
}

Row template in React Treegrid component


The rowTemplate has an option to customise the look and behavior of the treegrid rows. The
rowTemplate property accepts either the template string or HTML element ID.
APP.JSX
{% raw %}
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { textdata } from './datasource';
export default class App extends React.Component {
treegridTemplate(props) {
var src = './' + props.FullName + '.png';
return (<tr>
<td className="border" style={{ paddingLeft: '18px' }}>

Copyright © 2001 -2024 Syncfusion Inc. 731


TreeGrid Row

<div>{props.EmpID}</div>
</td>
<td className="border" style={{ padding: '10px 0px 0px 20px' }}>
<div style={{ fontSize: '14px' }}>
{props.Name}
<p style={{ fontSize: '9px' }}>{props.Designation}</p>
</div>
</td>
<td className="border">
<div>
<div style={{ position: 'relative', display: 'inline-
block' }}>
<img src={src}/>
</div>
<div style={{ display: 'inline-block' }}>
<div style={{ padding: '5px'
}}>{props.Address}</div>
<div style={{ padding: '5px'
}}>{props.Country}</div>
<div style={{ padding: '5px', fontSize: '12px'
}}>{props.Contact}</div>
</div>
</div>
</td>
</tr>);
}
template = this.treegridTemplate;
render() {
return <TreeGridComponent dataSource={textdata}
childMapping='Children' rowTemplate={this.template.bind(this)}
treeColumnIndex={0} rowHeight='83' height='291'>
<ColumnsDirective>
<ColumnDirective headerText='Employee ID' width='180'
field='EmpID'></ColumnDirective>
<ColumnDirective headerText='Employee Name' width='150'
field='Name'></ColumnDirective>
<ColumnDirective headerText='Employee Details' width='350'
field='Address'></ColumnDirective>
</ColumnsDirective>
</TreeGridComponent>;
}
}
{% endraw %}

APP.TSX
{% raw %}
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { textdata } from './datasource';
export default class App extends React.Component<{}, {}>{
public treegridTemplate(props): any {
var src = './' + props.FullName + '.png';
return (<tr>
<td className="border" style={{paddingLeft:'18px'}}>

Copyright © 2001 -2024 Syncfusion Inc. 732


TreeGrid Row

<div>{props.EmpID}</div>
</td>
<td className="border" style={{padding: '10px 0px 0px 20px'}}>
<div style={{fontSize:'14px'}}>
{props.Name}
<p style={{fontSize:'9px'}}>{props.Designation}</p>
</div>
</td>
<td className="border">
<div>
<div style={{position:'relative' , display:'inline-
block'}}>
<img src ={src} />
</div>
<div style={{display:'inline-block'}}>
<div style={{padding:'5px'}}>{props.Address}</div>
<div style={{padding:'5px'}}>{props.Country}</div>
<div style={{padding:'5px' ,fontSize:
'12px'}}>{props.Contact}</div>
</div>
</div>
</td>
</tr>);
}
public template: any = this.treegridTemplate;
public render() {
return <TreeGridComponent dataSource={textdata} childMapping =
'Children' rowTemplate={this.template.bind(this)} treeColumnIndex={0}
rowHeight = '83' height='291'>
<ColumnsDirective>
<ColumnDirective headerText = 'Employee ID' width = '180'
field = 'EmpID'></ColumnDirective>
<ColumnDirective headerText = 'Employee Name' width = '150'
field = 'Name'></ColumnDirective>
<ColumnDirective headerText = 'Employee Details' width =
'350' field = 'Address'></ColumnDirective>
</ColumnsDirective>
</TreeGridComponent>
}
}
{% endraw %}

The rowTemplate property accepts only the TR element.


Row template with formatting
If the rowTemplate is used, the value cannot be formatted inside the template using the
columns.format property. In that case, a function should be defined globally to format the value and
invoke it inside the template.
APP.JSX
{% raw %}
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { textdata } from './datasource';

Copyright © 2001 -2024 Syncfusion Inc. 733


TreeGrid Row

import { Internationalization } from '@syncfusion/ej2-base';


let instance = new Internationalization();
export default class App extends React.Component {
format = (value) => {
return instance.formatDate(value, { skeleton: 'yMd', type: 'date'
});
};
treegridTemplate(props) {
var src = './' + props.FullName + '.png';
return (<tr>
<td className="border" style={{ paddingLeft: '18px' }}>
<div>{props.EmpID}</div>
</td>
<td className="border">
<div>
<div style={{ position: 'relative', display: 'inline-
block' }}>
<img src={src}/>
</div>
<div style={{ display: 'inline-block' }}>
<div style={{ padding: '5px'
}}>{props.Address}</div>
<div style={{ padding: '5px'
}}>{props.Country}</div>
<div style={{ padding: '5px', fontSize: '12px'
}}>{props.Contact}</div>
</div>
</div>
</td>
<td className="border" style={{ paddingLeft: '20px' }}>
<div>{this.format(props.DOB)}</div>
</td>
</tr>);
}
template = this.treegridTemplate;
render() {
return <TreeGridComponent dataSource={textdata}
childMapping='Children' rowTemplate={this.template.bind(this)}
treeColumnIndex={0} rowHeight='83' height='291'>
<ColumnsDirective>
<ColumnDirective headerText='Employee ID' width='180'
field='EmpID'></ColumnDirective>
<ColumnDirective headerText='Employee Details' width='350'
field='Address'></ColumnDirective>
<ColumnDirective headerText='DOB' width='150'
field='DOB'></ColumnDirective>
</ColumnsDirective>
</TreeGridComponent>;
}
}
{% endraw %}

APP.TSX
{% raw %}

Copyright © 2001 -2024 Syncfusion Inc. 734


TreeGrid Row

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from


'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { textdata } from './datasource';
import { Internationalization } from '@syncfusion/ej2-base';
let instance: Internationalization = new Internationalization();
interface DateFormat extends Window {
format?: Function;
}
export default class App extends React.Component<{}, {}>{
public format = (value: Date) => {
return instance.formatDate(value, { skeleton: 'yMd', type: 'date'
});
}
public treegridTemplate(props): any {
var src = './' + props.FullName + '.png';
return (<tr>
<td className="border" style={{paddingLeft:'18px'}}>
<div>{props.EmpID}</div>
</td>
<td className="border">
<div>
<div style={{position:'relative' , display:'inline-
block'}}>
<img src ={src} />
</div>
<div style={{display:'inline-block'}}>
<div style={{padding:'5px'}}>{props.Address}</div>
<div style={{padding:'5px'}}>{props.Country}</div>
<div style={{padding:'5px' ,fontSize:
'12px'}}>{props.Contact}</div>
</div>
</div>
</td>
<td className="border" style={{paddingLeft:'20px'}}>
<div>{this.format(props.DOB)}</div>
</td>
</tr>);
}
public template: any = this.treegridTemplate;
public render() {
return <TreeGridComponent dataSource={textdata} childMapping =
'Children' rowTemplate={this.template.bind(this)} treeColumnIndex={0}
rowHeight = '83' height='291'>
<ColumnsDirective>
<ColumnDirective headerText = 'Employee ID' width = '180'
field = 'EmpID'></ColumnDirective>
<ColumnDirective headerText = 'Employee Details' width =
'350' field = 'Address'></ColumnDirective>
<ColumnDirective headerText = 'DOB' width = '150' field =
'DOB'></ColumnDirective>
</ColumnsDirective>
</TreeGridComponent>
}
}
{% endraw %}

Copyright © 2001 -2024 Syncfusion Inc. 735


TreeGrid Row

Limitations
Row template feature is not compatible with all the features which are available in treegrid and it has
limited features support. Here we have listed out the features which are compatible with row template
feature.

• Filtering
• Paging
• Sorting
• Scrolling
• Searching
• Rtl
• Context Menu
• State Persistence

Detail template in React Treegrid component


The detail template provides additional information about a particular row. By expanding the parent
row the child rows are expanded along with their detail template. The detailTemplate property accepts
either the template string or HTML element ID.
To use detail template, inject the DetailRow module in the TreeGrid.
APP.JSX
{% raw %}
import { ColumnDirective, ColumnsDirective, TreeGridComponent, DetailRow,
Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { textdata } from './datasource';
import { Internationalization } from '@syncfusion/ej2-base';
let instance = new Internationalization();
export default class App extends React.Component {
format = (value) => {
return instance.formatDate(value, { skeleton: 'yMd', type: 'date'
});
};
detailtemplate(props) {
var imag = './' + props.FullName + '.png';
return (<div>
<div style={{ position: 'relative', display: 'inline-block',
float: 'left', padding: '5px 4px 2px 27px' }}>
<img src={imag}/>
</div>
<div style={{ paddingLeft: '10px', display: 'inline-block',
width: '66%', fontSize: '13px', fontFamily: 'Segoe UI' }}>
<div className="e-description" style={{ marginTop: '5px'
}}>
<b>{props.Name}</b> was born on
{this.format(props.DOB)}. Now lives at {props.Address}, {props.Country}.
{props.Name} holds a position of <b>{props.Designation}</b> in our WA
department, (Seattle USA).</div>
<div className="e-description" style={{ marginTop: '5px'
}}>

Copyright © 2001 -2024 Syncfusion Inc. 736


TreeGrid Row

<b style={{ marginRight: '10px'


}}>Contact:</b>{props.Contact}
</div>
</div>
</div>);
}
template = this.detailtemplate;
render() {
return (<div className='control-pane'>
<div className='control-section'>
<TreeGridComponent dataSource={textdata}
childMapping='Children' detailTemplate={this.template.bind(this)}
treeColumnIndex={0}>
<ColumnsDirective>
<ColumnDirective headerText='Full Name'
width='170' field='Name'></ColumnDirective>
<ColumnDirective field='Designation'
headerText='Designation' width='180'></ColumnDirective>
<ColumnDirective field='EmpID'
headerText='EmployeeID' width='110'></ColumnDirective>
<ColumnDirective field='Country'
headerText='Country' width='90'></ColumnDirective>
</ColumnsDirective>
<Inject services={[DetailRow]}/>
</TreeGridComponent>
</div>
</div>);
}
}
{% endraw %}

APP.TSX
{% raw %}
import { ColumnDirective, ColumnsDirective, TreeGridComponent, DetailRow,
Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { textdata } from './datasource';
import { Internationalization } from '@syncfusion/ej2-base';
let instance: Internationalization = new Internationalization();
interface DateFormat extends Window {
format?: Function;
}
export default class App extends React.Component<{}, {}>{
public format = (value: Date) => {
return instance.formatDate(value, { skeleton: 'yMd', type: 'date'
});
}
public detailtemplate(props): any {
var imag = './' + props.FullName + '.png';
return (
<div>
<div style={{ position: 'relative', display: 'inline-block',
float: 'left', padding: '5px 4px 2px 27px' }} >
<img src={imag} />
</div>

Copyright © 2001 -2024 Syncfusion Inc. 737


TreeGrid Row

<div style={{ paddingLeft: '10px', display: 'inline-block',


width: '66%', fontSize: '13px', fontFamily: 'Segoe UI' }}>
<div className="e-description" style={{ marginTop: '5px'
}}>
<b>{props.Name}</b> was born on
{this.format(props.DOB)}. Now lives at {props.Address}, {props.Country}.
{props.Name} holds a position of <b>{props.Designation}</b> in our WA
department, (Seattle USA).</div>
<div className="e-description" style={{ marginTop: '5px'
}}>
<b style={{ marginRight: '10px'
}}>Contact:</b>{props.Contact}
</div>
</div>
</div>
);
}
public template: any = this.detailtemplate;
render() {
return (
<div className='control-pane'>
<div className='control-section'>
<TreeGridComponent dataSource={textdata}
childMapping='Children' detailTemplate={this.template.bind(this)}
treeColumnIndex={0}>
<ColumnsDirective>
<ColumnDirective headerText='Full Name'
width='170' field='Name'></ColumnDirective>
<ColumnDirective field='Designation'
headerText='Designation' width='180'></ColumnDirective>
<ColumnDirective field='EmpID'
headerText='EmployeeID' width='110'></ColumnDirective>
<ColumnDirective field='Country'
headerText='Country' width='90'></ColumnDirective>
</ColumnsDirective>
<Inject services={[DetailRow]} />
</TreeGridComponent>
</div>
</div>
)
}
}
{% endraw %}

Row drag and drop in React Treegrid component


The TreeGrid rows can be reordered, dropped to another TreeGrid or custom control by enabling the
allowRowDragAndDrop to true.
To use row drag and drop, inject the RowDD module in the TreeGrid.
Drag and drop within Tree Grid
The TreeGrid row drag and drop allows you to drag and drop TreeGrid rows on the same TreeGrid using
drag icon. To enable row drag and drop, set the allowRowDragAndDrop to true. It provides the way to
drop the row above, below or child to the target row with respective to the target row position.

Copyright © 2001 -2024 Syncfusion Inc. 738


TreeGrid Row

INDEX.JSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, RowDD
} from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
class App extends React.Component {
selectionSettings = { type: 'Multiple' };
render() {
return <TreeGridComponent dataSource={sampleData}
allowRowDragAndDrop={true} treeColumnIndex={1} childMapping='subtasks'
height='270' selectionSettings={this.selectionSettings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[RowDD]}/>
</TreeGridComponent>;
}
}
ReactDOM.render(<App />, document.getElementById('treegrid'));

INDEX.TSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
RowDD, RowDropSettingsModel, SelectionSettingsModel } from '@syncfusion/ej2-
react-treegrid';
import { sampleData } from './datasource';
class App extends React.Component<{}, {}>{
public selectionSettings: SelectionSettingsModel = { type: 'Multiple' };
render() {
return <TreeGridComponent dataSource={sampleData}
allowRowDragAndDrop={true} treeColumnIndex={1} childMapping='subtasks'
height='270' selectionSettings={this.selectionSettings} >
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[RowDD]}/>
</TreeGridComponent>
}

Copyright © 2001 -2024 Syncfusion Inc. 739


TreeGrid Row

}
ReactDOM.render(<App />, document.getElementById('treegrid'));

* Selection feature must be enabled for row drag and drop.


* Multiple rows can be selected by clicking and dragging inside the treegrid.
* For multiple row selection, the type property must be set to multiple.
* The isPrimaryKey property is necessary to perform row drag and drop operation.
Drag and drop to another Tree Grid
To drag and drop between two TreeGrid, enable the allowRowDragAndDrop property and specify the
target TreeGrid ID in targetID property of rowDropSettings.
INDEX.JSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, RowDD, ColumnsDirective, ColumnDirective, Inject
} from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
class Source extends React.Component {
data = sampleData;
rowDropSettings = { targetID: 'DestGrid' };
selectionSettings = { type: 'Multiple' };
style = { marginBottom: '20px' };
render() {
return <TreeGridComponent id='TreeGrid' dataSource={sampleData}
treeColumnIndex={1} allowRowDragAndDrop={true}
rowDropSettings={this.rowDropSettings}
selectionSettings={this.selectionSettings} childMapping='subtasks'
height='275'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[RowDD]}/>
</TreeGridComponent >;
}
}
class Target extends React.Component {
data = [];
rowDropSettings = { targetID: 'TreeGrid' };
selectionSettings = { type: 'Multiple' };
render() {
return <TreeGridComponent treeColumnIndex={1} id='DestGrid'
allowRowDragAndDrop={true} rowDropSettings={this.rowDropSettings}
selectionSettings={this.selectionSettings} childMapping='subtasks'
height='275'>
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 740


TreeGrid Row

<ColumnDirective field='taskID' headerText='Task ID' width='90'


textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[RowDD]}/>
</TreeGridComponent>;
}
}

function App() {
return <div>
<Source></Source>
<Target></Target>
</div>;
}
ReactDOM.render(<App />, document.getElementById('treegrid'));

INDEX.TSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, RowDD, ColumnsDirective, ColumnDirective,
RowDropSettingsModel, SelectionSettingsModel, Inject } from
'@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
class Source extends React.Component<{}, {}>{
public data: Object[] = sampleData;
public rowDropSettings: RowDropSettingsModel = { targetID: 'DestGrid' };
public selectionSettings: SelectionSettingsModel = { type: 'Multiple' };
public style = { marginBottom: '20px' };
render() {
return <TreeGridComponent id='TreeGrid' dataSource={sampleData}
treeColumnIndex={1} allowRowDragAndDrop={true}
rowDropSettings={this.rowDropSettings}
selectionSettings={this.selectionSettings}
childMapping='subtasks' height='275'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[RowDD]}/>
</TreeGridComponent>
}
}
class Target extends React.Component<{}, {}>{

Copyright © 2001 -2024 Syncfusion Inc. 741


TreeGrid Row

public data: Object[] = [];


public rowDropSettings: RowDropSettingsModel = { targetID: 'TreeGrid' };
public selectionSettings: SelectionSettingsModel = { type: 'Multiple' };
render() {
return <TreeGridComponent treeColumnIndex={1} id='DestGrid'
allowRowDragAndDrop={true}
rowDropSettings={this.rowDropSettings}
selectionSettings={this.selectionSettings}
childMapping='subtasks' height='275'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[RowDD]}/>
</TreeGridComponent>
}
}
function App(){
return <div>
<Source></Source>
<Target></Target>
</div>
}
ReactDOM.render(<App />, document.getElementById('treegrid'));

Drag and drop events


The following events are triggered while drag and drop the treegrid rows.
rowDragStartHelper - Triggers when click the drag icon or treegrid row and this event is used to
customize the drag element based on user criteria.<br/>
rowDragStart -Triggers when starts to drag the treegrid row. <br/>
rowDrag - Triggers while dragging the treegrid row. <br/>
rowDrop - Triggers when a drag element is dropped on the target element. <br/>
Prevent reordering a row as child to another row
You can prevent the default behavior of dropping rows as children to the target by setting the cancel
property to true in rowDrop event argument. You can also change the drop position after cancelling
using reorderRows method.
In the below example drop action is cancelled and dropped above to target row.
INDEX.JSX
import * as React from 'react';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, RowDD
} from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
class App extends React.Component {

Copyright © 2001 -2024 Syncfusion Inc. 742


TreeGrid Row

rowDrop(args) {
if (args.dropPosition == 'middleSegment') {
args.cancel = true;
this.treegridInstance.reorderRows([args.fromIndex],
args.dropIndex, 'above');
}
render();
{
return <TreeGridComponent ref={(treegrid) =>
(this.treegridInstance = treegrid)} allowRowDragAndDrop={true}
dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
height='270' rowDrop={this.rowDrop.bind(this)}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[RowDD]}/>
</TreeGridComponent>;
}
}
}
ReactDOM.render(<App />, document.getElementById('treegrid'));

INDEX.TSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
RowDD, RowDropSettingsModel, SelectionSettingsModel } from '@syncfusion/ej2-
react-treegrid';
import { sampleData } from './datasource';
class App extends React.Component<{}, {}>{
public treegridInstance: TreeGridComponent;
public rowDrop(args: any) {
if (args.dropPosition == 'middleSegment') {
args.cancel = true;
this.treegridInstance.reorderRows([args.fromIndex],
args.dropIndex, 'above');
}
}
render() {
return <TreeGridComponent ref={(treegrid) => (this.treegridInstance
= treegrid)} allowRowDragAndDrop={true} dataSource={sampleData}
treeColumnIndex={1} childMapping='subtasks' height='270'
rowDrop={this.rowDrop.bind(this)} >
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 743


TreeGrid Row

<ColumnDirective field='duration' headerText='Duration'


width='80' textAlign='Right' />
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[RowDD]}/>
</TreeGridComponent>
}
}
ReactDOM.render(<App />, document.getElementById('treegrid'));

Indent in React Treegrid component


The Indent and Outdent feature will help to change the hierarchy level of rows in tree grid. The indent
action moves the selected row as the last child of its previous row, whereas the outdent action moves
the selected row as a sibling to its parent row.
To use the indent and outdent feature, inject the RowDD module in the Tree Grid. The tree grid toolbar
has the built-in items to execute indent and outdent actions. Define this by using the toolbar property.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, RowDD, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['Indent', 'Outdent'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' selectedRowIndex={2} height='270'
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='priority' headerText='Priority'
width='90'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Toolbar, RowDD]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, RowDD, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

Copyright © 2001 -2024 Syncfusion Inc. 744


TreeGrid Row

function App() {
const toolbarOptions: ToolbarItems[] = ['Indent', 'Outdent'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' selectedRowIndex={2} height='270'
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='priority' headerText='Priority'
width='90'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Toolbar, RowDD]}/>
</TreeGridComponent>
};
export default App;

Indent/Outdent a row programmatically


You can change the hierarchy level of record programmatically using indent and outdent methods.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, RowDD } from '@syncfusion/ej2-react-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const Indenting = () => {
treegrid.indent(treegrid.current.getCurrentViewRecords()[2]);
};
const Outdenting = () => {
treegrid.outdent(treegrid.current.getCurrentViewRecords()[2]);
};
return (<div>
<ButtonComponent onClick={Indenting}>
Indent
</ButtonComponent>
<ButtonComponent onClick={Outdenting}>
Outdent
</ButtonComponent>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' selectedRowIndex={2} height='270' ref={g => treegrid
= g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='priority' headerText='Priority'
width='90'/>

Copyright © 2001 -2024 Syncfusion Inc. 745


TreeGrid Row

<ColumnDirective field='duration' headerText='Duration'


width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[RowDD]}/>
</TreeGridComponent>
</div>);
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, RowDD } from '@syncfusion/ej2-react-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const Indenting = () => {
treegrid.indent((treegrid.current as
any).getCurrentViewRecords()[2]);
}
const Outdenting = () => {
treegrid.outdent((treegrid.current as
any).getCurrentViewRecords()[2]);
}
return (<div>
<ButtonComponent onClick={Indenting}>
Indent
</ButtonComponent>
<ButtonComponent onClick={Outdenting}>
Outdent
</ButtonComponent>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' selectedRowIndex={2} height='270' ref={g => treegrid
= g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='priority' headerText='Priority'
width='90' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[RowDD]}/>
</TreeGridComponent>
</div>);
};
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 746


TreeGrid Cell

Cell
Cell in React Treegrid component
Customize cell styles
The appearance of cells can be customized by using the queryCellInfo event. The queryCellInfo event
triggers for every cell. In that event handler, you can get QueryCellInfoEventArgs that contains the
details of the cell.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const customizeCell = (args) => {
const cell = args.cell;
if (args.column.field === 'progress' && +cell.innerHTML > 90 &&
+cell.innerHTML <= 100) {
cell.setAttribute('style', 'background-
color:#336c12;color:white;');
}
else if (+cell.innerHTML > 20 && args.column.field === 'progress') {
cell.setAttribute('style', 'background-
color:#7b2b1d;color:white;');
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='300' queryCellInfo={customizeCell}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { QueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { Column, ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const customizeCell = (args: QueryCellInfoEventArgs) => {
const cell : HTMLTableCellElement = args.cell as
HTMLTableCellElement;

Copyright © 2001 -2024 Syncfusion Inc. 747


TreeGrid Cell

if ((args.column as Column).field === 'progress' && +cell.innerHTML


> 90 &&
+cell.innerHTML <= 100) {
cell.setAttribute('style', 'background-
color:#336c12;color:white;');
} else if (+cell.innerHTML > 20 && (args.column as Column).field ===
'progress') {
cell.setAttribute('style', 'background-
color:#7b2b1d;color:white;');
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='300'
queryCellInfo={customizeCell}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Custom attributes
You can customize the treegrid cells by adding a CSS class to the customAttribute property of the
column.
`css
.e-attr {
background: #d7f0f4;
}
`
`ts
const customAttr = {class: 'e-attr'};
<ColumnDirective
field="taskID" headerText="Task ID" customAttributes={customAttr} width="90" textAlign='Right'/>
`
In the below example, we have customized the cells of TaskID and StartDate columns.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';

Copyright © 2001 -2024 Syncfusion Inc. 748


TreeGrid Cell

import './custom.css';
import { sampleData } from './datasource';
function App() {
const customAttr = { class: 'e-attr' };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='300'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
customAttributes={customAttr} width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
customAttributes={customAttr} width='90' format='yMd' textAlign='Right'
type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const customAttr = {class: 'e-attr'};
return <TreeGridComponent dataSource={sampleData}
treeColumnIndex={1} childMapping='subtasks' height='300'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
customAttributes={customAttr} width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180' />
<ColumnDirective field='startDate' headerText='Start Date'
customAttributes={customAttr} width='90' format='yMd' textAlign='Right'
type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

TreeGrid lines
The gridLines have option to display cell border and it can be defined by the gridLines property.
The available modes of grid lines are:
| Modes | Actions |
|-------|---------|

Copyright © 2001 -2024 Syncfusion Inc. 749


TreeGrid Cell

| Both | Displays both the horizontal and vertical grid lines.|


| None | No grid lines are displayed.|
| Horizontal | Displays the horizontal grid lines only.|
| Vertical | Displays the vertical grid lines only.|
| Default | Displays grid lines based on the theme.|
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='300' gridLines='Both'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='300' gridLines='Both'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 750


TreeGrid Cell

By default, the treegrid renders with Default mode.


You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Content in React Treegrid component
The HTML tags can be displayed in the TreeGrid header and content by enabling the disableHtmlEncode
property.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { htmlData } from './datasource';
function App() {
return <TreeGridComponent dataSource={htmlData} treeColumnIndex={1}
childMapping='subtasks' height='300'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='<span> Task ID
</span>' width='160' textAlign='Right' disableHtmlEncode={true}/>
<ColumnDirective field='taskName' headerText='<span> Task Name
</span>' width='180' disableHtmlEncode={false}/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { htmlData } from './datasource';
function App() {
return <TreeGridComponent dataSource={htmlData} treeColumnIndex={1}
childMapping='subtasks' height='300'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='<span> Task ID
</span>' width='160' textAlign='Right' disableHtmlEncode={true}/>
<ColumnDirective field='taskName' headerText='<span> Task Name
</span>' width='180' disableHtmlEncode={false}/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 751


TreeGrid Cell

Auto wrap in React Treegrid component


The auto wrap allows the cell content of the treegrid to wrap to the next line when it exceeds the
boundary of the cell width. The Cell Content wrapping works based on the position of white space
between words. To enable auto wrap, set the allowTextWrap property to true. You can configure the
auto wrap mode by setting the textWrapSettings.wrapMode property.
There are three types of wrapMode. They are:

• Both: This value is set by default. Auto wrap will be enabled for both the content and the
header.
• Header: Auto wrap will be enabled only for the header.
• Content: Auto wrap will be enabled only for the content.

Note: When a column width is not specified, then auto wrap of columns will be adjusted with respect to
the treegrid's width.
In the following example, the textWrapSettings.wrapMode is set to Content.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings = { wrapMode: 'Content' };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='300' allowTextWrap={true}
textWrapSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='90'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { TextWrapSettingsModel } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings: TextWrapSettingsModel = { wrapMode: 'Content' };

Copyright © 2001 -2024 Syncfusion Inc. 752


TreeGrid Cell

return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}


childMapping='subtasks' height='300' allowTextWrap={true}
textWrapSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='90'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Clip mode in React Treegrid component


The clip mode provides options to display its overflow cell content and it can be defined by the
columns.clipMode property.
There are three types of clipMode. They are:

• Clip: Truncates the cell content when it overflows its area.


• Ellipsis: Displays ellipsis when the cell content overflows its area.
• EllipsisWithTooltip: Displays ellipsis when the cell content overflows its area, also it will display
the tooltip while hover on ellipsis is applied.

APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { complexData } from './datasource';
function App() {
return <TreeGridComponent dataSource={complexData} treeColumnIndex={1}
childMapping='subtasks' height='300' gridLines='Both'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='70' clipMode='Clip'/>
<ColumnDirective field='assignee.firstName' headerText='Assignee'
width='30' textAlign='Right' clipMode='Ellipsis'/>
<ColumnDirective field='priority' headerText='Priority' width='30'
textAlign='Right' clipMode='EllipsisWithTooltip'/>
<ColumnDirective field='duration' headerText='Duration' width='30'
textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 753


TreeGrid Editing

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { complexData } from './datasource';
function App() {
return <TreeGridComponent dataSource={complexData} treeColumnIndex={1}
childMapping='subtasks' height='300' gridLines='Both'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='70' clipMode='Clip'/>
<ColumnDirective field='assignee.firstName' headerText='Assignee'
width='30' textAlign='Right' clipMode='Ellipsis' />
<ColumnDirective field='priority' headerText='Priority' width='30'
textAlign='Right' clipMode='EllipsisWithTooltip' />
<ColumnDirective field='duration' headerText='Duration' width='30'
textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

By default, columns.clipMode value is Ellipsis.


Editing
Edit in React Treegrid component
The TreeGrid component has options to dynamically insert, delete and update records. Editing feature is
enabled by using editSettings property and it requires a primary key column for CRUD operations. To
define the primary key, set columns.isPrimaryKey to Link to the Video in particular column.
To get start quickly with CRUD functionalities, you can check on this video:
To use CRUD, inject the Edit module in treegrid.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>

Copyright © 2001 -2024 Syncfusion Inc. 754


TreeGrid Editing

<ColumnDirective field='taskName' headerText='Task Name'


width='180'/>
<ColumnDirective field='priority' headerText='Priority'
width='90'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, EditSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Edit, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270'
editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='priority' headerText='Priority' width='90'
/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit]}/>
</TreeGridComponent>
};
export default App;

* You can disable editing for a particular column, by specifying columns.allowEditing to false.
Toolbar with edit option
The treegrid toolbar has the built-in items to execute Editing actions. You can define this by using the
toolbar property.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 755


TreeGrid Editing

import * as React from 'react';


import { sampleData } from './datasource';
function App() {
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Row'
};
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='priority' headerText='Priority'
width='90'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, EditSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Edit, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Row'
};
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete',
'Update', 'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270'
editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='priority' headerText='Priority' width='90'
/>

Copyright © 2001 -2024 Syncfusion Inc. 756


TreeGrid Editing

<ColumnDirective field='duration' headerText='Duration' width='80'


textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;

Adding row position


The TreeGrid control provides the support to add the new row in the top, bottom, above selected row,
below selected row and child position of tree grid content using editSettings.newRowPosition property.
By default, a new row will be added at the top of the treegrid.
The following examples shows how to set new row position as Child in tree grid.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell',
newRowPosition: 'Child'
};
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 757


TreeGrid Editing

import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from


'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell',
newRowPosition: 'Child'
};
const toolbarOptions: ToolbarItems[] = ['Add', 'Delete', 'Update',
'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270'
editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;

Confirmation messages
Delete confirmation
The delete confirm dialog can be shown when deleting a record by defining the
showDeleteConfirmDialog as true
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell',
showDeleteConfirmDialog: true
};
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];

Copyright © 2001 -2024 Syncfusion Inc. 758


TreeGrid Editing

return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}


childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell',
showDeleteConfirmDialog: true
};
const toolbarOptions: ToolbarItems[] = ['Add', 'Delete', 'Update',
'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270'
editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 759


TreeGrid Editing

The showDeleteConfirmDialog supports all type of edit modes.


Default column values on add new
The treegrid provides an option to set the default value for the columns when adding a new record in it.
To set a default value for the particular column by defining the columns.defaultValue.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell'
};
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' textAlign='Right' editType='datepickeredit' format='yMd'
type='date'/>
<ColumnDirective field='priority' headerText='Priority'
width='110' editType='dropdownedit' defaultValue='Normal'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell'

Copyright © 2001 -2024 Syncfusion Inc. 760


TreeGrid Editing

};
const toolbarOptions: ToolbarItems[] = ['Add', 'Delete', 'Update',
'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270'
editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' textAlign='Right' editType='datepickeredit' format='yMd'
type='date' />
<ColumnDirective field='priority' headerText='Priority'
width='110' editType='dropdownedit' defaultValue='Normal' />
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;

Disable editing for particular column


You can disable editing for particular columns by using the columns.allowEditing.
In the following demo, editing is disabled for the Start Date column.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell'
};
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' allowEditing={false} textAlign='Right' editType='datepickeredit'
format='yMd' type='date'/>
<ColumnDirective field='priority' headerText='Priority'
width='110' editType='dropdownedit'/>
</ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 761


TreeGrid Editing

<Inject services={[Edit, Toolbar]}/>


</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell'
};
const toolbarOptions: ToolbarItems[] = ['Add', 'Delete', 'Update',
'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270'
editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' allowEditing={false} textAlign='Right' editType='datepickeredit'
format='yMd' type='date' />
<ColumnDirective field='priority' headerText='Priority'
width='110' editType='dropdownedit' />
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;

Troubleshoot: Editing works only for first row


The Editing functionalities can be performed based upon the primary key value of the selected row.
If column.primaryKey is not defined in the treegrid, then edit or delete action take places the first row.
You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Edit types in React Treegrid component
Cell edit type and its params
The columns.editType is used to customize the edit type of the particular column. You can set the
columns.editType based on data type of the column.

Copyright © 2001 -2024 Syncfusion Inc. 762


TreeGrid Editing

• numericedit - NumericTextBox component for integers, double, and decimal data types.
• defaultedit - TextBox component for string data type.
• dropdownedit - DropDownList component for list data type.
• booleanedit - CheckBox component for boolean data type.
• datepickeredit - DatePicker component for date data type.
• datetimepickeredit - DateTimePicker component for date time data type.

Also, you can customize model of the columns.editType component through the columns.edit.params.
The following table describes cell edit type component and their corresponding edit params of the
column.
Component |Example
NumericTextBox | params: { decimals: 2, value: 5 }
TextBox | -
DropDownList | params: { value: 'Germany' }
Checkbox | params: { checked: true}
DatePicker | params: { format:'dd.MM.yyyy' }
DateTimePicker | params: { value: new Date() }
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Row' };
const format = { type: 'dateTime', format: 'M/d/y hh:mm a' };
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const datetimeParams = { params: { format: 'M/d/y hh:mm a' } };
const numericParams = { params: { format: 'n' } };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='100'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180' editType='stringedit'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='180' textAlign='Right' edit={datetimeParams}
editType='datetimepickeredit' format={format}/>
<ColumnDirective field='approved' headerText='Approved'
width='110' textAlign='Right' editType='booleanedit' type='boolean'
displayAsCheckBox={true}/>
<ColumnDirective field='progress' headerText='Progress'
textAlign='Right' width='120' editType='numericedit' edit={numericParams}/>

Copyright © 2001 -2024 Syncfusion Inc. 763


TreeGrid Editing

<ColumnDirective field='priority' headerText='Priority'


width='110' editType='dropdownedit'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { IEditCell } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = { allowEditing: true,
allowAdding: true, allowDeleting: true, mode: 'Row' };
const format: any = {type:'dateTime', format:'M/d/y hh:mm a'};
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete',
'Update', 'Cancel'];
const datetimeParams: IEditCell = { params: { format: 'M/d/y hh:mm a' }
};
const numericParams: IEditCell = { params: { format: 'n' } };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='100'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180' editType= 'stringedit'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='180' textAlign='Right' edit={datetimeParams}
editType='datetimepickeredit' format={format} />
<ColumnDirective field='approved' headerText='Approved'
width='110' textAlign='Right' editType='booleanedit' type='boolean'
displayAsCheckBox={true} />
<ColumnDirective field='progress' headerText='Progress'
textAlign='Right' width='120' editType='numericedit' edit={numericParams} />
<ColumnDirective field='priority' headerText='Priority'
width='110' editType='dropdownedit' />
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;

If edit type is not defined in the column, then it will be considered as the stringedit type (Textbox
component).

Copyright © 2001 -2024 Syncfusion Inc. 764


TreeGrid Editing

Cell edit template


The cell edit template is used to add a custom component for a particular column by invoking the
following functions:

• create - It is used to create the element at time of initialization.


• write - It is used to create custom component or assign default value at time of editing.
• read - It is used to read the value from component at time of save.
• destroy - It is used to destroy the component.

APP.JSX
import { DataManager } from '@syncfusion/ej2-data';
import { AutoComplete } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let elem;
let autoCompleteobj;
let treegridObj;
const editOptions = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Cell', newRowPosition: 'Below' };
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
const editTemplate = {
create: () => {
elem = document.createElement('input');
return elem;
},
destroy: () => {
autoCompleteobj.destroy();
},
read: () => {
return autoCompleteobj.value;
},
write: (args) => {
if (treegridObj) {
autoCompleteobj = new AutoComplete({
dataSource: new
DataManager(treegridObj.grid.dataSource),
fields: { value: 'taskName' },
value: args.rowData[args.column.field]
});
autoCompleteobj.appendTo(elem);
}
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='400' editSettings={editOptions}
toolbar={toolbarOptions} ref={g => treegridObj = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='100'
textAlign='Right' isPrimaryKey={true}/>

Copyright © 2001 -2024 Syncfusion Inc. 765


TreeGrid Editing

<ColumnDirective field='taskName' headerText='Task Name'


width='180' editType='stringedit' edit={editTemplate}/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
{% raw %}
import { DataManager } from '@syncfusion/ej2-data';
import { AutoComplete } from '@syncfusion/ej2-dropdowns';
import { IEditCell } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Column, Edit, EditSettingsModel, Toolbar, ToolbarItems, TreeGrid }
from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let elem: HTMLElement;
let autoCompleteobj: AutoComplete;
let treegridObj: TreeGridComponent;
const editOptions: EditSettingsModel = { allowEditing: true,
allowAdding: true, allowDeleting: true, mode: 'Cell', newRowPosition:
'Below' };
const toolbarOptions: ToolbarItems[] = ['Add', 'Delete', 'Update',
'Cancel'];
const editTemplate : IEditCell = {
create:()=>{
elem = document.createElement('input');
return elem;
},
destroy:()=>{
autoCompleteobj.destroy();
},
read:()=>{
return autoCompleteobj.value;
},
write:(args:{rowData: object, column: Column})=>{
if (treegridObj) {
autoCompleteobj = new AutoComplete({
dataSource: new DataManager(treegridObj.grid.dataSource
as object[]),
fields: { value: 'taskName' },
value: args.rowData[args.column.field]
});
autoCompleteobj.appendTo(elem);
}

Copyright © 2001 -2024 Syncfusion Inc. 766


TreeGrid Editing

}};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='400' editSettings={editOptions} toolbar={toolbarOptions}
ref={g => treegridObj = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='100'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180' editType= 'stringedit' edit={editTemplate}/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;
{% endraw %}

Cell editing in React Treegrid component


In Cell edit mode, when you double click on a cell, it is changed to edit state. You can change the cell
value and save to the data source. To enable Cell edit, set the editSettings.mode as Cell.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell',
newRowPosition: 'Below'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit]}/>
</TreeGridComponent>;

Copyright © 2001 -2024 Syncfusion Inc. 767


TreeGrid Editing

}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell',
newRowPosition: 'Below'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='270' editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit]}/>
</TreeGridComponent>
};
export default App;

Cell edit mode is default mode of editing.


Row editing in React Treegrid component
In Row edit mode, when you start editing the currently selected record, the entire row is changed to
edit state. You can change the cell values of the row and save edited data to the data source. To enable
Row edit, set the editSettings.mode as Row.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = {
allowAdding: true,

Copyright © 2001 -2024 Syncfusion Inc. 768


TreeGrid Editing

allowDeleting: true,
allowEditing: true,
mode: 'Row'
};
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Row'
};
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete',
'Update', 'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='270' editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 769


TreeGrid Editing

<Inject services={[Edit, Toolbar]}/>


</TreeGridComponent>
};
export default App;

Dialog editing in React Treegrid component


In Dialog edit mode, when you start editing the currently selected row, data will be shown on a dialog.
You can change the cell values and save edited data to the data source. To enable Dialog edit, set the
editSettings.mode as Dialog.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Dialog'
};
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = {

Copyright © 2001 -2024 Syncfusion Inc. 770


TreeGrid Editing

allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Dialog'
};
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete',
'Update', 'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='270' editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>
};
export default App;

Batch editing in React Treegrid component


In Batch edit mode, when you double-click on the treegrid cell, the target cell goes into edit state. You
can bulk save (added, changed and deleted data in the single request) to data source by clicking on the
toolbar's Update button or by externally invoking the batchSave method. To enable Batch edit, set the
editSettings.mode as Batch.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Batch',
};
const toolbarOptions = ['Add', 'Update', 'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>

Copyright © 2001 -2024 Syncfusion Inc. 771


TreeGrid Editing

<ColumnDirective field='startDate' headerText='Start Date'


width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Batch',
};
const toolbarOptions: ToolbarItems[] = ['Add', 'Update', 'Cancel'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='270' editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>
};
export default App;

Template editing in React Treegrid component


Dialog template
The dialog template editing provides an option to customize the default behavior of dialog editing. Using
the dialog template, you can render your own editors by defining the editSettings.mode as Link to the
Video and template as SCRIPT element ID or HTML string which holds the template.

Copyright © 2001 -2024 Syncfusion Inc. 772


TreeGrid Editing

In some cases, you need to add the new field editors in the dialog which are not present in the column
model. In that situation, the dialog template will help you to customize the default edit dialog.
For quick details with dialog template, you can check on this video:
In the following sample, treegrid enabled with dialog template editing.
APP.JSX
import { setValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
import { DialogFormTemplate } from './template';
function App() {
let treegrid;
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const dialogTemplate = (props) => {
const obj = [props, treegrid];
return (<DialogFormTemplate {...obj}/>);
};
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Dialog',
template: dialogTemplate
};
const actionComplete = (args) => {
if ((args.requestType === 'beginEdit' || args.requestType ===
'add')) {
// Add Validation Rules
const form = args.form;
form.ej2_instances[0].addRules('progress', { max: 100 });
if (args.requestType === 'beginEdit') {
form.elements.namedItem('taskName').focus();
}
}
};
const actionBegin = (args) => {
if (args.requestType === 'save') {
// cast string to integer value.
const val = args.form
.querySelector("#progress").value;
setValue('data.progress', parseFloat(val), args);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions} ref={g => treegrid = g} actionBegin={actionBegin}
actionComplete={actionComplete}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>

Copyright © 2001 -2024 Syncfusion Inc. 773


TreeGrid Editing

<ColumnDirective field='startDate' headerText='Start Date'


width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { setValue } from '@syncfusion/ej2-base';
import { DialogEditEventArgs } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
import { IOrderModel } from './orderModel';
import { DialogFormTemplate } from './template';
function App() {
let treegrid: TreeGridComponent | null;
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete',
'Update', 'Cancel'];
const dialogTemplate = (props: IOrderModel): any => {
const obj = [props, treegrid];
return (<DialogFormTemplate {...obj} />);
}
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Dialog',
template: dialogTemplate
};
const actionComplete = (args: DialogEditEventArgs) => {
if ((args.requestType === 'beginEdit' || args.requestType === 'add'))
{
// Add Validation Rules
const form: HTMLFormElement = args.form as HTMLFormElement;
form.ej2_instances[0].addRules('progress', {max: 100});
if (args.requestType === 'beginEdit') {
(form.elements.namedItem('taskName') as
HTMLInputElement).focus();
}
}
}
const actionBegin = (args: DialogEditEventArgs) => {
if (args.requestType === 'save') {
// cast string to integer value.
const val: string = ((args.form as HTMLFormElement)
.querySelector("#progress") as HTMLInputElement).value;

Copyright © 2001 -2024 Syncfusion Inc. 774


TreeGrid Editing

setValue('data.progress', parseFloat(val), args);


}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270'
editSettings={editOptions} toolbar={toolbarOptions} ref={g =>
treegrid = g}
actionBegin={actionBegin} actionComplete={actionComplete}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='130' format='yMd' textAlign='Right' type='date'
editType='datepickeredit' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;

ORDERMODEL.JSX
export {};

ORDERMODEL.TSX
export interface IOrderModel {
taskID?: number;
taskName?: string;
priority?: string;
progress?: number;
startDate?: Date;
endDate?: Date;
isAdd?: boolean;
approved?: boolean;
}

TEMPLATE.JSX
{% raw %}
import { DataUtil } from '@syncfusion/ej2-data';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import { sampleData as orderData } from './datasource';
export class DialogFormTemplate extends React.Component {
priorityData = DataUtil.distinct(orderData, 'priority', true);
constructor(props) {
super(props);

Copyright © 2001 -2024 Syncfusion Inc. 775


TreeGrid Editing

this.state = Object.assign({}, props[0]);


}
onChange(args) {
this.setState({ [args.target.name]: args.target.value });
}
render() {
this.onChange = this.onChange.bind(this);
const data = this.state;
return (<div>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input id="taskID" name="taskID"
disabled={!data.isAdd} type="text" value={data.taskID}
onChange={this.onChange}/>
<span className="e-float-line"/>
<label className="e-float-text e-label-top">Task
ID</label>
</div>
</div>
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input id="taskName" name="taskName" type="text"
value={data.taskName} onChange={this.onChange}/>
<span className="e-float-line"/>
<label className="e-float-text e-label-top">Task
Name</label>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<DropDownListComponent id="priority" value={data.priority}
dataSource={this.priorityData} fields={{ text: 'priority', value: 'priority'
}} placeholder="Priority" popupHeight='300px' floatLabelType='Always'/>
</div>
<div className="form-group col-md-6">
<NumericTextBoxComponent id="progress" format='n'
value={data.progress} placeholder="Progress" floatLabelType='Always'/>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<DatePickerComponent value={data.startDate}
floatLabelType='Always' placeholder="Start Date"/>
<span className="e-float-line"/>
</div>
</div>
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<DatePickerComponent value={data.endDate}
floatLabelType='Always' placeholder="End Date"/>
<span className="e-float-line"/>
</div>
</div>
</div>

Copyright © 2001 -2024 Syncfusion Inc. 776


TreeGrid Editing

<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<CheckBoxComponent checked={data.approved}
label='Approved'/>
<span className="e-float-line"/>
</div>
</div>
</div>
</div>);
}
}
{% endraw %}

TEMPLATE.TSX
{% raw %}
import { DataUtil } from '@syncfusion/ej2-data';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import { sampleData as orderData } from './datasource';
import { IOrderModel } from './orderModel';
export class DialogFormTemplate extends React.Component<{}, {}> {
private priorityData: any = DataUtil.distinct(orderData, 'priority',
true );
constructor(props: any) {
super(props);
this.state = Object.assign({}, props[0]);
}
public onChange(args: React.ChangeEvent) {
this.setState({[(args.target as HTMLInputElement).name]:
(args.target as HTMLInputElement).value});
}
public render(): any {
this.onChange = this.onChange.bind(this);
const data: IOrderModel = this.state;
return (<div>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input id="taskID" name="taskID"
disabled={!data.isAdd} type="text" value={data.taskID}
onChange={this.onChange} />
<span className="e-float-line"/>
<label className="e-float-text e-label-top">Task
ID</label>
</div>
</div>
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input id="taskName" name="taskName" type="text"
value={data.taskName} onChange={this.onChange} />
<span className="e-float-line"/>

Copyright © 2001 -2024 Syncfusion Inc. 777


TreeGrid Editing

<label className="e-float-text e-label-top">Task


Name</label>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<DropDownListComponent id="priority" value={data.priority}
dataSource={this.priorityData}
fields={{text: 'priority', value: 'priority' }}
placeholder="Priority"
popupHeight='300px' floatLabelType='Always'/>
</div>
<div className="form-group col-md-6">
<NumericTextBoxComponent id="progress" format='n'
value={data.progress}
placeholder="Progress" floatLabelType='Always'/>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<DatePickerComponent value={data.startDate}
floatLabelType='Always' placeholder="Start Date"/>
<span className="e-float-line"/>
</div>
</div>
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<DatePickerComponent value={data.endDate}
floatLabelType='Always' placeholder="End Date" />
<span className="e-float-line"/>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<CheckBoxComponent checked={data.approved}
label='Approved'/>
<span className="e-float-line"/>
</div>
</div>
</div>
</div>);
}
}{% endraw %}

The template form editors should have name attribute.


Template context
The template should be a React Component class. You can access the row information inside the
Component class using props, you can bind the attribute or value based on this row information.
The following properties will be available at the time of template execution.

Copyright © 2001 -2024 Syncfusion Inc. 778


TreeGrid Editing

| Property Name | Usage |


|---------------|-------|
| isAdd | A Boolean property; it defines whether the current row should be a new record or
not. |
In the following code example, the OrderID textbox has been disabled by using the isAdd property.
`
// The disabled attributes will be added based on the isAdd property.
<input id="taskID" name="taskID" type="text" disabled={!data.isAdd} value={data.taskID}
onChange={this.onChange} />
`
The following code example illustrates rendering the taskID textbox, when a new record is added.
Get value from editor
You can read, format, and update the current editor value in the actionBegin event at the time of setting
requestType to save.
In the following code example, the progress value has been formatted and updated.
`ts
const actionBegin = (args: DialogEditEventArgs) => {
if (args.requestType === 'save') {
// cast string to integer value.
const val: string = ((args.form as HTMLFormElement)
.querySelector("#progress") as HTMLInputElement).value;
setValue('data.progress', parseFloat(val), args);
}
}
`
Set focus to editor
By default, the first input element in the dialog will be focused while opening the dialog. If the first input
element is in disabled or hidden state, focus the valid input element in the actionComplete event based
on requestType as beginEdit.
`ts
const actionComplete = (args: DialogEditEventArgs) => {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
const form: HTMLFormElement = args.form as HTMLFormElement;
if (args.requestType === 'beginEdit') {
(form.elements.namedItem('taskName') as HTMLInputElement).focus();

Copyright © 2001 -2024 Syncfusion Inc. 779


TreeGrid Editing

}
}
}
`
Adding validation rules for custom editors
If you have used additional fields that are not present in the column model, then add the validation rules
to them in the actionComplete event.
`ts
const actionComplete = (args: DialogEditEventArgs) => {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
// Add Validation Rules
const form: HTMLFormElement = args.form as HTMLFormElement;
form.ej2_instances[0].addRules('progress', {max: 100});
}
}
`
Command column editing in React Treegrid component
The command column provides an option to add CRUD action buttons in a column. This can be defined
by the column.commands property.
The available built-in command buttons are:
| Command Button | Actions |
|----------------|---------|
| Edit | Edit the current row.|
| Delete | Delete the current row.|
| Save | Update the edited row.|
| Cancel | Cancel the edited state. |
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { CommandColumn, Edit } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const commands = [
{
buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' },
type: 'Edit',
},
{

Copyright © 2001 -2024 Syncfusion Inc. 780


TreeGrid Editing

buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons'


},
type: 'Delete'
},
{
buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons'
},
type: 'Save'
},
{
buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-
icons' },
type: 'Cancel'
}
];
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Row'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
<ColumnDirective headerText='Manage Records' width='130'
commands={commands}/>
</ColumnsDirective>
<Inject services={[Edit, CommandColumn]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { CommandModel } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { CommandColumn, Edit, EditSettingsModel } from '@syncfusion/ej2-
react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const commands: CommandModel[] = [
{
buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' },
type: 'Edit',
},
{

Copyright © 2001 -2024 Syncfusion Inc. 781


TreeGrid Editing

buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons'


},
type: 'Delete'
},
{
buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons'
},
type: 'Save'
},
{
buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-
icons' },
type: 'Cancel'
}
];
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Row'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270'
editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
<ColumnDirective headerText='Manage Records' width='130' commands=
{commands}/>
</ColumnsDirective>
<Inject services={[Edit,CommandColumn]}/>
</TreeGridComponent>
};
export default App;

Custom command
The custom command buttons can be added in a column by using the column.commands property and
the action for the custom buttons can be defined in the buttonOption.click event.
APP.JSX
import { closest } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { CommandColumn, Edit } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = { allowEditing: true, allowDeleting: true };
const commands = [
{
buttonOption: {

Copyright © 2001 -2024 Syncfusion Inc. 782


TreeGrid Editing

content: 'Details', cssClass: 'e-flat'


}
}
];
let treegrid;
const onClick = (args) => {
if (treegrid) {
const rowObj = treegrid.getRowObjectFromUID(closest(args.target,
'.e-row')
.getAttribute('data-uid'));
const rowData = rowObj.data;
alert(JSON.stringify(rowData));
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions} ref={g =>
treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
<ColumnDirective headerText='Commands' width='120'
commands={commands}/>
</ColumnsDirective>
<Inject services={[Edit, CommandColumn]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { closest } from '@syncfusion/ej2-base';
import { Column, CommandModel, Row } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { CommandColumn, Edit, EditSettingsModel, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = { allowEditing: true,
allowDeleting: true };
const commands: CommandModel[] = [
{
buttonOption: {
content: 'Details', cssClass: 'e-flat'
}
}
];
let treegrid: TreeGridComponent | null;

const onClick = (args: Event): void => {

Copyright © 2001 -2024 Syncfusion Inc. 783


TreeGrid Editing

if (treegrid) {
const rowObj: Row<Column> =
treegrid.getRowObjectFromUID(closest(args.target as Element, '.e-
row')
.getAttribute('data-uid') as string);
const rowData: object = rowObj.data as object;
alert(JSON.stringify(rowData));
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270'
editSettings={editOptions} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
<ColumnDirective headerText='Commands' width='120' commands=
{commands}/>
</ColumnsDirective>
<Inject services={[Edit,CommandColumn]}/>
</TreeGridComponent>
};
export default App;

Validation in React Treegrid component


Column validation
Column validation allows you to validate the edited or added row data and it display errors for invalid
fields before saving data. TreeGrid uses Form Validator component for column validation. You can set
validation rules by defining the columns.validationRules.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell',
showDeleteConfirmDialog: true
};
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
const format = { type: 'dateTime', format: 'M/d/y hh:mm a' };
const datetimeParams = { params: { format: 'M/d/y hh:mm a' } };
const numericParams = { params: { format: 'n' } };
const taskIDRules = { required: true, number: true };
const progressRules = { number: true, min: 0 };
const startDateRules = { date: true };

Copyright © 2001 -2024 Syncfusion Inc. 784


TreeGrid Editing

const priorityRules = { required: true };


const taskNameRules = { required: true };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true} validationRules={taskIDRules}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180' validationRules={taskNameRules}/>
<ColumnDirective field='startDate' headerText='Start Date'
width='150' textAlign='Right' edit={datetimeParams}
editType='datetimepickeredit' format={format}
validationRules={startDateRules}/>
<ColumnDirective field='approved' headerText='Approved'
width='110' textAlign='Right' editType='booleanedit' type='boolean'
displayAsCheckBox={true}/>
<ColumnDirective field='progress' headerText='Progress'
textAlign='Right' width='120' editType='numericedit' edit={numericParams}
validationRules={progressRules}/>
<ColumnDirective field='priority' headerText='Priority'
width='110' editType='dropdownedit' validationRules={priorityRules}/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { IEditCell } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell',
showDeleteConfirmDialog: true
};
const toolbarOptions: ToolbarItems[] = ['Add', 'Delete', 'Update',
'Cancel'];
const format: any = {type:'dateTime', format:'M/d/y hh:mm a'};
const datetimeParams: IEditCell = { params: { format: 'M/d/y hh:mm a' }
};
const numericParams: IEditCell = { params: { format: 'n' } };
const taskIDRules: object = { required: true, number: true };
const progressRules: object = { number: true, min: 0 };
const startDateRules: object = { date: true };
const priorityRules: object = { required: true };

Copyright © 2001 -2024 Syncfusion Inc. 785


TreeGrid Editing

const taskNameRules: object = { required: true };


return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270'
editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true} validationRules={taskIDRules}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180' validationRules={taskNameRules}/>
<ColumnDirective field='startDate' headerText='Start Date'
width='150' textAlign='Right' edit={datetimeParams}
editType='datetimepickeredit' format={format}
validationRules={startDateRules} />
<ColumnDirective field='approved' headerText='Approved'
width='110' textAlign='Right' editType='booleanedit' type='boolean'
displayAsCheckBox={true} />
<ColumnDirective field='progress' headerText='Progress'
textAlign='Right' width='120' editType='numericedit' edit={numericParams}
validationRules={progressRules} />
<ColumnDirective field='priority' headerText='Priority'
width='110' editType='dropdownedit' validationRules={priorityRules} />
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;

Custom validation
You can define your own custom validation rules for the specific columns by using Form Validator
custom rules.
In the below demo, custom validation applied for Priority column.
APP.JSX
import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell'
};
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
const customFn = (args) => {
return getValue('value', args) <= 8;
};
const priorityRules = {
minLength: [customFn, 'Value should be within 8 letters'],
required: true
};

Copyright © 2001 -2024 Syncfusion Inc. 786


TreeGrid Editing

return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}


childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' textAlign='Right' editType='datepickeredit' format='yMd'
type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='110' validationRules={priorityRules}/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Cell'
};
const toolbarOptions: ToolbarItems[] = ['Add', 'Delete', 'Update',
'Cancel'];
const customFn = (args: { [key: string]: string }) : boolean => {
return getValue('value', args) <= 8;
};
const priorityRules: object = {
minLength: [customFn, 'Value should be within 8 letters'],
required: true
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' textAlign='Right' editType='datepickeredit' format='yMd'
type='date'/>

Copyright © 2001 -2024 Syncfusion Inc. 787


TreeGrid Editing

<ColumnDirective field='duration' headerText='Duration'


width='110' validationRules={priorityRules}/>
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;

Persisting data in server in React Treegrid component


Edited data can be persisted in the database using the RESTful web services.
All the CRUD operations in the treegrid are done through DataManager. The DataManager has an
option to bind all the CRUD related data in server-side.
For your information, the ODataAdaptor persists data in the server as per OData protocol.
In the following section, we have explained how to perform CRUD operation in server-side using the
UrlAdaptor and RemoteSave Adaptor.
URL adaptor
You can use the UrlAdaptor of DataManager when binding data source from remote data. In the initial
load of treegrid, data are fetched from remote data and bound to the treegrid using url property of
DataManager.You can map The CRUD operation in treegrid can be mapped to server-side Controller
actions using the properties insertUrl, removeUrl, updateUrl and batchUrl.
The following code example describes the above behavior.
`ts
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-
treegrid';
import { Edit, EditSettingsModel, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true,
mode: 'Row', newRowPosition: 'Below' };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const dataManager: DataManager = new DataManager({
adaptor: new UrlAdaptor,
insertUrl: "Home/Insert",
removeUrl: "Home/Delete",
updateUrl: "Home/Update",
batchUrl: "Home/Remove",
url: "Home/DataSource",

Copyright © 2001 -2024 Syncfusion Inc. 788


TreeGrid Editing

});
return <TreeGridComponent dataSource={dataManager} treeColumnIndex={1} idMapping= 'TaskID'
parentIdMapping='parentID' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='TaskName' headerText='Task Name' width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date' width='90' textAlign='Right'
editType='datepickeredit' format='yMd' type='date' />
<ColumnDirective field='EndDate' headerText='End Date' width='90' format='yMd' textAlign='Right' />
<ColumnDirective field='Priority' headerText='Priority' width='110' editType='dropdownedit'/>
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;
`
Also, when using the UrlAdaptor, you need to return the data as JSON from the controller action and
the JSON object must contain a property as result with dataSource as its value and one more property
count with the dataSource total records count as its value.
The following code example describes the above behavior.
`ts
public ActionResult DataSource(DataManager dm)
{
var DataSource = TreeData.GetTree();
DataOperations operation = new DataOperations();
if (dm.Where != null && dm.Where.Count > 0)
{
DataSource = operation.PerformFiltering(DataSource, dm.Where, "and"); //perform filtering and
maintain child records on Expand/Collapse operation
}
var count = DataSource.ToList<TreeData>().Count();
if (dm.Skip != 0)
{

Copyright © 2001 -2024 Syncfusion Inc. 789


TreeGrid Editing

DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging


}
if (dm.Take != 0)
{
DataSource = operation.PerformTake(DataSource, dm.Take);
}
return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
}
`
Insert record
Using the insertUrl property, you can specify the controller action mapping URL to perform insert
operation on the server-side.
The following code example describes the above behavior and also we have inserted new record based
on the newRowPosition TreeGrid editSettings as "Below".
`ts
public void Insert(TreeGridData value, int relationalKey)
{
var i = 0;
for (; i < TreeData.tree.Count; i++)
{
if (TreeData.tree[i].TaskID == relationalKey)
{
break;
}
}
i += FindChildRecords(relationalKey); // Inserted new record when newRowPosition API is in "Below".
TreeData.tree.Insert(i + 1, value);
}
public int FindChildRecords(int id)
{
var count = 0;
for (var i = 0; i < TreeData.tree.Count; i++)
{
if (TreeData.tree[i].ParentItem == id)

Copyright © 2001 -2024 Syncfusion Inc. 790


TreeGrid Editing

{
count++;
count += FindChildRecords(TreeData.tree[i].TaskID);
}
}
return count;
}
`
The newly added record details are bound to the value parameter and relationalKey contains
primaryKey value of an selected record helps to find out the position of newly added record. Please
refer to the following screenshot.
![Insert](images/insert.PNG)
Update record
Using the updateUrl property, the controller action mapping URL can be specified to perform
save/update operation on the server-side.
The following code example describes the previous behavior.
`ts
public ActionResult Update(TreeGridData value)
{
var val = TreeData.tree.Where(ds => ds.TaskID == value.TaskID).FirstOrDefault();
val.TaskName = value.TaskName;
val.StartDate = value.StartDate;
val.Duration = value.Duration;
val.Priority = value.Priority;
val.Progress = value.Progress;
return Json(value);
}
`
The updated record details are bound to the value parameter. Please refer to the following screenshot.
![Update](images/update.PNG)
Delete record
Using the removeUrl and batchUrl property, the controller action mapping URL can be specified to
perform delete operation on the server-side.
The following code example describes the previous behavior.
`ts

Copyright © 2001 -2024 Syncfusion Inc. 791


TreeGrid Editing

public ActionResult Delete(int key)


{
TreeData.tree.Remove(TreeData.tree.Where(ds => ds.TaskID == key).FirstOrDefault());
}
// Remove method (batchUrl) will be triggered when we delete parent record.
public ActionResult Remove(List<TreeGridData> changed, List<TreeGridData> added,
List<TreeGridData> deleted)
{
for (var i = 0; i < deleted.Count; i++)
{
TreeData.tree.Remove(TreeData.tree.Where(ds => ds.TaskID == deleted[i].TaskID).FirstOrDefault());
}
}
`
The deleted record primary key value is bound to the key parameter. Please refer to the following
screenshot.
![Delete](images/remove.PNG)
While delete parent record, the parent and child records is bound to the deleted parameter. Please
refer to the following screenshot.
![Remove](images/delete.PNG)
Remote save adaptor
You may need to perform all Tree Grid Actions in client-side except the CRUD operations, that should be
interacted with server-side to persist data. It can be achieved in TreeGrid by using RemoteSaveAdaptor.
Datasource must be set to json property and set RemoteSaveAdaptor to the adaptor property. CRUD
operations can be mapped to server-side using updateUrl, insertUrl, removeUrl and batchUrl
properties.
You can use the following code example to use RemoteSaveAdaptor in TreeGrid.
`ts
import { DataManager, RemoteSaveAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-
treegrid';
import { Edit, EditSettingsModel, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { projectData } from './datasource';
function App() {

Copyright © 2001 -2024 Syncfusion Inc. 792


TreeGrid Editing

const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true,


mode: 'Row', newRowPosition: 'Below' };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const dataManager: DataManager = new DataManager({
adaptor: new RemoteSaveAdaptor,
insertUrl: "Home/Insert",
removeUrl: "Home/Delete",
updateUrl: "Home/Update",
batchUrl: "Home/Remove",
json: projectData,
});
return <TreeGridComponent dataSource={dataManager} treeColumnIndex={1} idMapping= 'TaskID'
parentIdMapping='parentID' height='270' editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='TaskName' headerText='Task Name' width='180'/>
<ColumnDirective field='StartDate' headerText='Start Date' width='90' textAlign='Right'
editType='datepickeredit' format='yMd' type='date' />
<ColumnDirective field='EndDate' headerText='End Date' width='90' format='yMd' textAlign='Right' />
<ColumnDirective field='Priority' headerText='Priority' width='110' editType='dropdownedit'/>
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;
`
The following code example describes the CRUD operations handled at server-side.
`ts
public void Insert(TreeData value, int relationalKey)
{
var i = 0;
for (; i < TreeData.tree.Count; i++)
{

Copyright © 2001 -2024 Syncfusion Inc. 793


TreeGrid Editing

if (TreeData.tree[i].TaskID == relationalKey)
{
break;
}
}
i += FindChildRecords(relationalKey); // Inserted new record when newRowPosition API is in "Below".
TreeData.tree.Insert(i + 1, value);
}
public ActionResult Update(TreeData value)
{
var val = TreeData.tree.Where(ds => ds.TaskID == value.TaskID).FirstOrDefault();
val.TaskName = value.TaskName;
val.StartDate = value.StartDate;
val.Duration = value.Duration;
val.Priority = value.Priority;
val.Progress = value.Progress;
return Json(value);
}
public ActionResult Delete(int key)
{
TreeData.tree.Remove(TreeData.tree.Where(ds => ds.TaskID == key).FirstOrDefault());;
}
// Remove method (batchUrl) will be triggered when we delete parent record.
public ActionResult Remove(List<TreeGridData> changed, List<TreeGridData> added,
List<TreeGridData> deleted)
{
for (var i = 0; i < deleted.Count; i++)
{
TreeData.tree.Remove(TreeData.tree.Where(ds => ds.TaskID == deleted[i].TaskID).FirstOrDefault());
}
}
`

Copyright © 2001 -2024 Syncfusion Inc. 794


TreeGrid Sorting in React Treegrid component

Sorting in React Treegrid component


Sorting enables you to sort data in the Ascending or Descending order. To sort a column, click the
column header.
To sort multiple columns, press and hold the CTRL key and click the column header. You can clear
sorting of any one of the multi-sorted columns by pressing and holding the SHIFT key and clicking the
specific column header.
To enable sorting in the TreeGrid, set the allowSorting to true. Sorting options can be configured
through the sortSettings.
To use Sorting, inject Sort module in TreeGrid.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping='subtasks' allowSorting={true} height='315'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='140'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='180'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='150' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='units' headerText='Units' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping='subtasks' allowSorting={true} height='315'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='140'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='180'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='150' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='units' headerText='Units' width='90'
textAlign='Right' />

Copyright © 2001 -2024 Syncfusion Inc. 795


TreeGrid Sorting in React Treegrid component

</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>
};
export default App;

* TreeGrid columns are sorted in the Ascending order. If you click the already sorted column, the sort
direction toggles.
* You can apply and clear sorting by invoking sortByColumn and clearSorting methods.
* To disable sorting for a particular column, set the columns.allowSorting to *false*.
Initial Sort
To sort at initial rendering, set the field and direction in the sortSettings.columns.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './datasource';
function App() {
const sortingOptions = {
columns: [
{ field: 'Category', direction: 'Ascending' },
{ field: 'orderName', direction: 'Ascending' }
]
};
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping='subtasks' allowSorting={true} height='315'
sortSettings={sortingOptions}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='140'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='200'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='150' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='units' headerText='Units' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, Sort, SortSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './datasource';
function App() {
const sortingOptions: SortSettingsModel = {

Copyright © 2001 -2024 Syncfusion Inc. 796


TreeGrid Sorting in React Treegrid component

columns: [
{ field: 'Category', direction: 'Ascending' },
{ field: 'orderName', direction: 'Ascending' }
]
};
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping='subtasks' allowSorting={true} height='315'
sortSettings={sortingOptions}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='140'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='200'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='150' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='units' headerText='Units' width='90'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>
};
export default App;

Sorting Events
During the sort action, the treegrid component triggers two events. The actionBegin event triggers
before the sort action starts, and the actionComplete event triggers after the sort action is completed.
Using these events you can perform the needed actions.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './datasource';
function App() {
const actionHandler = (args) => {
/** custom Action */
alert(args.requestType + ' ' + args.type);
};
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping='subtasks' allowSorting={true} height='315'
actionBegin={actionHandler} actionComplete={actionHandler}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='140'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='200'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='120' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='units' headerText='Units' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>;
}
;

Copyright © 2001 -2024 Syncfusion Inc. 797


TreeGrid Sorting in React Treegrid component

export default App;

APP.TSX
import { ActionEventArgs } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './datasource';
function App() {
const actionHandler = (args: ActionEventArgs) => {
/** custom Action */
alert(args.requestType + ' ' + args.type);
}
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping='subtasks'
allowSorting={true} height='315' actionBegin={actionHandler}
actionComplete={actionHandler}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='140'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='200'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='120' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='units' headerText='Units' width='90'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>
};
export default App;

The args.requestType is the current action name. For example, in sorting the args.requestType value
is sorting.
Custom sort comparer
You can customize the default sort action for a column by defining the column.sortComparer property.
The sort comparer function has the same functionality like Array.sort sort comparer.
In the following example, custom sort comparer function was defined in the Category column.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './datasource';
function App() {
/** Custom comparer function */
const sortComparer = (reference, comparer) => {
if (reference < comparer) {
return -1;
}
if (reference > comparer) {
return 1;

Copyright © 2001 -2024 Syncfusion Inc. 798


TreeGrid Sorting in React Treegrid component

}
return 0;
};
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping='subtasks' allowSorting={true} height='315'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='140'/>
<ColumnDirective field='orderName' headerText='Order Name'
sortComparer={sortComparer} width='200'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='120' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='units' headerText='Units' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './datasource';
function App() {
/** Custom comparer function */
const sortComparer = (reference: string, comparer: string) => {
if (reference < comparer) {
return -1;
}
if (reference > comparer) {
return 1;
}
return 0;
};
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1}
childMapping='subtasks' allowSorting={true} height='315'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category'
width='140'/>
<ColumnDirective field='orderName' headerText='Order Name'
sortComparer={sortComparer} width='200'/>
<ColumnDirective field='orderDate' headerText='Order Date'
width='120' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='units' headerText='Units' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>
};
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 799


TreeGrid Filtering

The sort comparer function will work only for the local data.
Touch Interaction
When you tap the treegrid header on touchscreen devices, the selected column header is sorted. A

popup is displayed for multi-column sorting. To sort multiple columns, tap the popup , and
then tap the desired treegrid headers.
The following screenshot shows treegrid touch sorting.
<!-- markdownlint-disable MD033 -->
<img src="images/touch-sorting.jpg" alt="Touch Sorting" style="width:320px;height: 620px">
<!-- markdownlint-enable MD033 -->
You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Filtering
Filtering in React Treegrid component
Filtering allows you to view specific or related records based on filter criteria. To enable filtering in the
TreeGrid, set the allowFiltering to true. Filtering options can be configured through filterSettings.
To use filter, inject the Link to the Video module in the treegrid.
To get start quickly with filtering functionalities, you can check on this video:
APP.JSX
import { ColumnDirective, ColumnsDirective, Filter, Inject,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX

Copyright © 2001 -2024 Syncfusion Inc. 800


TreeGrid Filtering

import { ColumnDirective, ColumnsDirective, Filter, Inject,


TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
};
export default App;

* You can apply and clear filtering by using filterByColumn and clearFiltering methods.
* To disable filtering for a particular column, set columns.allowFiltering to *false*.
Filter hierarchy modes
TreeGrid provides support for a set of filtering modes with filterSettings.filterHierarchyMode property.
The below are the type of filter mode available in TreeGrid.

• Parent : This is the default filter hierarchy mode in TreeGrid. The filtered records are displayed
with its parent records, if the filtered records not have any parent record then the filtered
records only displayed.
• Child : The filtered records are displayed with its child record, if the filtered records not have any
child record then the filtered records only displayed.
• Both : The filtered records are displayed with its both parent and child record, if the filtered
records not have any parent and child record then the filtered records only displayed.
• None : The filtered records are only displayed.

APP.JSX
import { DropDownListComponent } from "@syncfusion/ej2-react-dropdowns";
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const data = ['Parent', 'Child', 'Both', 'None'];
const onChange = (sel) => {
const mode = sel.value.toString();
if (treegrid) {
treegrid.filterSettings.hierarchyMode = mode;

Copyright © 2001 -2024 Syncfusion Inc. 801


TreeGrid Filtering

treegrid.clearFiltering();
}
};
return (<div><DropDownListComponent popupHeight="250px"
dataSource={data} value="Parent" change={onChange} width="150px"/>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='225' allowFiltering={true} ref={g =>
treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent></div>);
}
;
export default App;

APP.TSX
import { ChangeEventArgs, DropDownListComponent } from "@syncfusion/ej2-
react-dropdowns";
import { ColumnDirective, ColumnsDirective, Filter, FilterHierarchyMode }
from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGrid, TreeGridComponent } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const data: string[] = ['Parent', 'Child', 'Both', 'None']
const onChange = (sel: ChangeEventArgs): void => {
const mode: FilterHierarchyMode = sel.value.toString() as
FilterHierarchyMode;
if (treegrid) {
treegrid.filterSettings.hierarchyMode = mode;
treegrid.clearFiltering();
}
}
return(<div><DropDownListComponent popupHeight="250px" dataSource={data}
value="Parent" change={onChange} width="150px"/>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='225' allowFiltering={true} ref={g =>
treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>

Copyright © 2001 -2024 Syncfusion Inc. 802


TreeGrid Filtering

<ColumnDirective field='startDate' headerText='Start Date'


width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent></div>)
};
export default App;

Initial filter
To apply the filter at initial rendering, set the filter predicate object in filterSettings.columns.
APP.JSX
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const FilterOptions = {
columns: [
{ field: 'taskName', matchCase: false, operator: 'startswith',
predicate: 'and', value: 'plan' },
{ field: 'duration', matchCase: false, operator: 'equal',
predicate: 'and', value: 5 }
]
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}
filterSettings={FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel }
from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {

Copyright © 2001 -2024 Syncfusion Inc. 803


TreeGrid Filtering

const FilterOptions: FilterSettingsModel = {


columns: [
{ field: 'taskName', matchCase: false, operator: 'startswith',
predicate: 'and', value: 'plan' },
{ field: 'duration', matchCase: false, operator: 'equal',
predicate: 'and', value: 5 }]
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='275' allowFiltering={true} filterSettings={FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
};
export default App;

Filter operators
The filter operator for a column can be defined in the operator property of filterSettings.columns.
The available operators and its supported data types are:
Operator |Description |Supported Types
startswith |Checks whether the value begins with the specified value. |String
endswith |Checks whether the value ends with the specified value. |String
contains |Checks whether the value contains the specified value. |String
equal |Checks whether the value is equal to the specified value. |String &#124; Number &#124; Boolean
&#124; Date
notequal |Checks for values not equal to the specified value. |String &#124; Number &#124; Boolean
&#124; Date
greaterthan |Checks whether the value is greater than the specified value. |Number &#124; Date
greaterthanorequal|Checks whether a value is greater than or equal to the specified value. |Number
&#124; Date
lessthan |Checks whether the value is less than the specified value. |Number &#124; Date
lessthanorequal |Checks whether the value is less than or equal to the specified value. |Number &#124;
Date
By default, the filterSettings.columns.operator value is equal.

Copyright © 2001 -2024 Syncfusion Inc. 804


TreeGrid Filtering

Diacritics
By default, treegrid ignores diacritic characters while filtering. To include diacritic characters, set the
filterSettings.ignoreAccent as true.
In the following sample, type aero in Name column to filter diacritic characters.
APP.JSX
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { diacritics } from './datasource';
function App() {
const FilterOptions = {
ignoreAccent: true
};
return <TreeGridComponent dataSource={diacritics} treeColumnIndex={0}
childMapping='Children' height='275' allowFiltering={true}
filterSettings={FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='EmpID' headerText='Employee ID'
width='95'/>
<ColumnDirective field='Name' headerText='Name' width='180'/>
<ColumnDirective field='DOB' headerText='DOB' width='90'
format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='Country' headerText='Country'
width='100'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel }
from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { diacritics } from './datasource';
function App() {
const FilterOptions: FilterSettingsModel = {
ignoreAccent: true
};
return <TreeGridComponent dataSource={diacritics} treeColumnIndex={0}
childMapping='Children'
height='275' allowFiltering={true} filterSettings={FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='EmpID' headerText='Employee ID'
width='95'/>
<ColumnDirective field='Name' headerText='Name' width='180'/>
<ColumnDirective field='DOB' headerText='DOB' width='90'
format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='Country' headerText='Country' width='100'
/>

Copyright © 2001 -2024 Syncfusion Inc. 805


TreeGrid Filtering

</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
};
export default App;

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Filter bar in React Treegrid component
By setting the allowFiltering to true, the filter bar row will render next to the header, which allows you
to filter data. You can filter the records with different expressions depending upon the column type.
Filter bar expressions:
You can enter the following filter expressions (operators) manually in the filter bar.
Expression |Example |Description |Column Type
= |=value |equal |Number
!= |!=value |notequal |Number
|>value |greaterthan |Number
< |<value |lessthan |Number
= |>=value |greaterthanorequal |Number
<=|<=value|lessthanorequal |Number
|value |startswith |String
% |%value |endswith |String
N/A |N/A | Equal operator will always be used for date filter. |Date
N/A |N/A |Equal operator will always be used for Boolean filter. |Boolean
APP.JSX
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 806


TreeGrid Filtering

<Inject services={[Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
};
export default App;

By default, the filterSettings.columns.operator value is equal.


Filterbar template with custom component
You can customize default filter bar component of a column by custom component using filter
template.
The following example demonstrates the way to use filter template for a column when using filter bar.
In the following example, the DropdownList component is used to filter duration column using filter
template.
APP.JSX
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const onChange = (args) => {
if (treegrid) {
if (args.value === 'All') {
treegrid.clearFiltering();
}

Copyright © 2001 -2024 Syncfusion Inc. 807


TreeGrid Filtering

else {
treegrid.filterByColumn('duration', 'equal',
parseInt(args.value, 0));
}
}
};
const templateOptions = (props) => {
const dataSource = ['All', '1', '3', '4', '5', '6', '8', '9'];
return (<DropDownListComponent id={props.column.field}
popupHeight='250px' dataSource={dataSource} change={onChange}/>);
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true} ref={g =>
treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' filterTemplate={templateOptions}/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { Inject, TreeGrid, TreeGridComponent } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const onChange = (args: any): any => {
if (treegrid) {
if (args.value === 'All') {
treegrid.clearFiltering();
} else {
treegrid.filterByColumn('duration', 'equal',
parseInt(args.value, 0));
}
}
}
const templateOptions = (props:any): any => {
const dataSource: string[] = ['All', '1', '3', '4', '5', '6', '8', '9'];
return (<DropDownListComponent id={props.column.field}
popupHeight='250px' dataSource={dataSource} change={onChange} /> );
}

Copyright © 2001 -2024 Syncfusion Inc. 808


TreeGrid Filtering

return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}


childMapping='subtasks' height='275' allowFiltering={true} ref={g =>
treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' filterTemplate={templateOptions} />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
};
export default App;

Change default filter bar operator


You can change the default filter operator by extending filterModule.filterOperators property in
dataBound event.
In the following sample, we have changed the default operator for string typed columns as contains
from startsWith.
APP.JSX
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const dataBound = () => {
Object.assign(treegrid.grid.filterModule.filterOperators, {
startsWith: 'contains' });
};
return <TreeGridComponent dataSource={sampleData} dataBound={dataBound}
treeColumnIndex={1} childMapping='subtasks' height='275'
allowFiltering={true} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
;
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 809


TreeGrid Filtering

APP.TSX
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid'
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const dataBound = () => {
Object.assign(treegrid.grid.filterModule.filterOperators,{
startsWith: 'contains' });
}
return <TreeGridComponent dataSource={sampleData} dataBound={dataBound}
treeColumnIndex={1} childMapping='subtasks' height='275'
allowFiltering={true} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
};
export default App;

Filter menu in React Treegrid component


You can enable filter menu by setting the filterSettings.type as Menu. The filter menu UI will be
rendered based on its column type, which allows you to filter data. You can filter the records with
different operators.
APP.JSX
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const FilterOptions = {
type: 'Menu'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}
filterSettings={FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>

Copyright © 2001 -2024 Syncfusion Inc. 810


TreeGrid Filtering

<ColumnDirective field='taskName' headerText='Task Name'


width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { FilterSettingsModel, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const FilterOptions: FilterSettingsModel = {
type: 'Menu'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}
filterSettings={FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
};
export default App;

* allowFiltering must be set as true to enable filter menu.


* Setting columns.allowFiltering as false will prevent filter menu rendering for a particular column.
Custom component in filter menu
You can customize default filter menu component of a column by custom component using
filterTemplate.
The following example demonstrates the way to use filter template for a column when using filter
menu. In the following example, the DropdownList component is used to filter duration column using
filterTemplate.
`ts

Copyright © 2001 -2024 Syncfusion Inc. 811


TreeGrid Filtering

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';


import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-
treegrid';
import { Inject, TreeGrid, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const FilterOptions: FilterSettingsModel = {
type: 'Menu'
};
const templateOptions = (props:any): any => {
const dataSource: number[] = [1,3,4,5,6,8,9];
return (<DropDownListComponent id={props.column.field} popupHeight='250px'
dataSource={dataSource} /> );
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
filterSettings={FilterOptions} childMapping='subtasks' height='275' allowFiltering={true} ref={g =>
treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right'
type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'
filterTemplate={templateOptions} />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
};
export default App;
`
Enable different filter dialog for a column
You can use both Menu and Excel filter in a same TreeGrid. To do so, set the column.filter.type as Menu
or Excel.

Copyright © 2001 -2024 Syncfusion Inc. 812


TreeGrid Filtering

In the following sample menu filter is enabled by default and excel filter is enabled for the Task Name
column using the column.filter.type.
APP.JSX
import { ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-
treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const FilterOptions = {
type: 'Menu'
};
const FilterType = {
type: 'Excel'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}
filterSettings={FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
filter={FilterType} width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='90'/>
<ColumnDirective field='progress' headerText='Progress'
width='90'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { IFilter } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel }
from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const FilterOptions: FilterSettingsModel = {
type: 'Menu'
};
const FilterType : IFilter = {
type: 'Excel'
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}
filterSettings={FilterOptions}>
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 813


TreeGrid Filtering

<ColumnDirective field='taskID' headerText='Task ID' width='90'


textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
filter={FilterType} width='180' />
<ColumnDirective field='duration' headerText='Duration'
width='90'/>
<ColumnDirective field='progress' headerText='Progress'
width='90'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
};
export default App;

Excel like filter in React Treegrid component


You can enable Excel like filter by defining filterSettings.type as Excel. The excel menu contains an option
such as Sorting, Clear filter, Sub menu for advanced filtering..
APP.JSX
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const FilterOptions = {
type: 'Excel'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}
filterSettings={FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='90'/>
<ColumnDirective field='progress' headerText='Progress'
width='90'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel }
from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

Copyright © 2001 -2024 Syncfusion Inc. 814


TreeGrid Filtering

function App() {
const FilterOptions: FilterSettingsModel = {
type: 'Excel'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}
filterSettings={FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180' />
<ColumnDirective field='duration' headerText='Duration'
width='90'/>
<ColumnDirective field='progress' headerText='Progress'
width='90'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
};
export default App;

Change default filter operator


You can change the default excel-filter operator by changing the column operator as contains from
startsWith in the actionBegin event
APP.JSX
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-
react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const FilterOptions = {
type: 'Excel'
};
const actionBegin = (args) => {
if (args.requestType === 'filtersearchbegin' && args.column.type ===
"string") {
args.operator = 'contains';
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}
filterSettings={FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='90'/>
<ColumnDirective field='progress' headerText='Progress'
width='90'/>
</ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 815


TreeGrid Searching in React Treegrid component

<Inject services={[Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel }
from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const FilterOptions: FilterSettingsModel = {
type: 'Excel'
};
const actionBegin = (args:any) => {
if(args.requestType === 'filtersearchbegin' && args.column.type ===
"string")
{
args.operator = 'contains';
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='275' allowFiltering={true}
filterSettings={FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180' />
<ColumnDirective field='duration' headerText='Duration'
width='90'/>
<ColumnDirective field='progress' headerText='Progress'
width='90'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
};
export default App;

Searching in React Treegrid component


You can search records in a TreeGrid, by using the search method with search key as a parameter. This
also provides an option to integrate search text box in treegrid's toolbar by adding search item to the
toolbar.
To search records, inject the Filter module in the grid.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

Copyright © 2001 -2024 Syncfusion Inc. 816


TreeGrid Searching in React Treegrid component

import { sampleData } from './datasource';


function App() {
const toolbarOptions = ['Search'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['Search'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter,Toolbar]}/>
</TreeGridComponent>
};
export default App;

Initial search
To apply search at initial rendering, set the fields, operator, key, and ignoreCase in the searchSettings.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Toolbar } from '@syncfusion/ej2-react-treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 817


TreeGrid Searching in React Treegrid component

import * as React from 'react';


import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['Search'];
const searchOptions = {
fields: ['taskName'],
ignoreCase: true,
key: 'dev',
operator: 'contains'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' toolbar={toolbarOptions}
searchSettings={searchOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, SearchSettingsModel, Toolbar, ToolbarItems } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['Search'];
const searchOptions: SearchSettingsModel = {
fields: ['taskName'],
ignoreCase: true,
key: 'dev',
operator: 'contains'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='270' toolbar={toolbarOptions}
searchSettings={searchOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />

Copyright © 2001 -2024 Syncfusion Inc. 818


TreeGrid Searching in React Treegrid component

<ColumnDirective field='progress' headerText='Progress'


width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter,Toolbar]}/>
</TreeGridComponent>
};
export default App;

By default, treegrid searches all the bound column values. To customize this behavior define the
searchSettings.fields property.
Search operators
The search operator can be defined in the searchSettings.operator property to configure specific
searching.
The following operators are supported in searching:
Operator |Description
startsWith |Checks whether a value begins with the specified value.
endsWith |Checks whether a value ends with the specified value.
contains |Checks whether a value contains the specified value.
equal |Checks whether a value is equal to the specified value.
notEqual |Checks for values not equal to the specified value.
By default, the searchSettings.operator value is contains.
Search by external button
To search treegrid records from an external button, invoke the search method.
APP.JSX
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const inputStyle = { width: '200px', display: 'inline-block' };
const onClick = () => {
const searchText =
document.getElementsByClassName('searchtext')[0].value;
if (treegrid) {
treegrid.search(searchText);
}
};
return (<div>
<div className='e-float-input' style={inputStyle}>
<input type="text" className="searchtext"/>
<span className="e-float-line"/>
<label className="e-float-text">Search text</label>
</div>

Copyright © 2001 -2024 Syncfusion Inc. 819


TreeGrid Searching in React Treegrid component

<ButtonComponent id='search' onClick={onClick}>Search</ButtonComponent>


<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='220' ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent></div>);
}
;
export default App;

APP.TSX
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const inputStyle : object = {width:'200px', display: 'inline-block'};
const onClick = () => {
const searchText: string =
(document.getElementsByClassName('searchtext')[0] as
HTMLInputElement).value;
if (treegrid) {
treegrid.search(searchText);
}
}
return (<div>
<div className='e-float-input' style={inputStyle}>
<input type="text" className="searchtext" />
<span className="e-float-line"/>
<label className="e-float-text">Search text</label>
</div>
<ButtonComponent id='search' onClick= { onClick
}>Search</ButtonComponent>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='220'
ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />

Copyright © 2001 -2024 Syncfusion Inc. 820


TreeGrid Searching in React Treegrid component

<ColumnDirective field='progress' headerText='Progress'


width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent></div>)
};
export default App;

Search Specific Columns


By default, treegrid searches all visible columns. You can search specific columns by defining the specific
column's field names in the searchSettings.fields property.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['Search'];
const searchSettings = { fields: ['taskName', 'duration'] };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' toolbar={toolbarOptions}
searchSettings={searchSettings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, SearchSettingsModel, Toolbar, ToolbarItems } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['Search'];
const searchSettings: SearchSettingsModel = {fields: ['taskName',
'duration']};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270'

Copyright © 2001 -2024 Syncfusion Inc. 821


TreeGrid Paging in React Treegrid component

toolbar={toolbarOptions} searchSettings={searchSettings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
<ColumnDirective field='progress' headerText='Progress'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter,Toolbar]}/>
</TreeGridComponent>
};
export default App;

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Paging in React Treegrid component
Paging provides an option to display TreeGrid data in page segments. To enable paging, set the
allowPaging to true. When paging is enabled, pager component renders at the bottom of the treegrid.
Paging options can be configured through the pageSettings.
To use Paging, inject Page module in TreeGrid.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const pageSettings = { pageSize: 7 };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX

Copyright © 2001 -2024 Syncfusion Inc. 822


TreeGrid Paging in React Treegrid component

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from


'@syncfusion/ej2-react-treegrid';
import { Page, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const pageSettings: PageSettingsModel = { pageSize: 7 };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

You can achieve better performance by using treegrid paging to fetch only a pre-defined number of
records from the data source.
Page Size Mode
Two behaviors are available in TreeGrid paging to display certain number of records in a current page.
Following are the two types of pageSizeMode.

• All : This is the default mode. The number of records in a page is based on pageSize property.
• Root : The number of root nodes or the 0th level records to be displayed per page is based on
pageSize property.

With pageSizeMode property as Root only the root level or the 0th level records are considered in
records count.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const pageSettings = { pageSize: 2, pageSizeMode: 'Root' };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
height='265'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>

Copyright © 2001 -2024 Syncfusion Inc. 823


TreeGrid Paging in React Treegrid component

<ColumnDirective field='taskName' headerText='Task Name'


width='160'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const pageSettings: PageSettingsModel = { pageSize: 2, pageSizeMode:
'Root' };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true}
pageSettings={pageSettings} height='265'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='160'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Template
You can use custom elements inside the pager instead of default elements. The custom elements can be
defined by using the template property. Inside this template, you can access the currentPage, pageSize,
pageCount, totalPage and totalRecordCount values.
APP.JSX
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {

Copyright © 2001 -2024 Syncfusion Inc. 824


TreeGrid Paging in React Treegrid component

let treegrid;
const pageTemplate = (props) => {
return (<div className="e-pagertemplate">
<div className="col-lg-12 control-section">
<div className="content-wrapper">
<NumericTextBoxComponent max={3} min={1} step={1}
value={props.currentPage} width={75} format='###.##' change={onChange}/>
</div>
</div>
<div id="totalPages" className="e-pagertemplatemessage">
<span className="e-pagenomsg">{props.currentPage} of
{props.totalPages} pages ({props.totalRecordsCount} items)</span>
</div>
</div>);
};
const pageSettings = {
pageSize: 6,
template: pageTemplate
};
const onChange = (args) => {
const value = args.value;
if (treegrid) {
treegrid.goToPage(value);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='160'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ChangeEventArgs } from '@syncfusion/ej2-inputs';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ColumnDirective, ColumnsDirective, Inject, TreeGrid,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const pageTemplate = (props: any): any => {

Copyright © 2001 -2024 Syncfusion Inc. 825


TreeGrid Paging in React Treegrid component

return (<div className="e-pagertemplate">


<div className="col-lg-12 control-section">
<div className="content-wrapper">
<NumericTextBoxComponent max={3} min={1} step={1}
value={props.currentPage} width={75} format='###.##' change={onChange}/>
</div>
</div>
<div id="totalPages" className="e-pagertemplatemessage">
<span className="e-pagenomsg">{props.currentPage} of
{props.totalPages} pages ({props.totalRecordsCount} items)</span>
</div>
</div>);
}
const pageSettings: any = {
pageSize: 6,
template: pageTemplate
};
const onChange = (args: ChangeEventArgs) => {
const value: number = args.value as number;
if (treegrid) {
treegrid.goToPage(value);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} ref={g => treegrid =
g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='160'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Pager with Page Size Dropdown


The pager Dropdown allows you to change the number of records in the TreeGrid dynamically. It can be
enabled by defining the pageSettings.pageSizes property as true.
`ts
const pageSettings: PageSettingsModel = { pageSize: 7, pageSizes: true };
`

Copyright © 2001 -2024 Syncfusion Inc. 826


TreeGrid Paging in React Treegrid component

How to render Pager at the Top of the TreeGrid


By default, Pager will be rendered at the bottom of the TreeGrid. You can also render the Pager at the
top of the TreeGrid by using the dataBound event.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const pageSettings = { pageSize: 7, pageSizes: true };
let initialGridLoad = true;
const dataBound = () => {
if (initialGridLoad) {
initialGridLoad = false;
const pager = document.getElementsByClassName('e-gridpager');
let topElement;
if (treegrid && treegrid.toolbar) {
topElement = document.getElementsByClassName('e-toolbar');
}
else {
topElement = document.getElementsByClassName('e-
gridheader');
}
topElement[0].before(pager[0]);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
dataBound={dataBound} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>

Copyright © 2001 -2024 Syncfusion Inc. 827


TreeGrid Paging in React Treegrid component

<ColumnDirective field='startDate' headerText='Start Date'


width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGrid,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const pageSettings: PageSettingsModel = { pageSize: 7, pageSizes: true
};
let initialGridLoad: boolean = true;
const dataBound = () => {
if (initialGridLoad) {
initialGridLoad = false;
const pager = document.getElementsByClassName('e-gridpager');
let topElement;
if (treegrid && treegrid.toolbar) {
topElement = document.getElementsByClassName('e-toolbar');
} else {
topElement = document.getElementsByClassName('e-
gridheader');
}
topElement[0].before(pager[0]);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
dataBound={dataBound} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 828


TreeGrid Selection

During the paging action, the pager component triggers the below three events.
* The created event triggers when Pager is created.
* The click event triggers when the numeric items in the pager is clicked.
* The dropDownChanged event triggers when pageSize DropDownList value is selected.
You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Selection
Selection in React Treegrid component
Selection provides an option to highlight a row or cell. Selection can be done through simple Mouse
down or Arrow keys.To disable selection in the TreeGrid, set the allowSelection to Link to the Video.
To get start quickly with Selection, you can check on this video:
The treegrid supports two types of selection that can be set by using the selectionSettings.type.They
are:

• Single - It is set by default. Allows you to select only a single row or cell.
• Multiple - Allows you to select multiple rows or cells.

To perform the multi-selection, press and hold CTRL key and click the desired rows or cells.
To select range of rows or cells, press and hold the SHIFT key and click the rows or cells.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings = { type: 'Multiple' };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX

Copyright © 2001 -2024 Syncfusion Inc. 829


TreeGrid Selection

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from


'@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings: SelectionSettingsModel = { type: 'Multiple' };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Selection mode
TreeGrid supports three types of selection mode which can be set by using selectionSettings.mode. They
are:

• Row - It is set by default. Allows you to select rows only.


• Cell - Allows you to select cells only.
• Both - Allows you to select rows and cells at the same time.

APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings = { mode: 'Both' };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>

Copyright © 2001 -2024 Syncfusion Inc. 830


TreeGrid Selection

</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings: SelectionSettingsModel = { mode: 'Both' };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Touch interaction
When you tap a treegrid row on touchscreen device, the tapped row is selected. It also shows a popup
![Multi Row selection](images/selection.jpg) for multi-row selection. To select multiple rows or cells,
tap the popup![Multi Row or Cells](images/mselection.jpg) and then tap the desired rows or cells.
Multi-selection requires the selection type to be Multiple.
The following screenshot represents a treegrid touch selection in the device.
<!-- markdownlint-disable MD033 -->
<img src="../images/touch-selection.png" alt="Touch interaction" style="width:320px;height: 620px">
<!-- markdownlint-enable MD033 -->
You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Cell selection in React Treegrid component
Cell Selection can be done through simple Mouse down or Arrow keys(up, down, left and right).
TreeGrid supports two types of cell selection mode which can be set by using
selectionSettings.cellSelectionMode. They are:

Copyright © 2001 -2024 Syncfusion Inc. 831


TreeGrid Selection

• Flow - It is set by default.

Select range of cells between the start index and end index which includes in between cells of rows.

• Box - Select range of cells within the start and end column indexes which includes

in between cells of rows within the range.


APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings = {
cellSelectionMode: 'Box',
mode: 'Cell',
type: 'Multiple'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings: SelectionSettingsModel = {
cellSelectionMode: 'Box',
mode: 'Cell',
type: 'Multiple'
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true}

Copyright © 2001 -2024 Syncfusion Inc. 832


TreeGrid Selection

selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Row selection in React Treegrid component


Select row at initial rendering
To select a row at initial rendering, set the selectedRowIndex value.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} selectedRowIndex={1}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {

Copyright © 2001 -2024 Syncfusion Inc. 833


TreeGrid Selection

return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}


childMapping='subtasks' allowPaging={true} selectedRowIndex={1}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Get selected row indexes


You can get the selected row indexes by using the getSelectedRowIndexes method.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const settings = { type: 'Multiple' };
const rowSelected = () => {
if (treegrid) {
/** Get the selected row indexes */
const selectedrowindex = treegrid.getSelectedRowIndexes();
/** Get the selected records. */
const selectedrecords = treegrid.getSelectedRecords();
alert(selectedrowindex + " : " +
JSON.stringify(selectedrecords));
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' selectionSettings={settings} height={270}
rowSelected={rowSelected} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='150'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}

Copyright © 2001 -2024 Syncfusion Inc. 834


TreeGrid Selection

;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel, TreeGrid } from '@syncfusion/ej2-
react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const settings: SelectionSettingsModel = { type: 'Multiple' };
const rowSelected = () => {
if (treegrid) {
/** Get the selected row indexes */
const selectedrowindex: number[] =
treegrid.getSelectedRowIndexes();
/** Get the selected records. */
const selectedrecords: object[] = treegrid.getSelectedRecords();
alert(selectedrowindex + " : " +
JSON.stringify(selectedrecords));
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
selectionSettings={settings} height={270} rowSelected={rowSelected}
ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='150'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Multiple selection based on condition


You can select multiple treegrid rows based on condition by using the selectRows method.
In the following code, the rows which contains taskID value as 3 and 5 are selected at initial rendering.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

Copyright © 2001 -2024 Syncfusion Inc. 835


TreeGrid Selection

function App() {
let treegrid;
const settings = { type: 'Multiple' };
const dataBound = () => {
if (treegrid) {
const rowIndexes = [];
treegrid.dataSource.forEach((dat, index) => {
if (dat.taskID === 3 || dat.taskID === 5) {
rowIndexes.push(index);
}
});
treegrid.selectRows(rowIndexes);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' selectionSettings={settings} height={270}
dataBound={dataBound} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='150'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel, TreeGrid } from '@syncfusion/ej2-
react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const settings: SelectionSettingsModel = { type: 'Multiple' };
const dataBound = () => {
if (treegrid) {
const rowIndexes : number[]=[];
(treegrid.dataSource as object[]).forEach((dat: any,index) => {
if (dat.taskID === 3 || dat.taskID === 5) {
rowIndexes.push(index);
}
});
treegrid.selectRows(rowIndexes);
}
}

Copyright © 2001 -2024 Syncfusion Inc. 836


TreeGrid Selection

return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}


childMapping='subtasks'
selectionSettings={settings} height={270} dataBound={dataBound} ref={g
=> treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='150'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Toggle selection
The Toggle selection allows to perform selection and unselection of the particular row or cell. To enable
toggle selection, set
[enableToggle](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#enab
le toggle) property of the selectionSettings as true. If you click on the selected row or cell then it will be
unselected and vice versa.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings = { enableToggle: true };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX

Copyright © 2001 -2024 Syncfusion Inc. 837


TreeGrid Selection

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from


'@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings: SelectionSettingsModel = { enableToggle: true};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

If multi selection is enabled, then first click on any selected row (without pressing Ctrl key), it will clear
the multi selection and in second click on the same row, it will be unselected.
Check box selection in React Treegrid component
Checkbox Selection provides an option to select multiple TreeGrid records with help of checkbox in each
row.
To render checkbox in each treegrid row, you need to use checkbox column with type as CheckBox using
column type property.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={2}
childMapping='subtasks' allowPaging={true}>
<ColumnsDirective>
<ColumnDirective type='checkbox' width='50'/>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 838


TreeGrid Selection

<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={2}
childMapping='subtasks' allowPaging={true}>
<ColumnsDirective>
<ColumnDirective type='checkbox' width='50'/>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

By default selection is allowed by clicking a treegrid row or checkbox in that row. To allow Selection only
through checkbox, you can set
selectionSettings.checkboxOnly property to true.
Selection can be persisted on all the operations
using selectionSettings.persistSelection property.
For persisting selection on the TreeGrid, any one of the column should be defined as a primary key using
columns.isPrimaryKey property.
Checkbox selection mode
In checkbox selection, selection can also be done by clicking on rows. This selection provides two types
of Checkbox Selection mode which can be set by using the following API,
selectionSettings.checkboxMode. The modes are;

• Default: This is the default value of the checkboxMode. In this mode, user can select multiple
rows by clicking rows one by one.
• ResetOnRowClick: In ResetOnRowClick mode, when user clicks on a row it will reset previously
selected row. Also you can perform multiple-selection in this mode by press and hold CTRL key

Copyright © 2001 -2024 Syncfusion Inc. 839


TreeGrid Selection

and click the desired rows. To select range of rows, press and hold the SHIFT key and click the
rows.

APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings = { checkboxMode: 'ResetOnRowClick' };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={2}
childMapping='subtasks' allowPaging={true} selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective type='checkbox' width='50'/>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings: SelectionSettingsModel = { checkboxMode:
'ResetOnRowClick'};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={2}
childMapping='subtasks' allowPaging={true} selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective type='checkbox' width='50'/>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>

Copyright © 2001 -2024 Syncfusion Inc. 840


TreeGrid Scrolling in React Treegrid component

</TreeGridComponent>
};
export default App;

Checkbox Selection feature is intended for row selection only; it is not compatible with cell selection
mode.
Scrolling in React Treegrid component
The scrollbar will be displayed in the treegrid when content exceeds the element width or height. The
vertical and horizontal scrollbars will be displayed based on the following criteria:

• The vertical scrollbar appears when the total height of rows present in the treegrid exceeds its
element height.
• The horizontal scrollbar appears when the sum of columns width exceeds the treegrid element
width.
• The height and width are used to set the treegrid height and width, respectively.

The default value for height and width is auto.


Set width and height
To specify the width and height of the scroller in the pixel, set the pixel value to a number.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='315' width='400'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='120' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='110' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {

Copyright © 2001 -2024 Syncfusion Inc. 841


TreeGrid Scrolling in React Treegrid component

return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}


childMapping='subtasks'
height='315' width='400'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='120' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='110' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Responsive with parent container


Specify the width and height as 100% to make the treegrid element fill its parent container. Setting the
height to 100% requires the treegrid parent element to have explicit height.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='100%' width='100%'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='120' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='110' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='100%' width='100%'>

Copyright © 2001 -2024 Syncfusion Inc. 842


TreeGrid Scrolling in React Treegrid component

<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='120' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='110' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Scroll to selected row


You can scroll the treegrid content to the selected row position by using the rowSelected event.
APP.JSX
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
let numeric;
const onChange = () => {
if (treegrid && numeric) {
treegrid.selectRow(parseInt(numeric.getText(), 10));
}
};
const rowSelected = (args) => {
if (treegrid) {
const rowHeight =
treegrid.getRows()[treegrid.getSelectedRowIndexes()[0]].scrollHeight;
treegrid.getContent().children[0].scrollTop = rowHeight *
treegrid.getSelectedRowIndexes()[0];
}
};
return (<div>
<NumericTextBoxComponent format={'N'} placeholder={'Enter index to
select a row'} width={200} showSpinButton={false} min={0} change={onChange}
ref={numeric}/>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='270' width='100%' rowSelected={rowSelected}
ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='160'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>

Copyright © 2001 -2024 Syncfusion Inc. 843


TreeGrid Scrolling in React Treegrid component

</ColumnsDirective>
</TreeGridComponent></div>);
}
;
export default App;

APP.TSX
import { RowSelectEventArgs } from '@syncfusion/ej2-grids';
import { NumericTextBox, NumericTextBoxComponent } from '@syncfusion/ej2-
react-inputs';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
let numeric: NumericTextBox | null;
const onChange = () => {
if (treegrid && numeric) {
treegrid.selectRow(parseInt(numeric.getText(), 10));
}
}
const rowSelected = (args: RowSelectEventArgs) => {
if (treegrid) {
const rowHeight: number =
treegrid.getRows()[treegrid.getSelectedRowIndexes()[0]].scrollHeight;
treegrid.getContent().children[0].scrollTop = rowHeight *
treegrid.getSelectedRowIndexes()[0];
}
}
return (<div>
<NumericTextBoxComponent format={'N'} placeholder={'Enter index to
select a row'} width={200}
showSpinButton={false} min={0} change={onChange} ref={numeric}/>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='270' width='100%' rowSelected={rowSelected} ref={g =>
treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='160'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent></div>)
};
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 844


TreeGrid Frozen in React Treegrid component

Frozen in React Treegrid component


Frozen rows and columns
Frozen rows and columns provides an option to make rows and columns always visible in the top and
left side of the tree grid while scrolling.
To use frozen rows and columns support, inject the Freeze module in the tree grid.
In this demo, the frozenColumns is set as ‘2’ and the frozenRows
is set as ‘3’. Hence, the left two columns and top three rows are frozen.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Freeze,
Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData}
childMapping='subtasks' treeColumnIndex={1} height='310' frozenRows={3}
frozenColumns={2} allowSelection={false}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='230'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='120' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='endDate' headerText='End Date'
width='120' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration'
width='110' textAlign='Right'></ColumnDirective>
<ColumnDirective field='progress' headerText='Progress'
width='110' textAlign='Right'></ColumnDirective>
<ColumnDirective field='priority' headerText='Priority'
width='110'></ColumnDirective>
<ColumnDirective field='approved' headerText='Approved'
textAlign='Center' width='110'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Freeze]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Freeze,
Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} childMapping =
'subtasks' treeColumnIndex={1} height='310' frozenRows={3} frozenColumns={2}
allowSelection={false}>
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 845


TreeGrid Frozen in React Treegrid component

<ColumnDirective field='taskID' headerText='Task ID' width='120'


textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='230'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='120' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='endDate' headerText='End Date'
width='120' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration'
width='110' textAlign='Right'></ColumnDirective>
<ColumnDirective field='progress' headerText='Progress'
width='110' textAlign='Right'></ColumnDirective>
<ColumnDirective field='priority' headerText='Priority'
width='110'></ColumnDirective>
<ColumnDirective field='approved' headerText='Approved'
textAlign='Center' width='110'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Freeze]} />
</TreeGridComponent>
};
export default App;

Freeze particular columns


You can use isFrozen property to freeze selected columns in tree grid.
In this demo, the columns with field name taskName and startDate is frozen using the isFrozen
property.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Freeze,
Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData}
childMapping='subtasks' height='310' allowSelection={false}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='110'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='230' isFrozen='true'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='120' format='yMd' textAlign='Right'
isFrozen='true'></ColumnDirective>
<ColumnDirective field='endDate' headerText='End Date'
width='120' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration'
width='110' textAlign='Right'></ColumnDirective>
<ColumnDirective field='progress' headerText='Progress'
width='110' textAlign='Right'></ColumnDirective>
<ColumnDirective field='priority' headerText='Priority'
width='110'></ColumnDirective>
<ColumnDirective field='approved' headerText='Approved'
textAlign='Center' width='110'></ColumnDirective>
</ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 846


TreeGrid Frozen in React Treegrid component

<Inject services={[Freeze]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Freeze,
Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} childMapping =
'subtasks' height='310' allowSelection={false} >
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='110'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='230' isFrozen='true'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='120' format='yMd' textAlign='Right'
isFrozen='true'></ColumnDirective>
<ColumnDirective field='endDate' headerText='End Date'
width='120' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration'
width='110' textAlign='Right'></ColumnDirective>
<ColumnDirective field='progress' headerText='Progress'
width='110' textAlign='Right'></ColumnDirective>
<ColumnDirective field='priority' headerText='Priority'
width='110'></ColumnDirective>
<ColumnDirective field='approved' headerText='Approved'
textAlign='Center' width='110'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Freeze]} />
</TreeGridComponent>
};
export default App;

Freeze direction
You can freeze the tree grid columns on the left or right side by using the column.freeze freeze property
and the remaining columns will be movable. The tree grid will automatically move the columns to the
left or right position based on the column.freeze value.
Types of the column.freeze directions:

• Left: Allows you to freeze the columns at the left.


• Right: Allows you to freeze the columns at the right.

In this demo, the Task Name column is frozen at the left and the Priority column is frozen at the right
side of the content table.
APP.JSX

Copyright © 2001 -2024 Syncfusion Inc. 847


TreeGrid Frozen in React Treegrid component

import { ColumnDirective, ColumnsDirective, TreeGridComponent, Freeze,


Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData}
childMapping='subtasks' height='310' treeColumnIndex={1}
allowSelection={false}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='110'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='230' freeze='Left'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='120' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='endDate' headerText='End Date'
width='120' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration'
width='110' textAlign='Right'></ColumnDirective>
<ColumnDirective field='progress' headerText='Progress'
width='110' textAlign='Right'></ColumnDirective>
<ColumnDirective field='priority' headerText='Priority'
width='110' freeze='Right'></ColumnDirective>
<ColumnDirective field='approved' headerText='Approved'
textAlign='Center' width='110'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Freeze]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Freeze,
Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
return <TreeGridComponent dataSource={sampleData} childMapping =
'subtasks' height='310' treeColumnIndex={1} allowSelection={false} >
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='110'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='230' freeze='Left'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='120' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='endDate' headerText='End Date'
width='120' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration'
width='110' textAlign='Right'></ColumnDirective>
<ColumnDirective field='progress' headerText='Progress'
width='110' textAlign='Right'></ColumnDirective>
<ColumnDirective field='priority' headerText='Priority'
width='110' freeze='Right'></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 848


TreeGrid Virtual scroll in React Treegrid component

<ColumnDirective field='approved' headerText='Approved'


textAlign='Center' width='110'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Freeze]} />
</TreeGridComponent>
};
export default App;

* Freeze Direction is not compatible with the isFrozen and frozenColumns properties.
Limitations of frozen tree grid
The following features are not supported in frozen rows and columns:

• Row Template
• Detail Template
• Cell Editing

Freeze Direction feature has the below limitations, along with the above mentioned limitations.

• Infinite scroll cache mode


• Freeze direction in the stacked header is not compatible with column reordering.

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Virtual scroll in React Treegrid component
TreeGrid allows you to load large amount of data without performance degradation. To use
virtualization, you need to inject VirtualScrollService in TreeGrid.
Row virtualization
Row virtualization allows you to load and render rows only in the content viewport. It is an alternative
way of paging in which the rows will be appended while scrolling vertically. To setup the row
virtualization, you need to define enableVirtualization as true and content height by height property.
The number of records displayed in the TreeGrid is determined implicitly by height of the content area
and a buffer records will be maintained in the TreeGrid content in addition to the original set of rows.
Expand and Collapse state of any child record will be persisted.
APP.JSX
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
VirtualScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
function App() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping='Crew'
enableVirtualization={true} treeColumnIndex={1} height='291'>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Player Jersey'
width='120' textAlign='Right'></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 849


TreeGrid Virtual scroll in React Treegrid component

<ColumnDirective field='FIELD1' headerText='Player Name'


width='120'></ColumnDirective>
<ColumnDirective field='FIELD2' headerText='Year' width='100'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD3' headerText='Stint' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD4' headerText='TMID' width='120'
textAlign='Right'></ColumnDirective>
</ColumnsDirective>
<Inject services={[VirtualScroll]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
VirtualScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
function App() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping = 'Crew'
enableVirtualization={true} treeColumnIndex={1} height='291'>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Player Jersey'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD1' headerText='Player Name'
width='120'></ColumnDirective>
<ColumnDirective field='FIELD2' headerText='Year' width='100'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD3' headerText='Stint' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD4' headerText='TMID' width='120'
textAlign='Right'></ColumnDirective>
</ColumnsDirective>
<Inject services={[VirtualScroll]} />
</TreeGridComponent>
};
export default App;

Column virtualization
Column virtualization allows you to virtualize columns. It will render column only in the current view
port and all other columns are rendered on demand during horizontal scrolling.
To setup the column virtualization, set the enableVirtualization and enableColumnVirtualization
properties as true.
APP.JSX
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
VirtualScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';

Copyright © 2001 -2024 Syncfusion Inc. 850


TreeGrid Virtual scroll in React Treegrid component

function App() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping='Crew'
enableVirtualization={true} enableColumnVirtualization={true}
treeColumnIndex={1} height='291'>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Player Jersey'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD1' headerText='Player Name'
width='120'></ColumnDirective>
<ColumnDirective field='FIELD2' headerText='Year' width='100'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD3' headerText='Stint' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD4' headerText='TMID' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD5' headerText='LGID' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD6' headerText='GP' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD7' headerText='GS' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD8' headerText='Minutes' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD9' headerText='Points' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD10' headerText='oRebounds'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD11' headerText='dRebounds'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD12' headerText='Rebounds'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD13' headerText='Assists'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD14' headerText='Steals' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD15' headerText='Blocks' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD16' headerText='Turnovers'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD17' headerText='PF' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD18' headerText='fgAttempted'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD19' headerText='ftAttempted'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD20' headerText='ThreeAttempted'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD21' headerText='ThreeMade'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD22' headerText='PostGP' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD23' headerText='ftMade' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD24' headerText='fgMade' width='120'
textAlign='Right'></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 851


TreeGrid Virtual scroll in React Treegrid component

<ColumnDirective field='FIELD25' headerText='ffmade' width='120'


textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD26' headerText='PostGS' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD27' headerText='PostMinutes'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD28' headerText='PostPoints'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD29' headerText='PostoRebounds'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD30' headerText='PostdRebounds'
width='120' textAlign='Right'></ColumnDirective>
</ColumnsDirective>
<Inject services={[VirtualScroll]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
VirtualScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
function App() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping = 'Crew'
enableVirtualization={true} enableColumnVirtualization={true}
treeColumnIndex={1} height='291'>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Player Jersey'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD1' headerText='Player Name'
width='120'></ColumnDirective>
<ColumnDirective field='FIELD2' headerText='Year' width='100'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD3' headerText='Stint' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD4' headerText='TMID' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD5' headerText='LGID' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD6' headerText='GP' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD7' headerText='GS' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD8' headerText='Minutes' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD9' headerText='Points' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD10' headerText='oRebounds'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD11' headerText='dRebounds'
width='120' textAlign='Right'></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 852


TreeGrid Virtual scroll in React Treegrid component

<ColumnDirective field='FIELD12' headerText='Rebounds'


width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD13' headerText='Assists'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD14' headerText='Steals' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD15' headerText='Blocks' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD16' headerText='Turnovers'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD17' headerText='PF' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD18' headerText='fgAttempted'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD19' headerText='ftAttempted'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD20' headerText='ThreeAttempted'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD21' headerText='ThreeMade'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD22' headerText='PostGP' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD23' headerText='ftMade' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD24' headerText='fgMade' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD25' headerText='ffmade' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD26' headerText='PostGS' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD27' headerText='PostMinutes'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD28' headerText='PostPoints'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD29' headerText='PostoRebounds'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD30' headerText='PostdRebounds'
width='120' textAlign='Right'></ColumnDirective>
</ColumnsDirective>
<Inject services={[VirtualScroll]} />
</TreeGridComponent>
};
export default App;

Column's width is required for column virtualization.


If column's width is not defined then tree grid will consider its value as 200px.
Limitations for virtualization

• Due to the element height limitation in browsers, the maximum number of records loaded by
the treegrid is limited by the browser capability.
• Cell selection will not be persisted in row.
• Virtual scrolling is not compatible with detail template, editing and row drag and drop features.

Copyright © 2001 -2024 Syncfusion Inc. 853


TreeGrid Infinite scroll in React Treegrid component

• The page size provided must be two times larger than the number of visible rows in the
TreeGrid. If the page size is failed to meet this condition then the size will be determined by
TreeGrid.
• The virtual height of the treegrid content is calculated using the row height and total number of
records in the data source and hence features which changes row height such as text wrapping
are not supported. If you want to increase the row height to accommodate the content then
you can specify the row height as below to ensure all the table rows are in same height.

`css
.e-treegrid .e-row {
height: 2em;
}
`

• Programmatic selection using the selectRows method is not supported in virtual scrolling.
• Virtual scrolling is not compatible with Batch editing, clipboard functionality and detail template.
• When virtualization is active in a tree grid, the editCell method is unusable for records outside
the currently visible viewport.

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Infinite scroll in React Treegrid component
Infinite scrolling is used to load a huge amount of data without degrading the Tree Grid performance.
This feature works like the lazy loading concept, which means the buffer data is loaded only when the
scrollbar reaches the end of the scroller.
To enable Infinite scrolling, set enableInfiniteScrolling property as true and inject InfiniteScroll module
in Tree Grid.
* In this feature, Tree Grid will not make a new data request when you visit the same page again.
APP.JSX
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
InfiniteScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
function App() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping='Crew'
enableInfiniteScrolling={true} treeColumnIndex={1} height='291'>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Player Jersey'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD1' headerText='Player Name'
width='120'></ColumnDirective>
<ColumnDirective field='FIELD2' headerText='Year' width='100'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD3' headerText='Stint' width='120'
textAlign='Right'></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 854


TreeGrid Infinite scroll in React Treegrid component

<ColumnDirective field='FIELD4' headerText='TMID' width='120'


textAlign='Right'></ColumnDirective>
</ColumnsDirective>
<Inject services={[InfiniteScroll]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
InfiniteScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
function App() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping = 'Crew'
enableInfiniteScrolling={true} treeColumnIndex={1} height='291'>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Player Jersey'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD1' headerText='Player Name'
width='120'></ColumnDirective>
<ColumnDirective field='FIELD2' headerText='Year' width='100'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD3' headerText='Stint' width='120'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD4' headerText='TMID' width='120'
textAlign='Right'></ColumnDirective>
</ColumnsDirective>
<Inject services={[InfiniteScroll]} />
</TreeGridComponent>
};
export default App;

InitialBlocks
You can define the initial loading pages count by using infiniteScrollSettings.initialBlocks property. By
default, this feature loads three pages in initial rendering.
In the below demo, we have changed this property value to load five page records instead of three.
APP.JSX
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
InfiniteScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
function App() {
const pageSettings = { pageSize: 50 };
const infiniteOptions = { initialBlocks: 5 };
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping='Crew'
height={300} enableInfiniteScrolling={true}
infiniteScrollSettings={infiniteOptions} pageSettings={pageSettings}
treeColumnIndex={1}>

Copyright © 2001 -2024 Syncfusion Inc. 855


TreeGrid Infinite scroll in React Treegrid component

<Inject services={[InfiniteScroll]}/>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Player Jersey'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD1' headerText='Player Name'
width='120'></ColumnDirective>
<ColumnDirective field='FIELD2' headerText='Year'
width='100' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD3' headerText='Stint'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD4' headerText='TMID'
width='120' textAlign='Right'></ColumnDirective>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
InfiniteScroll, InfiniteScrollSettingsModel, PageSettingsModel } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
function App() {
const pageSettings: PageSettingsModel = { pageSize: 50 };
const infiniteOptions: InfiniteScrollSettingsModel = { initialBlocks: 5 };
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping = 'Crew'
height={300} enableInfiniteScrolling={true} infiniteScrollSettings={
infiniteOptions } pageSettings={ pageSettings } treeColumnIndex={1}>
<Inject services={[InfiniteScroll]} />
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Player Jersey'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD1' headerText='Player Name'
width='120'></ColumnDirective>
<ColumnDirective field='FIELD2' headerText='Year'
width='100' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD3' headerText='Stint'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD4' headerText='TMID'
width='120' textAlign='Right'></ColumnDirective>
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Cache Mode
Cache is used to store the loaded rows object in the Tree Grid instance which can be reused for creating
the row elements whenever you scroll to already visited page. Also, this mode maintains row elements
based on the infiniteScrollSettings.maxBlocks count value, once this limit exceeds then it will remove
row elements from DOM for new rows.

Copyright © 2001 -2024 Syncfusion Inc. 856


TreeGrid Infinite scroll in React Treegrid component

To enable the cache mode in Infinite scrolling, set infiniteScrollSettings.enableCache property as true.
APP.JSX
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
InfiniteScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
function App() {
const pageSettings = { pageSize: 50 };
const infiniteOptions = { enableCache: true };
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping='Crew'
height={300} enableInfiniteScrolling={true}
infiniteScrollSettings={infiniteOptions} pageSettings={pageSettings}
treeColumnIndex={1}>
<Inject services={[InfiniteScroll]}/>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Player Jersey'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD1' headerText='Player Name'
width='120'></ColumnDirective>
<ColumnDirective field='FIELD2' headerText='Year'
width='100' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD3' headerText='Stint'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD4' headerText='TMID'
width='120' textAlign='Right'></ColumnDirective>
</ColumnsDirective>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
InfiniteScroll, InfiniteScrollSettingsModel, PageSettingsModel } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
function App() {
const pageSettings: PageSettingsModel = { pageSize: 50 };
const infiniteOptions: InfiniteScrollSettingsModel = { enableCache: true
};
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping = 'Crew'
height={300} enableInfiniteScrolling={true} infiniteScrollSettings={
infiniteOptions } pageSettings={ pageSettings } treeColumnIndex={1}>
<Inject services={[InfiniteScroll]} />
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Player Jersey'
width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD1' headerText='Player Name'
width='120'></ColumnDirective>
<ColumnDirective field='FIELD2' headerText='Year'
width='100' textAlign='Right'></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 857


TreeGrid Aggregates

<ColumnDirective field='FIELD3' headerText='Stint'


width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD4' headerText='TMID'
width='120' textAlign='Right'></ColumnDirective>
</ColumnsDirective>
</TreeGridComponent>
};
export default App;

Limitations for Infinite Scrolling

• Due to the element height limitation in browsers, the maximum number of records loaded by
the tree grid is limited due to the browser capability.
• Initial loading rows total height must be greater than the viewport height.
• Cell selection will not be persisted in cache mode.
• Infinite scrolling is not compatible with batch editing, cell editing, detail template.
• The aggregated information and total group items are displayed based on the current view
items. To get these information regardless of the view items, refer to the
• Programmatic selection using the selectRows and selectRow method is not supported in infinite
scrolling.

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Aggregates
Aggregates in React Treegrid component
Aggregate values are displayed in the TreeGrid footer and in parent row footer for child row aggregate
values. It can be configured through aggregates property. field and type are the minimum properties
required to represent an aggregate column.
To use the aggregate feature, you have to inject the Aggregate module.
By default, the aggregate value can be displayed in the treegrid footer, and footer of child rows. To show
the aggregate value in one of the cells, use the Link to the Video.
To get start quickly with aggregates functionalities, you can check on this video:
Built-in aggregate types
The aggregate type should be specified in the type property to configure an aggregate column.
The built-in aggregates are,

• Sum
• Average
• Min
• Max
• Count
• Truecount
• Falsecount

* Multiple aggregates can be used for an aggregate column by setting the type property

Copyright © 2001 -2024 Syncfusion Inc. 858


TreeGrid Aggregates

with an array of aggregate types.


* Multiple types for a column is supported only when one of the aggregate templates is used.
Child aggregate
Aggregate value is calculated for child rows, and it is displayed in the parent row footer. Use the
showChildSummary property to render the child rows aggregate value.
APP.JSX
import { getObject } from '@syncfusion/ej2-grids';
import { Aggregate, AggregatesDirective, ColumnDirective, ColumnsDirective,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { AggregateColumnDirective, AggregateColumnsDirective,
AggregateDirective, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { summaryRowData } from './datasource';
function App() {
const footerSum = (props) => {
return (<span>Minimum: {getObject('Min', props)}</span>);
};
const footerSum2 = (props) => {
return (<span>Maximum: {getObject('Max', props)}</span>);
};
return <TreeGridComponent dataSource={summaryRowData}
treeColumnIndex={0} childMapping='children' height='260'>
<ColumnsDirective>
<ColumnDirective field='FreightID' headerText='Freight ID'
width='90' textAlign='Right'/>
<ColumnDirective field='FreightName' headerText='Freight Name'
width='195'/>
<ColumnDirective field='UnitWeight' headerText='Weight Per Unit'
width='130' textAlign='Right' type='number'/>
<ColumnDirective field='TotalUnits' headerText='Total Units'
type='number' width='125' textAlign='Right'/>
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective showChildSummary={true}>
<AggregateColumnsDirective>
<AggregateColumnDirective field='TotalUnits'
columnName='TotalUnits' type='Min' footerTemplate={footerSum}/>
<AggregateColumnDirective field='UnitWeight'
columnName='UnitWeight' type='Max' footerTemplate={footerSum2}/>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { getObject } from '@syncfusion/ej2-grids';
import { Aggregate, AggregatesDirective, ColumnDirective, ColumnsDirective,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 859


TreeGrid Aggregates

import { AggregateColumnDirective, AggregateColumnsDirective,


AggregateDirective, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { summaryRowData } from './datasource';
function App() {
const footerSum = (props:object) => {
return(<span>Minimum: {getObject('Min', props)}</span>)
}
const footerSum2 = (props: object) => {
return(<span>Maximum: {getObject('Max', props)}</span>)
}
return <TreeGridComponent dataSource={summaryRowData}
treeColumnIndex={0} childMapping='children' height='260'>
<ColumnsDirective>
<ColumnDirective field='FreightID' headerText='Freight ID'
width='90' textAlign='Right'/>
<ColumnDirective field='FreightName' headerText='Freight Name'
width='195'/>
<ColumnDirective field='UnitWeight' headerText='Weight Per Unit'
width='130' textAlign='Right' type='number' />
<ColumnDirective field='TotalUnits' headerText='Total Units'
type='number' width='125' textAlign='Right' />
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective showChildSummary={true}>
<AggregateColumnsDirective>
<AggregateColumnDirective field='TotalUnits'
columnName='TotalUnits' type='Min'
footerTemplate={footerSum}/>
<AggregateColumnDirective field='UnitWeight'
columnName='UnitWeight' type='Max'
footerTemplate={footerSum2}/>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate]}/>
</TreeGridComponent>
};
export default App;

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Footer aggregate in React Treegrid component
Footer aggregate value is calculated for all the rows, and it is displayed in the footer cells. Use the
footerTemplate property to render the aggregate value in footer cells.
APP.JSX
import { getObject } from '@syncfusion/ej2-grids';
import { Aggregate, AggregatesDirective, ColumnDirective, ColumnsDirective,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { AggregateColumnDirective, AggregateColumnsDirective,
AggregateDirective, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { summaryRowData } from './datasource';

Copyright © 2001 -2024 Syncfusion Inc. 860


TreeGrid Aggregates

function App() {
const footerSum = (props) => {
return (<span>Minimum: {getObject('Min', props)}</span>);
};
const footerSum2 = (props) => {
return (<span>Maximum: {getObject('Max', props)}</span>);
};
return <TreeGridComponent dataSource={summaryRowData}
treeColumnIndex={0} childMapping='children' height='260'>
<ColumnsDirective>
<ColumnDirective field='FreightID' headerText='Freight ID'
width='130'/>
<ColumnDirective field='FreightName' headerText='Freight Name'
width='180'/>
<ColumnDirective field='UnitWeight' headerText='Weight Per Unit'
width='130' textAlign='Right' type='number'/>
<ColumnDirective field='TotalUnits' headerText='Total Units'
type='number' width='125' textAlign='Right'/>
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective showChildSummary={false}>
<AggregateColumnsDirective>
<AggregateColumnDirective field='TotalUnits'
columnName='TotalUnits' type='Min' footerTemplate={footerSum}/>
<AggregateColumnDirective field='UnitWeight'
columnName='UnitWeight' type='Max' footerTemplate={footerSum2}/>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { getObject } from '@syncfusion/ej2-grids';
import { Aggregate, AggregatesDirective, ColumnDirective, ColumnsDirective,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { AggregateColumnDirective, AggregateColumnsDirective,
AggregateDirective, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { summaryRowData } from './datasource';
function App() {
const footerSum = (props: object) => {
return(<span>Minimum: {getObject('Min', props)}</span>)
}
const footerSum2 = (props: object) => {
return(<span>Maximum: {getObject('Max', props)}</span>)
}
return <TreeGridComponent dataSource={summaryRowData}
treeColumnIndex={0} childMapping='children' height='260'>
<ColumnsDirective>
<ColumnDirective field='FreightID' headerText='Freight ID'
width='130'/>

Copyright © 2001 -2024 Syncfusion Inc. 861


TreeGrid Aggregates

<ColumnDirective field='FreightName' headerText='Freight Name'


width='180'/>
<ColumnDirective field='UnitWeight' headerText='Weight Per Unit'
width='130' textAlign='Right' type='number'/>
<ColumnDirective field='TotalUnits' headerText='Total Units'
type='number' width='125' textAlign='Right'/>
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective showChildSummary={false}>
<AggregateColumnsDirective>
<AggregateColumnDirective field='TotalUnits'
columnName='TotalUnits' type='Min'
footerTemplate={footerSum}/>
<AggregateColumnDirective field='UnitWeight'
columnName='UnitWeight' type='Max'
footerTemplate={footerSum2}/>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate]}/>
</TreeGridComponent>
};
export default App;

The aggregate values must be accessed inside the template using their corresponding type name.
How to format aggregate value
You can format the aggregate value result by using the format property.
APP.JSX
import { getObject } from '@syncfusion/ej2-grids';
import { Aggregate, AggregatesDirective, ColumnDirective, ColumnsDirective,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { AggregateColumnDirective, AggregateColumnsDirective,
AggregateDirective, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { summaryData } from './datasource';
function App() {
const footerSum = (props) => {
return (<span>Total: {getObject('Sum', props)}</span>);
};
return <TreeGridComponent dataSource={summaryData} treeColumnIndex={0}
childMapping='subtasks' height='260'>
<ColumnsDirective>
<ColumnDirective field='category' headerText='Category'
width='160'/>
<ColumnDirective field='units' headerText='Total Units'
width='130' type='number' textAlign='Right'/>
<ColumnDirective field='unitPrice' headerText='Unit Price($)'
width='110' textAlign='Right' type='number' format='C2'/>
<ColumnDirective field='price' headerText='Price($)'
type='number' width='160' textAlign='Right' format='C2'/>
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective showChildSummary={true}>

Copyright © 2001 -2024 Syncfusion Inc. 862


TreeGrid Aggregates

<AggregateColumnsDirective>
<AggregateColumnDirective field='price' columnName='price'
type='Sum' footerTemplate={footerSum} format='C2'/>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { getObject } from '@syncfusion/ej2-grids';
import { Aggregate, AggregatesDirective, ColumnDirective, ColumnsDirective,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { AggregateColumnDirective, AggregateColumnsDirective,
AggregateDirective, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { summaryData } from './datasource';
function App() {
const footerSum = (props: object) => {
return(<span>Total: {getObject('Sum', props)}</span>)
}
return <TreeGridComponent dataSource={summaryData} treeColumnIndex={0}
childMapping='subtasks' height='260'>
<ColumnsDirective>
<ColumnDirective field='category' headerText='Category'
width='160'/>
<ColumnDirective field='units' headerText='Total Units'
width='130' type='number' textAlign='Right'/>
<ColumnDirective field='unitPrice' headerText='Unit Price($)'
width='110' textAlign='Right' type='number' format='C2' />
<ColumnDirective field='price' headerText='Price($)'
type='number' width='160' textAlign='Right' format='C2' />
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective showChildSummary={true}>
<AggregateColumnsDirective>
<AggregateColumnDirective field='price' columnName='price'
type='Sum'
footerTemplate={footerSum} format='C2'/>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate]}/>
</TreeGridComponent>
};
export default App;

Custom aggregate in React Treegrid component


To calculate the aggregate value with your own aggregate functions, use the custom aggregate option.
To use custom aggregation, specify the type as Custom, and provide the custom aggregate function in
the customAggregate property.

Copyright © 2001 -2024 Syncfusion Inc. 863


TreeGrid Aggregates

APP.JSX
import { getObject } from '@syncfusion/ej2-grids';
import { Aggregate, AggregatesDirective, ColumnDirective, ColumnsDirective,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { AggregateColumnDirective, AggregateColumnsDirective,
AggregateDirective, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { summaryData } from './datasource';
function App() {
const footerSum = (props) => {
return (<span>Total: {getObject('Sum', props)}</span>);
};
const customAggregateFn = (row) => {
const sampleData = getObject('result', row);
let countLength = 0;
sampleData.filter((item) => {
const data = getObject('category', item);
const value = 'Frozen seafood';
if (data === value) {
countLength++;
}
});
return countLength;
};
const custom = (props) => {
return (<span> Count of Frozen seafood: {getObject('Custom',
props)}</span>);
};
return <TreeGridComponent dataSource={summaryData} treeColumnIndex={0}
childMapping='subtasks' height='260'>
<ColumnsDirective>
<ColumnDirective field='category' headerText='Category'
width='160'/>
<ColumnDirective field='units' headerText='Total Units'
width='130' type='number' textAlign='Right'/>
<ColumnDirective field='unitPrice' headerText='Unit Price($)'
width='90' textAlign='Right' type='number' format='C2'/>
<ColumnDirective field='price' headerText='Price($)'
type='number' width='160' textAlign='Right' format='C'/>
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective showChildSummary={false}>
<AggregateColumnsDirective>
<AggregateColumnDirective field='price'
columnName='category' type='Custom' customAggregate={customAggregateFn}
footerTemplate={custom}/>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate]}/>
</TreeGridComponent>;
}
;
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 864


TreeGrid Aggregates

APP.TSX
import { getObject } from '@syncfusion/ej2-grids';
import { Aggregate, AggregatesDirective, ColumnDirective, ColumnsDirective,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { AggregateColumnDirective, AggregateColumnsDirective,
AggregateDirective, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { summaryData } from './datasource';
function App() {
const footerSum = (props:object) => {
return(<span>Total: {getObject('Sum', props)}</span>)
}
const customAggregateFn = (row: object) => {
const sampleData: object[] = getObject('result', row);
let countLength: number = 0;
sampleData.filter((item: object) => {
const data: string = getObject('category', item);
const value: string = 'Frozen seafood';
if (data === value) {
countLength++;
}
});
return countLength;
}
const custom = (props: object) => {
return(<span> Count of Frozen seafood: {getObject('Custom',
props)}</span>)
}
return <TreeGridComponent dataSource={summaryData} treeColumnIndex={0}
childMapping='subtasks' height='260'>
<ColumnsDirective>
<ColumnDirective field='category' headerText='Category'
width='160'/>
<ColumnDirective field='units' headerText='Total Units'
width='130' type='number' textAlign='Right'/>
<ColumnDirective field='unitPrice' headerText='Unit Price($)'
width='90' textAlign='Right' type='number' format='C2' />
<ColumnDirective field='price' headerText='Price($)'
type='number' width='160' textAlign='Right' format='C' />
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective showChildSummary={false}>
<AggregateColumnsDirective>
<AggregateColumnDirective field='price'
columnName='category' type='Custom'
customAggregate ={customAggregateFn}
footerTemplate={custom}/>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate]}/>
</TreeGridComponent>
};
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 865


TreeGrid Print in React Treegrid component

To access the custom aggregate value inside the template, use the key as Custom.
Print in React Treegrid component
To print the TreeGrid, use the print method from treegrid instance. The print option can be displayed on
the toolbar by adding the Print toolbar item.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['Print'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='265' toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['Print'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='265' toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 866


TreeGrid Print in React Treegrid component

<Inject services={[Toolbar]}/>
</TreeGridComponent>
};
export default App;

Page setup
Some of the print options cannot be configured through JavaScript code. So, you have to customize the
layout, paper size, and margin options using the browser page setup dialog. Please refer to the following
links to know more about the browser page setup:

• Chrome
• Firefox
• Safari
• IE

Print using an external button


To print the treegrid from an external button, invoke the print method.
APP.JSX
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const clickHandler = () => {
if (treegrid) {
treegrid.print();
}
};
return (<div><ButtonComponent
onClick={clickHandler}>Print</ButtonComponent>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='265' ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Toolbar]}/>
</TreeGridComponent></div>);
}
;
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 867


TreeGrid Print in React Treegrid component

APP.TSX
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Toolbar, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const clickHandler = () => {
if (treegrid) {
treegrid.print();
}
}
return (<div><ButtonComponent onClick=
{clickHandler}>Print</ButtonComponent>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='265'
ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Toolbar]}/>
</TreeGridComponent></div>)
};
export default App;

Print the visible page


By default, the treegrid prints all the pages. To print the current page alone, set the printMode to
CurrentPage.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Page, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['Print'];
const pageSettings = { pageSize: 8 };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='220' toolbar={toolbarOptions}
allowPaging={true} pageSettings={pageSettings} printMode='CurrentPage'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>

Copyright © 2001 -2024 Syncfusion Inc. 868


TreeGrid Print in React Treegrid component

<ColumnDirective field='taskName' headerText='Task Name'


width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Toolbar, Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Page, PageSettingsModel, Toolbar, ToolbarItems } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['Print'];
const pageSettings: PageSettingsModel = { pageSize: 8 };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='220' toolbar={toolbarOptions} allowPaging={true}
pageSettings={pageSettings}
printMode='CurrentPage'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Toolbar,Page]}/>
</TreeGridComponent>
};
export default App;

Print large number of columns


By default, the browser uses A4 as page size option to print pages and to adapt the size of the page the
browser print preview will auto-hide the overflowed contents. Hence treegrid with large number of
columns will cut off to adapt the print page.
To show large number of columns when printing, adjust the scale option from print option panel based
on your content size.

Copyright © 2001 -2024 Syncfusion Inc. 869


TreeGrid Print in React Treegrid component

Show or Hide columns while Printing


You can show a hidden column or hide a visible column while printing the treegrid using toolbarClick and
printComplete events.
In the toolbarClick event, based on args.item.text as Print. We can show or hide columns by setting
column.visible property to true or false respectively.
In the printComplete event, We have reversed the state back to the previous state.
In the below example, we have Duration as a hidden column in the treegrid. While printing, we have
changed Duration to visible column and StartDate as hidden column.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const toolbarOptions = ['Print'];
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'Print') {
const cols = treegrid.grid.columns;
for (const col of cols) {
if (col.field === "duration") {
col.visible = true;
}
else if (col.field === "startDate") {
col.visible = false;
}
}
}
};
const printComplete = (args) => {
if (treegrid) {

Copyright © 2001 -2024 Syncfusion Inc. 870


TreeGrid Print in React Treegrid component

const cols = treegrid.grid.columns;


for (const col of cols) {
if (col.field === "duration") {
col.visible = false;
}
else if (col.field === "StartDate") {
col.visible = true;
}
}
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='265' toolbar={toolbarOptions}
toolbarClick={toolbarClick} ref={g => treegrid = g}
printComplete={printComplete}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' visible={false}/>
</ColumnsDirective>
<Inject services={[Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Column, Inject, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const toolbarOptions: ToolbarItems[] = ['Print'];
const toolbarClick = (args: any): void => {
if (treegrid && args.item.text === 'Print') {
const cols: Column[] = treegrid.grid.columns as Column[];
for (const col of cols) {
if (col.field === "duration") {
col.visible = true;
}
else if (col.field === "startDate") {
col.visible = false;
}
}
}
}
const printComplete = (args: any): void => {

Copyright © 2001 -2024 Syncfusion Inc. 871


TreeGrid Adaptive in React Treegrid component

if (treegrid) {
const cols: Column[] = treegrid.grid.columns as Column[];
for (const col of cols) {
if (col.field === "duration") {
col.visible = false;
}
else if (col.field === "StartDate") {
col.visible = true;
}
}
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='265' toolbar={toolbarOptions} toolbarClick={toolbarClick}
ref={g => treegrid = g} printComplete={printComplete}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar]}/>
</TreeGridComponent>
};
export default App;

Limitations of Printing Large Data


When treegrid contains large number of data, printing all the data at once is not a best option for the
browser performance. Because to render all the DOM elements in one page will produce performance
issues in the browser. It leads to browser slow down or browser hang.
If printing of all the data is still needed, we suggest to Export the treegrid to Excel or CSV or Pdf and
then print it from another non-web based application.
You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Adaptive in React Treegrid component
The Grid user interface (UI) was redesigned to provide an optimal viewing experience and improve
usability on small screens. This interface will render the filter, sort, and edit dialogs adaptively and have
an option to render the Tree Grid row elements in the horizontal direction.
Render adaptive dialogs
When you enable the enableAdaptiveUI property, the grid will render the filter, sort, and edit dialogs in
full screen for a better user experience. The following demo demonstrates this behaviour.
APP.JSX
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
Filter, Sort, Edit, Toolbar, Page } from '@syncfusion/ej2-react-treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 872


TreeGrid Adaptive in React Treegrid component

import { Browser } from "@syncfusion/ej2-base";


import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel',
'Search'];
const editSettings = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Dialog' };
const filterOptions = { type: 'Excel' };
let treegrid;
const load = () => {
const ID = !Browser.isDevice ? 'adaptivebrowser' : 'adaptivedevice';
treegrid = document.getElementById(ID).ej2_instances[0];
treegrid.grid.adaptiveDlgTarget = document.getElementsByClassName('e-
mobile-content')[0];
};
return (<div className='control-pane'>
<div className='control-section'>
<div className="col-md-9 e-bigger e-adaptive-demo">
{!Browser.isDevice ? (<div className="e-mobile-layout">
<div className="e-mobile-content">
<TreeGridComponent id="adaptivebrowser"
dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
height='100%' enableAdaptiveUI={true} allowFiltering={true}
allowSorting={true} allowPaging={true} filterSettings={filterOptions}
toolbar={toolbarOptions} editSettings={editSettings} load={load}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
isPrimaryKey={true} width='135' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task
Name' width='280'></ColumnDirective>
<ColumnDirective field='duration'
headerText='Duration' width='140' textAlign='Right'/>
<ColumnDirective field='progress'
headerText='Progress' width='145' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter, Sort, Edit, Toolbar,
Page]}/>
</TreeGridComponent>
</div>
</div>) : (<TreeGridComponent id="adaptivedevice"
dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
height='100%' enableAdaptiveUI={true} allowFiltering={true}
allowSorting={true} allowPaging={true} filterSettings={filterOptions}
toolbar={toolbarOptions} editSettings={editSettings} load={load}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
isPrimaryKey={true} width='135' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='280'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration'
width='140' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='145' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter, Sort, Edit, Toolbar, Page]}/>
</TreeGridComponent>)}

Copyright © 2001 -2024 Syncfusion Inc. 873


TreeGrid Adaptive in React Treegrid component

</div>
</div>
</div>);
}
;
export default App;

APP.TSX
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject,
Filter, Sort, Edit, Toolbar, Page } from '@syncfusion/ej2-react-treegrid';
import { Browser } from "@syncfusion/ej2-base";
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: any = ['Add', 'Edit', 'Delete', 'Update', 'Cancel',
'Search'];
const editSettings: any = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Dialog' };
const filterOptions: any = { type: 'Excel' };
let treegrid: TreeGridComponent;
const load = (): void => {
const ID: string = !Browser.isDevice ? 'adaptivebrowser' :
'adaptivedevice';
treegrid = document.getElementById(ID).ej2_instances[0];
treegrid.grid.adaptiveDlgTarget = document.getElementsByClassName('e-
mobile-content')[0] as HTMLElement;
}
return (
<div className='control-pane'>
<div className='control-section'>
<div className="col-md-9 e-bigger e-adaptive-demo">
{!Browser.isDevice ? (
<div className="e-mobile-layout">
<div className="e-mobile-content">
<TreeGridComponent id="adaptivebrowser"
dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
height='100%' enableAdaptiveUI={true} allowFiltering={true}
allowSorting={true} allowPaging={true} filterSettings={filterOptions}
toolbar={toolbarOptions} editSettings={editSettings} load={load}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
isPrimaryKey={true} width='135' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task
Name' width='280'></ColumnDirective>
<ColumnDirective field='duration'
headerText='Duration' width='140' textAlign='Right' />
<ColumnDirective field='progress'
headerText='Progress' width='145' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter, Sort, Edit, Toolbar, Page]}
/>
</TreeGridComponent>
</div>
</div>
) : (

Copyright © 2001 -2024 Syncfusion Inc. 874


TreeGrid Loading animation in React Treegrid component

<TreeGridComponent id="adaptivedevice"
dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
height='100%' enableAdaptiveUI={true} allowFiltering={true}
allowSorting={true} allowPaging={true} filterSettings={filterOptions}
toolbar={toolbarOptions} editSettings={editSettings} load={load}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
isPrimaryKey={true} width='135' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='280'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration'
width='140' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress'
width='145' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter, Sort, Edit, Toolbar, Page]} />
</TreeGridComponent>
)}
</div>
</div>
</div>
)
};
export default App;

Please refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to learn how to present and manipulate data.
Loading animation in React Treegrid component
The Tree Grid displays a loading indicator while the data is being fetched and bound to the tree grid
during initial rendering, refreshing, and after performing any tree grid actions like sorting, filtering, and
more.
The tree grid supports two indicator types, which can be enabled by setting the
loadingIndicator.indicatorType property to Spinner or Shimmer. The default value of the indicator
type is Spinner.
In the following sample, the Shimmer indicator is displayed while the tree grid is loading and refreshing
when using the remote data.
APP.JSX
{% raw %}
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent,
Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
const pageSettings = { pageCount: 3 };
const data = new DataManager({
adaptor: new WebApiAdaptor,
crossDomain: true,
url: 'https://ej2services.syncfusion.com/production/web-
services/api/SelfReferenceData'
});

Copyright © 2001 -2024 Syncfusion Inc. 875


TreeGrid Loading animation in React Treegrid component

return <TreeGridComponent dataSource={data} hasChildMapping='isParent'


treeColumnIndex={1} idMapping='TaskID' parentIdMapping='ParentItem'
height='400' loadingIndicator={{ indicatorType: 'Shimmer' }}
allowPaging={true} allowSorting={true} pageSettings={pageSettings}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='120'
textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='240' textAlign='Left'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='140' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='Duration' headerText='Duration'
width='130' textAlign='Right'/>
<ColumnDirective field='Progress' headerText='Progress'
width='130'/>
</ColumnsDirective>
<Inject services={[Page, Sort]}/>
</TreeGridComponent>;
}
;
export default App;
{% endraw %}

APP.TSX
{% raw %}
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent,
Sort, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
function App() {
const pageSettings: PageSettingsModel = { pageCount: 3 };
const data = new DataManager({
adaptor: new WebApiAdaptor,
crossDomain: true,
url: 'https://ej2services.syncfusion.com/production/web-
services/api/SelfReferenceData'
});
return <TreeGridComponent dataSource={data} hasChildMapping='isParent'
treeColumnIndex={1} idMapping='TaskID' parentIdMapping='ParentItem'
height='400' loadingIndicator= {{ indicatorType: 'Shimmer' }}
allowPaging={true} allowSorting={true} pageSettings={pageSettings}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='120'
textAlign='Right'/>
<ColumnDirective field='TaskName' headerText='Task Name'
width='240' textAlign='Left'/>
<ColumnDirective field='StartDate' headerText='Start Date'
width='140' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='Duration' headerText='Duration'
width='130' textAlign='Right' />
<ColumnDirective field='Progress' headerText='Progress'
width='130' />
</ColumnsDirective>
<Inject services={[Page, Sort]}/>
</TreeGridComponent>

Copyright © 2001 -2024 Syncfusion Inc. 876


TreeGrid State Persistence

};
export default App;
{% endraw %}

State Persistence
State persistence in React Treegrid component
State persistence refers to the TreeGrid's state maintained in the browser's localStorage even if the
browser is refreshed or if you move to the next page within the browser.
State persistence stores treegrid’s model object in the local storage when the enablePersistence is
defined as true.
You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Get or set local storage value in React Treegrid component
If the enablePersistence property is set to true, the treegrid property value is saved in the
window.localStorage for reference. You can get/set the localStorage value by using the
getItem/setItem method in the window.localStorage.
`ts
// get the TreeGrid model.
const value: string = window.localStorage.getItem('treegridTreeGrid') as string;
// "treegridTreeGrid" is component name + component id.
const model: object = JSON.parse(value);
`
`ts
// set the TreeGrid model.
// "treegridTreeGrid" is component name + component id.
window.localStorage.setItem('treegridTreeGrid', JSON.stringify(model));
`
Tool Bar
Tool bar in React Treegrid component
The TreeGrid provides ToolBar support to handle treegrid actions. The toolbar property accepts either
the collection of built-in toolbar items and ItemModelobjects for custom toolbar items or HTML element
ID for toolbar template.
To use ToolBar, inject Toolbar module in the treegrid.
You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.

Copyright © 2001 -2024 Syncfusion Inc. 877


TreeGrid Tool Bar

Tool bar items in React Treegrid component


Built-in toolbar items
Built-in toolbar items execute standard actions of the treegrid, and it can be added by defining the
toolbar
as a collection of built-in items. It renders the button with icon and text.
The following table shows built-in toolbar items and its actions.
| Built-in Toolbar Items | Actions |
|------------------------|---------|
| ExpandAll | Expands all the rows.|
| CollapseAll | Collapses all the rows.|
| Add | Adds a new record.|
| Edit | Edits the selected record.|
| Update | Updates the edited record.|
| Delete | Deletes the selected record.|
| Cancel | Cancels the edit state.|
| Search | Searches the records by the given key.|
| Print | Prints the treegrid.|
| ExcelExport | Exports the treegrid to Excel.|
| PdfExport | Exports the treegrid to PDF.|
| WordExport | Exports the treegrid to Word.|
| Indent | Indents the record to one level of hierarchy.|
| Outdent | Outdents the record to one level of hierarchy.|
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['Print', 'Search'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='265' toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>

Copyright © 2001 -2024 Syncfusion Inc. 878


TreeGrid Tool Bar

</ColumnsDirective>
<Inject services={[Toolbar, Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-
react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['Print', 'Search'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
height='265' toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Toolbar,Filter]}/>
</TreeGridComponent>
};
export default App;

* The toolbar has options to define both built-in and custom toolbar items.
Custom toolbar items
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.
By default, Custom toolbar items are in position Left. You can change the position by using the align
property. In the below sample, we have applied position Right for the Quick Filter toolbar item.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const toolbarOptions = [
{ text: 'Quick Filter', tooltipText: 'Quick Filter', id:
'toolbarfilter', align: 'Right' }

Copyright © 2001 -2024 Syncfusion Inc. 879


TreeGrid Tool Bar

];
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'Quick Filter') {
treegrid.filterByColumn("taskName", "startswith", "Testing");
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowFiltering={true} height='220'
toolbar={toolbarOptions} toolbarClick={toolbarClick} ref={g => treegrid =
g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='160'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Toolbar, Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar, TreeGrid } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const toolbarOptions: object[] = [
{ text: 'Quick Filter', tooltipText: 'Quick Filter', id:
'toolbarfilter', align:'Right' }
];
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid && args.item.text === 'Quick Filter') {
treegrid.filterByColumn("taskName","startswith","Testing");
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowFiltering={true} height='220' toolbar={toolbarOptions}
toolbarClick={toolbarClick}
ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='160'/>

Copyright © 2001 -2024 Syncfusion Inc. 880


TreeGrid Tool Bar

<ColumnDirective field='startDate' headerText='Start Date'


width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Toolbar,Filter]}/>
</TreeGridComponent>
};
export default App;

* The toolbar has options to define both built-in and custom toolbar items.
* If a toolbar item does not match the built-in items, it will be treated as a custom toolbar item.
Built-in and custom items in toolbar
TreeGrid have an option to use both built-in and custom toolbar items at same time.
In the below example, ExpandAll, CollapseAll are built-in toolbar items and Click is custom toolbar item.
APP.JSX
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const toolbarOptions = [
'ExpandAll', 'CollapseAll',
{ text: 'Click', tooltipText: 'Click', id: 'Click', prefixIcon: 'e-
time' }
];
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'Click') {
alert("Custom toolbar click...");
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' ref={g => treegrid = g} toolbar={toolbarOptions}
toolbarClick={toolbarClick}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='160'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 881


TreeGrid Tool Bar

APP.TSX
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Toolbar, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const toolbarOptions: any[] = [
'ExpandAll', 'CollapseAll',
{ text: 'Click', tooltipText: 'Click', id: 'Click', prefixIcon:'e-
time' }];
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid && args.item.text === 'Click') {
alert("Custom toolbar click...");
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
ref={g => treegrid = g} toolbar={toolbarOptions}
toolbarClick={toolbarClick}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='160'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Toolbar]}/>
</TreeGridComponent>
};
export default App;

Enable or disable toolbar items


You can enable/disable toolbar items by using the enableItems method.
APP.JSX
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const toolbarOptions = ['QuickFilter', 'ClearFilter'];
const enable = () => {
if (treegrid) {
// Enable toolbar items.
treegrid.toolbarModule

Copyright © 2001 -2024 Syncfusion Inc. 882


TreeGrid Tool Bar

.enableItems([treegrid.element.id +
'_gridcontrol_QuickFilter', treegrid.element.id +
'_gridcontrol_ClearFilter'], true);
}
};
const disable = () => {
if (treegrid) {
// Disable toolbar items.
treegrid.toolbarModule
.enableItems([treegrid.element.id +
'_gridcontrol_QuickFilter', treegrid.element.id +
'_gridcontrol_ClearFilter'], false);
}
};
const toolbarClick = (args) => {
if (treegrid) {
if (args.item.text === 'QuickFilter') {
treegrid.filterByColumn('taskName', 'startswith',
'Testing');
}
if (args.item.text === 'ClearFilter') {
treegrid.clearFiltering();
}
}
};
return (<div><ButtonComponent className='e-flat'
onClick={enable}>Enable</ButtonComponent>
<ButtonComponent className='e-flat'
onClick={disable}>Disable</ButtonComponent>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='200' ref={g => treegrid = g}
toolbar={toolbarOptions} toolbarClick={toolbarClick} allowFiltering={true}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Toolbar, Filter]}/>
</TreeGridComponent></div>);
}
;
export default App;

APP.TSX
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar, TreeGrid } from '@syncfusion/ej2-react-
treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 883


TreeGrid Tool Bar

import * as React from 'react';


import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const toolbarOptions: string[] = ['QuickFilter', 'ClearFilter'];
const enable = () => {
if (treegrid) {
// Enable toolbar items.
treegrid.toolbarModule
.enableItems([treegrid.element.id +
'_gridcontrol_QuickFilter', treegrid.element.id +
'_gridcontrol_ClearFilter'], true);
}
}
const disable = () => {
if (treegrid) {
// Disable toolbar items.
treegrid.toolbarModule
.enableItems([treegrid.element.id +
'_gridcontrol_QuickFilter', treegrid.element.id +
'_gridcontrol_ClearFilter'], false);
}
}
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid) {
if (args.item.text === 'QuickFilter') {
treegrid.filterByColumn('taskName', 'startswith',
'Testing');
}
if (args.item.text === 'ClearFilter') {
treegrid.clearFiltering();
}
}
}
return (<div><ButtonComponent className='e-flat' onClick= { enable
}>Enable</ButtonComponent>
<ButtonComponent className='e-flat' onClick= { disable
}>Disable</ButtonComponent>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='200'
ref={g => treegrid = g} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowFiltering={true}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Toolbar,Filter]}/>
</TreeGridComponent></div>)
};
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 884


TreeGrid Pdf Export

Pdf Export
Pdf export in React Treegrid component
PDF export allows exporting TreeGrid data to PDF document. You need to use the pdfExport method for
exporting. To enable PDF export in the treegrid, set the allowPdfExport as Link to the Video.
To get start quickly with exporting functionalities, you can check on this video:
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['PdfExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'PDF Export') {
treegrid.pdfExport();
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport'];

Copyright © 2001 -2024 Syncfusion Inc. 885


TreeGrid Pdf Export

const pageSettings: PageSettingsModel = { pageSize: 7 };


let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid && args.item.text === 'PDF Export') {
treegrid.pdfExport();
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowPdfExport={true}
height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>
};
export default App;

Custom data source


PDF export provides an option to define datasource dynamically before exporting. To export data
dynamically, define the dataSource in PdfExportProperties.
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['PdfExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid) {
const exportProperties = {
dataSource: sampleData,
};
treegrid.pdfExport(exportProperties);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 886


TreeGrid Pdf Export

<ColumnDirective field='taskID' headerText='Task ID' width='90'


textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid) {
const exportProperties: PdfExportProperties = {
dataSource: sampleData,
};
treegrid.pdfExport(exportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowPdfExport={true}
height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>
};

Copyright © 2001 -2024 Syncfusion Inc. 887


TreeGrid Pdf Export

export default App;

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Pdf export options in React Treegrid component
Export hidden columns
PDF export provides an option to export hidden columns of TreeGrid by defining the
includeHiddenColumn as true.
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['PdfExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid) {
const exportProperties = {
includeHiddenColumn: true
};
treegrid.pdfExport(exportProperties);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' visible={false}
headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 888


TreeGrid Pdf Export

import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from


'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid) {
const exportProperties: PdfExportProperties = {
includeHiddenColumn: true
};
treegrid.pdfExport(exportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowPdfExport={true}
height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' visible={false}
headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>
};
export default App;

Show or hide columns on exported PDF


You can show a hidden column or hide a visible column while exporting the treegrid using toolbarClick
and pdfExportComplete events.
In the toolbarClick event, based on args.item.text as PDF Export. We can show or hide columns by
setting column.visible property to true or false respectively.
In the pdfExportComplete event, We have reversed the state back to the previous state.
In the below example, we have Duration as a hidden column in the treegrid. While exporting, we have
changed Duration to visible column and StartDate as hidden column.
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

Copyright © 2001 -2024 Syncfusion Inc. 889


TreeGrid Pdf Export

function App() {
const toolbarOptions = ['PdfExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid) {
const cols = treegrid.grid.columns;
cols[2].visible = false;
cols[3].visible = true;
treegrid.pdfExport();
}
};
const pdfExportComplete = () => {
if (treegrid) {
const cols = treegrid.grid.columns;
cols[3].visible = false;
cols[2].visible = true;
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}
pdfExportComplete={pdfExportComplete}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' visible={false}
headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { Column, ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid) {
const cols: Column[] = treegrid.grid.columns as Column[];

Copyright © 2001 -2024 Syncfusion Inc. 890


TreeGrid Pdf Export

cols[2].visible = false;
cols[3].visible = true;
treegrid.pdfExport();
}
}
const pdfExportComplete = (): void => {
if (treegrid) {
const cols: Column[] = treegrid.grid.columns as Column[];
cols[3].visible = false;
cols[2].visible = true;
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowPdfExport={true}
height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions} pdfExportComplete={pdfExportComplete}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' visible={false}
headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>
};
export default App;

How to change page orientation


Page orientation can be changed Landscape(Default Portrait) for the exported document using the
PdfExportProperties.
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['PdfExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid) {
const pdfExportProperties = {
pageOrientation: 'Landscape'
};
treegrid.pdfExport(pdfExportProperties);
}
};

Copyright © 2001 -2024 Syncfusion Inc. 891


TreeGrid Pdf Export

return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}


childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid) {
const pdfExportProperties: PdfExportProperties = {
pageOrientation: 'Landscape'
};
treegrid.pdfExport(pdfExportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowPdfExport={true}
height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />

Copyright © 2001 -2024 Syncfusion Inc. 892


TreeGrid Pdf Export

<ColumnDirective field='duration' headerText='Duration'


width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>
};
export default App;

How to change page size


Page size can be customized for the exported document using the PdfExportProperties.
Supported page sizes are:

• Letter
• Note
• Legal
• A0
• A1
• A2
• A3
• A5
• A6
• A7
• A8
• A9
• B0
• B1
• B2
• B3
• B4
• B5
• Archa
• Archb
• Archc
• Archd
• Arche
• Flsa
• HalfLetter
• Letter11x17
• Ledger

APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['PdfExport'];

Copyright © 2001 -2024 Syncfusion Inc. 893


TreeGrid Pdf Export

const pageSettings = { pageSize: 7 };


let treegrid;
const toolbarClick = (args) => {
if (treegrid) {
const pdfExportProperties = {
pageSize: 'Letter'
};
treegrid.pdfExport(pdfExportProperties);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid) {
const pdfExportProperties: PdfExportProperties = {
pageSize: 'Letter'
};
treegrid.pdfExport(pdfExportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowPdfExport={true}
height='220'

Copyright © 2001 -2024 Syncfusion Inc. 894


TreeGrid Pdf Export

toolbarClick={toolbarClick} ref={g => treegrid = g}


toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>
};
export default App;

To customize PDF export


PDF export provides an option to customize mapping of treegrid to exported PDF document.
File name for exported document
You can assign the file name for the exported document by defining fileName property in
PdfExportProperties
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['PdfExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid) {
const exportProperties = {
fileName: "new.pdf"
};
treegrid.pdfExport(exportProperties);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>

Copyright © 2001 -2024 Syncfusion Inc. 895


TreeGrid Pdf Export

</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid) {
const exportProperties: PdfExportProperties = {
fileName:"new.pdf"
};
treegrid.pdfExport(exportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowPdfExport={true}
height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>
};
export default App;

Default fonts for PDF exporting


By default, treegrid uses Helvetica font in the exported document. You can change the default font by
using PdfExportProperties.theme property. The available default fonts are,

Copyright © 2001 -2024 Syncfusion Inc. 896


TreeGrid Pdf Export

• Helvetica
• TimesRoman
• Courier
• Symbol
• ZapfDingbats

The code example for changing default font,


`ts
import { PdfFontFamily, PdfFontStyle, PdfStandardFont } from '@syncfusion/ej2-pdf-export';
...
const pdfExportProperties: PdfExportProperties = {
theme: {
header: {font: new PdfStandardFont(PdfFontFamily.TimesRoman, 11, PdfFontStyle.Bold)},
record: { font: new PdfStandardFont(PdfFontFamily.TimesRoman, 10) }
}
}
`
Add custom font for PDF exporting
You can change the default font of TreeGrid header, content and caption cells in the exported document
by using PdfExportProperties.theme property.
In the following example, we have used Advent Pro font to export the treegrid with Hungarian fonts.
APP.JSX
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
import { adventProFont } from './font';
function App() {
const toolbarOptions = ['PdfExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid) {
const pdfExportProperties = {
theme: {
header: { font: new PdfTrueTypeFont(adventProFont, 12)
},
record: { font: new PdfTrueTypeFont(adventProFont, 9) }
}
};
treegrid.pdfExport(pdfExportProperties);
}
};

Copyright © 2001 -2024 Syncfusion Inc. 897


TreeGrid Pdf Export

return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}


childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
import { adventProFont } from './font';
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid) {
const pdfExportProperties: PdfExportProperties = {
theme: {
header: {font: new PdfTrueTypeFont(adventProFont, 12)
},
record: { font: new PdfTrueTypeFont(adventProFont, 9) }
}
};
treegrid.pdfExport(pdfExportProperties);
}
}
return <TreeGridComponent dataSource={sampleData}
treeColumnIndex={1} childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings}
allowPdfExport={true} height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 898


TreeGrid Pdf Export

<ColumnDirective field='taskID' headerText='Task ID'


width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>
};
export default App;

FONT.JSX
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0

Copyright © 2001 -2024 Syncfusion Inc. 899


TreeGrid Pdf Export

BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY
yFxYUBwMhFSE1ATY1NCYiBlEqE1SGLzQs/QEr/qEBCSZLX0ACPhA1Qyowhkn+jSorAYc8LzpENAA
AAAEAGv/0AaACvAAYAAATIRUHMzIWFAYjIiYnNxYWMzI2NCYnIxMjSQEfrA9ZfHxZNl4dJhdJK0h
gYEJnx+gCvCj3fLF8MywYIihkil8DAR4AAQAaAAAB0AK8AA0AABMzAzMRMxEzByMRIxEh1S+d8y1
JDzot/sACvP7hAR/+4Sz+jwFxAAEAGv/0AaACvAAXAAATIRUjBzMyFhQGIyImJzcWFjMyNjQmIyN
fAQniGV5ZfHxZNl4dJRZLK0dhYEiPArwt8nyxfDMsGCIoY4pjAAACABr/9AHDArwAGAAiAAABMxU

Copyright © 2001 -2024 Syncfusion Inc. 900


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 901


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 902


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 903


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 904


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 905


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 906


TreeGrid Pdf Export

3JRUUFjI2NTU0JiIGBRUlNTQmIgYC203KJTHDXWBaN1EVL3JSXP7KSS1GT/2yTX9JS35MAUMBCVF
rTSMvUU9vU4RfZTErWllPeBFHOjEr9o5CTUw+mEtLSzpYDFdCOEQAAAAAAwBOAAACAQNnAA4AFgA
gAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIyc3NjMyFxYUBwdO9GBeZmcuZBYO0C0tzIxLRGE0CRE
YBQIFRAK8dGKpLf7wAQIC/wACkf6bulRXSXkUEwUMB2IAAAAAAgBOAAABSAKnAA4AGAAAEzMHNjM
yFwcmIgcGFREjEzc2MzIXFhQHB04tAjFTIikMHj8hQy08NAkRGAYBBUQB9SgxCSoLChMv/nYCGnk
UEwUMB2IAAwBO/0gCAQK8AA4AFgAkAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIwMnJjY2MhYWFRQ
HJzY2TvRgXmZnLmQWDtAtLcyMS0QtBxEBDwwMEkAgFh8CvHRiqS3+8AECAv8AApH+m7pUV/0JAgo
fDgETCzc1FwweAAAAAgA9/0gBNwH+AA4AHAAAEzMHNjMyFwcmIgcGFREjFycmNjYyFhYVFAcnNjY
9LQIxUyIpDB8/IEMtTgcRAQ8MDBJAIBYfAfUoMQkqCwoTL/52ZgIKHw4BEws3NRcMHgAAAwBOAAA
CAQOLAA4AFgAcAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIyc3FzcXB070YF5mZy5kFg7QLS3MjEt
Eux90cB+OArx0Yqkt/vABAgL/AAKR/pu6VFfaIG9vII0AAgBOAAABcAL9AA4AFAAAEzMHNjMyFwc
mIgcGFREjAzcXNxcHTy0CMVMiKQwfPyBDLQEfdHAfjgH1KDEJKgsKEy/+dgLdIG9vII0AAAIAJf/
1AgADbAAiACwAADczFhYyNjU0LgQ1NDYzMhcHJiIGFRQeBBUUBiImEzc2MzIXFhQHByUuBGambT1
aa1o9dG1TPw45mWQ9W2pbPXXnfck0CREYBgEFRLI4WkpRL0MiJyZKNEZmHisdRD8oOx8nKVA3XG1
zAnd5FBQEDAdiAAAAAAIAMf/xAZkCpwAgACoAAAEHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzI
WFyc3NjMyFxYUBwcBWBAmcEhFV1c8WatiAisGT21OOlZWISdPWx84DYk0CREYBQIFRAHkJhoBMio
pKxofQW5QUjwvNTJVMhscHCFjVg8HL3kUEwUMB2IAAAIAJf/1AgADkQAiACgAADczFhYyNjU0LgQ
1NDYzMhcHJiIGFRQeBBUUBiImEzcXBycHJS4EZqZtPVprWj10bVM/DjmZZD1bals9ded9ZJSOIG9
0sjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXMCnI2NIG9vAAIATv/xAbYC0QAFACYAABM3Fwc
nBxcHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWF3SUjiBvdOIQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAwCRI2NIG9vQCYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPBwAAAAABACT/LgGMAgE
ANQAAAQcmJgYVFB4DFAYHBzYyFhQGIic3FjI2NCcmIgcHJzcmJiczFhYyNjQuAicmNDYzMhYXAUs
QJnBIRVdXPFRRHQ47M0paNBQjSi0ZCx8VJA4ySlQCKwZPbU46VlYhJ09bHzgMAeQmGgEyKikrGh9
BbE8DKAglVSkTKxgaNAsFCA8XQAZQNy81MlUyGxwcIWNWDwcAAgAl//UCAAO9ACIAKAAANzMWFjI
2NTQuBDU0NjMyFwcmIgYVFB4EFRQGIiYTNxc3FwclLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11531
zH3RwH46yOFpKUS9DIicmSjRGZh4rHUQ/KDsfJylQN1xtcwM1IG9vII0AAgBO//EBtgL8ACAAJgA
AAQcmJgYVFB4DFAYiJiczFhYyNjQuAicmNDYzMhYXJzcXNxcHAXUQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAzbH3RwH44B5CYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPB/Egb28gjQAAAAIAAP9
IAZICvAAHABUAABEhFSMRIxEjEycmNjYyFhYVFAcnNjYBkrUtsMcHEQEPDAwSQCAWHwK8Kf1tApP
9BwIKHw4BEws3NRcMHgACACz/SADqArwADAAaAAATMxUzByMRFBcHJiY1FycmNjYyFhYVFAcnNjY
6LYMUb0oNODIwBxEBDwwMEkAgFh8CvMcr/rpVGCQQRjvqAgofDgETCzc1FwweAAAAAAIAAAAAAZI
DiwAHAA0AABEhFSMRIxEjNzcXNxcHAZK1LbA2H3RwH44CvCn9bQKT2CBvbyCNAAAAAv/r//MBGAO
LAAwAEgAAEzMVMwcjERQXByYmNQM3FzcXB2gtgxRvSg04Mn0fdHAfjgK8xyv+ulUYJBBGOwLnIG9
vII0AAAAAAgAAAAABkgMUAAcACwAAESEVIxEjESM3MxUjAZK1LbBa2dkCvCn9bQKTgS4AAAAAAQB
O//MBRAK8ABQAABMzETMVMwcjFTMVIxUUFwcmJjU1I05GLYMUb3d3Sg04MkYBZgFWxytkLLZVGCQ
QRju2AAIASv/5Ae8DOwATACUAABMzERQWMjY1ETMRFA4CIi4CNRMiByc2MzIXFjMyNxcGIyImJko
tYohhLSU/RlBHPyWQKiMVLzUYRBcYKB8UKzEULzECvf33RkxMRgIJ/f01TioUFCpONQJTJiA0Hws
iIS8UFgAAAgBO//UBwwJ+ABAAIgAAEzMRFDMyNjURMxEjNwYjIjUTIgcnNjMyFxYzMjcXBiMiJiZ
OLY9ATC0sAzNdvHUqIxUvNRhDGBgoHxQrMRUuMQH1/rOKQ0IBUv4LO0a4AaMmIDQfCyIhLxQWAAA
AAgBK//kB7wMUABMAFwAAEzMRFBYyNjURMxEUDgIiLgI1EzMVI0otYohhLSU/RlBHPyVk2dkCvf3
3RkxMRgIJ/f01TioUFCpONQJaLgAAAAACAE7/9QHDAlQAEAAUAAATMxEUMzI2NREzESM3BiMiNRM
zFSNOLY9ATC0sAzNdvEnZ2QH1/rOKQ0IBUv4LO0a4AacuAAIASv/5Ae8DSgATACMAABMzERQWMjY
1ETMRFA4CIi4CNRMzFRQWMjY1NTMVFAYiJjVKLWKIYS0lP0ZQRz8lYSYrQCsmQ1xDAr3990ZMTEY
CCf39NU4qFBQqTjUCkAUeLi4eBQUvQkIvAAAAAAIATv/1AcMCjQAPACAAABMzFRQWMjY1NTMVFAY
iJjUHMxEUMzI2NREzESM3BiMiNZ0mK0ArJkNcQ08tj0BMLSwDM128Ao0FHi4uHgUFLkNDLpP+s4p
DQgFS/gs7RrgAAAMASv/5Ae8DcwATABsAIwAAEzMRFBYyNjURMxEUDgIiLgI1EhQWMjY0JiIGNDY
yFhQGIkotYohhLSU/RlBHPyWHK0ArK0BRQ1xDQ1wCvf33RkxMRgIJ/f01TioUFCpONQJoQCsrQCt
5XENDXEMAAAADAE7/9QHDAr0AEAAYACAAABMzERQzMjY1ETMRIzcGIyI1EhQWMjY0JiIGNDYyFhQ
GIk4tj0BMLSwDM128dStAKytAUUNcQ0NcAfX+s4pDQgFS/gs7RrgBv0ArK0AreVxDQ1xDAAAAAAM
ASv/5Ae8DaAATAB0AJwAAEzMRFBYyNjURMxEUDgIiLgI1Ezc2MzIXFhQHByM3NjMyFxYUBwdKLWK
IYS0lP0ZQRz8l7zQJERgFAgVElDQJERgFAgVEAr3990ZMTEYCCf39NU4qFBQqTjUCIXkUFAQMB2J
5FBQEDAdiAAADAE7/9QHDAqwAEAAaACQAABMzERQzMjY1ETMRIzcGIyI1Ezc2MzIXFhQHByM3NjM
yFxYUBwdOLY9ATC0sAzNdvNI0CREYBgEFRJQ0CREYBgEFRAH1/rOKQ0IBUv4LO0a4AXJ5FBQEDAd
ieRQUBAwHYgAAAAEASv8rAe8CvQAgAAATMxEUFjI2NREzERQGBwYVFBYzMjcXBiMiJyY1NDcmJjV
KLWKIYS1mTWAaFyoaHyBBGhYsVlFuAr3990ZMTEYCCf39XFwHTi4SGyofMgsVM0A8BVxfAAABACT
/KwHGAfUAIAAAIQYVFBYzMjcXBiMiJyY1NDczNwYjIjURMxEUMzI2NREzAZlnGhcqGh8gQRoWLGA
EAzNdvC2PQEwtUi8SGyofMgsVM0M/O0a4AUj+s4pDQgFSAAABADz/+QH4ArwAGAAAEzMVFBYyNjc

Copyright © 2001 -2024 Syncfusion Inc. 907


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 908


TreeGrid Pdf Export

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
nBxUjTi3jPL1/OSkCLEAmcEMtAgAL+PjOs00oATY0m0XAAAAAAAEATv/2Ah0CvAAjAAATNTIzMhY
XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq
5X10tTUKNIRsGMyeAr7MwQw8ZBAUDByENOQwmcYfCZwELt0pIko4vSRoBCwAAAAABAE7/8wF7AfQ
ADQAAEyEVIxEUFhcHJiY1ESNOAS2CICQNNy1+AfQr/rswMgwjEEU8AUUAAQBC//YBvgH1AAsAABM
zERQgNREzERQgNUItASIt/oQB9f6whoYBUP63trYAAAAAAgBO/ykCXQH7AB0AKAAAExcGFRUUFjM
zETY2MzIWFRUUBiMjFSc1IyImNTU0BREzMjY1NTQmIyLCGF9PQDICNi9XY11fNy4yX10BHDdDTFY
wQAH3JBiAiEdJAW8wOW1bdltn0gvHZ1t9mEj+mUtHiEtJAAABAE7/LAIVAfUAFQAAEzMTEzMDFx4
EMwciIyInJwMnE1IykZoys3oPJhoZAwIXAQFLMmqdKq4B9f7VASv+o/sgIwkDASFj2f7NEQFTAAA
AAAEATv8lAl0B+gAjAAATMxEUFjMzETMRMzI2NTU0JyYnNx4CFRUUBiMjFSc1IyImNU4tUD8yLjd
ATxYIESQbGgNdXzcuMl9dAfT+wktHAdD+MEdMskseCw8OETsqKp1bZ9YLy2dbAAAAAQBC//QCVgH
0ACQAABMXBgYVFRQWMzI3NTMVFjMyNjU1NCYnNxYVFRQjIicGIyI1NTStGigwQy5SAy4BVC5DMCk
ba6FHIiJHoQH0JAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAD/98AAAC1AlwAAwALABMAABM
zESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAADAE7

Copyright © 2001 -2024 Syncfusion Inc. 909


TreeGrid Pdf Export

/9gHKAlwACwATABsAABMzERQgNREzERQgNRIyFhQGIiY0NjIWFAYiJjROLQEiLf6EZhYRERYRrxY
RERYQAfX+sIaGAVD+t7a2AbARFhAQFhEQFhERFgAAAAMATv/2AcMCpwAIABQAIAAAEzc2MzIXFgc
HAzU0NjIWFRUUBiImNxUUFjI2NTU0JiIG7zQJERgFBAdExWGyYly6Xy1LiEhNgE4CGnkUEw4KYv6
ehF9laVuEVG5v2IxAU1JBjE5MSwAAAgBO//YBygKnAAgAFAAAEzc2MzIXFg8CMxEUIDURMxEUIDX
5NAkRGAUEB0TPLQEiLf6EAhp5FBMOCmIl/rCGhgFQ/re2tgAAAgBO//QCYgKnAAgALQAAATc2MzI
XFg8CFwYGFRUUFjMyNzUzFRYzMjY1NTQmJzcWFRUUIyInBiMiNTU0AUM0CREYBQQHRK4aKDBDLlI
DLgFULkMwKRtroUciIkehAhp5FBMOCmImJAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAAAf/
+Aj0AXgLIAA0AABMXFgYGIiYmNTQ3FwYGIAcRAQ8MDBJAIBYfAnYCCh8OARMLNzUXDB4AAAAB//4
CMABeArsADQAAEycmNjYyFhYVFAcnNjY8BxEBDwwMEkAgFh8CggIKHw4BEws3NRcMHgAAAAEAEf+
sAHEANwANAAAXJyY2NjIWFhUUByc2Nk8HEQEPDAwSQCAWHwICCh8OARMLNzUXDB4AAAAAAv/+AkE
A9QLMAA0AGwAAExcWBgYiJiY1NDcXBgYXFxYGBiImJjU0NxcGBiAHEQEPDAwSQCAWH44HEQEPDAw
SQCAWHwJ6AgofDgETCzc1FwweEQIKHw4BEws3NRcMHgAAAv/+AjAA9QK7AA0AGwAAEycmNjYyFhY
VFAcnNjY3JyY2NjIWFhUUByc2NjwHEQEPDAwSQCAWH6AHEQEPDAwSQCAWHwKCAgofDgETCzc1Fww
eEQIKHw4BEws3NRcMHgAAAgAR/64BCAA5AA0AGwAAMycmNjYyFhYVFAcnNjY3JyY2NjIWFhUUByc
2Nk8HEQEPDAwSQCAWH6AHEQEPDAwSQCAWHwIKHw4BEws3NRcMHhECCh8OARMLNzUXDB4AAAAAAQB
OAJ4BswIDAAcAABIyFhQGIiY0tpRpaZRoAgNolGlplAAAAwARAAABrQA3AAcADwAXAAA2MhYUBiI
mNDYyFhQGIiY0NjIWFAYiJjQhFhERFhDBFhERFhDEFhERFhA3EBYRERYQEBYRERYQEBYRERYAAAA
HAFL/9QP0AuQABwAPABMAGwAjACsAMwAAADIWFAYiJjQWFBYyNjQmIgMXASckMhYUBiImNBYUFjI
2NCYiADIWFAYiJjQWFBYyNjQmIgMoeFRUeFQpOF44OVyzIf3LHAGKeFRUeFQpOF44OVz+u3hUVHh
UKTlcOTlcARVUeFRUeBNSPj5SPgH4If0+IfNUeFRUeBNSPj5SPgHrVHhUVHgTUj4+Uj4AAAABACo
AUAEEAccABgAAExcHFwcnNeUfnpwduwHHH52eHbsBAAABAAQAUADeAccABgAAEzcXFQcnNwQfu7s
dnAGoH7sBux2eAAABAE7/jgHAAzEAAwAAATMBIwGSLv6/MQMx/F0AAQBO//YB7gLGAC0AACUGIyI
uAjU1IzUzNSM1MzU0Njc2MzIXByYjIgcGBhUVMxUjFTMVIxUUFxYyNwHuVU0QQUktNzc3NyssLT5
OQA46OVAqEBjc3NzcTyBqWRchBidVP1EsPSxbTE4bGSEgGCgQPChkLD0sT2siDR4AAAEAcwIAAec
CvAASAAATMxc3MxUjNQcjJxUjNSMVIzUjc90xMDYmMhwyJzwoQwK8fn68hoaGhpaWlgAAAAEATgA
AAlACwwAmAAABMzIWFREUBgczFyM1Njc2NRE0JiMjIgYVERQXFhcVIzczJjURNDYBF3BeXi0rVg/
kPTE9T0FwQE88LkDkDlRVXgLDcFz+zTtGGSoqCBohVwE6TFBRS/7GVyEaCCoqLmwBM1xwAAAAAgB
OAAACRwK8AAMABgAAATMTIRMDIQEzK+n+B/q+AYACvP1EAnf9sgAAAAABAE4AAAIAAsIAJAAAATY
zMhcHJiIHBhUVMwcjESMRNDcmIyIHBhUVMwcjESMRNDc2MgFfKDsmGBAaMRYrfRRpLRArLBgYRX0
UaS0aKpICmCQRJwwNGkEzK/42AjEnHR4JGkgzK/42AjExJDwAAAAAAgBOAAABZQLFAAMAFQAAATM
RIwMVMwcjESMRNDYzMhcHJiMiBgE5LCy+fRNqLVY7QzUdMCosOQH1/gsCJzIr/jYCMURQMR4ePgA
AAAEATgAAAWQCwgASAAATNDYyFxEjESYiBwYVFTMHIxEjTleCPSwtQBU7fRNqLQIxRE0x/W8Cdh0
JGkY1K/42AAABAE4AAAJKAsIAIwAAATYyFxEjESYiBwYVFTMHIxEjETQ3JiMHBhUVMwcjESMRNDY
yAV0nijwsLUAVO30Tai0QKyoxQ30UaS1UeAKZKTH9bwJ2HQkaRjUr/jYCMSceHQkbRzMr/jYCMUF
QAAADAE7/+QIKAxoAGAAgACgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjUSMhYUBiImNDYyFhQ
GIiY0Ti1il14KLmkLMg4GG2IsanuBFhERFhGvFhERFhACvP1MUjs1ASv93Y4SHxMxGSOcIB9pZwF
VERYQEBYREBYRERYAAgBOAAACRwK8AAMABgAAATMTIRMDIQEzK+n+B/q+AYACvP1EAnf9sgAAAAA
BABIAAAdeAfUAJAAAEzMTEzMTEzMTEzMTEzMTEzMTEzMDIwMDIwMDIwMDIwMDIwMDIxIvi3grdow
vi3grdowvi3grdowvnzpucDmHhzpucDmHhzpucDkB9f4/AcH+PwHB/j8Bwf4/AcH+PwHB/j8Bwf4
LAaT+XAGq/lYBpP5cAar+VgGk/lwAAQBO//MB4QLDABsAABM0NjIXFTMHIxEUFwcmJjURJiIHBhU
VMwcjESNOVoQ8fRNqSg04Mi4/Fjl9FGktAjFDTzKcK/66VRkjEEY7AfIdChtGMyv+NgAAAAEALP/
zAcYCvAAZAAABMxUzByMRFBcHJiY1ESMRFBcHJiY1ETMVMwEWLYMUb0oNODK9Sg04Mi29ArzHK/6
6VRgkEEY7AUb+ulUYJBBGOwI4xwAAAAEAMQAAAgkCvAAIAAATMxMTMwMRIxExM7i6M9YtArz+zQE
z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA

Copyright © 2001 -2024 Syncfusion Inc. 910


TreeGrid Pdf Export

BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU

Copyright © 2001 -2024 Syncfusion Inc. 911


TreeGrid Pdf Export

BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC

Copyright © 2001 -2024 Syncfusion Inc. 912


TreeGrid Pdf Export

q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

FONT.TSX
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ

Copyright © 2001 -2024 Syncfusion Inc. 913


TreeGrid Pdf Export

AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA

Copyright © 2001 -2024 Syncfusion Inc. 914


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 915


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 916


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 917


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 918


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 919


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 920


TreeGrid Pdf Export

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
WViEnT1sfOAwCRI2NIG9vQCYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPBwAAAAABACT/LgGMAgE
ANQAAAQcmJgYVFB4DFAYHBzYyFhQGIic3FjI2NCcmIgcHJzcmJiczFhYyNjQuAicmNDYzMhYXAUs
QJnBIRVdXPFRRHQ47M0paNBQjSi0ZCx8VJA4ySlQCKwZPbU46VlYhJ09bHzgMAeQmGgEyKikrGh9
BbE8DKAglVSkTKxgaNAsFCA8XQAZQNy81MlUyGxwcIWNWDwcAAgAl//UCAAO9ACIAKAAANzMWFjI
2NTQuBDU0NjMyFwcmIgYVFB4EFRQGIiYTNxc3FwclLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11531
zH3RwH46yOFpKUS9DIicmSjRGZh4rHUQ/KDsfJylQN1xtcwM1IG9vII0AAgBO//EBtgL8ACAAJgA
AAQcmJgYVFB4DFAYiJiczFhYyNjQuAicmNDYzMhYXJzcXNxcHAXUQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAzbH3RwH44B5CYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPB/Egb28gjQAAAAIAAP9
IAZICvAAHABUAABEhFSMRIxEjEycmNjYyFhYVFAcnNjYBkrUtsMcHEQEPDAwSQCAWHwK8Kf1tApP

Copyright © 2001 -2024 Syncfusion Inc. 921


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 922


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 923


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 924


TreeGrid Pdf Export

UaS0aKpICmCQRJwwNGkEzK/42AjEnHR4JGkgzK/42AjExJDwAAAAAAgBOAAABZQLFAAMAFQAAATM
RIwMVMwcjESMRNDYzMhcHJiMiBgE5LCy+fRNqLVY7QzUdMCosOQH1/gsCJzIr/jYCMURQMR4ePgA
AAAEATgAAAWQCwgASAAATNDYyFxEjESYiBwYVFTMHIxEjTleCPSwtQBU7fRNqLQIxRE0x/W8Cdh0
JGkY1K/42AAABAE4AAAJKAsIAIwAAATYyFxEjESYiBwYVFTMHIxEjETQ3JiMHBhUVMwcjESMRNDY
yAV0nijwsLUAVO30Tai0QKyoxQ30UaS1UeAKZKTH9bwJ2HQkaRjUr/jYCMSceHQkbRzMr/jYCMUF
QAAADAE7/+QIKAxoAGAAgACgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjUSMhYUBiImNDYyFhQ
GIiY0Ti1il14KLmkLMg4GG2IsanuBFhERFhGvFhERFhACvP1MUjs1ASv93Y4SHxMxGSOcIB9pZwF
VERYQEBYREBYRERYAAgBOAAACRwK8AAMABgAAATMTIRMDIQEzK+n+B/q+AYACvP1EAnf9sgAAAAA
BABIAAAdeAfUAJAAAEzMTEzMTEzMTEzMTEzMTEzMTEzMDIwMDIwMDIwMDIwMDIwMDIxIvi3grdow
vi3grdowvi3grdowvnzpucDmHhzpucDmHhzpucDkB9f4/AcH+PwHB/j8Bwf4/AcH+PwHB/j8Bwf4
LAaT+XAGq/lYBpP5cAar+VgGk/lwAAQBO//MB4QLDABsAABM0NjIXFTMHIxEUFwcmJjURJiIHBhU
VMwcjESNOVoQ8fRNqSg04Mi4/Fjl9FGktAjFDTzKcK/66VRkjEEY7AfIdChtGMyv+NgAAAAEALP/
zAcYCvAAZAAABMxUzByMRFBcHJiY1ESMRFBcHJiY1ETMVMwEWLYMUb0oNODK9Sg04Mi29ArzHK/6
6VRgkEEY7AUb+ulUYJBBGOwI4xwAAAAEAMQAAAgkCvAAIAAATMxMTMwMRIxExM7i6M9YtArz+zQE
z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI

Copyright © 2001 -2024 Syncfusion Inc. 925


TreeGrid Pdf Export

AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8

Copyright © 2001 -2024 Syncfusion Inc. 926


TreeGrid Pdf Export

xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv

Copyright © 2001 -2024 Syncfusion Inc. 927


TreeGrid Pdf Export

/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

PdfTrueTypeFont accepts base 64 format of the Custom Font.


Pdf cell style customization in React Treegrid component
Conditional cell formatting
TreeGrid cells in the exported PDF can be customized or formatted using pdfQueryCellInfo event. In this
event, we can format the treegrid cells of exported PDF document based on the column cell value.
In the below sample, we have set the background color for Duration column in the exported document
by args.cell and backgroundColor property.
APP.JSX
import { getObject } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['PdfExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid) {
treegrid.pdfExport();
}
};
const pdfQueryCellInfo = (args) => {
if (args.column.field === 'duration') {
if (getObject('duration', args.data) === 0) {
args.style = { backgroundColor: '#336c12' };
}
else if (getObject('duration', args.data) < 3) {
args.style = { backgroundColor: '#7b2b1d' };
}
}
};
const queryCellInfo = (args) => {
if (args.column.field === 'duration') {
if (getObject('duration', args.data) === 0) {
args.cell.style.background = '#336c12';
}
else if (getObject('duration', args.data) < 3) {

Copyright © 2001 -2024 Syncfusion Inc. 928


TreeGrid Pdf Export

args.cell.style.background = '#7b2b1d';
}
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions} pdfQueryCellInfo={pdfQueryCellInfo}
queryCellInfo={queryCellInfo}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { Column, getObject, PdfQueryCellInfoEventArgs,
QueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid) {
treegrid.pdfExport();
}
}
const pdfQueryCellInfo = (args: PdfQueryCellInfoEventArgs): void => {
if((args.column as Column).field === 'duration'){
if(getObject('duration', args.data) === 0) {
args.style = {backgroundColor: '#336c12'};
}
else if(getObject('duration', args.data) < 3) {
args.style = {backgroundColor: '#7b2b1d'};
}
}
}
const queryCellInfo = (args: QueryCellInfoEventArgs): void => {

Copyright © 2001 -2024 Syncfusion Inc. 929


TreeGrid Pdf Export

if ((args.column as Column).field === 'duration') {


if (getObject('duration', args.data) === 0) {
(args.cell as HTMLTableCellElement).style.background=
'#336c12';
} else if (getObject('duration', args.data) < 3) {
(args.cell as HTMLTableCellElement).style.background=
'#7b2b1d';
}
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowPdfExport={true}
height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions} pdfQueryCellInfo={pdfQueryCellInfo}
queryCellInfo={queryCellInfo}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>
};
export default App;

Theme
PDF export provides an option to include theme for exported PDF document.
To apply theme in exported PDF, define the theme in PdfExportProperties.
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['PdfExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid) {
const exportProperties = {
theme: {
header: {
bold: true,
border: { color: '#64FA50' },

Copyright © 2001 -2024 Syncfusion Inc. 930


TreeGrid Pdf Export

fontColor: '#64FA50', fontName: 'Calibri', fontSize:


17
},
record: {
bold: true, fontColor: '#64FA50', fontName:
'Calibri', fontSize: 17
}
}
};
treegrid.pdfExport(exportProperties);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid) {
const exportProperties: PdfExportProperties = {
theme: {
header: {
bold: true,
border: { color: '#64FA50' },
fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17
},
record: {

Copyright © 2001 -2024 Syncfusion Inc. 931


TreeGrid Pdf Export

bold: true, fontColor: '#64FA50', fontName: 'Calibri',


fontSize: 17
}
}
};
treegrid.pdfExport(exportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowPdfExport={true}
height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>
};
export default App;

By default, material theme is applied to exported PDF document.


Adding header and footer in React Treegrid component
You can customize text, page number, line, page size and changing orientation in header and footer.
How to write a text in header or footer
You can add text either in Header or Footer of exported PDF document.
`ts
const exportProperties: PdfExportProperties = {
header: {
contents: [
{
position: { x: 0, y: 50 },
style: { textBrushColor: '#000000', fontSize: 13 },
type: 'Text',
value: "Task Details"
}
],

Copyright © 2001 -2024 Syncfusion Inc. 932


TreeGrid Pdf Export

fromTop: 0,
height: 130
}
}
`
How to draw a line in header or footer
you can add line either in Header or Footer of the exported PDF document.
Supported line styles:

• dash
• dot
• dashdot
• dashdotdot
• solid

`ts
const exportProperties: PdfExportProperties = {
header: {
contents: [
{
type: 'Line',
style: { penColor: '#000080', penSize: 2, dashStyle: 'Solid' },
points: { x1: 0, y1: 4, x2: 685, y2: 4 }
}
],
fromTop: 0,
height: 130
}
}
`
Add page number in header or footer
you can add page number either in Header or Footer of exported PDF document.
Supported page number types:

• LowerLatin - a, b, c,
• UpperLatin - A, B, C,
• LowerRoman - i, ii, iii,
• UpperRoman - I, II, III,

Copyright © 2001 -2024 Syncfusion Inc. 933


TreeGrid Pdf Export

• Number - 1,2,3.

`ts
const exportProperties: PdfExportProperties = {
header: {
contents: [
{
format: 'Page {$current} of {$total}', // optional
pageNumberType: 'Arabic',
position: { x: 0, y: 25 },
style: { textBrushColor: '#ffff80', fontSize: 15, hAlign: 'Center' },
type: 'PageNumber'
}
],
fromTop: 0,
height: 130
}
}
`
Insert an image in header or footer
Image (Base64 string) can be added in the exported document in header/footer using the
PdfExportProperties.
`ts
let exportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Image',
src: image,
position: { x: 40, y: 10 },
size: { height: 100, width: 250 },
}

Copyright © 2001 -2024 Syncfusion Inc. 934


TreeGrid Pdf Export

]
}
}
`
The below code illustrates the pdf export customization.
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
import { image } from './image';
function App() {
const toolbarOptions = ['PdfExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid) {
const pdfExportProperties = {
footer: {
contents: [
{
format: 'Page {$current} of {$total}',
pageNumberType: 'Arabic',
position: { x: 0, y: 25 },
style: { textBrushColor: '#ffff80', fontSize: 15
},
type: 'PageNumber'
}
],
fromBottom: 160,
height: 150
},
header: {
contents: [
{
position: { x: 40, y: 10 },
size: { height: 100, width: 250 },
src: image,
type: 'Image'
}
],
fromTop: 0,
height: 130
}
};
treegrid.pdfExport(pdfExportProperties);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}

Copyright © 2001 -2024 Syncfusion Inc. 935


TreeGrid Pdf Export

allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g =>


treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
import { image } from './image';
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid) {
const pdfExportProperties: PdfExportProperties = {
footer: {
contents: [
{
format: 'Page {$current} of {$total}',
pageNumberType: 'Arabic',
position: { x: 0, y: 25 },
style: { textBrushColor: '#ffff80', fontSize: 15
},
type: 'PageNumber'
}
],
fromBottom: 160,
height: 150
},
header: {
contents: [
{
position: { x: 40, y: 10 },
size: { height: 100, width: 250 },
src: image,

Copyright © 2001 -2024 Syncfusion Inc. 936


TreeGrid Pdf Export

type: 'Image'
}
],
fromTop: 0,
height: 130
}
}
treegrid.pdfExport(pdfExportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowPdfExport={true}
height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>
};
export default App;

IMAGE.JSX
export let image =
"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhE
PERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4
eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCADfAOIDASI
AAhEBAxEB/8QAHQABAAIDAQEBAQAAAAAAAAAAAAcIBQYJBAMBAv/EAE8QAAECBAEECwoKCAYDAAA
AAAABAgMEBQYHCBFWsxIYITY3QXR1lLLSFhcxNVFVYZWj0xMUFSIjMlRikbEzQlNxc5O00UNSgaH
B8GNy4f/EABsBAQACAwEBAAAAAAAAAAAAAAAEBgEDBQIH/8QAOREAAQMBAwgJAwIHAQAAAAAAAAE
CAwQFEVESEyExMkFxkQYUFTM0UmGBsaHB0SLwFjVTVHLh8SP/2gAMAwEAAhEDEQA/ALlgAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAHgr9WlKLS4s/OPzMZuNan1nu4mp6V/+8R4kkZExXvW5E1qemMdI5G
tS9VPeDS7KvyXrEf4jUmQ5Occ5fgdivzIiZ9xqKvgdxeni8huhHoq6CtizsLr0+OJuqqSWlkzcqX
KAASyOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8e5rGK97ka1qZ1VVzIiAHynpqXkZOLNzcVs
KBCbsnvd4EQg687imLiqixnbKHKws7ZeCq/VT/Mv3l4/w/fkcRLrdXZz4nJvVKbAd83/zOT9ZfR5
E/wBf3akfMuklu9cf1eBf/NNa+Zfwm7HXgXywrI6s3PSp+tfon5/5iCRrDv1YWwptejKrPqwpty7
rfIj/AEfe/Hykcg4Vn2jPQS5yFeKbl4nXrKKKsjzcqe+9OBZJqo5qOaqKipnRU4z9IcsW9ZiiKyR
n9nMU5VzJxvgf+vlb938PIsvSczLzkrDmpWMyNAiN2THsXOiofVLKtiC0o8pmhya03p+U9T57aNm
S0L7n6UXUuP8Av0PqADrHOAAABrmJF5UuxLVjXHWIM5GlIMSHDcyVY10TO9yNTMjnNTwr5TYyIMs
LgMqPLJTXNN1MxJJWsdqVUPLluaqmJ20uH3mm5uiwffDbS4feabm6LB98U5BY+yafBeZFz7i422l
w+803N0WD74baXD7zTc3RYPvinIHZNPgvMZ9xcbbS4feabm6LB98fSWyoLAmJmFLspVyo6LEaxqr
LQc2dVzJn+l9JTU9VG8cSPKYXXQwtk092peYSZx0xIcujKNsi3rkqNBnqbcL5qnzD5eK6DLwlYrm
rmVWqsVFzfvRCYznnjZww3dztH6ynIs2mjqHuR+5DfK9WpoLL7aXD7zTc3RYPvhtpcPvNNzdFg++
Kcg7HZNPgvM0Z9xcbbS4feabm6LB98NtLh95pubosH3xTkDsmnwXmM+4uNtpcPvNNzdFg++JDwpx
GoeI9KnalQpaoS8GTmPi8RJyGxjldsWuzpsXO3MzkOexbbIW3i3FzumohkOus+GGFXs1nuOVznXK
WFABwiSCLsULt+MuiUKmxPoGrsZqK1frqn6iehOPy+Dy58tibdvyfCfRqbFzTsRv00Rq7sFq8Sfe

Copyright © 2001 -2024 Syncfusion Inc. 937


TreeGrid Pdf Export

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

Copyright © 2001 -2024 Syncfusion Inc. 938


TreeGrid Pdf Export

gcBdT5XKa9pJovEM4p8niTYUpEAC5EAAAAH3p3jCW/jM6yHwPvTvGEt/GZ1kMLqModNDnvjpwyXb
zpF/M6EHPfHThku3nSL+ZXrF713D7kqfZNMABYiIAAAC2eQrvLuTnVupYVMLZ5Cu8u5OdW6lhzrV
8Mvt8m2HbMplucEtP57g6mMU4Lj5bnBLT+e4OpjFODFk+H91MzbQAB0jSAAAZzDvhEtfnuS/qGHR
85wYd8Ilr89yX9Qw6PlftraZ7kqn1KAAcQkAAAAAAAiHLA4C6nyuU17SXiIcsDgLqfK5TXtJNF4h
nFPk8SbClIgAXIgAAAA+9O8YS38ZnWQ+B96d4wlv4zOshhdRlDpoc98dOGS7edIv5nQg5746cMl2
86RfzK9Yveu4fclT7JpgALERAAAAWzyFd5dyc6t1LCphbPIV3l3Jzq3UsOdavhl9vk2w7ZlMtzgl
p/PcHUxinBcfLc4Jafz3B1MYpwYsnw/upmbaAAOkaQAADOYd8Ilr89yX9Qw6PnODDvhEtfnuS/qG
HR8r9tbTPclU+pQADiEgAAAAAAEQ5YHAXU+VymvaS8RnlOUGsXJhDP0qg0+NUJ6JMyz2QIWbZORs
ZquXdVE3ERVJFIqJOxVxT5PD9lSiAN77zmKOhFU9n2h3nMUdCKp7PtFu6xF505oQsl2BogN77zmK
OhFU9n2h3nMUdCKp7PtDrEXnTmgyXYGiH3p3jCW/jM6yG6d5zFHQiqez7R9ZHB/E9k7Ae+yqojWx
Wqq/R7iIqfeMLURXbac0CNdgX7Oe+OnDJdvOkX8zoQUoxewsxEquKNy1Om2jUZqTmahEiQIzNhsX
tVdxUzuznAsd7WSOVy3aPuSZ0VU0ENg3vvOYo6EVT2faHecxR0Iqns+0WDrEXnTmhGyXYGiA3vvO
Yo6EVT2faHecxR0Iqns+0OsRedOaDJdgaIWzyFd5dyc6t1LCB+85ijoRVPZ9osjkg2pcdqWrXZa5
KPM0uNMVFsSEyNsc72fBNTOmZV40VDn2nNG6nVGuRdW/1NsLVR2o+WW5wS0/nuDqYxTgu5lZ23Xr
ow2kqdbtLj1KbZVoUZ0KDm2SMSFFRXbqpuZ3J+JV7vOYo6EVT2faMWXLG2nuc5E0rvEzVV2hDRAb
33nMUdCKp7PtDvOYo6EVT2faOj1iLzpzQ1ZLsDRAb33nMUdCKp7PtDvOYo6EVT2faHWIvOnNBkuw
MBh3wiWvz3Jf1DDo+UWsjCXEqSve352as2pwpeXqspGjRHLDzMY2MxznL87wIiKpek4VsSMe5uSq
KSYEVEW8AA4xvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/9k=";

IMAGE.TSX
export let image: string =
"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

Copyright © 2001 -2024 Syncfusion Inc. 939


TreeGrid Pdf Export

rF7x3AlT6kNQABYiIAAAC22QtvFuLndNRDKkltshbeLcXO6aiGc61fDL7fJth2ywoAKqTQAADUL6
suXrbXTsjsJepIm67wNjZuJ3p+9+OfiiGclZiTmokrNwXwI8Ncz2PTMqL/wB4+MsaYK77YkbilUb
G+hm4aZoMw1N1voXyt9H4ZipW70aZV3z0+h+9Nzvwvrv34ljsi3XU10U+lmO9P9ftMCCR4Eznvrt
In6LPukqhB+DiJutcm62I3/M1eNP+qbbhhafx+M2tVKFnlIa55eG5P0rk/WX7qf7r6E3aHSWbUVV
T1Zrbnb792KqW+proYIM+q3t3Xb+BlsL7S+KsZXKnCzTD0zy0Jyfo2r+uv3l4vInpXckEA+uWfQR
UECQxak1riuKnzetrJKyVZZP+JgAATSKAAACKMrCQn6lgvPylMkJufmXTcqrYMrAdFiKiRmqqo1q
KuZE3SVwbIZM1I1+C3mFS9LjnB3GXlodcvqiY7A7jLy0OuX1RMdg6Pg6/bTvJ9TR1dMTnB3GXlod
cvqiY7A7jLy0OuX1RMdg6PgdtO8n1HV0xOcHcZeWh1y+qJjsHqpFnXi2rSTnWfcjWpMw1VVpMwiI
mzTdX5h0VAW2neT6jq6YgoZjHal1zWLF1TMratfmIEWqRnw4sGmR3se1XLmVrkaqKnpQvmDn0dWt
K5XIl95tezLS45wdxl5aHXL6omOwO4y8tDrl9UTHYOj4Oh207yfU1dXTE5wdxl5aHXL6omOwO4y8
tDrl9UTHYOj4HbTvJ9R1dMTnB3GXlodcvqiY7BabIrpVVpNl1+DVqVUKbFiVRHsZOSr4LnN+Bhpn
RHoiqmdFTOnkJ5BHqbTdPGsatuPTIclb7wADmG4AAAAAA8NbpFPrMokrUZZseGjtk3OqorV8qKm6
h7IUNkKE2FCY1kNjUa1rUzI1E8CIh/QPCRMR6vREvXWu/Qe1kcrUYq6E3AAHs8AAAAAAAijKynp6
nYLT81Tp6bkZhs3KokaWjuhPRFjNRURzVRcyoSuRBlhcBlR5ZKa5pJo0vqGcU+Ty/ZUp73X3dpdc
frWP2x3X3dpdcfrWP2zCguGQ3AgXma7r7u0uuP1rH7Y7r7u0uuP1rH7ZhQMhuAvM13X3dpdcfrWP
2z00i7btdVpJrrsuJzVmYaKi1WOqKmzTcX55rh6qN44keUwuuhhWNu1BFOmJQrGS6LolsWbql5a5
67LwIVUjthwoVSjMYxqOXMjWo7MiehC+pzzxs4Ybu52j9ZSv2MiLI6/AlT6kMV3X3dpdcfrWP2x3
X3dpdcfrWP2zCgsOQ3Ai3ma7r7u0uuP1rH7Y7r7u0uuP1rH7ZhQMhuAvM13X3dpdcfrWP2y0+RVV
KpVLKr8Wq1SfqERlVRrHzcy+M5rfgYa5kV6qqJnVVzekp8W2yFt4txc7pqIZz7Ua1KZbkw+TbCv6
yUsX5iYlralny0xGgPWcaiuhRFYqpsH7mdP3EV/K1W861DpT/AO5J+NG9eV5czVxCJD4N0qle20F
RFXUh9K6OxsdRIqpvU9nytVvOtQ6U/wDuPlaredah0p/9zxgrmfk8y8zu5qPypyPZ8rVbzrUOlP8
A7j5Wq3nWodKf/c8YGfk8y8xmo/KnIzNv1SqPr9NY+pzzmunIKOa6YeqKivTOipnJ6K9W7vipnLY
OsaWFL/0Me50UuUt+lCm9KGNbJHcl2hQAC6FWAAAAAABEGWFwGVHlkprmkvkQZYXAZUeWSmuaSaL
xDOKfJ4fsqUjABciAAAAD1UbxxI8phddDynqo3jiR5TC66GF1GUOmJzzxs4Ybu52j9ZToYc88bOG
G7udo/WUr1i947gSp9SGoAAsREAAABbbIW3i3FzumohlSS22QtvFuLndNRDOdavhl9vk2w7ZJuNG
9eV5czVxCJCW8aN68ry5mriESHwLpZ/MV4IfTujngk4qAAVo7oAAB7rd3xUzlsHWNLClerd3xUzl
sHWNLCn0HoT3UvFCmdKu8j4KAAXcqgAAAAAAIgywuAyo8slNc0l8iDLC4DKjyyU1zSTReIZxT5PD
9lSkYALkQAAAAeqjeOJHlMLroeU9VG8cSPKYXXQwuoyh0xOeeNnDDd3O0frKdDDnnjZww3dztH6y
lesXvHcCVPqQ1AAFiIgAAALbZC28W4ud01EMqSW2yFt4txc7pqIZzrV8Mvt8m2HbJNxo3ryvLmau
IRIS3jRvXleXM1cQiQ+BdLP5ivBD6d0c8EnFQACtHdAAAPdbu+Kmctg6xpYUr1bu+Kmctg6xpYU+
g9Ce6l4oUzpV3kfBQAC7lUAAAAAABruItnUq+rWjW7WYk1Dk40SHEc6WejH52ORyZlVFTwp5DYjV
cV71l7AsuYuaakI09CgRYUNYMJ6NcqvejEXOu5uZ85siR6vTI17jC3XaSONq7h19uuLpcP3Y2ruH
X264ulw/dmC22FE0OqnSoY22FE0OqnSoZ1Mi0fXmhpviM7tXcOvt1xdLh+7G1dw6+3XF0uH7swW2
womh1U6VDG2womh1U6VDGRaPrzQXxGd2ruHX264ulw/dn0lsmPD2XmYUdk9cKvhPa9uebh5s6LnT
/AA/Qa9tsKJodVOlQz+5fKsokWPDhJZ9URXvRuf4zD3M65jGRaPrzQXxFiyH7nydrFuG46hXZ6cr
rZqfmHzEZIUzDRiOcudcyLDXMn+pMBBF6ZSlJtm7apb0a1qjMRKdMul3RWTDEa9W8aIu6hCpUnVy
5jWbH5N36j7bV3Dr7dcXS4fuxtXcOvt1xdLh+7MFtsKJodVOlQxtsKJodVOlQydkWj680Nd8Rndq
7h19uuLpcP3Y2ruHX264ulw/dmC22FE0OqnSoY22FE0OqnSoYyLR9eaC+Izu1dw6+3XF0uH7skHC
zDqhYc0qcp1BjT8WDNzHxiIs3Fa9yO2KN3FRrdzM1CIdthRNDqp0qGSjgtiZJ4mUioVGTpUzTmyU
yku5kaI16uVWI7Ombi3TRUNrEjXO35J6asd/6TabmoUnX5BknOvjNhsipFRYTkRc6IqcaLufOU17
vZ2/+3qP81vZP3GPEGVw3taBXpumx6hDjTjJVIUGIjHIrmPdss68XzP8AciXbYUTQ6qdKhnIf0fi
rlzzoUcuJOitOembkMkVEJZ72dv8A7eo/zW9kd7O3/wBvUf5reyRNtsKJodVOlQxtsKJodVOlQzz
/AAjT/wBun0NnblX/AFVJZ72dv/t6j/Nb2R3s7f8A29R/mt7JE22womh1U6VDG2womh1U6VDH8I0
/9un0HblX/VUl6Sw6oUpOQJqHGn1fAitiNR0VqpnaqKmf5voNwK/UDKgo1Wr9NpLLTqUJ8/OQZVs
R0zDVGLEejEcvoRXZywJsjsplnfpZGjL8DRNWy1Sosjsq4AA2GkAAAAAAEQ5YHAXU+VymvaS8RDl
gcBdT5XKa9pJovEM4p8niTYUpEAC5EAAAAH3p3jCW/jM6yHwPvTvGEt/GZ1kMLqModNDnvjpwyXb
zpF/M6EHPfHThku3nSL+ZXrF713D7kqfZNMABYiIAAAC2eQrvLuTnVupYVMLZ5Cu8u5OdW6lhzrV
8Mvt8m2HbMplucEtP57g6mMU4Lj5bnBLT+e4OpjFODFk+H91MzbQAB0jSAAAZzDvhEtfnuS/qGHR
85wYd8Ilr89yX9Qw6PlftraZ7kqn1KAAcQkAAAAAAAiHLA4C6nyuU17SXiIcsDgLqfK5TXtJNF4h
nFPk8SbClIgAXIgAAAA+9O8YS38ZnWQ+B96d4wlv4zOshhdRlDpoc98dOGS7edIv5nQg5746cMl2
86RfzK9Yveu4fclT7JpgALERAAAAWzyFd5dyc6t1LCphbPIV3l3Jzq3UsOdavhl9vk2w7ZlMtzgl
p/PcHUxinBcfLc4Jafz3B1MYpwYsnw/upmbaAAOkaQAADOYd8Ilr89yX9Qw6PnODDvhEtfnuS/qG
HR8r9tbTPclU+pQADiEgAAAAAAEQ5YHAXU+VymvaS8RnlOUGsXJhDP0qg0+NUJ6JMyz2QIWbZORs
ZquXdVE3ERVJFIqJOxVxT5PD9lSiAN77zmKOhFU9n2h3nMUdCKp7PtFu6xF505oQsl2BogN77zmK
OhFU9n2h3nMUdCKp7PtDrEXnTmgyXYGiH3p3jCW/jM6yG6d5zFHQiqez7R9ZHB/E9k7Ae+yqojWx
Wqq/R7iIqfeMLURXbac0CNdgX7Oe+OnDJdvOkX8zoQUoxewsxEquKNy1Om2jUZqTmahEiQIzNhsX
tVdxUzuznAsd7WSOVy3aPuSZ0VU0ENg3vvOYo6EVT2faHecxR0Iqns+0WDrEXnTmhGyXYGiA3vvO

Copyright © 2001 -2024 Syncfusion Inc. 940


TreeGrid Pdf Export

Yo6EVT2faHecxR0Iqns+0OsRedOaDJdgaIWzyFd5dyc6t1LCB+85ijoRVPZ9osjkg2pcdqWrXZa5
KPM0uNMVFsSEyNsc72fBNTOmZV40VDn2nNG6nVGuRdW/1NsLVR2o+WW5wS0/nuDqYxTgu5lZ23Xr
ow2kqdbtLj1KbZVoUZ0KDm2SMSFFRXbqpuZ3J+JV7vOYo6EVT2faMWXLG2nuc5E0rvEzVV2hDRAb
33nMUdCKp7PtDvOYo6EVT2faOj1iLzpzQ1ZLsDRAb33nMUdCKp7PtDvOYo6EVT2faHWIvOnNBkuw
MBh3wiWvz3Jf1DDo+UWsjCXEqSve352as2pwpeXqspGjRHLDzMY2MxznL87wIiKpek4VsSMe5uSq
KSYEVEW8AA4xvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/9k=";

Exporting tree grid in server in React Tree Grid component


The Tree Grid have an option to export the data to PDF in server side using tree grid server export
library.
Server dependencies
The Server side export functionality is shipped in the Syncfusion.EJ2.TreeGridExport package, which is
available in Essential Studio and nuget.org. The following list of dependencies is required for tree grid
server side PDF exporting action.

• Syncfusion.EJ2
• Syncfusion.EJ2.TreeGridExport

Server configuration
The following code snippet shows server configuration using ASP.NET Core Controller Action.
To Export the tree grid in server side, You need to call the serverPdfExport method for passing the tree
grid properties to server exporting action.
`ts
public IActionResult ServerSideExporting()
{
var order = TreeData.GetDefaultData();
ViewBag.dataSource = order;
return View();
}
public IActionResult PdfExport(string treeGridModel)
{
if (treeGridModel == null)
{
return View();
}
TreeGridPdfExport exp = new TreeGridpdfExport();
Syncfusion.EJ2.TreeGrid.TreeGrid gridProperty = ConvertTreeGridObject(treeGridModel);
return exp.ExportToPdf<TreeData>(gridProperty, TreeData.GetDefaultData());
}

Copyright © 2001 -2024 Syncfusion Inc. 941


TreeGrid Pdf Export

private Syncfusion.EJ2.TreeGrid.TreeGrid ConvertTreeGridObject(string gridProperty)


{
Syncfusion.EJ2.TreeGrid.TreeGrid TreeGridModel =
(Syncfusion.EJ2.TreeGrid.TreeGrid)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty,
typeof(Syncfusion.EJ2.TreeGrid.TreeGrid));
TreeGridColumnModel cols =
(TreeGridColumnModel)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty,
typeof(TreeGridColumnModel));
TreeGridModel.Columns = cols.columns;
return TreeGridModel;
}
public class TreeGridColumnModel
{
public List<TreeGridColumn> columns { get; set; }
}
`
`ts
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-
treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['PdfExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (grid && args.item.id === 'Treegrid_pdfexport') {
grid.serverExcelExport('Home/PdfExport');
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowExcelExport={true} height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 942


TreeGrid Pdf Export

<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>


<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right'
type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, PdfExport]}/>
</TreeGridComponent>;
}
;
export default App;
`
Rotate a header text to a certain degree in the exported tree grid on the server side
The Tree Grid has support to customize the column header styles such as changing text orientation, the
font color, and so on in the exported PDF file. To achieve this requirement, define the BeginCellLayout
event of the PdfExportProperties with an event handler to perform the required action.
The PdfHeaderCellRendering will be triggered when creating a column header for the pdf document
to be exported. Collect the column header details in this event and handle the custom in the
BeginCellLayout event handler.
In the following demo, the DrawString method from the Graphics is used to rotate the header text of
the column header inside the BeginCellLayout event handler.
A PDF exporting is not supported to rotate the column header on the client side.
`ts
public IActionResult PdfExport(string treeGridModel)
{
if (treeGridModel == null)
{
return View();
}
TreeGridPdfExport exp = new TreeGridPdfExport();
TreeGrid gridProperty = ConvertTreeGridObject(treeGridModel);
gridProperty.PdfHeaderCellRendering = PdfHeaderQueryCellInfo;
PdfGrid grid = new PdfGrid();
Syncfusion.EJ2.TreeGridExport.PdfExportProperties pdfExportProperties = new
Syncfusion.EJ2.TreeGridExport.PdfExportProperties();

Copyright © 2001 -2024 Syncfusion Inc. 943


TreeGrid Pdf Export

pdfExportProperties.IsRepeatHeader = true;
exp.BeginCellLayout = new PdfGridBeginCellLayoutEventHandler(BeginCellEvent);
System.Collections.IEnumerable data = Syncfusion.EJ2.Base.Dat.DataTableToJson(ViewBag.dataSource);
var result = exp.PdfExport<dynamic>(gridProperty, data, pdfExportProperties);
return View();
}
public void BeginCellEvent(object sender, PdfGridBeginCellLayoutEventArgs args)
{
PdfGrid grid = (PdfGrid)sender;
var brush = new PdfSolidBrush(new PdfColor(Color.DimGray));
args.Graphics.Save();
args.Graphics.TranslateTransform(args.Bounds.X + 50, args.Bounds.Height + 40); // give the value for
bounds x and Y by the user
args.Graphics.RotateTransform(-60); // give the rotate degree value by the user
// Draw the text at particular bounds.
args.Graphics.DrawString(headerValues[args.CellIndex], new PdfStandardFont(PdfFontFamily.Helvetica,
10), brush, new PointF(0, 0));
if (args.IsHeaderRow)
{
grid.Headers[0].Cells[args.CellIndex].Value = string.Empty;
}
args.Graphics.Restore();
}
private void PdfHeaderQueryCellInfo(object pdf)
{
Syncfusion.EJ2.TreeGridExport.PdfHeaderCellEventArgs name =
(Syncfusion.EJ2.TreeGridExport.PdfHeaderCellEventArgs)pdf;
PdfGrid grid = new PdfGrid();
headerValues.Add(name.Column.HeaderText);
var longestString = headerValues.Where(s => s.Length == headerValues.Max(m => m.Length)).First();
PdfFont font = new PdfStandardFont(PdfFontFamily.Helvetica, 6);
SizeF size = font.MeasureString(longestString);
name.Headers[0].Height = size.Width * 2;
}

Copyright © 2001 -2024 Syncfusion Inc. 944


TreeGrid Excel Export

`
Excel Export
Excel export in React Treegrid component
The excel export allows exporting TreeGrid data to Excel document. You need to use the excelExport
method for exporting. To enable Excel export in the treegrid, set the allowExcelExport as true.
To use excel export, You need to inject the Link to the Video module in treegrid.
To get start quickly with exporting functionalities, you can check on this video:
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['ExcelExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'Excel Export') {
treegrid.excelExport();
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowExcelExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';

Copyright © 2001 -2024 Syncfusion Inc. 945


TreeGrid Excel Export

import { sampleData } from './datasource';


function App() {
const toolbarOptions: ToolbarItems[] = ['ExcelExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid && args.item.text === 'Excel Export') {
treegrid.excelExport();
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings}
allowExcelExport={true} height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
};
export default App;

Persist collapsed state


You can persist the collapsed state in the exported document by defining isCollapsedStatePersist
property as true in TreeGridExcelExportProperties parameter of excelExport method.
APP.JSX
{% raw %}
import * as React from 'react';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page,
Toolbar, ExcelExport, Inject } from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['ExcelExport'];
let treegridInstance;
const toolbarClick = (args) => {
if (args.item.text === 'Excel Export') {
let excelExportProperties = {
isCollapsedStatePersist: true
};
treegridInstance.excelExport(excelExportProperties);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={{ pageSize: 7 }}

Copyright © 2001 -2024 Syncfusion Inc. 946


TreeGrid Excel Export

allowExcelExport={true} height='220' toolbarClick={toolbarClick} ref={g =>


treegridInstance = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
;
export default App;
{% endraw %}

APP.TSX
{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page,
Toolbar, ExcelExport, TreeGridExcelExportProperties, Inject } from
'@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: any = ['ExcelExport'];
let treegridInstance: TreeGridComponent;
const toolbarClick = (args: ClickEventArgs): void => {
if (args.item.text === 'Excel Export') {
let excelExportProperties: TreeGridExcelExportProperties = {
isCollapsedStatePersist: true
};
treegridInstance.excelExport(excelExportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={{ pageSize: 7 }}
allowExcelExport={true} height='220'
toolbarClick={toolbarClick} ref={g => treegridInstance = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>

Copyright © 2001 -2024 Syncfusion Inc. 947


TreeGrid Excel Export

</TreeGridComponent>
};
export default App;
{% endraw %}

Custom data source


The excel export provides an option to define datasource dynamically before exporting. To export data
dynamically, define the dataSource in ExcelExportProperties.
APP.JSX
{% raw %}
import * as React from 'react';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page,
Toolbar, ExcelExport, Inject } from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['ExcelExport'];
let treegrid;
const toolbarClick = (args) => {
if (args.item.text === 'Excel Export') {
let excelExportProperties = {
isCollapsedStatePersist: true
};
treegrid.excelExport(excelExportProperties);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={{ pageSize: 7 }}
allowExcelExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
;
export default App;
{% endraw %}

APP.TSX
{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

Copyright © 2001 -2024 Syncfusion Inc. 948


TreeGrid Excel Export

import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page,


Toolbar, ExcelExport, TreeGridExcelExportProperties, Inject } from
'@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: any = ['ExcelExport'];
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (args.item.text === 'Excel Export') {
let excelExportProperties: TreeGridExcelExportProperties = {
isCollapsedStatePersist: true
};
treegrid.excelExport(excelExportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={{ pageSize: 7 }}
allowExcelExport={true} height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
};
export default App;
{% endraw %}

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Excel export options in React Treegrid component
To customize excel export
The excel export provides an option to customize mapping of the treegrid to excel document.
Export hidden columns
The excel export provides an option to export hidden columns of treegrid by defining
includeHiddenColumn as true.
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {

Copyright © 2001 -2024 Syncfusion Inc. 949


TreeGrid Excel Export

const toolbarOptions = ['ExcelExport'];


const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'Excel Export') {
const excelExportProperties = {
includeHiddenColumn: true
};
treegrid.excelExport(excelExportProperties);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowExcelExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' visible={false}
headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['ExcelExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid && args.item.text === 'Excel Export') {
const excelExportProperties: ExcelExportProperties = {
includeHiddenColumn: true
};
(treegrid as any).excelExport(excelExportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'

Copyright © 2001 -2024 Syncfusion Inc. 950


TreeGrid Excel Export

allowPaging={true} pageSettings={pageSettings}
allowExcelExport={true} height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' visible={false}
headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
};
export default App;

Show or hide columns on exported excel


You can show a hidden column or hide a visible column while printing the treegrid using toolbarClick and
excelExportComplete events.
In the toolbarClick event, based on args.item.text as Excel Export. We can show or hide columns by
setting column.visible property to true or false respectively.
In the excelExportComplete event, We have reversed the state back to the previous state.
In the below example, we have Duration as a hidden column in the treegrid. While exporting, we have
changed Duration to visible column and StartDate as hidden column.
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['ExcelExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'Excel Export') {
const cols = treegrid.grid.columns;
cols[2].visible = false;
cols[3].visible = true;
treegrid.excelExport();
}
};
const excelExportComplete = () => {
if (treegrid) {
const cols = treegrid.grid.columns;
cols[3].visible = false;
cols[2].visible = true;

Copyright © 2001 -2024 Syncfusion Inc. 951


TreeGrid Excel Export

}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowExcelExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' visible={false}
headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Column, ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['ExcelExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid && args.item.text === 'Excel Export') {
const cols: Column[] = treegrid.grid.columns as Column[];
cols[2].visible = false;
cols[3].visible = true;
treegrid.excelExport();
}
}
const excelExportComplete = (): void => {
if (treegrid) {
const cols: Column[] = treegrid.grid.columns as Column[];
cols[3].visible = false;
cols[2].visible = true;
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowExcelExport={true}
height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>

Copyright © 2001 -2024 Syncfusion Inc. 952


TreeGrid Excel Export

<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' visible={false}
headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
};
export default App;

File name for exported document


You can assign the file name for the exported document by defining fileName property in
ExcelExportProperties.
APP.JSX
{% raw %}
import * as React from 'react';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page,
Toolbar, ExcelExport, Inject } from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['ExcelExport'];
const treegrid = React.useRef(null);
const toolbarClick = (args) => {
if (args.item.text === 'Excel Export') {
let excelExportProperties = {
fileName: "new.xlsx"
};
treegrid.current.excelExport(excelExportProperties);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={{ pageSize: 7 }}
allowExcelExport={true} height='220' toolbarClick={toolbarClick}
ref={treegrid} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
;
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 953


TreeGrid Excel Export

{% endraw %}

APP.TSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page,
Toolbar, ExcelExport, ExcelExportProperties, Inject } from '@syncfusion/ej2-
react-treegrid';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: any = ['ExcelExport'];
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void =>{
if (args.item.text === 'Excel Export') {
let excelExportProperties: ExcelExportProperties = {
fileName:"new.xlsx"
};
(treegrid as any).excelExport(excelExportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={{ pageSize: 7 }}
allowExcelExport={true} height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
};
export default App;

Excel cell style customization in React Treegrid component


Conditional cell formatting
TreeGrid cells in the exported Excel can be customized or formatted using excelQueryCellInfo event. In
this event, we can format the treegrid cells of exported PDF document based on the column cell value.
In the below sample, we have set the background color for Duration column in the exported excel by
args.cell and backgroundColor property.
APP.JSX
import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 954


TreeGrid Excel Export

import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-


treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['ExcelExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'Excel Export') {
treegrid.excelExport();
}
};
const excelQueryCellInfo = (args) => {
if (args.column.field === 'duration') {
if (getValue('data.duration', args) === 0) {
args.style = { backColor: '#336c12' };
}
else if (getValue('data.duration', args) < 3) {
args.style = { backColor: '#7b2b1d' };
}
}
};
const queryCellInfo = (args) => {
if (args.column.field === 'duration') {
if (getValue('data.duration', args) === 0) {
args.cell.style.background = '#336c12';
}
else if (getValue('data.duration', args) < 3) {
args.cell.style.background = '#7b2b1d';
}
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowExcelExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions} queryCellInfo={queryCellInfo}
excelQueryCellInfo={excelQueryCellInfo}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX

Copyright © 2001 -2024 Syncfusion Inc. 955


TreeGrid Excel Export

import { getValue } from '@syncfusion/ej2-base';


import { Column, ExcelQueryCellInfoEventArgs, QueryCellInfoEventArgs } from
'@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['ExcelExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid && args.item.text === 'Excel Export') {
(treegrid as any).excelExport();
}
}
const excelQueryCellInfo = (args: ExcelQueryCellInfoEventArgs): void =>
{
if (args.column.field === 'duration') {
if (getValue('data.duration', args) === 0) {
args.style = {backColor: '#336c12'};
}
else if (getValue('data.duration', args) < 3) {
args.style = {backColor: '#7b2b1d'};
}
}
}
const queryCellInfo = (args: QueryCellInfoEventArgs): void => {
if ((args.column as Column).field === 'duration') {
if (getValue('data.duration', args) === 0) {
(args.cell as HTMLElement).style.background= '#336c12';
} else if (getValue('data.duration', args) < 3) {
(args.cell as HTMLElement).style.background= '#7b2b1d';
}
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings}
allowExcelExport={true} height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions} queryCellInfo={queryCellInfo}
excelQueryCellInfo={excelQueryCellInfo}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>

Copyright © 2001 -2024 Syncfusion Inc. 956


TreeGrid Excel Export

</TreeGridComponent>
};
export default App;

Theme
The excel export provides an option to include theme for exported excel document.
To apply theme in exported Excel, define the theme in ExcelExportProperties.
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['ExcelExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'Excel Export') {
const exportProperties = {
theme: {
caption: { fontName: 'Segoe UI', fontColor: '#666666' },
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
treegrid.excelExport(exportProperties);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowExcelExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ExcelExportProperties } from '@syncfusion/ej2-grids';

Copyright © 2001 -2024 Syncfusion Inc. 957


TreeGrid Excel Export

import { ClickEventArgs } from '@syncfusion/ej2-navigations';


import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['ExcelExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid && args.item.text === 'Excel Export') {
const exportProperties: ExcelExportProperties = {
theme:
{
caption: { fontName: 'Segoe UI', fontColor:
'#666666' },
header: { fontName: 'Segoe UI', fontColor: '#666666'
},
record: { fontName: 'Segoe UI', fontColor: '#666666'
}
}
};
(treegrid as any).excelExport(exportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings}
allowExcelExport={true} height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
};
export default App;

By default, material theme is applied to exported excel document.


Adding header and footer in React Treegrid component
The excel export provides an option to include header and footer content for exported excel document.
APP.JSX

Copyright © 2001 -2024 Syncfusion Inc. 958


TreeGrid Excel Export

import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from


'@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['ExcelExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'Excel Export') {
const excelExportProperties = {
footer: {
footerRows: 4,
rows: [
{ cells: [{ colSpan: 4, value: "Thank you for your
business!", style: { hAlign: 'Center', bold: true } }] },
{ cells: [{ colSpan: 4, value: "!Visit Again!",
style: { hAlign: 'Center', bold: true } }] }
]
},
header: {
headerRows: 7,
rows: [
{ cells: [{ colSpan: 4, value: "Northwind Traders",
style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true, }
}] },
{ cells: [{ colSpan: 4, value: "2501 Aerial Center
Parkway", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center',
bold: true, } }] },
{ cells: [{ colSpan: 4, value: "Suite 200
Morrisville, NC 27560 USA", style: { fontColor: '#C67878', fontSize: 15,
hAlign: 'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, value: "Tel +1 888.936.8638
Fax +1 919.573.0306", style: { fontColor: '#C67878', fontSize: 15, hAlign:
'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, hyperlink: { target:
'https://www.northwind.com/', displayText: 'www.northwind.com' }, style: {
hAlign: 'Center' } }] },
{ cells: [{ colSpan: 4, hyperlink: { target:
'mailto:[email protected]' }, style: { hAlign: 'Center' } }] },
]
}
};
treegrid.excelExport(excelExportProperties);
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowExcelExport={true} height='220' toolbarClick={toolbarClick} ref={g =>
treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>

Copyright © 2001 -2024 Syncfusion Inc. 959


TreeGrid Excel Export

<ColumnDirective field='startDate' headerText='Start Date'


width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel,
TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['ExcelExport'];
const pageSettings: PageSettingsModel = { pageSize: 7 };
let treegrid: TreeGridComponent | null;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid && args.item.text === 'Excel Export') {
const excelExportProperties: ExcelExportProperties = {
footer: {
footerRows: 4,
rows: [
{ cells: [{ colSpan: 4, value: "Thank you for your
business!", style: { hAlign: 'Center', bold: true } }] },
{ cells: [{ colSpan: 4, value: "!Visit Again!",
style: { hAlign: 'Center', bold: true } }] }
]
},
header: {
headerRows: 7,
rows: [
{ cells: [{ colSpan: 4, value: "Northwind Traders",
style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true, }
}] },
{ cells: [{ colSpan: 4, value: "2501 Aerial Center
Parkway", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center',
bold: true, } }] },
{ cells: [{ colSpan: 4, value: "Suite 200
Morrisville, NC 27560 USA", style: { fontColor: '#C67878', fontSize: 15,
hAlign: 'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, value: "Tel +1 888.936.8638
Fax +1 919.573.0306", style: { fontColor: '#C67878', fontSize: 15, hAlign:
'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, hyperlink: { target:
'https://www.northwind.com/', displayText: 'www.northwind.com' }, style: {
hAlign: 'Center' } }] },

Copyright © 2001 -2024 Syncfusion Inc. 960


TreeGrid Excel Export

{ cells: [{ colSpan: 4, hyperlink: { target:


'mailto:[email protected]' }, style: { hAlign: 'Center' } }] },
]
}
};
treegrid.excelExport(excelExportProperties);
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings}
allowExcelExport={true} height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
};
export default App;

Exporting tree grid in Server in React Tree Grid Component


The Tree Grid have an option to export the data to Excel in server side using tree grid server export
library.
Server dependencies
The Server side export functionality is shipped in the Syncfusion.EJ2.TreeGridExport package, which is
available in Essential Studio and nuget.org.The following list of dependencies is required for tree grid
server side Excel exporting action.

• Syncfusion.EJ2
• Syncfusion.EJ2.TreeGridExport

Server configuration
The following code snippet shows server configuration using ASP.NET Core Controller Action.
To Export the tree grid in server side, You need to call the serverExcelExport method for passing the tree
grid properties to server exporting action.
`ts
public IActionResult ExcelExport(string treeGridModel)
{
if (treeGridModel == null)

Copyright © 2001 -2024 Syncfusion Inc. 961


TreeGrid Excel Export

{
return View();
}
TreeGridExcelExport exp = new TreeGridExcelExport();
Syncfusion.EJ2.TreeGrid.TreeGrid gridProperty = ConvertTreeGridObject(treeGridModel);
return exp.ExportToExcel<TreeData>(gridProperty, TreeData.GetDefaultData());
}
private Syncfusion.EJ2.TreeGrid.TreeGrid ConvertTreeGridObject(string gridProperty)
{
Syncfusion.EJ2.TreeGrid.TreeGrid TreeGridModel =
(Syncfusion.EJ2.TreeGrid.TreeGrid)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty,
typeof(Syncfusion.EJ2.TreeGrid.TreeGrid));
TreeGridColumnModel cols =
(TreeGridColumnModel)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty,
typeof(TreeGridColumnModel));
TreeGridModel.Columns = cols.columns;
return TreeGridModel;
}
public class TreeGridColumnModel
{
public List<TreeGridColumn> columns { get; set; }
}
`
`ts
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-
treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['ExcelExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (grid && args.item.id === 'Treegrid_excelexport') {

Copyright © 2001 -2024 Syncfusion Inc. 962


TreeGrid Excel Export

grid.serverExcelExport('Home/ExcelExport');
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowExcelExport={true} height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right'
type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
;
export default App;
`
CSV Export in server side
You can export the tree grid to CSV format by using the serverCsvExport method which will pass the tree
grid properties to server.
In the below demo, we have invoked the above method inside the toolbarClick event. In server side, we
have deserialized the tree grid properties and passed to the ExportToCsv method which will export the
properties to CSV format.
`ts
public IActionResult ServerSideExporting()
{
var order = TreeData.GetDefaultData();
ViewBag.dataSource = order;
return View();
}
public IActionResult CsvExport(string treeGridModel)
{
if (treeGridModel == null)

Copyright © 2001 -2024 Syncfusion Inc. 963


TreeGrid Excel Export

{
return View();
}
TreeGridExcelExport exp = new TreeGridExcelExport();
Syncfusion.EJ2.TreeGrid.TreeGrid gridProperty = ConvertTreeGridObject(treeGridModel);
return exp.ExportToCsv<TreeData>(gridProperty, TreeData.GetDefaultData());
}
private Syncfusion.EJ2.TreeGrid.TreeGrid ConvertTreeGridObject(string gridProperty)
{
Syncfusion.EJ2.TreeGrid.TreeGrid TreeGridModel =
(Syncfusion.EJ2.TreeGrid.TreeGrid)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty,
typeof(Syncfusion.EJ2.TreeGrid.TreeGrid));
TreeGridColumnModel cols =
(TreeGridColumnModel)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty,
typeof(TreeGridColumnModel));
TreeGridModel.Columns = cols.columns;
return TreeGridModel;
}
public class TreeGridColumnModel
{
public List<TreeGridColumn> columns { get; set; }
}
`
`ts
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-
treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const toolbarOptions = ['CsvExport'];
const pageSettings = { pageSize: 7 };
let treegrid;
const toolbarClick = (args) => {
if (grid && args.item.id === 'Treegrid_csvexport') {

Copyright © 2001 -2024 Syncfusion Inc. 964


TreeGrid Excel Export

grid.serverCsvExport('Home/CsvExport');
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowExcelExport={true} height='220'
toolbarClick={toolbarClick} ref={g => treegrid = g} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right'
type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;
`
Rotate a header text to a certain degree in the exported grid on the server side
The TreeGrid has support to customize the column header styles such as changing text orientation, the
font color, and so on in the exported Excel file. To achieve this requirement, use the
ExcelHeaderCellRendering event of the tree grid.
The ExcelHeaderCellRendering will be triggered when creating a column header for the excel
document to be exported in the server side. Customize the column header in this event.
In the following demo, using the HeaderCellRotate method of the TreeGridExcelExport class in the
ExcelHeaderCellRendering event, you can rotate the header text of the column header in the excel
exported document.
`ts
public IActionResult ExcelExport(string treeGridModel)
{
if (treeGridModel == null)
{
return View();
}
TreeGridExcelExport exp = new TreeGridExcelExport();

Copyright © 2001 -2024 Syncfusion Inc. 965


TreeGrid Global local in React Treegrid component

Syncfusion.EJ2.TreeGrid.TreeGrid gridProperty = ConvertTreeGridObject(treeGridModel);


gridProperty.ExcelHeaderCellRendering = ExcelHeaderQueryCellInfo;
return (IActionResult)exp.ExcelExport<TreeGridItems>(gridProperty, TreeGridItems.GetDefaultData());
}
private void ExcelHeaderQueryCellInfo(object excel)
{
Syncfusion.EJ2.TreeGridExport.ExcelHeaderCellEventArgs name =
(Syncfusion.EJ2.TreeGridExport.ExcelHeaderCellEventArgs)excel;
List<string> headerValues = new List<string>();
headerValues.Add(name.Column.HeaderText);
var longestString = headerValues.Where(s => s.Length == headerValues.Max(m => m.Length)).First();
TreeGridExcelExport exp = new TreeGridExcelExport();
var size = exp.ExcelTextSize(name.Style.Font.FontName, (float)name.Style.Font.Size, longestString);
name.Cell.RowHeight = size.Width;
exp.HeaderCellRotate(name, 45); // Give the rotate degree value by the user.
name.Style.Borders.LineStyle = Syncfusion.XlsIO.ExcelLineStyle.None;
}
`
Global local in React Treegrid component
Localization
The Localization library allows you to localize default text content of the TreeGrid. The treegrid
component has static text on some features (like toolbar area text, filter menu text, pager information
text, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the
locale value and translation object.
The following list of properties and its values are used in the treegrid.
Locale keywords |Text
EmptyRecord | No records to display
True | true
False | false
ExpandAll | Expand All
CollapseAll | Collapse All
RowIndent | Indent
RowOutdent | Outdent
InvalidFilterMessage | Invalid Filter Data

Copyright © 2001 -2024 Syncfusion Inc. 966


TreeGrid Global local in React Treegrid component

FilterbarTitle | \s filter bar cell


Add | Add
Edit| Edit
Cancel| Cancel
Update| Update
Delete | Delete
Print | Print
Pdfexport | PDF Export
Excelexport | Excel Export
Wordexport | Word Export
Csvexport | CSV Export
Search | Search
Save | Save
EditOperationAlert | No records selected for edit operation
DeleteOperationAlert | No records selected for delete operation
SaveButton | Save
OKButton | OK
CancelButton | Cancel
EditFormTitle | Details of
AddFormTitle | Add New Record
ConfirmDelete | Are you sure you want to Delete Record?
SearchColumns | search columns
Matchs | No Matches Found
FilterButton | Filter
ClearButton | Clear
StartsWith | Starts With
EndsWith | Ends With
Contains | Contains
Equal | Equal
NotEqual | Not Equal
LessThan | Less Than
LessThanOrEqual | Less Than Or Equal
GreaterThan | Greater Than

Copyright © 2001 -2024 Syncfusion Inc. 967


TreeGrid Global local in React Treegrid component

GreaterThanOrEqual | Greater Than Or Equal


ChooseDate | Choose a Date
EnterValue | Enter the value
autoFitAll | Auto Fit all columns
autoFit | Auto Fit this column
Export | Export
FirstPage | First Page
LastPage | Last Page
PreviousPage | Previous Page
NextPage | Next Page
SortAscending | Sort Ascending
SortDescending | Sort Descending
EditRecord | Edit Record
DeleteRecord | Delete Record
Above | Above
Below | Below
AddRow | Add Row
FilterMenu | Filter
SelectAll | Select All
Blanks | Blanks
FilterTrue | True
FilterFalse | False
NoResult | No Matches Found
ClearFilter | Clear Filter
NumberFilter | Number Filters
TextFilter | Text Filters
DateFilter | Date Filters
MatchCase | Match Case
Between | Between
CustomFilter | Custom Filter
CustomFilterPlaceHolder | Enter the value
CustomFilterDatePlaceHolder | Choose a date
AND | AND

Copyright © 2001 -2024 Syncfusion Inc. 968


TreeGrid Global local in React Treegrid component

OR | OR
ShowRowsWhere | Show rows where:
currentPageInfo | {0} of {1} pages
totalItemsInfo | ({0} items)
firstPageTooltip | Go to first page
lastPageTooltip | Go to last page
nextPageTooltip | Go to next page
previousPageTooltip | Go to previous page
nextPagerTooltip | Go to next pager
previousPagerTooltip | Go to previous pager
pagerDropDown | Items per page
pagerAllDropDown | Items
All | All
Loading translations
To load translation object in an application, use load function of the L10n class.
The following example demonstrates the TreeGrid in Deutsch culture.
APP.JSX
import { L10n } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
L10n.load({
'de-DE': {
'pager': {
'currentPageInfo': '{0} von {1} Seiten',
'firstPageTooltip': 'Zur ersten Seite',
'lastPageTooltip': 'Zur letzten Seite',
'nextPageTooltip': 'Zur nächsten Seite',
'nextPagerTooltip': 'Zum nächsten Pager',
'previousPageTooltip': 'Zurück zur letzten Seit',
'previousPagerTooltip': 'Zum vorherigen Pager',
'totalItemsInfo': '({0} Beiträge)'
},
'treegrid': {
"ClearButton": "klar",
'Collapse All': 'Alles einklappen',
"Contains": "Enthält",
'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
"EndsWith": "Endet mit",
"EnterValue": "Geben Sie den Wert ein",
"Equal": "Gleich",
"Excelexport": "Excel-Export",
'Expand All': 'Alle erweitern',

Copyright © 2001 -2024 Syncfusion Inc. 969


TreeGrid Global local in React Treegrid component

"FilterButton": "Filter",
"FilterMenu": "Filter",
"GreaterThan": "Größer als",
"GreaterThanOrEqual": "Größer als oder gleich",
"LessThan": "Weniger als",
"LessThanOrEqual": "Weniger als oder gleich",
"NotEqual": "Nicht gleich",
"Pdfexport": "PDF-Export",
"Print": "Drucken",
"StartsWith": "Beginnt mit",
"Wordexport": "Word-Export"
}
}
});
function App() {
const FilterOptions = {
type: 'Menu'
};
const pageSettings = { pageSize: 7 };
const toolbarOptions = ['Print'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
locale='de-DE' allowFiltering={true} filterSettings={FilterOptions}
toolbar={toolbarOptions} height='220'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { L10n } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, FilterSettingsModel, Inject, PageSettingsModel, Toolbar,
ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
L10n.load({
'de-DE': {
'pager': {
'currentPageInfo': '{0} von {1} Seiten',
'firstPageTooltip': 'Zur ersten Seite',
'lastPageTooltip': 'Zur letzten Seite',
'nextPageTooltip': 'Zur nächsten Seite',
'nextPagerTooltip': 'Zum nächsten Pager',
'previousPageTooltip': 'Zurück zur letzten Seit',

Copyright © 2001 -2024 Syncfusion Inc. 970


TreeGrid Global local in React Treegrid component

'previousPagerTooltip': 'Zum vorherigen Pager',


'totalItemsInfo': '({0} Beiträge)'
},
'treegrid': {
"ClearButton": "klar",
'Collapse All': 'Alles einklappen',
"Contains": "Enthält",
'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
"EndsWith": "Endet mit",
"EnterValue": "Geben Sie den Wert ein",
"Equal": "Gleich",
"Excelexport": "Excel-Export",
'Expand All': 'Alle erweitern',
"FilterButton": "Filter",
"FilterMenu": "Filter",
"GreaterThan": "Größer als",
"GreaterThanOrEqual": "Größer als oder gleich",
"LessThan": "Weniger als",
"LessThanOrEqual": "Weniger als oder gleich",
"NotEqual": "Nicht gleich",
"Pdfexport": "PDF-Export",
"Print": "Drucken",
"StartsWith": "Beginnt mit",
"Wordexport": "Word-Export"
}
}
});
function App() {
const FilterOptions: FilterSettingsModel = {
type: 'Menu'
};
const pageSettings: PageSettingsModel = { pageSize: 7 };
const toolbarOptions: ToolbarItems[] = ['Print'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} locale='de-DE'
allowFiltering={true}
filterSettings={FilterOptions} toolbar={toolbarOptions}
height='220'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, Filter]}/>
</TreeGridComponent>
};
export default App;

Internationalization
The Internationalization library is used to globalize number, date, and time values in treegrid component
using format strings in the columns.format.

Copyright © 2001 -2024 Syncfusion Inc. 971


TreeGrid Global local in React Treegrid component

APP.JSX
import { L10n, loadCldr, setCulture, setCurrencyCode } from
'@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import * as cagregorian from './ca-gregorian.json';
import * as currencies from './currencies.json';
import { formatData } from './datasource';
import * as numberingSystems from './numberingSystems.json';
import * as numbers from './numbers.json';
import * as timeZoneNames from './timeZoneNames.json';
loadCldr(currencies, cagregorian, numbers, timeZoneNames, numberingSystems);
setCulture('de');
setCurrencyCode('EUR');
L10n.load({
'de-DE': {
'pager': {
'currentPageInfo': '{0} von {1} Seiten',
'firstPageTooltip': 'Zur ersten Seite',
'lastPageTooltip': 'Zur letzten Seite',
'nextPageTooltip': 'Zur nächsten Seite',
'nextPagerTooltip': 'Zum nächsten Pager',
'previousPageTooltip': 'Zurück zur letzten Seit',
'previousPagerTooltip': 'Zum vorherigen Pager',
'totalItemsInfo': '({0} Beiträge)'
},
'treegrid': {
"ClearButton": "klar",
'Collapse All': 'Alles einklappen',
"Contains": "Enthält",
'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
"EndsWith": "Endet mit",
"EnterValue": "Geben Sie den Wert ein",
"Equal": "Gleich",
"Excelexport": "Excel-Export",
'Expand All': 'Alle erweitern',
"FilterButton": "Filter",
"FilterMenu": "Filter",
"GreaterThan": "Größer als",
"GreaterThanOrEqual": "Größer als oder gleich",
"LessThan": "Weniger als",
"LessThanOrEqual": "Weniger als oder gleich",
"NotEqual": "Nicht gleich",
"Pdfexport": "PDF-Export",
"Print": "Drucken",
"StartsWith": "Beginnt mit",
"Wordexport": "Word-Export"
}
}
});
function App() {
const FilterOptions = {
type: 'Menu'
};

Copyright © 2001 -2024 Syncfusion Inc. 972


TreeGrid Global local in React Treegrid component

const pageSettings = { pageSize: 7 };


const toolbarOptions = ['Print'];
const formatOption = {
currency: 'EUR',
format: 'C2',
maximumSignificantDigits: 3,
minimumSignificantDigits: 1,
useGrouping: false
};
return <TreeGridComponent dataSource={formatData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
locale='de-DE' allowFiltering={true} filterSettings={FilterOptions}
toolbar={toolbarOptions} height='220'>
<ColumnsDirective>
<ColumnDirective field='orderID' headerText='Order ID'
width='90' textAlign='Right'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='180'/>
<ColumnDirective field='price' headerText='Price' width='80'
format={formatOption} textAlign='Right' type='number'/>
</ColumnsDirective>
<Inject services={[Page, Filter, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { L10n, loadCldr, setCulture, setCurrencyCode } from
'@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, FilterSettingsModel, Inject, PageSettingsModel, Toolbar,
ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import * as cagregorian from './ca-gregorian.json';
import * as currencies from './currencies.json';
import { formatData } from './datasource';
import * as numberingSystems from './numberingSystems.json';
import * as numbers from './numbers.json';
import * as timeZoneNames from './timeZoneNames.json';
loadCldr(currencies, cagregorian, numbers, timeZoneNames, numberingSystems);
setCulture('de');
setCurrencyCode('EUR');
L10n.load({
'de-DE': {
'pager': {
'currentPageInfo': '{0} von {1} Seiten',
'firstPageTooltip': 'Zur ersten Seite',
'lastPageTooltip': 'Zur letzten Seite',
'nextPageTooltip': 'Zur nächsten Seite',
'nextPagerTooltip': 'Zum nächsten Pager',
'previousPageTooltip': 'Zurück zur letzten Seit',
'previousPagerTooltip': 'Zum vorherigen Pager',
'totalItemsInfo': '({0} Beiträge)'

Copyright © 2001 -2024 Syncfusion Inc. 973


TreeGrid Global local in React Treegrid component

},
'treegrid': {
"ClearButton": "klar",
'Collapse All': 'Alles einklappen',
"Contains": "Enthält",
'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
"EndsWith": "Endet mit",
"EnterValue": "Geben Sie den Wert ein",
"Equal": "Gleich",
"Excelexport": "Excel-Export",
'Expand All': 'Alle erweitern',
"FilterButton": "Filter",
"FilterMenu": "Filter",
"GreaterThan": "Größer als",
"GreaterThanOrEqual": "Größer als oder gleich",
"LessThan": "Weniger als",
"LessThanOrEqual": "Weniger als oder gleich",
"NotEqual": "Nicht gleich",
"Pdfexport": "PDF-Export",
"Print": "Drucken",
"StartsWith": "Beginnt mit",
"Wordexport": "Word-Export"
}
}
});
function App() {
const FilterOptions: FilterSettingsModel = {
type: 'Menu'
};
const pageSettings: PageSettingsModel = { pageSize: 7 };
const toolbarOptions: ToolbarItems[] = ['Print'];
const formatOption : object = {
currency:'EUR',
format:'C2',
maximumSignificantDigits:3,
minimumSignificantDigits:1,
useGrouping: false
};
return <TreeGridComponent dataSource={formatData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
locale='de-DE' allowFiltering={true}
filterSettings={FilterOptions} toolbar={toolbarOptions} height='220'>
<ColumnsDirective>
<ColumnDirective field='orderID' headerText='Order ID'
width='90' textAlign='Right'/>
<ColumnDirective field='orderName' headerText='Order Name'
width='180'/>
<ColumnDirective field='price' headerText='Price' width='80'
format={formatOption} textAlign='Right' type='number' />
</ColumnsDirective>
<Inject services={[Page, Filter, Toolbar]}/>
</TreeGridComponent>
};
export default App;

In the above sample, Price* column is formatted by NumberFormatOptions.

Copyright © 2001 -2024 Syncfusion Inc. 974


TreeGrid Global local in React Treegrid component

* By default, locale value is *en-US. If you want to change the en-US* culture to a different culture, you
have to change the locale accordingly.
Right to left (RTL)
RTL provides an option to switch the text direction and layout of the TreeGrid component from right to
left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic,
Farsi, Urdu, etc.). To enable RTL Grid, set the enableRtl to true.
APP.JSX
import { L10n } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
L10n.load({
'ar-AE': {
'pager': {
'currentPageInfo': '{0} ‫ }صفحة‬1{ ‫'من‬,
'firstPageTooltip': '‫'انتقل إلى الصفحة األولى‬,
'lastPageTooltip': '‫'انتقل إلى الصفحة األخيرة‬,
'nextPageTooltip': '‫'انتقل إلى الصفحة التالية‬,
'nextPagerTooltip': '‫'الذهاب إلى بيجر المقبل‬,
'previousPageTooltip': '‫'انتقل إلى الصفحة السابقة‬,
'previousPagerTooltip': '‫'الذهاب إلى بيجر السابقة‬,
'totalItemsInfo': '({0} ‫')العناصر‬
},
'treegrid': {
"ChooseDate": "‫"اختر تاريخا‬,
"ClearButton": "‫"واضح‬,
"Contains": "‫"يحتوي على‬,
"EmptyRecord": "‫"ال سجالت لعرضها‬,
"EndsWith": "‫"ينتهي مع‬,
"EnterValue": "‫"أدخل القيمة‬,
"Equal": "‫"مساو‬,
"FilterButton": "‫"منقي‬,
"FilterMenu": "‫"منقي‬,
"GreaterThan": "‫"أكثر من‬,
"GreaterThanOrEqual": "‫"أكبر من أو يساوي‬,
"LessThan": "‫"أقل من‬,
"LessThanOrEqual": "‫"اصغر من او يساوي‬,
"NotEqual": "‫"غير متساوي‬,
"Print": "‫"طباعة‬,
"StartsWith": "‫"ابدا ب‬,
}
}
});
function App() {
const FilterOptions = {
type: 'Menu'
};
const pageSettings = { pageSize: 7 };
const toolbarOptions = ['Print'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}

Copyright © 2001 -2024 Syncfusion Inc. 975


TreeGrid Global local in React Treegrid component

locale='ar-AE' allowFiltering={true} filterSettings={FilterOptions}


toolbar={toolbarOptions} enableRtl={true} height='220'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='160'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, Filter]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { L10n } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Filter, FilterSettingsModel, Inject, PageSettingsModel, Toolbar,
ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
L10n.load({
'ar-AE': {
'pager': {
'currentPageInfo': '{0} ‫ }صفحة‬1{ ‫'من‬,
'firstPageTooltip': '‫'انتقل إلى الصفحة األولى‬,
'lastPageTooltip': '‫'انتقل إلى الصفحة األخيرة‬,
'nextPageTooltip': '‫'انتقل إلى الصفحة التالية‬,
'nextPagerTooltip': '‫'الذهاب إلى بيجر المقبل‬,
'previousPageTooltip': '‫'انتقل إلى الصفحة السابقة‬,
'previousPagerTooltip': '‫'الذهاب إلى بيجر السابقة‬,
'totalItemsInfo': '({0} ‫')العناصر‬
},
'treegrid': {
"ChooseDate": "‫"اختر تاريخا‬,
"ClearButton": "‫"واضح‬,
"Contains": "‫"يحتوي على‬,
"EmptyRecord": "‫"ال سجالت لعرضها‬,
"EndsWith": "‫"ينتهي مع‬,
"EnterValue": "‫"أدخل القيمة‬,
"Equal": "‫"مساو‬,
"FilterButton": "‫"منقي‬,
"FilterMenu": "‫"منقي‬,
"GreaterThan": "‫"أكثر من‬,
"GreaterThanOrEqual": "‫"أكبر من أو يساوي‬,
"LessThan": "‫"أقل من‬,
"LessThanOrEqual": "‫"اصغر من او يساوي‬,
"NotEqual": "‫"غير متساوي‬,
"Print": "‫"طباعة‬,
"StartsWith": "‫"ابدا ب‬,
}
}

Copyright © 2001 -2024 Syncfusion Inc. 976


TreeGrid Accessibility in React Treegrid component

});
function App() {
const FilterOptions: FilterSettingsModel = {
type: 'Menu'
};
const pageSettings: PageSettingsModel = { pageSize: 7 };
const toolbarOptions: ToolbarItems[] = ['Print'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} locale='ar-AE'
allowFiltering={true}
filterSettings={FilterOptions} toolbar={toolbarOptions} enableRtl=
{true} height='220'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='160'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, Filter]}/>
</TreeGridComponent>
};
export default App;

See Also

• Internationalization
• Localization

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Accessibility in React Treegrid component
The Tree Grid component followed the accessibility guidelines and standards, including ADA, Section
508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the Tree Grid component is outlined below.
| Accessibility Criteria | Compatibility |
| -- | -- |
| WCAG 2.2 Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="intermediate"> |
| Section 508 Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Screen Reader Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="intermediate"> |
| Right-To-Left Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |

Copyright © 2001 -2024 Syncfusion Inc. 977


TreeGrid Accessibility in React Treegrid component

| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png"


alt="Yes"> |
| Mobile Device Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Keyboard Navigation Support | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Accessibility Checker Validation | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Axe-core Accessibility Validation | <img
src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
<style>
.post .post-content img {
display: inline-block;
margin: 0.5em 0;
}
</style>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All
features of the component meet the requirement.</div>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png"
alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"
alt="No"> - The component does not meet the requirement.</div>
WAI-ARIA attributes
The Tree Grid component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA
attributes are used in the Tree Grid component:
| Attributes | Purpose |
| --- | --- |
| role=treegrid | Used to convey a significant and contextual message to the user. |
| aria-selected | Accurately reflect the selection state, whether it's single-select or multi-select. |
| aria-expanded | It can be used to show whether a node is expanded or collapsed, making it easier for
screen reader users to navigate and understand the hierarchy. |
| aria-sort | Indicate the current sorting order of a table column for users with disabilities, facilitating
accessible data presentation and interaction. |
| aria-busy | Loading state to improve accessibility for users, particularly those relying on screen
readers. |
| aria-invalid | To indicate whether the user's input in a form field is valid or invalid, aiding users,
including those with disabilities, in understanding and correcting their input. |

Copyright © 2001 -2024 Syncfusion Inc. 978


TreeGrid Accessibility in React Treegrid component

| aria-grabbed | Provides accessibility information for users interacting with draggable elements |
| aria-owns | Establishing relationships between an element and the elements it owns or controls. |
| aria-label | Provides an accessible name for the close icon. |
Keyboard interaction
The Tree Grid component followed the keyboard interaction guideline, making it easy for people who
use assistive technologies (AT) and those who completely rely on keyboard navigation. The following
keyboard shortcuts are supported by the Tree Grid component.
Interaction Keys |Description
PageDown |Goes to the next page.
PageUp |Goes to the previous page.
Ctrl + Alt +PageDown |Goes to the last page.
Ctrl + Alt + PageUp |Goes to the first page.
Alt + PageDown |Goes to the next page.
Alt + PageUp |Goes to the previous page.
Home |Goes to the first cell.
End |Goes to the last cell.
Ctrl + Home |Goes to the first row.
Ctrl + End |Goes to the last row.
DownArrow |Moves the cell focus downward.
UpArrow |Moves the cell focus upward.
LeftArrow |Moves the cell focus left side.
RightArrow |Moves the cell focus right side.
Shift + DownArrow |Extends the row/cell selection downwards.
Shift + UpArrow |Extends the row/cell selection upwards.
Shift + LeftArrow |Extends the cell selection to the left side.
Shift + RightArrow |Extends the cell selection to the right side.
Enter | Moves the row/cell selection downward. If current cell is in edit state, then completes
the editing. If the current cell is a header then performs sorting.
Shift + Enter | Moves the row/cell selection upward. If the current cell is a header then clears
sorting for the selected column.
Ctrl + Enter | If the current cell is a header then performs multi-sorting.
Tab | Moves the cell selection right side.
Shift + Tab | Moves the cell selection left side.

Copyright © 2001 -2024 Syncfusion Inc. 979


TreeGrid Clipboard in React Treegrid component

Esc |Deselects all the rows/cells.


Ctrl + A |Selects all the rows/cells.
UpArrow |Moves up a row/cell selection.
DownArrow |Moves down a row/cell selection.
RightArrow |Moves to the right cell selection.
LeftArrow |Moves to the left cell selection.
Ctrl + Shift + DownArrow |Expands the selected group.
Ctrl + DownArrow |Expands all the visible groups.
Ctrl + Shift + UpArrow |Collapses the selected group.
Ctrl + UpArrow |Collapses all the visible groups.
Ctrl + P |Prints the TreeGrid.
Ensuring accessibility
The Tree Grid component's accessibility levels are ensured through an accessibility-checker and axe-core
software tools during automated testing.
The accessibility compliance of the Tree Grid component is shown in the following sample. Open the
sample in a new window to evaluate the accessibility of the Tree Grid component with accessibility
tools.
See also

• Accessibility in Syncfusion React components

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Clipboard in React Treegrid component
The clipboard provides an option to copy selected rows or cells data into the clipboard.
The following list of keyboard shortcuts is supported in the Tree Grid to copy selected rows or cells data
into the clipboard.
Interaction keys |Description
Ctrl + C |Copy selected rows or cells data into clipboard.
Ctrl + Shift + H |Copy selected rows or cells data with header into clipboard.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings = { type: 'Multiple', mode: 'Row' };

Copyright © 2001 -2024 Syncfusion Inc. 980


TreeGrid Clipboard in React Treegrid component

const pageSettings = { pageSize: 10 };


return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel, PageSettingsModel } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const settings: SelectionSettingsModel = { type: 'Multiple', mode: 'Row'
};
const pageSettings: PageSettingsModel = { pageSize: 10 };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
};
export default App;

Copy to clipboard by external buttons


To copy selected rows or cells data into the clipboard with help of external buttons, you need to invoke
the copy method.
APP.JSX

Copyright © 2001 -2024 Syncfusion Inc. 981


TreeGrid Clipboard in React Treegrid component

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';


import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const settings = { type: 'Multiple', mode: 'Row' };
const copy = () => {
if (treegrid) {
treegrid.copy();
}
};
const copyHeader = () => {
if (treegrid) {
treegrid.copy(true);
}
};
return (<div>
<ButtonComponent onClick={copy}>Copy</ButtonComponent>
<ButtonComponent onClick={copyHeader}>CopyHeader</ButtonComponent>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' ref={g => treegrid = g} allowPaging={true}
selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
</div>);
}
;
export default App;

APP.TSX
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, TreeGrid, Inject, Page,
TreeGridComponent, SelectionSettingsModel } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {

let treegrid: TreeGridComponent | null;


const settings: SelectionSettingsModel = { type: 'Multiple', mode: 'Row'
};
const copy = () =>{
if (treegrid) {

Copyright © 2001 -2024 Syncfusion Inc. 982


TreeGrid Clipboard in React Treegrid component

treegrid.copy();
}
}

const copyHeader = () => {


if (treegrid) {
treegrid.copy(true);
}
}

return (<div>
<ButtonComponent onClick= { copy }>Copy</ButtonComponent>
<ButtonComponent onClick= { copyHeader
}>CopyHeader</ButtonComponent>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
ref={g => treegrid = g} allowPaging={true}
selectionSettings={settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID'
width='90' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page]}/>
</TreeGridComponent>
</div>)
};
export default App;

Copy Hierarchy Modes


Tree Grid provides support for a set of copy modes with copyHierarchyMode property.
The below are the type of copy modes available in TreeGrid.

• Parent : This is the default copy hierarchy mode in Tree Grid. Clipboard value have the selected
records with its parent records, if the selected records not have any parent record then the
selected record will be in clipboard.
• Child : Clipboard value will have the selected records with its child record. If the selected records
do not have any child record, then the selected records will be in clipboard.
• Both : Clipboard value will have the selected records with its both parent and child record. If the
selected records do not have any parent and child record then the selected records alone in
clipboard.
• None : Only the Selected records will be in clipboard.

APP.JSX
import { DropDownListComponent } from "@syncfusion/ej2-react-dropdowns";
import { ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-
treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 983


TreeGrid Clipboard in React Treegrid component

import { TreeGridComponent } from '@syncfusion/ej2-react-treegrid';


import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const data = ['Parent', 'Child', 'Both', 'None'];
const settings = { type: 'Multiple', mode: 'Row' };
const onChange = (sel) => {
const mode = sel.value.toString();
if (treegrid) {
treegrid.copyHierarchyMode = mode;
}
};
return (<div>
<DropDownListComponent popupHeight="250px" dataSource={data}
value="Parent" change={onChange} width="150px"/>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='225' allowFiltering={true}
selectionSettings={settings} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>
</div>);
}
;
export default App;

APP.TSX
import { ChangeEventArgs, DropDownListComponent } from "@syncfusion/ej2-
react-dropdowns";
import { ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-
treegrid';
import { Inject, TreeGrid, TreeGridComponent, SelectionSettingsModel } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const data: string[] = ['Parent', 'Child', 'Both', 'None']
const settings: SelectionSettingsModel = { type: 'Multiple', mode: 'Row'
};
const onChange = (sel: ChangeEventArgs): void => {
const mode: any = sel.value.toString();
if (treegrid) {
treegrid.copyHierarchyMode = mode;
}
}

Copyright © 2001 -2024 Syncfusion Inc. 984


TreeGrid Clipboard in React Treegrid component

return(
<div>
<DropDownListComponent popupHeight="250px" dataSource={data}
value="Parent" change={onChange} width="150px" />
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' height='225' allowFiltering={true}
selectionSettings={settings}
ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
</div>)
};
export default App;

AutoFill
AutoFill Feature allows you to copy the data of selected cells and paste it to another cells by just
dragging the autofill icon of the selected cells up to required cells. This feature is enabled by defining
enableAutoFill property as true.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent, Edit,
Toolbar } from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Batch' };
const settings = { cellSelectionMode: 'Box', type: 'Multiple', mode:
'Cell' };
const toolbarOptions = ['Add', 'Update', 'Cancel'];
const pageSettings = { pageSize: 10 };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} enableAutoFill={true}
pageSettings={pageSettings} selectionSettings={settings}
editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 985


TreeGrid Clipboard in React Treegrid component

<Inject services={[Page, Edit, Toolbar]}/>


</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent, Edit,
Toolbar } from '@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel, PageSettingsModel, EditSettingsModel,
ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = { allowEditing: true,
allowAdding: true, allowDeleting: true, mode: 'Batch' };
const settings: SelectionSettingsModel = { cellSelectionMode: 'Box',
type: 'Multiple', mode: 'Cell'};
const toolbarOptions: ToolbarItems[] = ['Add', 'Update', 'Cancel'];
const pageSettings: PageSettingsModel = { pageSize: 10 };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} enableAutoFill={true}
pageSettings={pageSettings} selectionSettings={settings} editSettings =
{editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Edit, Toolbar]}/>
</TreeGridComponent>
};
export default App;

* If enableAutoFill is set to true, then the autofill icon will be displayed on cell selection to copy cells.
* It requires the selection mode to be Cell, cellSelectionMode to be Box and also Batch Editing
should be enabled.
Limitations of AutoFill

• Since the string values are not parsed to number and date type, so when the selected string type
cells are dragged to number type cells then it will display as NaN. For date type cells, when the
selected string type cells are dragged to date type cells then it will display as an empty cell.
• Linear series and the sequential data generations are not supported in this autofill feature.

Copyright © 2001 -2024 Syncfusion Inc. 986


TreeGrid Clipboard in React Treegrid component

Paste
You can able to copy the content of a cell or a group of cells by selecting the cells and pressing
Ctrl + C shortcut key and paste it to another set of cells by selecting the cells and pressing Ctrl +
V shortcut key.
APP.JSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent, Edit,
Toolbar } from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Batch' };
const settings = { cellSelectionMode: 'Box', type: 'Multiple', mode:
'Cell' };
const toolbarOptions = ['Add', 'Update', 'Cancel'];
const pageSettings = { pageSize: 10 };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
selectionSettings={settings} editSettings={editOptions}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent, Edit,
Toolbar } from '@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel, PageSettingsModel, EditSettingsModel,
ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = { allowEditing: true,
allowAdding: true, allowDeleting: true, mode: 'Batch' };
const settings: SelectionSettingsModel = { cellSelectionMode: 'Box',
type: 'Multiple', mode: 'Cell'};
const toolbarOptions: ToolbarItems[] = ['Add', 'Update', 'Cancel'];
const pageSettings: PageSettingsModel = { pageSize: 10 };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}

Copyright © 2001 -2024 Syncfusion Inc. 987


TreeGrid Context menu in React Treegrid component

selectionSettings={settings} editSettings = {editOptions}


toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Edit, Toolbar]}/>
</TreeGridComponent>
};
export default App;

To perform paste functionality, it requires the selection mode to be Cell, cellSelectionMode to be


Box and also Batch Editing should be enabled.
Limitations of Paste Functionality

• Since the string values are not parsed to number and date type, so when the copied string type
cells are pasted to number type cells then it will display as NaN. For date type cells, when the
copied string format cells are pasted to date type cells then it will display as an empty cell.

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Context menu in React Treegrid component
The TreeGrid has options to show the context menu when right clicked on it. To enable this feature, you
need to define either default or custom item in the contextMenuItems.
To use the context menu, inject the ContextMenu module in the treegrid.
The default items are in the following table.
Items| Description
AutoFit| Auto fit the current column.
AutoFitAll | Auto fit all columns.
Edit| Edit the current record.
Delete | Delete the current record.
Save | Save the edited record.
Cancel | Cancel the edited state.
PdfExport | Export the treegrid data as Pdf document.
ExcelExport | Export the treegrid data as Excel document.
CsvExport | Export the treegrid data as CSV document.

Copyright © 2001 -2024 Syncfusion Inc. 988


TreeGrid Context menu in React Treegrid component

SortAscending | Sort the current column in ascending order.


SortDescending | Sort the current column in descending order.
FirstPage | Go to the first page.
PrevPage | Go to the previous page.
LastPage | Go to the last page.
NextPage | Go to the next page.
AddRow | Add new row to the treegrid.
Indent | Indents the record to one level of hierarchy.|
Outdent | Outdents the record to one level of hierarchy.|
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, Resize, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import { ContextMenu, Edit, ExcelExport, Inject, PdfExport, Sort } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editSettings = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Row'
};
const pageSettings = { pageSize: 7 };
const contextMenuItems = ['AutoFit', 'AutoFitAll',
'SortAscending', 'SortDescending', 'Edit', 'Delete', 'Save',
'Cancel', 'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage',
'PrevPage',
'LastPage', 'NextPage', 'Indent', 'Outdent'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowSorting={true} allowResizing={true} editSettings={editSettings}
allowPdfExport={true} allowExcelExport={true}
contextMenuItems={contextMenuItems}>
<ColumnsDirective>
<ColumnDirective field='taskID' isPrimaryKey={true}
headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Resize, Sort, Edit, ContextMenu, Page, PdfExport,
ExcelExport]}/>
</TreeGridComponent>;
}
;

Copyright © 2001 -2024 Syncfusion Inc. 989


TreeGrid Context menu in React Treegrid component

export default App;

APP.TSX
import { ColumnDirective, ColumnsDirective, Page, Resize, TreeGridComponent
} from '@syncfusion/ej2-react-treegrid';
import { ContextMenu, ContextMenuItem, Edit, ExcelExport, Inject, PdfExport,
Sort, RowDD } from '@syncfusion/ej2-react-treegrid';
import { EditSettingsModel, PageSettingsModel } from '@syncfusion/ej2-react-
treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editSettings: EditSettingsModel = {
allowAdding: true,
allowDeleting: true,
allowEditing: true,
mode: 'Row'
};
const pageSettings: PageSettingsModel = { pageSize: 7 };
const contextMenuItems: ContextMenuItem[] = ['AutoFit', 'AutoFitAll',
'SortAscending', 'SortDescending', 'Edit', 'Delete', 'Save',
'Cancel', 'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage',
'PrevPage',
'LastPage', 'NextPage', 'Indent', 'Outdent'];
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowSorting={true}
allowResizing={true}
editSettings={editSettings} allowPdfExport={true}
allowExcelExport={true}
contextMenuItems={contextMenuItems}>
<ColumnsDirective>
<ColumnDirective field='taskID' isPrimaryKey={true}
headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Resize, Sort, Edit, ContextMenu, Page, PdfExport,
ExcelExport]}/>
</TreeGridComponent>
};
export default App;

Custom context menu items


The custom context menu items can be added by defining the contextMenuItems as a collection of
contextMenuItemModel. Actions for this customized items can be defined in the contextMenuClick
event.
In the below sample, we have shown context menu item for parent rows to expand or collapse child
rows.

Copyright © 2001 -2024 Syncfusion Inc. 990


TreeGrid Context menu in React Treegrid component

APP.JSX
import { getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { ContextMenu, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const pageSettings = { pageSize: 7 };
const contextMenuItems = [
{ text: 'Collapse the Row', target: '.e-content', id: 'collapserow'
},
{ text: 'Expand the Row', target: '.e-content', id: 'expandrow' }
];
const contextMenuClick = (args) => {
if (treegrid) {
treegrid.getColumnByField('taskID');
if (args.item.id === 'collapserow') {
treegrid.collapseRow(treegrid.getSelectedRows()[0],
treegrid.getSelectedRecords()[0]);
}
else {
treegrid.expandRow(treegrid.getSelectedRows()[0],
treegrid.getSelectedRecords()[0]);
}
}
};
const contextMenuOpen = (args) => {
const elem = args.event.target;
const uid = elem.closest('.e-row').getAttribute('data-uid');
if (treegrid) {
if (isNullOrUndefined(getValue('hasChildRecords',
treegrid.grid.getRowObjectFromUID(uid).data))) {
args.cancel = true;
}
else {
const flag = getValue('expanded',
treegrid.grid.getRowObjectFromUID(uid).data);
let val = flag ? 'none' : 'block';

document.querySelectorAll('li#expandrow')[0].setAttribute('style', 'display:
' + val + ';');
val = !flag ? 'none' : 'block';

document.querySelectorAll('li#collapserow')[0].setAttribute('style',
'display: ' + val + ';');
}
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' allowPaging={true} pageSettings={pageSettings}
allowSorting={true} allowResizing={true} contextMenuItems={contextMenuItems}
contextMenuClick={contextMenuClick} ref={g => treegrid = g}
contextMenuOpen={contextMenuOpen}>
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 991


TreeGrid Context menu in React Treegrid component

<ColumnDirective field='taskID' headerText='Task ID' width='90'


textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[ContextMenu, Page]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX
import { getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
import { ContextMenuItemModel } from '@syncfusion/ej2-grids';
import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from
'@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { ContextMenu, Inject, PageSettingsModel, TreeGrid } from
'@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const pageSettings: PageSettingsModel = { pageSize: 7 };
const contextMenuItems: ContextMenuItemModel[] = [
{text: 'Collapse the Row', target: '.e-content', id: 'collapserow'},
{text: 'Expand the Row', target: '.e-content', id: 'expandrow'}
];
const contextMenuClick = (args: MenuEventArgs): void => {
if (treegrid) {
treegrid.getColumnByField('taskID');
if (args.item.id === 'collapserow') {
treegrid.collapseRow(treegrid.getSelectedRows()[0] as
HTMLTableRowElement,
treegrid.getSelectedRecords()[0]);
} else {
treegrid.expandRow(treegrid.getSelectedRows()[0] as
HTMLTableRowElement,
treegrid.getSelectedRecords()[0]);
}
}
}
const contextMenuOpen = (args: BeforeOpenCloseMenuEventArgs): void => {
const elem: HTMLElement = args.event.target as HTMLElement;
const uid: string = (elem.closest('.e-row') as
HTMLElement).getAttribute('data-uid') as string;
if (treegrid) {
if (isNullOrUndefined(getValue('hasChildRecords',
treegrid.grid.getRowObjectFromUID(uid) .data))) {
args.cancel = true;

Copyright © 2001 -2024 Syncfusion Inc. 992


TreeGrid Context menu in React Treegrid component

} else {
const flag: boolean = getValue('expanded',
treegrid.grid.getRowObjectFromUID(uid).data);
let val: string = flag ? 'none' : 'block';

document.querySelectorAll('li#expandrow')[0].setAttribute('style', 'display:
' + val + ';');
val = !flag ? 'none' : 'block';

document.querySelectorAll('li#collapserow')[0].setAttribute('style',
'display: ' + val + ';');
}
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks'
allowPaging={true} pageSettings={pageSettings} allowSorting={true}
allowResizing={true}
contextMenuItems={contextMenuItems} contextMenuClick={contextMenuClick}
ref={g => treegrid = g} contextMenuOpen={contextMenuOpen}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration'
width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[ContextMenu, Page]}/>
</TreeGridComponent>
};
export default App;

Enable and disable context menu items dynamically


You can enable and disable the context menu items using the enableItems method in contextMenuOpen
event.
APP.JSX
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent,
ContextMenu, Edit, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid;
const pageSettings = { pageSize: 7 };
const editSettings = {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: 'Row',
};
const contextMenuItems = [
{ text: 'Edit Record', target: '.e-content', id: 'Edit_record' },

Copyright © 2001 -2024 Syncfusion Inc. 993


TreeGrid Context menu in React Treegrid component

{ text: 'Delete Record', target: '.e-content', id: 'Delete_record'


},
];
const contextMenuClick = (args) => {
if (treegrid) {
if (args.element.innerHTML === 'Edit Record') {
treegrid.startEdit(args.rowInfo.row);
}
else if (args.element.innerHTML === 'Delete Record') {
treegrid.deleteRecord(args.rowInfo.row);
}
}
};
const contextMenuOpen = (args) => {
if (treegrid) {
if (args.rowInfo.rowData.hasChildRecords === true) {

treegrid.grid.contextMenuModule.contextMenu.enableItems(['Edit Record'],
true);

treegrid.grid.contextMenuModule.contextMenu.enableItems(['Delete Record'],
false);
}
else {

treegrid.grid.contextMenuModule.contextMenu.enableItems(['Edit Record'],
false);

treegrid.grid.contextMenuModule.contextMenu.enableItems(['Delete Record'],
true);
}
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' pageSettings={pageSettings}
editSettings={editSettings} contextMenuItems={contextMenuItems}
contextMenuClick={contextMenuClick} ref={g => treegrid = g}
contextMenuOpen={contextMenuOpen}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[ContextMenu, Page, Edit]}/>
</TreeGridComponent>;
}
;
export default App;

APP.TSX

Copyright © 2001 -2024 Syncfusion Inc. 994


TreeGrid Context menu in React Treegrid component

import { ContextMenuItemModel } from '@syncfusion/ej2-grids';


import { ColumnDirective, ColumnsDirective, EditSettingsModel, Page,
TreeGridComponent,ContextMenu, Edit, Inject, PageSettingsModel, TreeGrid}
from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let treegrid: TreeGridComponent | null;
const pageSettings: PageSettingsModel = { pageSize: 7 };
const editSettings: EditSettingsModel = {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: 'Row',
};
const contextMenuItems: ContextMenuItemModel[] = [
{ text: 'Edit Record', target: '.e-content', id: 'Edit_record' },
{ text: 'Delete Record', target: '.e-content', id: 'Delete_record' },
];
const contextMenuClick = (args: any): void => {
if (treegrid) {
if (args.element.innerHTML === 'Edit Record') {
treegrid.startEdit(args.rowInfo.row);
} else if (args.element.innerHTML === 'Delete Record') {
treegrid.deleteRecord(args.rowInfo.row);
}
}
}
const contextMenuOpen = (args: any): void => {
if (treegrid) {
if (args.rowInfo.rowData.hasChildRecords === true) {
treegrid.grid.contextMenuModule.contextMenu.enableItems(['Edit
Record'],true);
treegrid.grid.contextMenuModule.contextMenu.enableItems(['Delete
Record'],false);
} else {
treegrid.grid.contextMenuModule.contextMenu.enableItems(['Edit
Record'],false);
treegrid.grid.contextMenuModule.contextMenu.enableItems(['Delete
Record'],true);
}
}
}
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
childMapping='subtasks' pageSettings={pageSettings} editSettings =
{editSettings} contextMenuItems={contextMenuItems}
contextMenuClick={contextMenuClick} ref={g => treegrid = g}
contextMenuOpen={contextMenuOpen}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90'
textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name'
width='180'/>
<ColumnDirective field='startDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80'
textAlign='Right' />

Copyright © 2001 -2024 Syncfusion Inc. 995


TreeGrid Treegrid styling in React Treegrid component

</ColumnsDirective>
<Inject services={[ContextMenu, Page, Edit]}/>
</TreeGridComponent>
};
export default App;

You can hide or show an item in context menu for specific area inside of treegrid by defining the target
property.
You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Treegrid styling in React Treegrid component
To modify the TreeGrid appearance, you need to override the default CSS of treegrid. Please find the list
of CSS classes and its corresponding section in treegrid. Also, you have an option to create your own
custom theme for all the React controls using our Theme Studio.
Section|CSS class|Purpose of CSS class
Root|e-treegrid|This classes are in this root element (div) of the treegrid control.
Header|e-gridheader|This class is added in the root element of header element. In this class, You can
override thin line between header and content of the treegrid.
||e-table|This class is added at 'table' of the treegrid header. This CSS class makes table width as 100 %.
||e-columnheader|This class is added at 'tr' of the treegrid header.
||e-headercell|This class is added in 'th' element of treegrid header. You can override background color
of header and border color.
||e-headercelldiv|This class is add in div which present 'th' element in the header. we recommend you
to use the e-headercelldiv to override skeleton of header.
Body|e-gridcontent|This class is added at root of body content. This is to override background color of
the body.
||e-table|This class is added to table of content. This CSS class makes table width as 100 %.
||e-altrow|This class is added to alternate rows of treegrid. This is to override alternate row color of the
treegrid.
||e-rowcell|This class is added to all cells in the treegrid. This is to override cells appearance and styling.
||e-groupcaption|This class is added to the 'td' of group caption which is to change the background
color of caption cell.
||e-selectionbackground|This class is added to rowcell's of the treegrid. This is override selection.
||e-hover|This class adds to row of treegrid, while hovering the treegrid rows.
Pager|e-pager|This class is added to root element of the pager. This to change appearance of the
background color and color of font.
||e-pagercontainer|This class is added to numeric items of the pager.
||e-parentmsgbar|This class is added to pager info of the pager.
Summary|e-gridfooter|This class is added to root of the summary div.

Copyright © 2001 -2024 Syncfusion Inc. 996


TreeGrid How To

||e-summaryrow|This class is added to rows of treegrid summary.


||e-summarycell|This class is added to cells of summary row. This to override background color of
summary.
You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
How To
Refresh the data source in React Treegrid component
You can add/delete the datasource records through an external button. To reflect the datasource
changes in treegrid, you need to assign the modified data to dataSource property.
Please follow the below steps to refresh the treegrid after datasource change.
Step 1:
Add/delete the datasource record by using the following code.
`ts
const dataSource: object = extendArray(treegridObj.dataSource as object[]);
// Added New Record.
(dataSource as object[]).unshift({ TaskID: 99, TaskName: "New Data", StartDate: new
Date('02/03/2017'), Duration: 10 });
// Delete record.
(dataSource as object[]).splice(selectedRow, 1);
`
Step 2:
Refresh the treegrid after the datasource change by assign the modified data to dataSource property.
`ts
treegridObj.dataSource = dataSource; // Refresh the TreeGrid.
`
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, extendArray }
from '@syncfusion/ej2-react-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
/* tslint:disable */
function App() {
let treegridObj;
const treegridData = projectData;
const add = () => {
const dataSource = extendArray(treegridObj.dataSource);
dataSource.unshift({ TaskID: 99, TaskName: "New Data", StartDate:
new Date('02/03/2017'), Duration: 10 });
treegridObj.dataSource = dataSource;
};

Copyright © 2001 -2024 Syncfusion Inc. 997


TreeGrid How To

const deleteAction = () => {


const selectedRow = treegridObj.getSelectedRowIndexes()[0];
const dataSource = extendArray(treegridObj.dataSource);
if (treegridObj.getSelectedRecords().length > 0) {
dataSource.splice(selectedRow, 1); // Delete record.
}
else {
alert("No records selected for delete operation");
}
treegridObj.dataSource = dataSource; // Refresh the TreeGrid.
};
return (<div>
<ButtonComponent cssClass='e-flat' isToggle
onClick={add}>Add</ButtonComponent>
<ButtonComponent cssClass='e-flat' isToggle onClick={deleteAction
}>Delete</ButtonComponent>
<TreeGridComponent dataSource={treegridData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' height={280} ref={g =>
treegridObj = g}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right'/>
<ColumnDirective field='Duration' headerText='Duration'
width='90' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>
</div>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, extendArray }
from '@syncfusion/ej2-react-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
/* tslint:disable */
function App() {
let treegridObj: TreeGridComponent | null;
const treegridData: object[] = projectData;
const add = () => {
const dataSource: object = extendArray(treegridObj.dataSource as
object[]);
(dataSource as object[]).unshift({ TaskID: 99, TaskName: "New Data",
StartDate: new Date('02/03/2017'), Duration: 10 });
treegridObj.dataSource = dataSource;
}
const deleteAction = () => {
const selectedRow: number = treegridObj.getSelectedRowIndexes()[0];

Copyright © 2001 -2024 Syncfusion Inc. 998


TreeGrid How To

const dataSource: object = extendArray(treegridObj.dataSource as


object[]);
if (treegridObj.getSelectedRecords().length > 0){
(dataSource as object[]).splice(selectedRow, 1); // Delete record.
}
else {
alert("No records selected for delete operation");
}
treegridObj.dataSource = dataSource; // Refresh the TreeGrid.
}
return (<div>
<ButtonComponent cssClass= 'e-flat' isToggle onClick={ add
}>Add</ButtonComponent>
<ButtonComponent cssClass= 'e-flat' isToggle onClick= { deleteAction}
>Delete</ButtonComponent>
<TreeGridComponent dataSource={treegridData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' height={280} ref={g=>
treegridObj = g}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' />
<ColumnDirective field='Duration' headerText='Duration'
width='90' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
</div>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 999


TreeGrid How To

{ taskID: 4, taskName: 'Allocate resources', startDate: new


Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1000


TreeGrid How To

priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,

Copyright © 2001 -2024 Syncfusion Inc. 1001


TreeGrid How To

duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1002


TreeGrid How To

{ taskID: 33, taskName: 'Testing', startDate:


new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},

Copyright © 2001 -2024 Syncfusion Inc. 1003


TreeGrid How To

{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new


Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB

Copyright © 2001 -2024 Syncfusion Inc. 1004


TreeGrid How To

OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE

Copyright © 2001 -2024 Syncfusion Inc. 1005


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1006


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1007


TreeGrid How To

WMjY0JiKieFRUeFQpOF44OVwCxVR4VFR4E1I+PlI+AAAAAAEATgDtAZICIQAPAAATMzUzFTMVIxU
zFSE1MzUjUossiYmF/sCPiwGdhIQsWCwsWAAAAAABAC4CTACbAtkACQAAEzc2MzIXFhQHBy40CRE
YBgEFRAJMeRQTBQwHYgAAAAEAJf8wAbsB/gAbAAATMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxU
nJS4ZLzIvKSEtLgIYFggaBylTPy0zDi4B9f5wHBUWEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBO/zk
CfALuABQAAAEhESMRJxEjESMiJy4DJyY1NDYBCAF0LU8t1EMjEhsPCgIDXALu/EsDigH8dgG8Gg4
dMCQeLTJkfgAAAQBM/y4BJAAAABQAADMzBzYyFhQGIic3FjI2NCcmIgcHJ60jKA47M0paNBQjSi0
ZCx8VJA43CCVVKRMrGBo0CwUIDxcAAAAAAgAEAFABuQHHAAYADQAAEzcXFQcnNyU3FxUHJzfgHru
7HZz+hx67ux2cAagfuwG7HZ6dH7sBux2eAAAAAgBPAAABsQLFAB0AJQAAJTMUBiMiJyY1NDc+AzU
1MxUUDgIHBhUUFjI2AiImNDYyFhQBhC1dVTQqUiUTOB8ZKRwjNQ0hTG5MbRYRERYRsUtmGjRePjY
bOSFIND1VLkonOBI0MDdKRQIeEBYRERYAAAMADAAAAgUDZwAHAAoAEwAAEzMTIwMjAyMTAzMDFyM
nJjU0MzLyKukwVvBUL/tq1pM1JUMFHhICvP1EAQD/AAJz/rkCJ3ljBwYdAAADAAwAAAIFA2gABwA
KABQAABMzEyMDIwMjEwMzAzc2MzIXFhQHB/Iq6TBW8FQv+2rWgTQJERgGAQVEArz9RAEA/wACc/6
5Aa95FBQEDAdiAAMADAAAAgUDkQAHAAoAEAAAEzMTIwMjAyMTAzMDNxcHJwfyKukwVvBUL/tq1v2
UjiBvdAK8/UQBAP8AAnP+uQHYjY0gb28AAAMADAAAAgUDOgAHAAoAHAAAEzMTIwMjAyMTAzMDIgc
nNjMyFxYzMjcXBiMiJibyKukwVvBUL/tq1rEqIxUvNRhEFxgoHxQrMRQvMQK8/UQBAP8AAnP+uQH
gJiA0HwsiIS8UFgACAAwAAAIFArwABwAKAAATMxMjAyMDIxMDM/Iq6TBW8FQv+2rWArz9RAEA/wA
Cc/65AAAAAwAMAAACBQN1AA8AEgAaAAASJjQ2MhYUBgcTIwMjAyMTFwMzAhQWMjY0JiLELEFbQSw
i3jBW8FQv2yBq1rYrPioqPgKmO1NBQVM7C/1lAQD/AAKbKP65Afk+Kio+KgAAAgBOAAADCwK8AA8
AEgAAASEVIRUzByMRIRUhEyMDIwEDMwG8AU/+38oPuwEf/rMBuYYwAW+jowK8KvUs/rgpAQD/AAJ
k/sgAAQBC/y4BqwLGAC8AABMRFBcWMjcXBiMHNjIWFAYiJzcWMjY0JyYiBwcnNyYmNRE0Njc2MzI
XByYjIgcGBm9PH2tZClVTIA47M0paNBQjSi0ZDB4VJA42SFcrLC0+TkAOOjlQKREYAgH+uGsiDR4
mIS0IJVUpEysYGjQLBQgPF0YIXFsBQUxOGxkhIBgoEDwAAgBOAAABnANmAAsAFAAAEyEVIRUzByM
RIRUhExcjJyY1NDMyTgFO/t/KD7sBH/60jDUlQwUeEgK8KvUs/rgpA1J5YwcGHQAAAgBOAAABnAN
nAAsAFQAAEyEVIRUzByMRIRUhEzc2MzIXFhQHB04BTv7fyg+7AR/+tJ80CREYBQIFRAK8KvUs/rg
pAtp5FBMFDAdiAAIATgAAAZwDkQALABEAABMhFSEVMwcjESEVIRM3FwcnB04BTv7fyg+7AR/+tA+
UjiBvdAK8KvUs/rgpAwSNjSBvbwAAAQBOAAABnAK8AAsAABMhFSEVMwcjESEVIU4BTv7fyg+7AR/
+tAK8KvUs/rgpAAAAAgBTAAAAyANmAAUADgAAEzMRIxEnNxcjJyY1NDMyU3UtSDg1JUMFHhICvP1
EApICvnljBwYdAAACAE4AAAEJA2cABQAPAAATMxEjESc3NzYzMhcWFAcHTnUtSE40CREYBgEFRAK
8/UQCkgJGeRQTBQwHYgACAE4AAAFwA5EABQALAAATMxEjEScnNxcHJweGdS1IOJSOIG90Arz9RAK
SAnCNjSBvbwAAAQBOAAAAwwK8AAUAABMzESMRJ051LUgCvP1EApICAAADAE4AAAJdAr0AEQAbACE
AABMzNTMyFhczFSMWFREUIyMRIwU0JyERMzI3NjUBFSEmJiNOMbxdcxFBOwHU0DEBqAH+t5VCM0D
+tgFCEF86AhqjWEssBw3+7sgB7g8KBf47GB5mAc55PTwAAAACAE4AAAI6AzoACQAbAAATMwERMxE
jAREjEyIHJzYzMhcWMzI3FwYjIiYmTi0Bkyws/m0tsiojFS81GEQXGCgfFCsxFC8xArz9lgJq/UQ
Ca/2VAwwmIDQfCyIhLxQWAAADAD//9QHjA2YACwAXACAAADcRNDYyFhURFAYiJhMRFBYyNjURNCY
iBhMXIycmNTQzMj9xxm17rH0tX45eWZpYhDUlQwUeErkBQmdqcGL+v2VfXwGu/rdMTUtPAUhNUlI
BA3ljBwYdAAMAP//1AeMDZwALABcAIQAANxE0NjIWFREUBiImExEUFjI2NRE0JiIGNzc2MzIXFhQ
HBz9xxm17rH0tX45eWZpYlTQJERgFAgVEuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUot5FBMFDAd
iAAMAP//1AeMDkQALABcAHQAANxE0NjIWFREUBiImExEUFjI2NRE0JiIGNzcXBycHP3HGbXusfS1
fjl5ZmlgSlI4gb3S5AUJnanBi/r9lX18Brv63TE1LTwFITVJStY2NIG9vAAADAD//9QHjAzoACwA
XACkAADcRNDYyFhURFAYiJhMRFBYyNjURNCYiBjciByc2MzIXFjMyNxcGIyImJj9xxm17rH0tX45
eWZpYZSojFS81GEMYGCgfFCsxFS4xuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUr0mIDQfCyIhLxQ
WAAIAP//1AeMCzAALABcAADcRNDYyFhURFAYiJhMRFBYyNjURNCYiBj9xxm17rH0tX45eWZpYuQF
CZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUgAAAQBOAKsBYwHtAAsAABM3FzcXBxcHJwcnN04hamkhbm0
iaGghbQHRHH9/HIWDHX1+HoMAAAMATv+OAfIDMQAVAB4AJwAAATMHFhURFAYjIicHIzcmNRE0NjM
yFxc0JwMWMzI2NQERFBcTJiMiBgGoLjBMe1Y1LiowMkhxYzIrRy/LIzFIXv61K8sjLk1YAzGLOHT
+v2VfEnmPNWcBQmdqELpOKv23EUtPAUj+t0UpAkcPUgAAAgBK//kB7wNmABMAHAAAEzMRFBYyNjU
RMxEUDgIiLgI1ExcjJyY1NDMySi1iiGEtJT9GUEc/Ja81JUMFHhICvf33RkxMRgIJ/f01TioUFCp
ONQKYeWMHBh0AAAACAEr/+QHvA2gAEwAdAAATMxEUFjI2NREzERQOAiIuAjUTNzYzMhcWFAcHSi1
iiGEtJT9GUEc/Jbw0CREYBgEFRAK9/fdGTExGAgn9/TVOKhQUKk41AiF5FBQEDAdiAAACAEr/+QH
vA5EAEwAZAAATMxEUFjI2NREzERQOAiIuAjUTNxcHJwdKLWKIYS0lP0ZQRz8lRpSOIG90Ar3990Z
MTEYCCf39NU4qFBQqTjUCSo2NIG9vAAAAAQBK//kB7wK9ABMAABMzERQWMjY1ETMRFA4CIi4CNUo
tYohhLSU/RlBHPyUCvf33RkxMRgIJ/f01TioUFCpONQAAAAACADz/+QH4A2gAGAAiAAATMxUUFjI
2NxEzERQHJzY3NjU1BgYjIiY1Ezc2MzIXFhQHBzwtYpdeCi5pCzIOBhtiLGp7yjQJERgGAQVEArz
9TFI7NQEr/d2OEh8TMRkjnCAfaWcBFnkUFAQMB2IAAAAAAgBOAAABxwK8AA0AFgAAEzMRNjIWFAY
jIiYnFSMAJiIGBxQWMjZOLTa1YWhSKVQVLQFMVHNWAlF9UQK8/v1EbbNpKirIAYtKSEhRVU8AAAA
BAE7/9QHdAr0AOwAAEyIVESMRNDMyFhUUByMGFxYWFxYXFhUUBwYHBiMiJzcWFxYyNzY3NjU0JyY
nJicmNDcyMzI3NjQnJiMi1FguiTw+LxkSDw8vEDMSRA4VOCQdXDkYHS4VLBgqEAw1GSpJEggRAQE

Copyright © 2001 -2024 Syncfusion Inc. 1008


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1009


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1010


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1011


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1012


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1013


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1014


TreeGrid How To

wQAH3JBiAiEdJAW8wOW1bdltn0gvHZ1t9mEj+mUtHiEtJAAABAE7/LAIVAfUAFQAAEzMTEzMDFx4
EMwciIyInJwMnE1IykZoys3oPJhoZAwIXAQFLMmqdKq4B9f7VASv+o/sgIwkDASFj2f7NEQFTAAA
AAAEATv8lAl0B+gAjAAATMxEUFjMzETMRMzI2NTU0JyYnNx4CFRUUBiMjFSc1IyImNU4tUD8yLjd
ATxYIESQbGgNdXzcuMl9dAfT+wktHAdD+MEdMskseCw8OETsqKp1bZ9YLy2dbAAAAAQBC//QCVgH
0ACQAABMXBgYVFRQWMzI3NTMVFjMyNjU1NCYnNxYVFRQjIicGIyI1NTStGigwQy5SAy4BVC5DMCk
ba6FHIiJHoQH0JAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAD/98AAAC1AlwAAwALABMAABM
zESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAADAE7
/9gHKAlwACwATABsAABMzERQgNREzERQgNRIyFhQGIiY0NjIWFAYiJjROLQEiLf6EZhYRERYRrxY
RERYQAfX+sIaGAVD+t7a2AbARFhAQFhEQFhERFgAAAAMATv/2AcMCpwAIABQAIAAAEzc2MzIXFgc
HAzU0NjIWFRUUBiImNxUUFjI2NTU0JiIG7zQJERgFBAdExWGyYly6Xy1LiEhNgE4CGnkUEw4KYv6
ehF9laVuEVG5v2IxAU1JBjE5MSwAAAgBO//YBygKnAAgAFAAAEzc2MzIXFg8CMxEUIDURMxEUIDX
5NAkRGAUEB0TPLQEiLf6EAhp5FBMOCmIl/rCGhgFQ/re2tgAAAgBO//QCYgKnAAgALQAAATc2MzI
XFg8CFwYGFRUUFjMyNzUzFRYzMjY1NTQmJzcWFRUUIyInBiMiNTU0AUM0CREYBQQHRK4aKDBDLlI
DLgFULkMwKRtroUciIkehAhp5FBMOCmImJAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAAAf/
+Aj0AXgLIAA0AABMXFgYGIiYmNTQ3FwYGIAcRAQ8MDBJAIBYfAnYCCh8OARMLNzUXDB4AAAAB//4
CMABeArsADQAAEycmNjYyFhYVFAcnNjY8BxEBDwwMEkAgFh8CggIKHw4BEws3NRcMHgAAAAEAEf+
sAHEANwANAAAXJyY2NjIWFhUUByc2Nk8HEQEPDAwSQCAWHwICCh8OARMLNzUXDB4AAAAAAv/+AkE
A9QLMAA0AGwAAExcWBgYiJiY1NDcXBgYXFxYGBiImJjU0NxcGBiAHEQEPDAwSQCAWH44HEQEPDAw
SQCAWHwJ6AgofDgETCzc1FwweEQIKHw4BEws3NRcMHgAAAv/+AjAA9QK7AA0AGwAAEycmNjYyFhY
VFAcnNjY3JyY2NjIWFhUUByc2NjwHEQEPDAwSQCAWH6AHEQEPDAwSQCAWHwKCAgofDgETCzc1Fww
eEQIKHw4BEws3NRcMHgAAAgAR/64BCAA5AA0AGwAAMycmNjYyFhYVFAcnNjY3JyY2NjIWFhUUByc
2Nk8HEQEPDAwSQCAWH6AHEQEPDAwSQCAWHwIKHw4BEws3NRcMHhECCh8OARMLNzUXDB4AAAAAAQB
OAJ4BswIDAAcAABIyFhQGIiY0tpRpaZRoAgNolGlplAAAAwARAAABrQA3AAcADwAXAAA2MhYUBiI
mNDYyFhQGIiY0NjIWFAYiJjQhFhERFhDBFhERFhDEFhERFhA3EBYRERYQEBYRERYQEBYRERYAAAA
HAFL/9QP0AuQABwAPABMAGwAjACsAMwAAADIWFAYiJjQWFBYyNjQmIgMXASckMhYUBiImNBYUFjI
2NCYiADIWFAYiJjQWFBYyNjQmIgMoeFRUeFQpOF44OVyzIf3LHAGKeFRUeFQpOF44OVz+u3hUVHh
UKTlcOTlcARVUeFRUeBNSPj5SPgH4If0+IfNUeFRUeBNSPj5SPgHrVHhUVHgTUj4+Uj4AAAABACo
AUAEEAccABgAAExcHFwcnNeUfnpwduwHHH52eHbsBAAABAAQAUADeAccABgAAEzcXFQcnNwQfu7s
dnAGoH7sBux2eAAABAE7/jgHAAzEAAwAAATMBIwGSLv6/MQMx/F0AAQBO//YB7gLGAC0AACUGIyI
uAjU1IzUzNSM1MzU0Njc2MzIXByYjIgcGBhUVMxUjFTMVIxUUFxYyNwHuVU0QQUktNzc3NyssLT5
OQA46OVAqEBjc3NzcTyBqWRchBidVP1EsPSxbTE4bGSEgGCgQPChkLD0sT2siDR4AAAEAcwIAAec
CvAASAAATMxc3MxUjNQcjJxUjNSMVIzUjc90xMDYmMhwyJzwoQwK8fn68hoaGhpaWlgAAAAEATgA
AAlACwwAmAAABMzIWFREUBgczFyM1Njc2NRE0JiMjIgYVERQXFhcVIzczJjURNDYBF3BeXi0rVg/
kPTE9T0FwQE88LkDkDlRVXgLDcFz+zTtGGSoqCBohVwE6TFBRS/7GVyEaCCoqLmwBM1xwAAAAAgB
OAAACRwK8AAMABgAAATMTIRMDIQEzK+n+B/q+AYACvP1EAnf9sgAAAAABAE4AAAIAAsIAJAAAATY
zMhcHJiIHBhUVMwcjESMRNDcmIyIHBhUVMwcjESMRNDc2MgFfKDsmGBAaMRYrfRRpLRArLBgYRX0
UaS0aKpICmCQRJwwNGkEzK/42AjEnHR4JGkgzK/42AjExJDwAAAAAAgBOAAABZQLFAAMAFQAAATM
RIwMVMwcjESMRNDYzMhcHJiMiBgE5LCy+fRNqLVY7QzUdMCosOQH1/gsCJzIr/jYCMURQMR4ePgA
AAAEATgAAAWQCwgASAAATNDYyFxEjESYiBwYVFTMHIxEjTleCPSwtQBU7fRNqLQIxRE0x/W8Cdh0
JGkY1K/42AAABAE4AAAJKAsIAIwAAATYyFxEjESYiBwYVFTMHIxEjETQ3JiMHBhUVMwcjESMRNDY
yAV0nijwsLUAVO30Tai0QKyoxQ30UaS1UeAKZKTH9bwJ2HQkaRjUr/jYCMSceHQkbRzMr/jYCMUF
QAAADAE7/+QIKAxoAGAAgACgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjUSMhYUBiImNDYyFhQ
GIiY0Ti1il14KLmkLMg4GG2IsanuBFhERFhGvFhERFhACvP1MUjs1ASv93Y4SHxMxGSOcIB9pZwF
VERYQEBYREBYRERYAAgBOAAACRwK8AAMABgAAATMTIRMDIQEzK+n+B/q+AYACvP1EAnf9sgAAAAA
BABIAAAdeAfUAJAAAEzMTEzMTEzMTEzMTEzMTEzMTEzMDIwMDIwMDIwMDIwMDIwMDIxIvi3grdow
vi3grdowvi3grdowvnzpucDmHhzpucDmHhzpucDkB9f4/AcH+PwHB/j8Bwf4/AcH+PwHB/j8Bwf4
LAaT+XAGq/lYBpP5cAar+VgGk/lwAAQBO//MB4QLDABsAABM0NjIXFTMHIxEUFwcmJjURJiIHBhU
VMwcjESNOVoQ8fRNqSg04Mi4/Fjl9FGktAjFDTzKcK/66VRkjEEY7AfIdChtGMyv+NgAAAAEALP/
zAcYCvAAZAAABMxUzByMRFBcHJiY1ESMRFBcHJiY1ETMVMwEWLYMUb0oNODK9Sg04Mi29ArzHK/6
6VRgkEEY7AUb+ulUYJBBGOwI4xwAAAAEAMQAAAgkCvAAIAAATMxMTMwMRIxExM7i6M9YtArz+zQE
z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY

Copyright © 2001 -2024 Syncfusion Inc. 1015


TreeGrid How To

IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE

Copyright © 2001 -2024 Syncfusion Inc. 1016


TreeGrid How To

UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94

Copyright © 2001 -2024 Syncfusion Inc. 1017


TreeGrid How To

AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1018


TreeGrid How To

endDate: new Date('02/07/2017'),


progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{

Copyright © 2001 -2024 Syncfusion Inc. 1019


TreeGrid How To

taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,

Copyright © 2001 -2024 Syncfusion Inc. 1020


TreeGrid How To

taskName: 'Phase 2',


startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1021


TreeGrid How To

endDate: new Date('02/27/2017'),


priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',

Copyright © 2001 -2024 Syncfusion Inc. 1022


TreeGrid How To

'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },


{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG

Copyright © 2001 -2024 Syncfusion Inc. 1023


TreeGrid How To

7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA

Copyright © 2001 -2024 Syncfusion Inc. 1024


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1025


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1026


TreeGrid How To

4aC0tY1oXC0Qsr9zaATvY2v7bv8ABEr7AAdxEbTwGwr6+AYyjJRIbLCX9ztgBPtbW/sLYAsC6/uG
7vAEavgAAAAEATgJ3ASsCpQADAAATMxUjTt3dAqUuAAIATgGlAW4CxQAHAA8AABIyFhQGIiY0FhQ
WMjY0JiKieFRUeFQpOF44OVwCxVR4VFR4E1I+PlI+AAAAAAEATgDtAZICIQAPAAATMzUzFTMVIxU
zFSE1MzUjUossiYmF/sCPiwGdhIQsWCwsWAAAAAABAC4CTACbAtkACQAAEzc2MzIXFhQHBy40CRE
YBgEFRAJMeRQTBQwHYgAAAAEAJf8wAbsB/gAbAAATMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxU
nJS4ZLzIvKSEtLgIYFggaBylTPy0zDi4B9f5wHBUWEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBO/zk
CfALuABQAAAEhESMRJxEjESMiJy4DJyY1NDYBCAF0LU8t1EMjEhsPCgIDXALu/EsDigH8dgG8Gg4
dMCQeLTJkfgAAAQBM/y4BJAAAABQAADMzBzYyFhQGIic3FjI2NCcmIgcHJ60jKA47M0paNBQjSi0
ZCx8VJA43CCVVKRMrGBo0CwUIDxcAAAAAAgAEAFABuQHHAAYADQAAEzcXFQcnNyU3FxUHJzfgHru
7HZz+hx67ux2cAagfuwG7HZ6dH7sBux2eAAAAAgBPAAABsQLFAB0AJQAAJTMUBiMiJyY1NDc+AzU
1MxUUDgIHBhUUFjI2AiImNDYyFhQBhC1dVTQqUiUTOB8ZKRwjNQ0hTG5MbRYRERYRsUtmGjRePjY
bOSFIND1VLkonOBI0MDdKRQIeEBYRERYAAAMADAAAAgUDZwAHAAoAEwAAEzMTIwMjAyMTAzMDFyM
nJjU0MzLyKukwVvBUL/tq1pM1JUMFHhICvP1EAQD/AAJz/rkCJ3ljBwYdAAADAAwAAAIFA2gABwA
KABQAABMzEyMDIwMjEwMzAzc2MzIXFhQHB/Iq6TBW8FQv+2rWgTQJERgGAQVEArz9RAEA/wACc/6
5Aa95FBQEDAdiAAMADAAAAgUDkQAHAAoAEAAAEzMTIwMjAyMTAzMDNxcHJwfyKukwVvBUL/tq1v2
UjiBvdAK8/UQBAP8AAnP+uQHYjY0gb28AAAMADAAAAgUDOgAHAAoAHAAAEzMTIwMjAyMTAzMDIgc
nNjMyFxYzMjcXBiMiJibyKukwVvBUL/tq1rEqIxUvNRhEFxgoHxQrMRQvMQK8/UQBAP8AAnP+uQH
gJiA0HwsiIS8UFgACAAwAAAIFArwABwAKAAATMxMjAyMDIxMDM/Iq6TBW8FQv+2rWArz9RAEA/wA
Cc/65AAAAAwAMAAACBQN1AA8AEgAaAAASJjQ2MhYUBgcTIwMjAyMTFwMzAhQWMjY0JiLELEFbQSw
i3jBW8FQv2yBq1rYrPioqPgKmO1NBQVM7C/1lAQD/AAKbKP65Afk+Kio+KgAAAgBOAAADCwK8AA8
AEgAAASEVIRUzByMRIRUhEyMDIwEDMwG8AU/+38oPuwEf/rMBuYYwAW+jowK8KvUs/rgpAQD/AAJ
k/sgAAQBC/y4BqwLGAC8AABMRFBcWMjcXBiMHNjIWFAYiJzcWMjY0JyYiBwcnNyYmNRE0Njc2MzI
XByYjIgcGBm9PH2tZClVTIA47M0paNBQjSi0ZDB4VJA42SFcrLC0+TkAOOjlQKREYAgH+uGsiDR4
mIS0IJVUpEysYGjQLBQgPF0YIXFsBQUxOGxkhIBgoEDwAAgBOAAABnANmAAsAFAAAEyEVIRUzByM
RIRUhExcjJyY1NDMyTgFO/t/KD7sBH/60jDUlQwUeEgK8KvUs/rgpA1J5YwcGHQAAAgBOAAABnAN
nAAsAFQAAEyEVIRUzByMRIRUhEzc2MzIXFhQHB04BTv7fyg+7AR/+tJ80CREYBQIFRAK8KvUs/rg
pAtp5FBMFDAdiAAIATgAAAZwDkQALABEAABMhFSEVMwcjESEVIRM3FwcnB04BTv7fyg+7AR/+tA+
UjiBvdAK8KvUs/rgpAwSNjSBvbwAAAQBOAAABnAK8AAsAABMhFSEVMwcjESEVIU4BTv7fyg+7AR/
+tAK8KvUs/rgpAAAAAgBTAAAAyANmAAUADgAAEzMRIxEnNxcjJyY1NDMyU3UtSDg1JUMFHhICvP1
EApICvnljBwYdAAACAE4AAAEJA2cABQAPAAATMxEjESc3NzYzMhcWFAcHTnUtSE40CREYBgEFRAK
8/UQCkgJGeRQTBQwHYgACAE4AAAFwA5EABQALAAATMxEjEScnNxcHJweGdS1IOJSOIG90Arz9RAK
SAnCNjSBvbwAAAQBOAAAAwwK8AAUAABMzESMRJ051LUgCvP1EApICAAADAE4AAAJdAr0AEQAbACE
AABMzNTMyFhczFSMWFREUIyMRIwU0JyERMzI3NjUBFSEmJiNOMbxdcxFBOwHU0DEBqAH+t5VCM0D
+tgFCEF86AhqjWEssBw3+7sgB7g8KBf47GB5mAc55PTwAAAACAE4AAAI6AzoACQAbAAATMwERMxE
jAREjEyIHJzYzMhcWMzI3FwYjIiYmTi0Bkyws/m0tsiojFS81GEQXGCgfFCsxFC8xArz9lgJq/UQ
Ca/2VAwwmIDQfCyIhLxQWAAADAD//9QHjA2YACwAXACAAADcRNDYyFhURFAYiJhMRFBYyNjURNCY
iBhMXIycmNTQzMj9xxm17rH0tX45eWZpYhDUlQwUeErkBQmdqcGL+v2VfXwGu/rdMTUtPAUhNUlI
BA3ljBwYdAAMAP//1AeMDZwALABcAIQAANxE0NjIWFREUBiImExEUFjI2NRE0JiIGNzc2MzIXFhQ
HBz9xxm17rH0tX45eWZpYlTQJERgFAgVEuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUot5FBMFDAd
iAAMAP//1AeMDkQALABcAHQAANxE0NjIWFREUBiImExEUFjI2NRE0JiIGNzcXBycHP3HGbXusfS1
fjl5ZmlgSlI4gb3S5AUJnanBi/r9lX18Brv63TE1LTwFITVJStY2NIG9vAAADAD//9QHjAzoACwA
XACkAADcRNDYyFhURFAYiJhMRFBYyNjURNCYiBjciByc2MzIXFjMyNxcGIyImJj9xxm17rH0tX45
eWZpYZSojFS81GEMYGCgfFCsxFS4xuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUr0mIDQfCyIhLxQ
WAAIAP//1AeMCzAALABcAADcRNDYyFhURFAYiJhMRFBYyNjURNCYiBj9xxm17rH0tX45eWZpYuQF
CZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUgAAAQBOAKsBYwHtAAsAABM3FzcXBxcHJwcnN04hamkhbm0
iaGghbQHRHH9/HIWDHX1+HoMAAAMATv+OAfIDMQAVAB4AJwAAATMHFhURFAYjIicHIzcmNRE0NjM
yFxc0JwMWMzI2NQERFBcTJiMiBgGoLjBMe1Y1LiowMkhxYzIrRy/LIzFIXv61K8sjLk1YAzGLOHT
+v2VfEnmPNWcBQmdqELpOKv23EUtPAUj+t0UpAkcPUgAAAgBK//kB7wNmABMAHAAAEzMRFBYyNjU
RMxEUDgIiLgI1ExcjJyY1NDMySi1iiGEtJT9GUEc/Ja81JUMFHhICvf33RkxMRgIJ/f01TioUFCp
ONQKYeWMHBh0AAAACAEr/+QHvA2gAEwAdAAATMxEUFjI2NREzERQOAiIuAjUTNzYzMhcWFAcHSi1
iiGEtJT9GUEc/Jbw0CREYBgEFRAK9/fdGTExGAgn9/TVOKhQUKk41AiF5FBQEDAdiAAACAEr/+QH
vA5EAEwAZAAATMxEUFjI2NREzERQOAiIuAjUTNxcHJwdKLWKIYS0lP0ZQRz8lRpSOIG90Ar3990Z
MTEYCCf39NU4qFBQqTjUCSo2NIG9vAAAAAQBK//kB7wK9ABMAABMzERQWMjY1ETMRFA4CIi4CNUo
tYohhLSU/RlBHPyUCvf33RkxMRgIJ/f01TioUFCpONQAAAAACADz/+QH4A2gAGAAiAAATMxUUFjI
2NxEzERQHJzY3NjU1BgYjIiY1Ezc2MzIXFhQHBzwtYpdeCi5pCzIOBhtiLGp7yjQJERgGAQVEArz
9TFI7NQEr/d2OEh8TMRkjnCAfaWcBFnkUFAQMB2IAAAAAAgBOAAABxwK8AA0AFgAAEzMRNjIWFAY
jIiYnFSMAJiIGBxQWMjZOLTa1YWhSKVQVLQFMVHNWAlF9UQK8/v1EbbNpKirIAYtKSEhRVU8AAAA

Copyright © 2001 -2024 Syncfusion Inc. 1027


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1028


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1029


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1030


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1031


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1032


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1033


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1034


TreeGrid How To

WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB

Copyright © 2001 -2024 Syncfusion Inc. 1035


TreeGrid How To

oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH

Copyright © 2001 -2024 Syncfusion Inc. 1036


TreeGrid How To

/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.

Copyright © 2001 -2024 Syncfusion Inc. 1037


TreeGrid How To

Enable disable treegrid and its actions in React Treegrid component


You can enable/disable the TreeGrid and its actions by applying/removing corresponding CSS styles.
To enable/disable the treegrid and its actions, follow the given steps:
Step 1:
Create CSS class with custom style to override the default style of TreeGrid.
`css
.disabletreegrid {
pointer-events: none;
opacity: 0.4;
}
.wrapper {
cursor: not-allowed;
}
`
Step 2:
Add/Remove the CSS class to the TreeGrid in the click event handler of Button.
`ts
const btnClick = (): void => {
if (treegrid && treegrid.element.classList.contains('disabletreegrid')) {
treegrid.element.classList.remove('disabletreegrid');
(document.getElementById("TreeGridParent") as HTMLElement).classList.remove('wrapper');
}
else if (treegrid) {
treegrid.element.classList.add('disabletreegrid');
(document.getElementById("TreeGridParent") as HTMLElement).classList.add('wrapper');
}
}
`
In the below demo, the button click will enable/disable the TreeGrid and its actions.
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Page, Edit, Toolbar } from '@syncfusion/ej2-react-
treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 1038


TreeGrid How To

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';


/* tslint:disable */
function App() {
const editOptions = { allowAdding: true, allowEditing: true,
allowDeleting: true };
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
let treegrid;
const btnClick = () => {
if (treegrid &&
treegrid.element.classList.contains('disabletreegrid')) {
treegrid.element.classList.remove('disabletreegrid');

document.getElementById("TreeGridParent").classList.remove('wrapper');
}
else if (treegrid) {
treegrid.element.classList.add('disabletreegrid');
document.getElementById("TreeGridParent").classList.add('wrapper');
}
};
return (<div>
<ButtonComponent cssClass='e-flat e-primary' iconCss='e-icons e-play-
icon' isToggle onClick={btnClick}>Enable/Disable TreeGrid</ButtonComponent>
<div id="TreeGridParent">
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' height={210}
toolbar={toolbarOptions} ref={g => treegrid = g} editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right'/>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Edit, Toolbar]}/>
</TreeGridComponent>
</div>
</div>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent,
EditSettingsModel } from '@syncfusion/ej2-react-treegrid';
import { Inject, Page, Edit, Toolbar, ToolbarItems } from '@syncfusion/ej2-
react-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
/* tslint:disable */
function App() {

Copyright © 2001 -2024 Syncfusion Inc. 1039


TreeGrid How To

const editOptions: EditSettingsModel = { allowAdding:true, allowEditing:


true, allowDeleting:true };
const toolbarOptions: ToolbarItems[] = ['Add', 'Delete', 'Update',
'Cancel'];
let treegrid: TreeGridComponent | null;
const btnClick = (): void => {
if (treegrid && treegrid.element.classList.contains('disabletreegrid'))
{
treegrid.element.classList.remove('disabletreegrid');
(document.getElementById("TreeGridParent") as
HTMLElement).classList.remove('wrapper');
}
else if (treegrid) {
treegrid.element.classList.add('disabletreegrid');
(document.getElementById("TreeGridParent") as
HTMLElement).classList.add('wrapper');
}
}
return (<div>
<ButtonComponent cssClass='e-flat e-primary' iconCss='e-icons e-play-
icon'
isToggle onClick={ btnClick }>Enable/Disable
TreeGrid</ButtonComponent>
<div id="TreeGridParent">
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' height={210}
toolbar={toolbarOptions}
ref={g => treegrid = g} editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' />
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Edit, Toolbar]} />
</TreeGridComponent>
</div>
</div>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,

Copyright © 2001 -2024 Syncfusion Inc. 1040


TreeGrid How To

priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1041


TreeGrid How To

endDate: new Date('02/27/2017'),


priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1042


TreeGrid How To

priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,

Copyright © 2001 -2024 Syncfusion Inc. 1043


TreeGrid How To

duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},

Copyright © 2001 -2024 Syncfusion Inc. 1044


TreeGrid How To

{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new


Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA

Copyright © 2001 -2024 Syncfusion Inc. 1045


TreeGrid How To

kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc

Copyright © 2001 -2024 Syncfusion Inc. 1046


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1047


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1048


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1049


TreeGrid How To

+v2VfEnmPNWcBQmdqELpOKv23EUtPAUj+t0UpAkcPUgAAAgBK//kB7wNmABMAHAAAEzMRFBYyNjU
RMxEUDgIiLgI1ExcjJyY1NDMySi1iiGEtJT9GUEc/Ja81JUMFHhICvf33RkxMRgIJ/f01TioUFCp
ONQKYeWMHBh0AAAACAEr/+QHvA2gAEwAdAAATMxEUFjI2NREzERQOAiIuAjUTNzYzMhcWFAcHSi1
iiGEtJT9GUEc/Jbw0CREYBgEFRAK9/fdGTExGAgn9/TVOKhQUKk41AiF5FBQEDAdiAAACAEr/+QH
vA5EAEwAZAAATMxEUFjI2NREzERQOAiIuAjUTNxcHJwdKLWKIYS0lP0ZQRz8lRpSOIG90Ar3990Z
MTEYCCf39NU4qFBQqTjUCSo2NIG9vAAAAAQBK//kB7wK9ABMAABMzERQWMjY1ETMRFA4CIi4CNUo
tYohhLSU/RlBHPyUCvf33RkxMRgIJ/f01TioUFCpONQAAAAACADz/+QH4A2gAGAAiAAATMxUUFjI
2NxEzERQHJzY3NjU1BgYjIiY1Ezc2MzIXFhQHBzwtYpdeCi5pCzIOBhtiLGp7yjQJERgGAQVEArz
9TFI7NQEr/d2OEh8TMRkjnCAfaWcBFnkUFAQMB2IAAAAAAgBOAAABxwK8AA0AFgAAEzMRNjIWFAY
jIiYnFSMAJiIGBxQWMjZOLTa1YWhSKVQVLQFMVHNWAlF9UQK8/v1EbbNpKirIAYtKSEhRVU8AAAA
BAE7/9QHdAr0AOwAAEyIVESMRNDMyFhUUByMGFxYWFxYXFhUUBwYHBiMiJzcWFxYyNzY3NjU0JyY
nJicmNDcyMzI3NjQnJiMi1FguiTw+LxkSDw8vEDMSRA4VOCQdXDkYHS4VLBgqEAw1GSpJEggRAQE
rDwUNFisBApF0/eMCGaRSLEIcHx4bKwwqEkNIICIzFA0wJxsLBQcOJBsaNjMYIjsoEjYeJQ4mFyY
AAwBO//YBzwKmABoAKQAyAAAFIjU1NDc2MzIXNCYjIiM3MhceAxcWFREGAxUUFhcWMjcRJiciIyI
GExcjJyY1NDMyASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrP3Y1JUMFHhIKs1NjIhE
4OUYkEwsWJBsXIyb+1goBA1cwPgoNCQEPLgY1AV55YwcGHQAAAAADAE7/9gHPAqcAGgApADMAAAU
iNTU0NzYzMhc0JiMiIzcyFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgY3NzYzMhcWFAcHASnbRiQlekt
FXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrP4g0CREYBgEFRAqzU2MiETg5RiQTCxYkGxcjJv7WCgE
DVzA+Cg0JAQ8uBjXmeRQTBQwHYgAAAAADAE7/9gHPAtAAGgApAC8AAAUiNTU0NzYzMhc0JiMiIzc
yFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgYTNxcHJwcBKdtGJCV6S0VcAgMDUScVIBIMAgNo7S8pL20
0U2IFBCs/B5SOIG90CrNTYyIRODlGJBMLFiQbFyMm/tYKAQNXMD4KDQkBDy4GNQEPjY0gb28AAAA
AAwBO//YBzwJ+ABoAKQA7AAAFIjU1NDc2MzIXNCYjIiM3MhceAxcWFREGAxUUFhcWMjcRJiciIyI
GEyIHJzYzMhcWMzI3FwYjIiYmASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrP1gqIxU
vNRhEFxgoHxQrMRQvMQqzU2MiETg5RiQTCxYkGxcjJv7WCgEDVzA+Cg0JAQ8uBjUBHCYgNB8LIiE
vFBYAAAACAE7/9gHPAf0AGgApAAAFIjU1NDc2MzIXNCYjIiM3MhceAxcWFREGAxUUFhcWMjcRJic
iIyIGASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrPwqzU2MiETg5RiQTCxYkGxcjJv7
WCgEDVzA+Cg0JAQ8uBjUAAwBO//YBzwK7AB4ALQA1AAAFIjU1NDc2MzIXNCYjIiMmJjQ2MhYUBx4
CFxYVEQYDFRQWFxYyNxEmJyIjIgYSFBYyNjQmIgEp20YkJXpLRVwCAyw8Ql5CJyUzGQYJaO0vKS9
tNFNiBQQrP0AsPiwsPgqzU2MiETg5RgRBWkNDYSIIIiIdJzv+1goBA1cwPgoNCQEPLgY1ATZAKyt
AKwAAAAMATv/0AwsB/gAkADMAOwAABSI1NTQ3NjMyFzQmIyIjNzIXNjMyFhUVBRUUFjMyNxcGIic
VBgMVFBYXFjI3ESYnIiMiBiUVJTU0JiIGASnbRiQlektFXAIDA5EqLnNTXf7FSi9ITxJNrSlo7S8
pL200U2IFBCs/AVYBDlJtTwqzU2MiETg5RiROT1lPeBFIOTErIy8kGAoBA1cwPgoNCQEPLgY1H1o
OVEM5QAABACT/LgFmAf4ALgAAASYiBgYVFRQzMjcXBiInBzYyFhQGIic3FjI2NCcmIgcHJzcmJyY
mNTU0NzYzMhcBVzpaQy+gMToKPUkQIQ47M0paNBQjSi0ZDB4VJA45Ego7NRwwbkJEAbsaF0s5kYw
OJRABLgglVSkTKxgaNAsFCA8XSQMEFFNLgEcwUyAAAAMATv/0AbYCpgASABoAIwAAJQYjIjU1NDY
yFhUVBRUUFjMyNwEVJTU0JiIGNxcjJyY1NDMyAZ1NVK5lpl3+xUovSE/+8AEOUm1PbTUlQwUeEiM
vks1RWllPeBFIOTErAQ1aDlRDOUD7eWMHBh0AAAADAE7/9AG2AqcAEgAaACQAACUGIyI1NTQ2MhY
VFQUVFBYzMjcBFSU1NCYiBjc3NjMyFxYUBwcBnU1UrmWmXf7FSi9IT/7wAQ5SbU91NAkRGAYBBUQ
jL5LNUVpZT3gRSDkxKwENWg5UQzlAg3kUEwUMB2IAAAMATv/0AbYC0AASABoAIAAAJQYjIjU1NDY
yFhUVBRUUFjMyNwEVJTU0JiIGJzcXBycHAZ1NVK5lpl3+xUovSE/+8AEOUm1PEJSOIG90Iy+SzVF
aWU94EUg5MSsBDVoOVEM5QKyNjSBvbwAAAAIAI//0AYsB/gASABoAACUGIyI1NTQ2MhYVFQUVFBY
zMjcBFSU1NCYiBgFyTVSuZaZd/sVKL0hP/vABDlJtTyMvks1RWllPeBFIOTErAQ1aDlRDOUAAAAA
CAE4AAADDAqYACAAMAAATFyMnJjU0MzIXMxEjhjUlQwUeEhgtLQKSeWMHBh2x/gsAAAAAAgBRAAA
AwQKnAAkADQAAEzc2MzIXFhQPAjMRI1Q0CREYBgEFRCctLQIaeRQTBQwHYiX+CwAAAAAC/8QAAAD
mAtAABQAJAAADNxcHJwcXMxEjPJSOIG90XC0tAkONjSBvby7+CwAAAAAD/98AAAC1AlwAAwALABM
AABMzESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAA
CAE4AAAG/An4AFAAmAAABIgcRIxEzFTYzMhcWFREjETQmJyYnIgcnNjMyFxYzMjcXBiMiJiYBCE4
/LS04VzknVSw9LBFbKiMVLzUYRBcYKB8UKzEULzEB1CL+TgH1GyMTJ2n+pgFYNj8FAnwmIDQfCyI
hLxQWAAADAE7/9gHDAqYACwAXACAAADc1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBhMXIycmNTQzMk5
hsmJcul8tS4hITYBObDUlQwUeEriEX2VpW4RUbm/YjEBTUkGMTkxLAQZ5YwcGHQAAAwBO//YBwwK
nAAsAFwAhAAA3NTQ2MhYVFRQGIiY3FRQWMjY1NTQmIgY3NzYzMhcWFAcHTmGyYly6Xy1LiEhNgE5
0NAkRGAUCBUS4hF9laVuEVG5v2IxAU1JBjE5MS455FBMFDAdiAAADAE7/9gHDAtAACwAXAB0AADc
1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBic3FwcnB05hsmJcul8tS4hITYBOBJSOIG90uIRfZWlbhFR
ub9iMQFNSQYxOTEu3jY0gb28AAAADAE7/9gHDAn4ACwAXACkAADc1NDYyFhUVFAYiJjcVFBYyNjU
1NCYiBjciByc2MzIXFjMyNxcGIyImJk5hsmJcul8tS4hITYBOTCojFS81GEMYGCgfFCsxFS4xuIR
fZWlbhFRub9iMQFNSQYxOTEvEJiA0HwsiIS8UFgAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiI
mNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEhNgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAMATgDpAY0

Copyright © 2001 -2024 Syncfusion Inc. 1050


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1051


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1052


TreeGrid How To

AIBYfArz9lgJq/UQCa/2VZgIKHw4BEws3NRcMHgAAAgBA/0gBsQH9ABQAIgAAEyIHESMRMxU2MzI
XFhURIxE0JicmAycmNjYyFhYVFAcnNjb6Tj8tLThXOSdVLD0sERUHEQEPDAwSQCAWHwHUIv5OAfU
bIxMnaf6mAVg2PwUC/cYCCh8OARMLNzUXDB4AAAIATgAAAjoDiwAJAA8AABMzAREzESMBESMTNxc
3FwdOLQGTLCz+bS1qH3RwH44CvP2WAmr9RAJr/ZUDayBvbyCNAAAAAgBOAAABvwL9ABQAGgAAASI
HESMRMxU2MzIXFhURIxE0JicmAzcXNxcHAQhOPy0tOFc5J1UsPSwRlh90cB+OAdQi/k4B9RsjEyd
p/qYBWDY/BQIBCSBvbyCNAAABAE7/2wI7ArwAFQAAATMRFAcmJzY3JgMRIxEzFgAXNjURJwHFdng
EBywVgP4tLRkBKE8CSAK8/buWBg4RBCHEAYj9lQK8Jv44eA4jAgsCAAEAQP8vAbIB/QAdAAATIgc
RIxEzFTYzMhcWFzcRBgYHJzI+AjURNCYnJvpOPy0tOFc5J1QBAQI9NwYIIRURPSwRAdQi/k4B9Rs
jEyZ1Af5jNksDIxEWLR0BlTY/BQIAAAMAP//1AeMDFAALABcAGwAANxE0NjIWFREUBiImExEUFjI
2NRE0JiIGNzMVIz9xxm17rH0tX45eWZpYNNnZuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUsUuAAA
AAwBO//YBwwJUAAsAFwAbAAA3NTQ2MhYVFRQGIiY3FRQWMjY1NTQmIgY3MxUjTmGyYly6Xy1LiEh
NgE4h2Ni4hF9laVuEVG5v2IxAU1JBjE5MS8guAAAAAAQAP//1AeMDaAALABcAIQArAAA3ETQ2MhY
VERQGIiYTERQWMjY1ETQmIgY3NzYzMhcWFAcHIzc2MzIXFhQHBz9xxm17rH0tX45eWZpYwTQJERg
FAgVElDQJERgFAgVEuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUox5FBQEDAdieRQUBAwHYgAEAE7
/9gHDAqwACwAXACEAKwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGNzc2MzIXFhQHByM3NjMyFxY
UBwdOYbJiXLpfLUuISE2ATqU0CREYBgEFRJQ0CREYBgEFRLiEX2VpW4RUbm/YjEBTUkGMTkxLk3k
UFAQMB2J5FBQEDAdiAAACAE7/9QMTAswAFgAiAAABIRUhFTMHIxEhFSE1BiMiJjURNDYyFwURFBY
yNjcRJiYiBgHFAU7+38oPuwEf/rQ4bFZ9cc83/rZfiVwGB1eUWAK8KvUs/rgpND9fZQFCZ2pCiP6
3TE1BRAFzQkdSAAAAAwBO//QC9AIAABsAJwAvAAAlBiInBiImNTU0NjMyFhc2MzIWFRUFFRQWMzI
3JRUUFjI2NTU0JiIGBRUlNTQmIgYC203KJTHDXWBaN1EVL3JSXP7KSS1GT/2yTX9JS35MAUMBCVF
rTSMvUU9vU4RfZTErWllPeBFHOjEr9o5CTUw+mEtLSzpYDFdCOEQAAAAAAwBOAAACAQNnAA4AFgA
gAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIyc3NjMyFxYUBwdO9GBeZmcuZBYO0C0tzIxLRGE0CRE
YBQIFRAK8dGKpLf7wAQIC/wACkf6bulRXSXkUEwUMB2IAAAAAAgBOAAABSAKnAA4AGAAAEzMHNjM
yFwcmIgcGFREjEzc2MzIXFhQHB04tAjFTIikMHj8hQy08NAkRGAYBBUQB9SgxCSoLChMv/nYCGnk
UEwUMB2IAAwBO/0gCAQK8AA4AFgAkAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIwMnJjY2MhYWFRQ
HJzY2TvRgXmZnLmQWDtAtLcyMS0QtBxEBDwwMEkAgFh8CvHRiqS3+8AECAv8AApH+m7pUV/0JAgo
fDgETCzc1FwweAAAAAgA9/0gBNwH+AA4AHAAAEzMHNjMyFwcmIgcGFREjFycmNjYyFhYVFAcnNjY
9LQIxUyIpDB8/IEMtTgcRAQ8MDBJAIBYfAfUoMQkqCwoTL/52ZgIKHw4BEws3NRcMHgAAAwBOAAA
CAQOLAA4AFgAcAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIyc3FzcXB070YF5mZy5kFg7QLS3MjEt
Eux90cB+OArx0Yqkt/vABAgL/AAKR/pu6VFfaIG9vII0AAgBOAAABcAL9AA4AFAAAEzMHNjMyFwc
mIgcGFREjAzcXNxcHTy0CMVMiKQwfPyBDLQEfdHAfjgH1KDEJKgsKEy/+dgLdIG9vII0AAAIAJf/
1AgADbAAiACwAADczFhYyNjU0LgQ1NDYzMhcHJiIGFRQeBBUUBiImEzc2MzIXFhQHByUuBGambT1
aa1o9dG1TPw45mWQ9W2pbPXXnfck0CREYBgEFRLI4WkpRL0MiJyZKNEZmHisdRD8oOx8nKVA3XG1
zAnd5FBQEDAdiAAAAAAIAMf/xAZkCpwAgACoAAAEHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzI
WFyc3NjMyFxYUBwcBWBAmcEhFV1c8WatiAisGT21OOlZWISdPWx84DYk0CREYBQIFRAHkJhoBMio
pKxofQW5QUjwvNTJVMhscHCFjVg8HL3kUEwUMB2IAAAIAJf/1AgADkQAiACgAADczFhYyNjU0LgQ
1NDYzMhcHJiIGFRQeBBUUBiImEzcXBycHJS4EZqZtPVprWj10bVM/DjmZZD1bals9ded9ZJSOIG9
0sjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXMCnI2NIG9vAAIATv/xAbYC0QAFACYAABM3Fwc
nBxcHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWF3SUjiBvdOIQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAwCRI2NIG9vQCYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPBwAAAAABACT/LgGMAgE
ANQAAAQcmJgYVFB4DFAYHBzYyFhQGIic3FjI2NCcmIgcHJzcmJiczFhYyNjQuAicmNDYzMhYXAUs
QJnBIRVdXPFRRHQ47M0paNBQjSi0ZCx8VJA4ySlQCKwZPbU46VlYhJ09bHzgMAeQmGgEyKikrGh9
BbE8DKAglVSkTKxgaNAsFCA8XQAZQNy81MlUyGxwcIWNWDwcAAgAl//UCAAO9ACIAKAAANzMWFjI
2NTQuBDU0NjMyFwcmIgYVFB4EFRQGIiYTNxc3FwclLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11531
zH3RwH46yOFpKUS9DIicmSjRGZh4rHUQ/KDsfJylQN1xtcwM1IG9vII0AAgBO//EBtgL8ACAAJgA
AAQcmJgYVFB4DFAYiJiczFhYyNjQuAicmNDYzMhYXJzcXNxcHAXUQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAzbH3RwH44B5CYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPB/Egb28gjQAAAAIAAP9
IAZICvAAHABUAABEhFSMRIxEjEycmNjYyFhYVFAcnNjYBkrUtsMcHEQEPDAwSQCAWHwK8Kf1tApP
9BwIKHw4BEws3NRcMHgACACz/SADqArwADAAaAAATMxUzByMRFBcHJiY1FycmNjYyFhYVFAcnNjY
6LYMUb0oNODIwBxEBDwwMEkAgFh8CvMcr/rpVGCQQRjvqAgofDgETCzc1FwweAAAAAAIAAAAAAZI
DiwAHAA0AABEhFSMRIxEjNzcXNxcHAZK1LbA2H3RwH44CvCn9bQKT2CBvbyCNAAAAAv/r//MBGAO
LAAwAEgAAEzMVMwcjERQXByYmNQM3FzcXB2gtgxRvSg04Mn0fdHAfjgK8xyv+ulUYJBBGOwLnIG9
vII0AAAAAAgAAAAABkgMUAAcACwAAESEVIxEjESM3MxUjAZK1LbBa2dkCvCn9bQKTgS4AAAAAAQB
O//MBRAK8ABQAABMzETMVMwcjFTMVIxUUFwcmJjU1I05GLYMUb3d3Sg04MkYBZgFWxytkLLZVGCQ
QRju2AAIASv/5Ae8DOwATACUAABMzERQWMjY1ETMRFA4CIi4CNRMiByc2MzIXFjMyNxcGIyImJko
tYohhLSU/RlBHPyWQKiMVLzUYRBcYKB8UKzEULzECvf33RkxMRgIJ/f01TioUFCpONQJTJiA0Hws
iIS8UFgAAAgBO//UBwwJ+ABAAIgAAEzMRFDMyNjURMxEjNwYjIjUTIgcnNjMyFxYzMjcXBiMiJiZ

Copyright © 2001 -2024 Syncfusion Inc. 1053


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1054


TreeGrid How To

R9D57O/7g/rqqSFQAAQBOAAABnAK8AAUAABMhFSERI04BTv7fLQK8K/1vAAACAAwAAAIFArwAAwA
GAAATMxMhEwMh8Svp/gf6vgGAArz9RAJ3/bIAAQBOAAABnAK8AAsAABMhFSEVMwcjESEVIU4BTv7
fyg+7AR/+tAK8KvUs/rgpAAAAAQBOAAACNQK8AAkAABMhFQEhFSE1ASFbAdT+WAGu/hkBqP5lArw
p/ZYpKQJqAAAAAQBQAAAB/gK8AAsAABMzESERMxEjESERI1AtAVQtLf6sLQK8/uEBH/1EAXH+jwA
AAwBO//UB8gLMAAsAEwAbAAA3ETQ2MhYVERQGIiYTFSE1NCYiBhAWMjY1NSEVTnHGbXusfS0BS1m
aWF+OXv61uQFCZ2pwYv6/ZV9fAa6ZmU1SUv4eTUtPgoMAAAABAFAAAADFArwABQAAEzMRIxEnUHU
tSAK8/UQCkgIAAAEATgAAAdsCvQALAAATMxETMwMBIwMHESNOLfg00QEFNew/LQK9/qABYP7X/mw
Balr+8AABAAwAAAIFArwABgAAEzMTIwMDI/Er6TDPyy8CvP1EAnb9igABAFAAAAJoArwADAAAEzM
TEzMRIxEDIwMRI1At3uAtLcgwxi0CvP2JAnf9RAI5/ccCOf3HAAAAAAEAUAAAAjwCvAAJAAATMwE
RMxEjAREjUC0Bkyws/m0tArz9lgJq/UQCa/2VAAAAAAMATgAAAksCvAADAAwAFQAAEyEVIRMhByE
iByc2NgMhMjcXBgYjIc0BCP74EgFFEf7MVBojEEYeATRTGiQQRjv+uwGdLAFLKkwNODH9bk0NODI
AAAIAPv/1AeICzAALABcAADcRNDYyFhURFAYiJhMRFBYyNjURNCYiBj5xxm17rH0tX45eWZpYuQF
CZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUgAAAQBQAAAB/gK8AAcAABMhESMRIREjUAGuLf6sLQK8/UQ
Cj/1xAAAAAAIATgAAAgACvAALABgAABMRMzI2Njc2NTQmIyczMhYVFAcGBiMjESN7yig4HAgKSET
59l9dLRNJMsotApH+mx0lHSQ3U1grdGJ6NhYg/wAAAQBOAAACIgK8AA4AABMhByETAzMyNxcGBiM
hE14BrA/+tbbN8FwZJBBGO/694gK8Kv7w/qhNDTgyAYAAAQBOAAAB4AK8AAcAABMhFSMRIxEjTgG
StS2wArwp/W0CkwAAAQA8//kB+AK8ABgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjU8LWKXXgo
uaQsyDgYbYixqewK8/UxSOzUBK/3djhIfEzEZI5wgH2lnAAACAE7/3gJdAscAHQAoAAATFwYVERQ
WMzMRNjYzMhYVERQGIyMVJzUjIiY1ETQhIhURMzI2NRE0JsIXXk1CMgI4L1VjXV83LjJfXQFfQzl
CS1QCwiQaf/7SR0kCFjI4bVv+4ltoQAs1aFsBJJhJ/fRKRQEySkoAAAABAE4AAAJJArwACwAAEzM
TEzMDEwcDAyMTYTK5uTTS4jfGxjjjArz+0wEt/qj+nQEBNv7KAWQAAAEALAAAAjsCxQAjAAATMxE
UFjMzETMRMzI2NTU0JiYnNx4CFRUUBiMjFSM1IyImNSwtTkEyLjdDTBEMEyUbGgNdXzcuMl9dArz
+00pIAb/+QUtHpSs4DhMNETsqKo9bZ9TUZ1sAAAAAAwAjAAAA+QMcAAUADQAVAAATMxEjESc2MhY
UBiImNDYyFhQGIiY0L3UtSAUWEREWEa8WEREWEAK8/UQCkgKIERYQEBYREBYRERYAAAMAAAAAAdg
DGgAIABAAGAAAETMTEzMDESMRAjIWFAYiJjQ2MhYUBiImNDO4ujPWLUkWEREWEa8WEREWEAK8/s0
BM/6a/qoBVQHFERYQEBYREBYRERYAAAADAE7//AHWAqcAFgAiACwAABMyFzcXBhURFhcHIiYGIic
mNTU0Njc2FyYjIgYVFRQXMjI3Azc2MzIXFhQHB99ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBR6E
0CREYBQIFRAH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAHueRQTBQwHYgAAAAIATv/2Aac
CpwAIAC0AABM3NjMyFxYPAjQ3NjIXFSYiBgcGFBYzMwcjIgYUFjMyNjc3FwYiJyY1NDcmJuE0CRE
YBQQHRKI0Kmg4LEMzFxcnKX8PZjE/RkAkTRQUDU6pLjRRHCACGnkUEw4KYphBIRsPKg8HFBRDNiw
4az4QCAkpIiguS2QeCkAAAAAAAgBO/y0BvwKnAAgAHQAAEzc2MzIXFg8CIgcRIxEzFTYzMhcWFRE
nETQmJyb5NAkRGAUEB0QVTj8tLThXOSdVLD0sEQIaeRQTDgpiRiL+TgH1GyMTJ2n90xQCFzY/BQI
AAgBRAAAAwgKnAAkADQAAEzc2MzIXFhQPAjMRI1U0CREYBQIFRCgtLQIaeRQTBQwHYiX+CwAAAAA
EAE7/9gHKAvYACwAUABwAJAAAEzMRFCA1ETMRFCA1Ezc2MzIXFgcHJjIWFAYiJjQ2MhYUBiImNE4
tASIt/oSsNAkRGAYDB0RqFhERFhCvFhERFhAB9f6whoYBUP63trYBvXkUFA0KYhEQFhERFhAQFhE
RFgAAAAACAE7//AHWAfsAFgAiAAATMhc3FwYVERYXByImBiInJjU1NDY3NhcmIyIGFRUUFzIyN99
ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBRwH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAA
DAE7/XwHAAr0AEAAeACoAABI2MhYUBxYWFRUUIyInFSMRFyIHERYyNjY1NTQmJyYnFTY3Njc2NCc
mIyJORYBDKEFR2jI5LbxRPTpZUzI/Lg+cKFMjCgMOFSpeAmZXS2MgCFlEuKUKmAK6UyD+egsROi+
4OkAEAVRLFRcKJQwkFiEAAAABABX/OgHjAf8AGwAAEzMTFhYXEzY2NxcGBgcDBhQXByY1NDc3LgI
nFS5qDSIdahAoKR8jIhJ9FgwfHAoWHBgnDgH1/pcuMQkBYDQ6DRsRJDf+XkIuEhobKBgdSQ8ROS0
AAAAAAgBO//YBwwLBABsAKAAAEyY1NDYzMwcjIgcGFRQXFhcWFRUUIyImNTU0NgcVFBYzMjU1NCY
nBgbcLDs7LBIhIxIMMnQeIblfXUseUD+MRkZCTQH5JjgnQykaEBA3HkkuND9nwmdbflBltYVLR5J
8KmAhBlAAAAAAAQBO//YBpwH/ACQAABM0NzYyFxUmIgYHBhQWMzMHIyIGFBYzMjY3NxcGIicmNTQ
3JiZjNCpoOCxDMxcXJyl/D2YxP0ZAJE0UFA1OqS40URwgAYJBIRsPKg8HFBRDNiw4az4QCAkpIig
uS2QeCkAAAAEATv8vAa8CvAAXAAATIRcGBwYVFBYyNxUHNQYiJyY1NDc2NyOSARANO0quUYBKLTF
lLFokSrLcArwoL1XGkkhGFPoV2gwXMG1US5uqAAAAAQBO/y0BvwH9ABQAAAEiBxEjETMVNjMyFxY
VEScRNCYnJgEITj8tLThXOSdVLD0sEQHUIv5OAfUbIxMnaf3TFAIXNj8FAgAAAwA+//oBugLGABA
AHQAqAAA3NTY3JjU0NjMWFhURFAYmJjcVFBYyNjURJiIOAjc2MzIXNCYjIgcGFRQ+AjQiXUtfYWO
3Yi1SfVMMKFBeQDFYfA8OUUEtHi+/j0IlQjpBVAJsX/7GWWwBa+iSR1BRQwEVAQodN1kxAVNOEx1
AMAABADYAAABjAfUAAwAAEzMRIzYtLQH1/gsAAAAAAQBO//8BwAIAABAAABMXFTczBxcWMxcmJic
nBxUjTi3jPL1/OSkCLEAmcEMtAgAL+PjOs00oATY0m0XAAAAAAAEATv/2Ah0CvAAjAAATNTIzMhY
XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So

Copyright © 2001 -2024 Syncfusion Inc. 1055


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1056


TreeGrid How To

vi3grdowvi3grdowvnzpucDmHhzpucDmHhzpucDkB9f4/AcH+PwHB/j8Bwf4/AcH+PwHB/j8Bwf4
LAaT+XAGq/lYBpP5cAar+VgGk/lwAAQBO//MB4QLDABsAABM0NjIXFTMHIxEUFwcmJjURJiIHBhU
VMwcjESNOVoQ8fRNqSg04Mi4/Fjl9FGktAjFDTzKcK/66VRkjEEY7AfIdChtGMyv+NgAAAAEALP/
zAcYCvAAZAAABMxUzByMRFBcHJiY1ESMRFBcHJiY1ETMVMwEWLYMUb0oNODK9Sg04Mi29ArzHK/6
6VRgkEEY7AUb+ulUYJBBGOwI4xwAAAAEAMQAAAgkCvAAIAAATMxMTMwMRIxExM7i6M9YtArz+zQE
z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB

Copyright © 2001 -2024 Syncfusion Inc. 1057


TreeGrid How To

GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c

Copyright © 2001 -2024 Syncfusion Inc. 1058


TreeGrid How To

Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/

Copyright © 2001 -2024 Syncfusion Inc. 1059


TreeGrid How To

YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1060


TreeGrid How To

endDate: new Date('02/14/2017'), duration: 2, progress: 100,


priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1061


TreeGrid How To

{ taskID: 19, taskName: 'Customer review meeting',


startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},

Copyright © 2001 -2024 Syncfusion Inc. 1062


TreeGrid How To

{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },

Copyright © 2001 -2024 Syncfusion Inc. 1063


TreeGrid How To

{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new


Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB

Copyright © 2001 -2024 Syncfusion Inc. 1064


TreeGrid How To

OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL

Copyright © 2001 -2024 Syncfusion Inc. 1065


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1066


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1067


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1068


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1069


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1070


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1071


TreeGrid How To

COgNnAAkAEwAAEzMBETMRIwERIxM3NjMyFxYUBwdOLQGTLCz+bS3INAkRGAYBBUQCvP2WAmr9RAJ
r/ZUC2nkUEwUMB2IAAAIATgAAAb8CpwAUAB4AAAEiBxEjETMVNjMyFxYVESMRNCYnJic3NjMyFxY
UBwcBCE4/LS04VzknVSw9LBEyNAkRGAUCBUQB1CL+TgH1GyMTJ2n+pgFYNj8FAkZ5FBMFDAdiAAA
CAE7/SAI6ArwACQAXAAATMwERMxEjAREjBScmNjYyFhYVFAcnNjZOLQGTLCz+bS0BCAcRAQ8MDBJ
AIBYfArz9lgJq/UQCa/2VZgIKHw4BEws3NRcMHgAAAgBA/0gBsQH9ABQAIgAAEyIHESMRMxU2MzI
XFhURIxE0JicmAycmNjYyFhYVFAcnNjb6Tj8tLThXOSdVLD0sERUHEQEPDAwSQCAWHwHUIv5OAfU
bIxMnaf6mAVg2PwUC/cYCCh8OARMLNzUXDB4AAAIATgAAAjoDiwAJAA8AABMzAREzESMBESMTNxc
3FwdOLQGTLCz+bS1qH3RwH44CvP2WAmr9RAJr/ZUDayBvbyCNAAAAAgBOAAABvwL9ABQAGgAAASI
HESMRMxU2MzIXFhURIxE0JicmAzcXNxcHAQhOPy0tOFc5J1UsPSwRlh90cB+OAdQi/k4B9RsjEyd
p/qYBWDY/BQIBCSBvbyCNAAABAE7/2wI7ArwAFQAAATMRFAcmJzY3JgMRIxEzFgAXNjURJwHFdng
EBywVgP4tLRkBKE8CSAK8/buWBg4RBCHEAYj9lQK8Jv44eA4jAgsCAAEAQP8vAbIB/QAdAAATIgc
RIxEzFTYzMhcWFzcRBgYHJzI+AjURNCYnJvpOPy0tOFc5J1QBAQI9NwYIIRURPSwRAdQi/k4B9Rs
jEyZ1Af5jNksDIxEWLR0BlTY/BQIAAAMAP//1AeMDFAALABcAGwAANxE0NjIWFREUBiImExEUFjI
2NRE0JiIGNzMVIz9xxm17rH0tX45eWZpYNNnZuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUsUuAAA
AAwBO//YBwwJUAAsAFwAbAAA3NTQ2MhYVFRQGIiY3FRQWMjY1NTQmIgY3MxUjTmGyYly6Xy1LiEh
NgE4h2Ni4hF9laVuEVG5v2IxAU1JBjE5MS8guAAAAAAQAP//1AeMDaAALABcAIQArAAA3ETQ2MhY
VERQGIiYTERQWMjY1ETQmIgY3NzYzMhcWFAcHIzc2MzIXFhQHBz9xxm17rH0tX45eWZpYwTQJERg
FAgVElDQJERgFAgVEuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUox5FBQEDAdieRQUBAwHYgAEAE7
/9gHDAqwACwAXACEAKwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGNzc2MzIXFhQHByM3NjMyFxY
UBwdOYbJiXLpfLUuISE2ATqU0CREYBgEFRJQ0CREYBgEFRLiEX2VpW4RUbm/YjEBTUkGMTkxLk3k
UFAQMB2J5FBQEDAdiAAACAE7/9QMTAswAFgAiAAABIRUhFTMHIxEhFSE1BiMiJjURNDYyFwURFBY
yNjcRJiYiBgHFAU7+38oPuwEf/rQ4bFZ9cc83/rZfiVwGB1eUWAK8KvUs/rgpND9fZQFCZ2pCiP6
3TE1BRAFzQkdSAAAAAwBO//QC9AIAABsAJwAvAAAlBiInBiImNTU0NjMyFhc2MzIWFRUFFRQWMzI
3JRUUFjI2NTU0JiIGBRUlNTQmIgYC203KJTHDXWBaN1EVL3JSXP7KSS1GT/2yTX9JS35MAUMBCVF
rTSMvUU9vU4RfZTErWllPeBFHOjEr9o5CTUw+mEtLSzpYDFdCOEQAAAAAAwBOAAACAQNnAA4AFgA
gAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIyc3NjMyFxYUBwdO9GBeZmcuZBYO0C0tzIxLRGE0CRE
YBQIFRAK8dGKpLf7wAQIC/wACkf6bulRXSXkUEwUMB2IAAAAAAgBOAAABSAKnAA4AGAAAEzMHNjM
yFwcmIgcGFREjEzc2MzIXFhQHB04tAjFTIikMHj8hQy08NAkRGAYBBUQB9SgxCSoLChMv/nYCGnk
UEwUMB2IAAwBO/0gCAQK8AA4AFgAkAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIwMnJjY2MhYWFRQ
HJzY2TvRgXmZnLmQWDtAtLcyMS0QtBxEBDwwMEkAgFh8CvHRiqS3+8AECAv8AApH+m7pUV/0JAgo
fDgETCzc1FwweAAAAAgA9/0gBNwH+AA4AHAAAEzMHNjMyFwcmIgcGFREjFycmNjYyFhYVFAcnNjY
9LQIxUyIpDB8/IEMtTgcRAQ8MDBJAIBYfAfUoMQkqCwoTL/52ZgIKHw4BEws3NRcMHgAAAwBOAAA
CAQOLAA4AFgAcAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIyc3FzcXB070YF5mZy5kFg7QLS3MjEt
Eux90cB+OArx0Yqkt/vABAgL/AAKR/pu6VFfaIG9vII0AAgBOAAABcAL9AA4AFAAAEzMHNjMyFwc
mIgcGFREjAzcXNxcHTy0CMVMiKQwfPyBDLQEfdHAfjgH1KDEJKgsKEy/+dgLdIG9vII0AAAIAJf/
1AgADbAAiACwAADczFhYyNjU0LgQ1NDYzMhcHJiIGFRQeBBUUBiImEzc2MzIXFhQHByUuBGambT1
aa1o9dG1TPw45mWQ9W2pbPXXnfck0CREYBgEFRLI4WkpRL0MiJyZKNEZmHisdRD8oOx8nKVA3XG1
zAnd5FBQEDAdiAAAAAAIAMf/xAZkCpwAgACoAAAEHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzI
WFyc3NjMyFxYUBwcBWBAmcEhFV1c8WatiAisGT21OOlZWISdPWx84DYk0CREYBQIFRAHkJhoBMio
pKxofQW5QUjwvNTJVMhscHCFjVg8HL3kUEwUMB2IAAAIAJf/1AgADkQAiACgAADczFhYyNjU0LgQ
1NDYzMhcHJiIGFRQeBBUUBiImEzcXBycHJS4EZqZtPVprWj10bVM/DjmZZD1bals9ded9ZJSOIG9
0sjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXMCnI2NIG9vAAIATv/xAbYC0QAFACYAABM3Fwc
nBxcHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWF3SUjiBvdOIQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAwCRI2NIG9vQCYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPBwAAAAABACT/LgGMAgE
ANQAAAQcmJgYVFB4DFAYHBzYyFhQGIic3FjI2NCcmIgcHJzcmJiczFhYyNjQuAicmNDYzMhYXAUs
QJnBIRVdXPFRRHQ47M0paNBQjSi0ZCx8VJA4ySlQCKwZPbU46VlYhJ09bHzgMAeQmGgEyKikrGh9
BbE8DKAglVSkTKxgaNAsFCA8XQAZQNy81MlUyGxwcIWNWDwcAAgAl//UCAAO9ACIAKAAANzMWFjI
2NTQuBDU0NjMyFwcmIgYVFB4EFRQGIiYTNxc3FwclLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11531
zH3RwH46yOFpKUS9DIicmSjRGZh4rHUQ/KDsfJylQN1xtcwM1IG9vII0AAgBO//EBtgL8ACAAJgA
AAQcmJgYVFB4DFAYiJiczFhYyNjQuAicmNDYzMhYXJzcXNxcHAXUQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAzbH3RwH44B5CYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPB/Egb28gjQAAAAIAAP9
IAZICvAAHABUAABEhFSMRIxEjEycmNjYyFhYVFAcnNjYBkrUtsMcHEQEPDAwSQCAWHwK8Kf1tApP
9BwIKHw4BEws3NRcMHgACACz/SADqArwADAAaAAATMxUzByMRFBcHJiY1FycmNjYyFhYVFAcnNjY
6LYMUb0oNODIwBxEBDwwMEkAgFh8CvMcr/rpVGCQQRjvqAgofDgETCzc1FwweAAAAAAIAAAAAAZI
DiwAHAA0AABEhFSMRIxEjNzcXNxcHAZK1LbA2H3RwH44CvCn9bQKT2CBvbyCNAAAAAv/r//MBGAO
LAAwAEgAAEzMVMwcjERQXByYmNQM3FzcXB2gtgxRvSg04Mn0fdHAfjgK8xyv+ulUYJBBGOwLnIG9
vII0AAAAAAgAAAAABkgMUAAcACwAAESEVIxEjESM3MxUjAZK1LbBa2dkCvCn9bQKTgS4AAAAAAQB

Copyright © 2001 -2024 Syncfusion Inc. 1072


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1073


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1074


TreeGrid How To

ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq
5X10tTUKNIRsGMyeAr7MwQw8ZBAUDByENOQwmcYfCZwELt0pIko4vSRoBCwAAAAABAE7/8wF7AfQ
ADQAAEyEVIxEUFhcHJiY1ESNOAS2CICQNNy1+AfQr/rswMgwjEEU8AUUAAQBC//YBvgH1AAsAABM
zERQgNREzERQgNUItASIt/oQB9f6whoYBUP63trYAAAAAAgBO/ykCXQH7AB0AKAAAExcGFRUUFjM
zETY2MzIWFRUUBiMjFSc1IyImNTU0BREzMjY1NTQmIyLCGF9PQDICNi9XY11fNy4yX10BHDdDTFY
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

Copyright © 2001 -2024 Syncfusion Inc. 1075


TreeGrid How To

QAAADAE7/+QIKAxoAGAAgACgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjUSMhYUBiImNDYyFhQ
GIiY0Ti1il14KLmkLMg4GG2IsanuBFhERFhGvFhERFhACvP1MUjs1ASv93Y4SHxMxGSOcIB9pZwF
VERYQEBYREBYRERYAAgBOAAACRwK8AAMABgAAATMTIRMDIQEzK+n+B/q+AYACvP1EAnf9sgAAAAA
BABIAAAdeAfUAJAAAEzMTEzMTEzMTEzMTEzMTEzMTEzMDIwMDIwMDIwMDIwMDIwMDIxIvi3grdow
vi3grdowvi3grdowvnzpucDmHhzpucDmHhzpucDkB9f4/AcH+PwHB/j8Bwf4/AcH+PwHB/j8Bwf4
LAaT+XAGq/lYBpP5cAar+VgGk/lwAAQBO//MB4QLDABsAABM0NjIXFTMHIxEUFwcmJjURJiIHBhU
VMwcjESNOVoQ8fRNqSg04Mi4/Fjl9FGktAjFDTzKcK/66VRkjEEY7AfIdChtGMyv+NgAAAAEALP/
zAcYCvAAZAAABMxUzByMRFBcHJiY1ESMRFBcHJiY1ETMVMwEWLYMUb0oNODK9Sg04Mi29ArzHK/6
6VRgkEEY7AUb+ulUYJBBGOwI4xwAAAAEAMQAAAgkCvAAIAAATMxMTMwMRIxExM7i6M9YtArz+zQE
z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB

Copyright © 2001 -2024 Syncfusion Inc. 1076


TreeGrid How To

vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw

Copyright © 2001 -2024 Syncfusion Inc. 1077


TreeGrid How To

N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//

Copyright © 2001 -2024 Syncfusion Inc. 1078


TreeGrid How To

0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Change header text dynamically in React Treegrid component
You can change the column headerText dynamically through an external button.
Follow the given steps to change the header text dynamically:
Step 1:
Get the column object corresponding to the field name by using the getColumnByField method.
Then change the header Text value.
`ts
/ get the JSON object of the column corresponding to the field name */
const column = treegrid.getColumnByField("Duration");
/ assign a new header text to the column */
column.headerText = "Changed Text";
`
Step 2:
To reflect the changes in the grid header, invoke the refreshColumns method.
`ts
treegrid.refreshColumns();
`
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { Inject, Page, Edit, Toolbar } from '@syncfusion/ej2-react-
treegrid';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
/* tslint:disable */
function App() {
const editOptions = { allowAdding: true, allowEditing: true,
allowDeleting: true };
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
let treegrid;
const click = () => {

Copyright © 2001 -2024 Syncfusion Inc. 1079


TreeGrid How To

if (treegrid) {
/** get the JSON object of the column corresponding to the field
name */
const column = treegrid.getColumnByField("Duration");
/** assign a new header text to the column */
column.headerText = "Changed Text";
treegrid.refreshColumns();
}
};
return (<div>
<ButtonComponent cssClass='e-flat' isToggle onClick={click}>Change
Header Text</ButtonComponent>
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' height={210}
toolbar={toolbarOptions} ref={treegrid} editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right'/>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Edit, Toolbar]}/>
</TreeGridComponent>
</div>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent,
EditSettingsModel } from '@syncfusion/ej2-react-treegrid';
import { Inject, Page, Edit, Toolbar, ToolbarItems } from '@syncfusion/ej2-
react-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
/* tslint:disable */
function App() {
const editOptions: EditSettingsModel = { allowAdding:true, allowEditing:
true, allowDeleting:true };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update',
'Cancel'];
let treegrid: TreeGridComponent | null;
const click = () => {
if (treegrid) {
/** get the JSON object of the column corresponding to the field name
*/
const column = treegrid.getColumnByField("Duration");
/** assign a new header text to the column */
column.headerText = "Changed Text";
treegrid.refreshColumns();

Copyright © 2001 -2024 Syncfusion Inc. 1080


TreeGrid How To

}
}
return (<div>
<ButtonComponent cssClass= 'e-flat' isToggle onClick= { click }>Change
Header Text</ButtonComponent>
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' height={210}
toolbar={toolbarOptions}
ref={treegrid} editSettings={editOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' />
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Edit, Toolbar]} />
</TreeGridComponent>
</div>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]

Copyright © 2001 -2024 Syncfusion Inc. 1081


TreeGrid How To

},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1082


TreeGrid How To

priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1083


TreeGrid How To

endDate: new Date('02/20/2017'), duration:


4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1084


TreeGrid How To

{ taskID: 35, taskName: 'Customer review


meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},

Copyright © 2001 -2024 Syncfusion Inc. 1085


TreeGrid How To

{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new


Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0

Copyright © 2001 -2024 Syncfusion Inc. 1086


TreeGrid How To

BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY
yFxYUBwMhFSE1ATY1NCYiBlEqE1SGLzQs/QEr/qEBCSZLX0ACPhA1Qyowhkn+jSorAYc8LzpENAA
AAAEAGv/0AaACvAAYAAATIRUHMzIWFAYjIiYnNxYWMzI2NCYnIxMjSQEfrA9ZfHxZNl4dJhdJK0h
gYEJnx+gCvCj3fLF8MywYIihkil8DAR4AAQAaAAAB0AK8AA0AABMzAzMRMxEzByMRIxEh1S+d8y1
JDzot/sACvP7hAR/+4Sz+jwFxAAEAGv/0AaACvAAXAAATIRUjBzMyFhQGIyImJzcWFjMyNjQmIyN
fAQniGV5ZfHxZNl4dJRZLK0dhYEiPArwt8nyxfDMsGCIoY4pjAAACABr/9AHDArwAGAAiAAABMxU

Copyright © 2001 -2024 Syncfusion Inc. 1087


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1088


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1089


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1090


TreeGrid How To

yFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgYTNxcHJwcBKdtGJCV6S0VcAgMDUScVIBIMAgNo7S8pL20
0U2IFBCs/B5SOIG90CrNTYyIRODlGJBMLFiQbFyMm/tYKAQNXMD4KDQkBDy4GNQEPjY0gb28AAAA
AAwBO//YBzwJ+ABoAKQA7AAAFIjU1NDc2MzIXNCYjIiM3MhceAxcWFREGAxUUFhcWMjcRJiciIyI
GEyIHJzYzMhcWMzI3FwYjIiYmASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrP1gqIxU
vNRhEFxgoHxQrMRQvMQqzU2MiETg5RiQTCxYkGxcjJv7WCgEDVzA+Cg0JAQ8uBjUBHCYgNB8LIiE
vFBYAAAACAE7/9gHPAf0AGgApAAAFIjU1NDc2MzIXNCYjIiM3MhceAxcWFREGAxUUFhcWMjcRJic
iIyIGASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrPwqzU2MiETg5RiQTCxYkGxcjJv7
WCgEDVzA+Cg0JAQ8uBjUAAwBO//YBzwK7AB4ALQA1AAAFIjU1NDc2MzIXNCYjIiMmJjQ2MhYUBx4
CFxYVEQYDFRQWFxYyNxEmJyIjIgYSFBYyNjQmIgEp20YkJXpLRVwCAyw8Ql5CJyUzGQYJaO0vKS9
tNFNiBQQrP0AsPiwsPgqzU2MiETg5RgRBWkNDYSIIIiIdJzv+1goBA1cwPgoNCQEPLgY1ATZAKyt
AKwAAAAMATv/0AwsB/gAkADMAOwAABSI1NTQ3NjMyFzQmIyIjNzIXNjMyFhUVBRUUFjMyNxcGIic
VBgMVFBYXFjI3ESYnIiMiBiUVJTU0JiIGASnbRiQlektFXAIDA5EqLnNTXf7FSi9ITxJNrSlo7S8
pL200U2IFBCs/AVYBDlJtTwqzU2MiETg5RiROT1lPeBFIOTErIy8kGAoBA1cwPgoNCQEPLgY1H1o
OVEM5QAABACT/LgFmAf4ALgAAASYiBgYVFRQzMjcXBiInBzYyFhQGIic3FjI2NCcmIgcHJzcmJyY
mNTU0NzYzMhcBVzpaQy+gMToKPUkQIQ47M0paNBQjSi0ZDB4VJA45Ego7NRwwbkJEAbsaF0s5kYw
OJRABLgglVSkTKxgaNAsFCA8XSQMEFFNLgEcwUyAAAAMATv/0AbYCpgASABoAIwAAJQYjIjU1NDY
yFhUVBRUUFjMyNwEVJTU0JiIGNxcjJyY1NDMyAZ1NVK5lpl3+xUovSE/+8AEOUm1PbTUlQwUeEiM
vks1RWllPeBFIOTErAQ1aDlRDOUD7eWMHBh0AAAADAE7/9AG2AqcAEgAaACQAACUGIyI1NTQ2MhY
VFQUVFBYzMjcBFSU1NCYiBjc3NjMyFxYUBwcBnU1UrmWmXf7FSi9IT/7wAQ5SbU91NAkRGAYBBUQ
jL5LNUVpZT3gRSDkxKwENWg5UQzlAg3kUEwUMB2IAAAMATv/0AbYC0AASABoAIAAAJQYjIjU1NDY
yFhUVBRUUFjMyNwEVJTU0JiIGJzcXBycHAZ1NVK5lpl3+xUovSE/+8AEOUm1PEJSOIG90Iy+SzVF
aWU94EUg5MSsBDVoOVEM5QKyNjSBvbwAAAAIAI//0AYsB/gASABoAACUGIyI1NTQ2MhYVFQUVFBY
zMjcBFSU1NCYiBgFyTVSuZaZd/sVKL0hP/vABDlJtTyMvks1RWllPeBFIOTErAQ1aDlRDOUAAAAA
CAE4AAADDAqYACAAMAAATFyMnJjU0MzIXMxEjhjUlQwUeEhgtLQKSeWMHBh2x/gsAAAAAAgBRAAA
AwQKnAAkADQAAEzc2MzIXFhQPAjMRI1Q0CREYBgEFRCctLQIaeRQTBQwHYiX+CwAAAAAC/8QAAAD
mAtAABQAJAAADNxcHJwcXMxEjPJSOIG90XC0tAkONjSBvby7+CwAAAAAD/98AAAC1AlwAAwALABM
AABMzESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAA
CAE4AAAG/An4AFAAmAAABIgcRIxEzFTYzMhcWFREjETQmJyYnIgcnNjMyFxYzMjcXBiMiJiYBCE4
/LS04VzknVSw9LBFbKiMVLzUYRBcYKB8UKzEULzEB1CL+TgH1GyMTJ2n+pgFYNj8FAnwmIDQfCyI
hLxQWAAADAE7/9gHDAqYACwAXACAAADc1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBhMXIycmNTQzMk5
hsmJcul8tS4hITYBObDUlQwUeEriEX2VpW4RUbm/YjEBTUkGMTkxLAQZ5YwcGHQAAAwBO//YBwwK
nAAsAFwAhAAA3NTQ2MhYVFRQGIiY3FRQWMjY1NTQmIgY3NzYzMhcWFAcHTmGyYly6Xy1LiEhNgE5
0NAkRGAUCBUS4hF9laVuEVG5v2IxAU1JBjE5MS455FBMFDAdiAAADAE7/9gHDAtAACwAXAB0AADc
1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBic3FwcnB05hsmJcul8tS4hITYBOBJSOIG90uIRfZWlbhFR
ub9iMQFNSQYxOTEu3jY0gb28AAAADAE7/9gHDAn4ACwAXACkAADc1NDYyFhUVFAYiJjcVFBYyNjU
1NCYiBjciByc2MzIXFjMyNxcGIyImJk5hsmJcul8tS4hITYBOTCojFS81GEMYGCgfFCsxFS4xuIR
fZWlbhFRub9iMQFNSQYxOTEvEJiA0HwsiIS8UFgAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiI
mNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEhNgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAMATgDpAY0
CFgADAAsAEwAAEyEVIRYyFhQGIiY0EjIWFAYiJjROAT/+wZcWEREWEBAWEREWEAGYLEwQFhERFgE
GEBYRERYAAAMATv+OAc0CgwAVAB4AJwAAATMHFhUVFAYjIicHIzcmNTU0NjMyFwcVFBcTJiMiBgU
0JwMWMzI2NQGhLEg+XF0lIS8vN09hWzAp6DOkIChBTgEbIqEaHURIAoOsNWaEVG4KcoUzcoRfZRO
wjE0pAYsRS09HKP56CFJBAAACAE7/9QHDAqYAEAAZAAATMxEUMzI2NREzESM3BiMiNRMXIycmNTQ
zMk4tj0BMLSwDM128oDUlQwUeEgH1/rOKQ0IBUv4LO0a4AeV5YwcGHQAAAAACAE7/9QHDAqcAEAA
aAAATMxEUMzI2NREzESM3BiMiNRM3NjMyFxYUBwdOLY9ATC0sAzNdvKE0CREYBQIFRAH1/rOKQ0I
BUv4LO0a4AW15FBMFDAdiAAAAAgBO//UBwwLQABAAFgAAEzMRFDMyNjURMxEjNwYjIjUTNxcHJwd
OLY9ATC0sAzNdvCyUjiBvdAH1/rOKQ0IBUv4LO0a4AZaNjSBvbwAAAAABAE7/9QHDAfUAEAAAEzM
RFDMyNjURMxEjNwYjIjVOLY9ATC0sAzNdvAH1/rOKQ0IBUv4LO0a4AAIATv8uAeUCpwAcACYAABM
zERQWMjY1NTQ3NjcXBhURFAYHJzY1NQYjIiY1Ezc2MzIXFhQHB04rSYVSGg4XDSAwOQxKKG1YX54
0CREYBgEFRAH1/rFCR0dCyGMYDQgfEjr+MD1GEiMaVntIX10BankUEwUMB2IAAAIATgAAAccChAA
NABYAABMzFTYyFhQGIyImJxUjACYiBgcUFjI2Ti02tWFoUilUFS0BTFRzVgJRfVEChMtEbbNpKir
IAYtKSEhRVU8AAAAAAwBO/y4B5QJcABwAJAAsAAATMxEUFjI2NTU0NzY3FwYVERQGByc2NTUGIyI
mNRIyFhQGIiY0NjIWFAYiJjROK0mFUhoOFw0gMDkMSihtWF9nFhERFhGvFhERFhAB9f6xQkdHQsh
jGA0IHxI6/jA9RhIjGlZ7SF9dAawRFhAQFhEQFhERFgAAAAMADAAAAgUDFAAHAAoADgAAEzMTIwM
jAyMTAzMDMxUj8irpMFbwVC/7atbc2dkCvP1EAQD/AAJz/rkB6C4AAAADAE7/9gHPAlQAGgApAC0
AAAUiNTU0NzYzMhc0JiMiIzcyFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgYTMxUjASnbRiQlektFXAI
DA1EnFSASDAIDaO0vKS9tNFNiBQQrPy/Z2QqzU2MiETg5RiQTCxYkGxcjJv7WCgEDVzA+Cg0JAQ8
uBjUBIC4AAwAMAAACBQNQAAcACgAaAAATMxMjAyMDIxMDMwMzFRQWMjY1NTMVFAYiJjXyKukwVvB

Copyright © 2001 -2024 Syncfusion Inc. 1091


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1092


TreeGrid How To

jJzMRIycGIyImNRE0NzYzMhcHJiciEycmNjYyFhYVFAcnNjZuXJZRTxCKIgoxa1h7Vy0+TUENOTa
nnwcRAQ8MDBJAIBYfAfv+wEdTVkJHLP7UN0FkYwE6gDUZISAYAfz9AgofDgETCzc1FwweAAAAAAM
ATv8uAccCswASAB4ALAAAASczERQGByc2NTUGIiY1NTQ2MgcVFBYyNjU1JiYiBjcXFgYGIiYmNTQ
3FwYGAZ0DLTI5DEovu2JoufRLfFgGUnBXjgcRAQ8MDBJAIBYfAbk8/cs8RBIjHFSATWBclVhhvpl
CR0dEuTs4RdECCh8OARMLNzUXDB4AAAAAAgBOAAAB/AORAAsAEQAAEzMRIREzESMRIREjEzcXByc
HTi0BVC0t/qwtR5SOIG90Arz+4QEf/UQBcf6PAwSNjSBvbwACAB8AAAIHA5QABQAYAAATNxcHJwc
TESMRMxU2MzIXFhURIxE0JyYiH5SOIG90hS0tOFc5J1UsHiSWAweNjSBvb/7L/k4CvOIjEydp/qY
BWDcfJwACAE4AAAJdArwAEwAXAAATMzUzFSE1MxUzFSMRIxEhESMRIxchNSFOMS0BVC0wMC3+rC0
xXgFU/qwCGqKioqIs/hIBcf6PAe5RUQAAAQBOAAAB/QK8ABoAABMRIxEjNTM1MxUzFSMVNjMyFxY
VESMRNCcmIrktPj4tf384VzknVSweJJYBsv5OAj0sU1MsYyMTJ2n+pgFYNx8nAAACAE4AAAGYAzs
ABQAXAAATMxEjESc3IgcnNjMyFxYzMjcXBiMiJiajdS1IDSojFS81GEQXGCgfFCsxFC8xArz9RAK
SAnkmIDQfCyIhLxQWAAIATgAAAZgCdAARABUAABMiByc2MzIXFjMyNxcGIyImJhczESOwKiMVLzU
YRBcYKB8UKzEULzERLS0CRiYgNB8LIiEvFBZR/gsAAAACAE4AAAEmAxQABQAJAAATMxEjEScnMxU
jenUtSCzY2AK8/UQCkgKALgAAAAIATgAAAScCVAADAAcAABMzFSMXMxEjTtnZWi0tAlQuMf4LAAE
ATv8rAQsCvAAWAAAzBhUUFjMyNxcGIyInJjU0NzMRJzUzEd5nGhcqGh8gQRoWLGACSHVSLxIbKh8
yCxUzQz8CkgIo/UQAAAL/+v8rALcCxgAUABwAADMGFRQWMzI3FwYjIicmNTQ3MxEzEQI0NjIWFAY
iimcaFyoaHyBBGhYsYAItMhEWEBAWUi8SGyofMgsVM0M/AfX+CwKgFhAQFhEAAAAAAgBOAAAAyAM
dAAUADQAAEzMRIxEnNjQ2MhYUBiJOdS1IQxEWEBAWArz9RAKSAmMWEBAWEQAAAAABACkAAABWAfU
AAwAAEzMRIyktLQH1/gsAAAAAAv/+/9sA4ANOAAoAGgAAEzMRFAcnNjY1EScnMxUUFjI2NTUzFRQ
GIiY1FXV3CyMySBcmKkErJkJeQgK8/buWBh8COD8CHwK6BR4uLh4FBS9CQi8AAgBO/y8BcALRAAU
AEwAAEzcXBycHFzMRBgYHJzI2NzY1ESdOlI4gb3QRdgI9NwYIIgocNgJEjY0gb28v/b42SwMjEAs
dNgIJAgAAAAIAT/9IAdwCvQALABkAABMzERMzAwEjAwcRIxcnJjY2MhYWFRQHJzY2Ty34NNEBBTX
sPy2zBxEBDwwMEkAgFh8Cvf6gAWD+1/5sAWpa/vBmAgofDgETCzc1FwweAAAAAAIAQ/9IAbICvAA
MABoAABMzETcXBxYXIwMHESMXJyY2NjIWFhUUByc2NkMt0yCRRZs2ykItpwcRAQ8MDBJAIBYfArz
+icMfgXP1AUw7/u9mAgofDgETCzc1FwweAAAAAAEATv//AcACAAAQAAATFxU3MwcXFjMXJiYnJwc
VI04t4zy9fzkpAixAJnBDLQIAC/j4zrNNKAE2NJtFwAAAAAACAE4AAAG3A2cABQAPAAATMxEhFSE
TNzYzMhcWFAcHTi0BPP6XAzQJERgFAgVEArz9bSkC2nkUEwUMB2IAAAAAAgBRAAAAxANrAAMADQA
AEzMRIxM3NjMyFxYUBwdRLS0GNAkRGAUCBUQCvP1EAt55FBMFDAdiAAACAE7/SAG3ArwABQATAAA
TMxEhFSEXJyY2NjIWFhUUByc2Nk4tATz+l78HEQEPDAwSQCAWHwK8/W0pZgIKHw4BEws3NRcMHgA
CAE7/SACuArwAAwARAAATMxEjFycmNjYyFhYVFAcnNjZ3LS0VBxEBDwwMEkAgFh8CvP1EZgIKHw4
BEws3NRcMHgAAAAL/3gAAAb4DiwAFAAsAABMzESEVIQM3FzcXB1UtATz+l3cfdHAfjgK8/W0pA2s
gb28gjQAC/9oAAAD8A4sAAwAJAAATMxEjAzcXNxcHVC0teh90cB+OArz9RANrIG9vII0AAAABAE4
AAAIyArwADQAAEzMRNxcHESEVIREHJzfJLXsSjQE8/pdqEXsCvP71OChA/qgpAW0vKDcAAAEATgA
AAYMCvAANAAATMxE3FwcRIxEHJzc1J4p1chKELXMRhEgCvP75NCg8/nsBcTMoO/ECAAAAAgBOAAA
COgNnAAkAEwAAEzMBETMRIwERIxM3NjMyFxYUBwdOLQGTLCz+bS3INAkRGAYBBUQCvP2WAmr9RAJ
r/ZUC2nkUEwUMB2IAAAIATgAAAb8CpwAUAB4AAAEiBxEjETMVNjMyFxYVESMRNCYnJic3NjMyFxY
UBwcBCE4/LS04VzknVSw9LBEyNAkRGAUCBUQB1CL+TgH1GyMTJ2n+pgFYNj8FAkZ5FBMFDAdiAAA
CAE7/SAI6ArwACQAXAAATMwERMxEjAREjBScmNjYyFhYVFAcnNjZOLQGTLCz+bS0BCAcRAQ8MDBJ
AIBYfArz9lgJq/UQCa/2VZgIKHw4BEws3NRcMHgAAAgBA/0gBsQH9ABQAIgAAEyIHESMRMxU2MzI
XFhURIxE0JicmAycmNjYyFhYVFAcnNjb6Tj8tLThXOSdVLD0sERUHEQEPDAwSQCAWHwHUIv5OAfU
bIxMnaf6mAVg2PwUC/cYCCh8OARMLNzUXDB4AAAIATgAAAjoDiwAJAA8AABMzAREzESMBESMTNxc
3FwdOLQGTLCz+bS1qH3RwH44CvP2WAmr9RAJr/ZUDayBvbyCNAAAAAgBOAAABvwL9ABQAGgAAASI
HESMRMxU2MzIXFhURIxE0JicmAzcXNxcHAQhOPy0tOFc5J1UsPSwRlh90cB+OAdQi/k4B9RsjEyd
p/qYBWDY/BQIBCSBvbyCNAAABAE7/2wI7ArwAFQAAATMRFAcmJzY3JgMRIxEzFgAXNjURJwHFdng
EBywVgP4tLRkBKE8CSAK8/buWBg4RBCHEAYj9lQK8Jv44eA4jAgsCAAEAQP8vAbIB/QAdAAATIgc
RIxEzFTYzMhcWFzcRBgYHJzI+AjURNCYnJvpOPy0tOFc5J1QBAQI9NwYIIRURPSwRAdQi/k4B9Rs
jEyZ1Af5jNksDIxEWLR0BlTY/BQIAAAMAP//1AeMDFAALABcAGwAANxE0NjIWFREUBiImExEUFjI
2NRE0JiIGNzMVIz9xxm17rH0tX45eWZpYNNnZuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUsUuAAA
AAwBO//YBwwJUAAsAFwAbAAA3NTQ2MhYVFRQGIiY3FRQWMjY1NTQmIgY3MxUjTmGyYly6Xy1LiEh
NgE4h2Ni4hF9laVuEVG5v2IxAU1JBjE5MS8guAAAAAAQAP//1AeMDaAALABcAIQArAAA3ETQ2MhY
VERQGIiYTERQWMjY1ETQmIgY3NzYzMhcWFAcHIzc2MzIXFhQHBz9xxm17rH0tX45eWZpYwTQJERg
FAgVElDQJERgFAgVEuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUox5FBQEDAdieRQUBAwHYgAEAE7
/9gHDAqwACwAXACEAKwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGNzc2MzIXFhQHByM3NjMyFxY
UBwdOYbJiXLpfLUuISE2ATqU0CREYBgEFRJQ0CREYBgEFRLiEX2VpW4RUbm/YjEBTUkGMTkxLk3k
UFAQMB2J5FBQEDAdiAAACAE7/9QMTAswAFgAiAAABIRUhFTMHIxEhFSE1BiMiJjURNDYyFwURFBY
yNjcRJiYiBgHFAU7+38oPuwEf/rQ4bFZ9cc83/rZfiVwGB1eUWAK8KvUs/rgpND9fZQFCZ2pCiP6
3TE1BRAFzQkdSAAAAAwBO//QC9AIAABsAJwAvAAAlBiInBiImNTU0NjMyFhc2MzIWFRUFFRQWMzI

Copyright © 2001 -2024 Syncfusion Inc. 1093


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1094


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1095


TreeGrid How To

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
nBxUjTi3jPL1/OSkCLEAmcEMtAgAL+PjOs00oATY0m0XAAAAAAAEATv/2Ah0CvAAjAAATNTIzMhY
XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq
5X10tTUKNIRsGMyeAr7MwQw8ZBAUDByENOQwmcYfCZwELt0pIko4vSRoBCwAAAAABAE7/8wF7AfQ
ADQAAEyEVIxEUFhcHJiY1ESNOAS2CICQNNy1+AfQr/rswMgwjEEU8AUUAAQBC//YBvgH1AAsAABM
zERQgNREzERQgNUItASIt/oQB9f6whoYBUP63trYAAAAAAgBO/ykCXQH7AB0AKAAAExcGFRUUFjM
zETY2MzIWFRUUBiMjFSc1IyImNTU0BREzMjY1NTQmIyLCGF9PQDICNi9XY11fNy4yX10BHDdDTFY
wQAH3JBiAiEdJAW8wOW1bdltn0gvHZ1t9mEj+mUtHiEtJAAABAE7/LAIVAfUAFQAAEzMTEzMDFx4
EMwciIyInJwMnE1IykZoys3oPJhoZAwIXAQFLMmqdKq4B9f7VASv+o/sgIwkDASFj2f7NEQFTAAA
AAAEATv8lAl0B+gAjAAATMxEUFjMzETMRMzI2NTU0JyYnNx4CFRUUBiMjFSc1IyImNU4tUD8yLjd
ATxYIESQbGgNdXzcuMl9dAfT+wktHAdD+MEdMskseCw8OETsqKp1bZ9YLy2dbAAAAAQBC//QCVgH
0ACQAABMXBgYVFRQWMzI3NTMVFjMyNjU1NCYnNxYVFRQjIicGIyI1NTStGigwQy5SAy4BVC5DMCk
ba6FHIiJHoQH0JAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAD/98AAAC1AlwAAwALABMAABM
zESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAADAE7

Copyright © 2001 -2024 Syncfusion Inc. 1096


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1097


TreeGrid How To

BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU

Copyright © 2001 -2024 Syncfusion Inc. 1098


TreeGrid How To

BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC

Copyright © 2001 -2024 Syncfusion Inc. 1099


TreeGrid How To

q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1100


TreeGrid How To

{ taskID: 2, taskName: 'Plan timeline', startDate: new


Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,

Copyright © 2001 -2024 Syncfusion Inc. 1101


TreeGrid How To

duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,

Copyright © 2001 -2024 Syncfusion Inc. 1102


TreeGrid How To

progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1103


TreeGrid How To

{ taskID: 31, taskName: 'Development Task 1',


startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',

Copyright © 2001 -2024 Syncfusion Inc. 1104


TreeGrid How To

'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },


{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB

Copyright © 2001 -2024 Syncfusion Inc. 1105


TreeGrid How To

OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY
yFxYUBwMhFSE1ATY1NCYiBlEqE1SGLzQs/QEr/qEBCSZLX0ACPhA1Qyowhkn+jSorAYc8LzpENAA
AAAEAGv/0AaACvAAYAAATIRUHMzIWFAYjIiYnNxYWMzI2NCYnIxMjSQEfrA9ZfHxZNl4dJhdJK0h

Copyright © 2001 -2024 Syncfusion Inc. 1106


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1107


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1108


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1109


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1110


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1111


TreeGrid How To

Cvf33RkxMRgIJ/f01TioUFCpONQI8FhAQFhEAAwBO/y4BxwJcAAcAGgAmAAASNDYyFhQGIhcnMxE
UBgcnNjU1BiImNTU0NjIHFRQWMjY1NSYmIgb7ERYQEBaRAy0yOQxKL7tiaLn0S3xYBlJwVwI2FhA
QFhFsPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAAAAgBB/0gB3ALFAB0AKwAAExEUFjI2NTU
jJzMRIycGIyImNRE0NzYzMhcHJiciEycmNjYyFhYVFAcnNjZuXJZRTxCKIgoxa1h7Vy0+TUENOTa
nnwcRAQ8MDBJAIBYfAfv+wEdTVkJHLP7UN0FkYwE6gDUZISAYAfz9AgofDgETCzc1FwweAAAAAAM
ATv8uAccCswASAB4ALAAAASczERQGByc2NTUGIiY1NTQ2MgcVFBYyNjU1JiYiBjcXFgYGIiYmNTQ
3FwYGAZ0DLTI5DEovu2JoufRLfFgGUnBXjgcRAQ8MDBJAIBYfAbk8/cs8RBIjHFSATWBclVhhvpl
CR0dEuTs4RdECCh8OARMLNzUXDB4AAAAAAgBOAAAB/AORAAsAEQAAEzMRIREzESMRIREjEzcXByc
HTi0BVC0t/qwtR5SOIG90Arz+4QEf/UQBcf6PAwSNjSBvbwACAB8AAAIHA5QABQAYAAATNxcHJwc
TESMRMxU2MzIXFhURIxE0JyYiH5SOIG90hS0tOFc5J1UsHiSWAweNjSBvb/7L/k4CvOIjEydp/qY
BWDcfJwACAE4AAAJdArwAEwAXAAATMzUzFSE1MxUzFSMRIxEhESMRIxchNSFOMS0BVC0wMC3+rC0
xXgFU/qwCGqKioqIs/hIBcf6PAe5RUQAAAQBOAAAB/QK8ABoAABMRIxEjNTM1MxUzFSMVNjMyFxY
VESMRNCcmIrktPj4tf384VzknVSweJJYBsv5OAj0sU1MsYyMTJ2n+pgFYNx8nAAACAE4AAAGYAzs
ABQAXAAATMxEjESc3IgcnNjMyFxYzMjcXBiMiJiajdS1IDSojFS81GEQXGCgfFCsxFC8xArz9RAK
SAnkmIDQfCyIhLxQWAAIATgAAAZgCdAARABUAABMiByc2MzIXFjMyNxcGIyImJhczESOwKiMVLzU
YRBcYKB8UKzEULzERLS0CRiYgNB8LIiEvFBZR/gsAAAACAE4AAAEmAxQABQAJAAATMxEjEScnMxU
jenUtSCzY2AK8/UQCkgKALgAAAAIATgAAAScCVAADAAcAABMzFSMXMxEjTtnZWi0tAlQuMf4LAAE
ATv8rAQsCvAAWAAAzBhUUFjMyNxcGIyInJjU0NzMRJzUzEd5nGhcqGh8gQRoWLGACSHVSLxIbKh8
yCxUzQz8CkgIo/UQAAAL/+v8rALcCxgAUABwAADMGFRQWMzI3FwYjIicmNTQ3MxEzEQI0NjIWFAY
iimcaFyoaHyBBGhYsYAItMhEWEBAWUi8SGyofMgsVM0M/AfX+CwKgFhAQFhEAAAAAAgBOAAAAyAM
dAAUADQAAEzMRIxEnNjQ2MhYUBiJOdS1IQxEWEBAWArz9RAKSAmMWEBAWEQAAAAABACkAAABWAfU
AAwAAEzMRIyktLQH1/gsAAAAAAv/+/9sA4ANOAAoAGgAAEzMRFAcnNjY1EScnMxUUFjI2NTUzFRQ
GIiY1FXV3CyMySBcmKkErJkJeQgK8/buWBh8COD8CHwK6BR4uLh4FBS9CQi8AAgBO/y8BcALRAAU
AEwAAEzcXBycHFzMRBgYHJzI2NzY1ESdOlI4gb3QRdgI9NwYIIgocNgJEjY0gb28v/b42SwMjEAs
dNgIJAgAAAAIAT/9IAdwCvQALABkAABMzERMzAwEjAwcRIxcnJjY2MhYWFRQHJzY2Ty34NNEBBTX
sPy2zBxEBDwwMEkAgFh8Cvf6gAWD+1/5sAWpa/vBmAgofDgETCzc1FwweAAAAAAIAQ/9IAbICvAA
MABoAABMzETcXBxYXIwMHESMXJyY2NjIWFhUUByc2NkMt0yCRRZs2ykItpwcRAQ8MDBJAIBYfArz
+icMfgXP1AUw7/u9mAgofDgETCzc1FwweAAAAAAEATv//AcACAAAQAAATFxU3MwcXFjMXJiYnJwc
VI04t4zy9fzkpAixAJnBDLQIAC/j4zrNNKAE2NJtFwAAAAAACAE4AAAG3A2cABQAPAAATMxEhFSE
TNzYzMhcWFAcHTi0BPP6XAzQJERgFAgVEArz9bSkC2nkUEwUMB2IAAAAAAgBRAAAAxANrAAMADQA
AEzMRIxM3NjMyFxYUBwdRLS0GNAkRGAUCBUQCvP1EAt55FBMFDAdiAAACAE7/SAG3ArwABQATAAA
TMxEhFSEXJyY2NjIWFhUUByc2Nk4tATz+l78HEQEPDAwSQCAWHwK8/W0pZgIKHw4BEws3NRcMHgA
CAE7/SACuArwAAwARAAATMxEjFycmNjYyFhYVFAcnNjZ3LS0VBxEBDwwMEkAgFh8CvP1EZgIKHw4
BEws3NRcMHgAAAAL/3gAAAb4DiwAFAAsAABMzESEVIQM3FzcXB1UtATz+l3cfdHAfjgK8/W0pA2s
gb28gjQAC/9oAAAD8A4sAAwAJAAATMxEjAzcXNxcHVC0teh90cB+OArz9RANrIG9vII0AAAABAE4
AAAIyArwADQAAEzMRNxcHESEVIREHJzfJLXsSjQE8/pdqEXsCvP71OChA/qgpAW0vKDcAAAEATgA
AAYMCvAANAAATMxE3FwcRIxEHJzc1J4p1chKELXMRhEgCvP75NCg8/nsBcTMoO/ECAAAAAgBOAAA
COgNnAAkAEwAAEzMBETMRIwERIxM3NjMyFxYUBwdOLQGTLCz+bS3INAkRGAYBBUQCvP2WAmr9RAJ
r/ZUC2nkUEwUMB2IAAAIATgAAAb8CpwAUAB4AAAEiBxEjETMVNjMyFxYVESMRNCYnJic3NjMyFxY
UBwcBCE4/LS04VzknVSw9LBEyNAkRGAUCBUQB1CL+TgH1GyMTJ2n+pgFYNj8FAkZ5FBMFDAdiAAA
CAE7/SAI6ArwACQAXAAATMwERMxEjAREjBScmNjYyFhYVFAcnNjZOLQGTLCz+bS0BCAcRAQ8MDBJ
AIBYfArz9lgJq/UQCa/2VZgIKHw4BEws3NRcMHgAAAgBA/0gBsQH9ABQAIgAAEyIHESMRMxU2MzI
XFhURIxE0JicmAycmNjYyFhYVFAcnNjb6Tj8tLThXOSdVLD0sERUHEQEPDAwSQCAWHwHUIv5OAfU
bIxMnaf6mAVg2PwUC/cYCCh8OARMLNzUXDB4AAAIATgAAAjoDiwAJAA8AABMzAREzESMBESMTNxc
3FwdOLQGTLCz+bS1qH3RwH44CvP2WAmr9RAJr/ZUDayBvbyCNAAAAAgBOAAABvwL9ABQAGgAAASI
HESMRMxU2MzIXFhURIxE0JicmAzcXNxcHAQhOPy0tOFc5J1UsPSwRlh90cB+OAdQi/k4B9RsjEyd
p/qYBWDY/BQIBCSBvbyCNAAABAE7/2wI7ArwAFQAAATMRFAcmJzY3JgMRIxEzFgAXNjURJwHFdng
EBywVgP4tLRkBKE8CSAK8/buWBg4RBCHEAYj9lQK8Jv44eA4jAgsCAAEAQP8vAbIB/QAdAAATIgc
RIxEzFTYzMhcWFzcRBgYHJzI+AjURNCYnJvpOPy0tOFc5J1QBAQI9NwYIIRURPSwRAdQi/k4B9Rs
jEyZ1Af5jNksDIxEWLR0BlTY/BQIAAAMAP//1AeMDFAALABcAGwAANxE0NjIWFREUBiImExEUFjI
2NRE0JiIGNzMVIz9xxm17rH0tX45eWZpYNNnZuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUsUuAAA
AAwBO//YBwwJUAAsAFwAbAAA3NTQ2MhYVFRQGIiY3FRQWMjY1NTQmIgY3MxUjTmGyYly6Xy1LiEh
NgE4h2Ni4hF9laVuEVG5v2IxAU1JBjE5MS8guAAAAAAQAP//1AeMDaAALABcAIQArAAA3ETQ2MhY
VERQGIiYTERQWMjY1ETQmIgY3NzYzMhcWFAcHIzc2MzIXFhQHBz9xxm17rH0tX45eWZpYwTQJERg
FAgVElDQJERgFAgVEuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUox5FBQEDAdieRQUBAwHYgAEAE7
/9gHDAqwACwAXACEAKwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGNzc2MzIXFhQHByM3NjMyFxY
UBwdOYbJiXLpfLUuISE2ATqU0CREYBgEFRJQ0CREYBgEFRLiEX2VpW4RUbm/YjEBTUkGMTkxLk3k

Copyright © 2001 -2024 Syncfusion Inc. 1112


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1113


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1114


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1115


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1116


TreeGrid How To

JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF

Copyright © 2001 -2024 Syncfusion Inc. 1117


TreeGrid How To

wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz

Copyright © 2001 -2024 Syncfusion Inc. 1118


TreeGrid How To

/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Customize column styles in React Treegrid component
You can customise the appearance of header and content of the particular column using the
customAttributes property.
To customize the treegrid column, follow the given steps:
Step 1:

Copyright © 2001 -2024 Syncfusion Inc. 1119


TreeGrid How To

Create a css class with custom style to override the default style for rowcell and headercell.
`css
.e-treegrid .e-rowcell.customcss{
background-color: #ecedee;
font-family: 'Bell MT';
color: 'red';
font-size: '20px';
}
.e-treegrid .e-headercell.customcss{
background-color: #2382c3;
color: white;
font-family: 'Bell MT';
font-size: '20px';
}
`
Step 2:
Add the custom css class to particular column by using customAttributes property.
`ts
<ColumnDirective field='TaskName' headerText='Task Name' width='100'
customAttributes={customAttributes}></ColumnDirective>
`
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const customAttributes = { class: 'customcss' };
return (<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' height={320}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100' customAttributes={customAttributes}></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right'/>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right'/>
</ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 1120


TreeGrid How To

</TreeGridComponent>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const customAttributes: any = {class: 'customcss'};
return (
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' height={320}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100' customAttributes={customAttributes}></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' />
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1121


TreeGrid How To

endDate: new Date('02/07/2017'), duration: 5, progress: 100,


priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,

Copyright © 2001 -2024 Syncfusion Inc. 1122


TreeGrid How To

progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,

Copyright © 2001 -2024 Syncfusion Inc. 1123


TreeGrid How To

subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1124


TreeGrid How To

endDate: new Date('02/21/2017'), duration:


2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',

Copyright © 2001 -2024 Syncfusion Inc. 1125


TreeGrid How To

'EndDate': new Date('03/13/2017'), 'Progress': '40' },


{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH

Copyright © 2001 -2024 Syncfusion Inc. 1126


TreeGrid How To

mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY

Copyright © 2001 -2024 Syncfusion Inc. 1127


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1128


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1129


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1130


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1131


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1132


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1133


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1134


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1135


TreeGrid How To

59l9dLRNJMsotApH+mx0lHSQ3U1grdGJ6NhYg/wAAAQBOAAACIgK8AA4AABMhByETAzMyNxcGBiM
hE14BrA/+tbbN8FwZJBBGO/694gK8Kv7w/qhNDTgyAYAAAQBOAAAB4AK8AAcAABMhFSMRIxEjTgG
StS2wArwp/W0CkwAAAQA8//kB+AK8ABgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjU8LWKXXgo
uaQsyDgYbYixqewK8/UxSOzUBK/3djhIfEzEZI5wgH2lnAAACAE7/3gJdAscAHQAoAAATFwYVERQ
WMzMRNjYzMhYVERQGIyMVJzUjIiY1ETQhIhURMzI2NRE0JsIXXk1CMgI4L1VjXV83LjJfXQFfQzl
CS1QCwiQaf/7SR0kCFjI4bVv+4ltoQAs1aFsBJJhJ/fRKRQEySkoAAAABAE4AAAJJArwACwAAEzM
TEzMDEwcDAyMTYTK5uTTS4jfGxjjjArz+0wEt/qj+nQEBNv7KAWQAAAEALAAAAjsCxQAjAAATMxE
UFjMzETMRMzI2NTU0JiYnNx4CFRUUBiMjFSM1IyImNSwtTkEyLjdDTBEMEyUbGgNdXzcuMl9dArz
+00pIAb/+QUtHpSs4DhMNETsqKo9bZ9TUZ1sAAAAAAwAjAAAA+QMcAAUADQAVAAATMxEjESc2MhY
UBiImNDYyFhQGIiY0L3UtSAUWEREWEa8WEREWEAK8/UQCkgKIERYQEBYREBYRERYAAAMAAAAAAdg
DGgAIABAAGAAAETMTEzMDESMRAjIWFAYiJjQ2MhYUBiImNDO4ujPWLUkWEREWEa8WEREWEAK8/s0
BM/6a/qoBVQHFERYQEBYREBYRERYAAAADAE7//AHWAqcAFgAiACwAABMyFzcXBhURFhcHIiYGIic
mNTU0Njc2FyYjIgYVFRQXMjI3Azc2MzIXFhQHB99ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBR6E
0CREYBQIFRAH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAHueRQTBQwHYgAAAAIATv/2Aac
CpwAIAC0AABM3NjMyFxYPAjQ3NjIXFSYiBgcGFBYzMwcjIgYUFjMyNjc3FwYiJyY1NDcmJuE0CRE
YBQQHRKI0Kmg4LEMzFxcnKX8PZjE/RkAkTRQUDU6pLjRRHCACGnkUEw4KYphBIRsPKg8HFBRDNiw
4az4QCAkpIiguS2QeCkAAAAAAAgBO/y0BvwKnAAgAHQAAEzc2MzIXFg8CIgcRIxEzFTYzMhcWFRE
nETQmJyb5NAkRGAUEB0QVTj8tLThXOSdVLD0sEQIaeRQTDgpiRiL+TgH1GyMTJ2n90xQCFzY/BQI
AAgBRAAAAwgKnAAkADQAAEzc2MzIXFhQPAjMRI1U0CREYBQIFRCgtLQIaeRQTBQwHYiX+CwAAAAA
EAE7/9gHKAvYACwAUABwAJAAAEzMRFCA1ETMRFCA1Ezc2MzIXFgcHJjIWFAYiJjQ2MhYUBiImNE4
tASIt/oSsNAkRGAYDB0RqFhERFhCvFhERFhAB9f6whoYBUP63trYBvXkUFA0KYhEQFhERFhAQFhE
RFgAAAAACAE7//AHWAfsAFgAiAAATMhc3FwYVERYXByImBiInJjU1NDY3NhcmIyIGFRUUFzIyN99
ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBRwH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAA
DAE7/XwHAAr0AEAAeACoAABI2MhYUBxYWFRUUIyInFSMRFyIHERYyNjY1NTQmJyYnFTY3Njc2NCc
mIyJORYBDKEFR2jI5LbxRPTpZUzI/Lg+cKFMjCgMOFSpeAmZXS2MgCFlEuKUKmAK6UyD+egsROi+
4OkAEAVRLFRcKJQwkFiEAAAABABX/OgHjAf8AGwAAEzMTFhYXEzY2NxcGBgcDBhQXByY1NDc3LgI
nFS5qDSIdahAoKR8jIhJ9FgwfHAoWHBgnDgH1/pcuMQkBYDQ6DRsRJDf+XkIuEhobKBgdSQ8ROS0
AAAAAAgBO//YBwwLBABsAKAAAEyY1NDYzMwcjIgcGFRQXFhcWFRUUIyImNTU0NgcVFBYzMjU1NCY
nBgbcLDs7LBIhIxIMMnQeIblfXUseUD+MRkZCTQH5JjgnQykaEBA3HkkuND9nwmdbflBltYVLR5J
8KmAhBlAAAAAAAQBO//YBpwH/ACQAABM0NzYyFxUmIgYHBhQWMzMHIyIGFBYzMjY3NxcGIicmNTQ
3JiZjNCpoOCxDMxcXJyl/D2YxP0ZAJE0UFA1OqS40URwgAYJBIRsPKg8HFBRDNiw4az4QCAkpIig
uS2QeCkAAAAEATv8vAa8CvAAXAAATIRcGBwYVFBYyNxUHNQYiJyY1NDc2NyOSARANO0quUYBKLTF
lLFokSrLcArwoL1XGkkhGFPoV2gwXMG1US5uqAAAAAQBO/y0BvwH9ABQAAAEiBxEjETMVNjMyFxY
VEScRNCYnJgEITj8tLThXOSdVLD0sEQHUIv5OAfUbIxMnaf3TFAIXNj8FAgAAAwA+//oBugLGABA
AHQAqAAA3NTY3JjU0NjMWFhURFAYmJjcVFBYyNjURJiIOAjc2MzIXNCYjIgcGFRQ+AjQiXUtfYWO
3Yi1SfVMMKFBeQDFYfA8OUUEtHi+/j0IlQjpBVAJsX/7GWWwBa+iSR1BRQwEVAQodN1kxAVNOEx1
AMAABADYAAABjAfUAAwAAEzMRIzYtLQH1/gsAAAAAAQBO//8BwAIAABAAABMXFTczBxcWMxcmJic
nBxUjTi3jPL1/OSkCLEAmcEMtAgAL+PjOs00oATY0m0XAAAAAAAEATv/2Ah0CvAAjAAATNTIzMhY
XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq
5X10tTUKNIRsGMyeAr7MwQw8ZBAUDByENOQwmcYfCZwELt0pIko4vSRoBCwAAAAABAE7/8wF7AfQ
ADQAAEyEVIxEUFhcHJiY1ESNOAS2CICQNNy1+AfQr/rswMgwjEEU8AUUAAQBC//YBvgH1AAsAABM
zERQgNREzERQgNUItASIt/oQB9f6whoYBUP63trYAAAAAAgBO/ykCXQH7AB0AKAAAExcGFRUUFjM
zETY2MzIWFRUUBiMjFSc1IyImNTU0BREzMjY1NTQmIyLCGF9PQDICNi9XY11fNy4yX10BHDdDTFY
wQAH3JBiAiEdJAW8wOW1bdltn0gvHZ1t9mEj+mUtHiEtJAAABAE7/LAIVAfUAFQAAEzMTEzMDFx4
EMwciIyInJwMnE1IykZoys3oPJhoZAwIXAQFLMmqdKq4B9f7VASv+o/sgIwkDASFj2f7NEQFTAAA

Copyright © 2001 -2024 Syncfusion Inc. 1136


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1137


TreeGrid How To

8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF

Copyright © 2001 -2024 Syncfusion Inc. 1138


TreeGrid How To

FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U

Copyright © 2001 -2024 Syncfusion Inc. 1139


TreeGrid How To

Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,

Copyright © 2001 -2024 Syncfusion Inc. 1140


TreeGrid How To

duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',

Copyright © 2001 -2024 Syncfusion Inc. 1141


TreeGrid How To

startDate: new Date('02/17/2017'),


endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1142


TreeGrid How To

endDate: new Date('02/28/2017'),


priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',

Copyright © 2001 -2024 Syncfusion Inc. 1143


TreeGrid How To

approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },

Copyright © 2001 -2024 Syncfusion Inc. 1144


TreeGrid How To

{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new


Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE

Copyright © 2001 -2024 Syncfusion Inc. 1145


TreeGrid How To

ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG

Copyright © 2001 -2024 Syncfusion Inc. 1146


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1147


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1148


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1149


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1150


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1151


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1152


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1153


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1154


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1155


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1156


TreeGrid How To

jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8

Copyright © 2001 -2024 Syncfusion Inc. 1157


TreeGrid How To

AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA

Copyright © 2001 -2024 Syncfusion Inc. 1158


TreeGrid How To

P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Custom tool tip for columns in React Treegrid component
You can achieve the custom tooltip(EJ2 Tooltip) for TreeGrid by using the queryCellInfo event.

Copyright © 2001 -2024 Syncfusion Inc. 1159


TreeGrid How To

Render the ToolTip component for the treegrid cells by using the following code in the queryCellInfo
event.
`ts
const tooltip = (args: QueryCellInfoEventArgs) => {
const tooltip: Tooltip = new Tooltip({
content: getValue((args.column as Column).field, args.data as object).toString()
});
tooltip.appendTo(args.cell as HTMLElement);
}
`
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { getValue } from '@syncfusion/ej2-base';
import { Tooltip } from '@syncfusion/ej2-popups';
import { ColumnsDirective, ColumnDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const tooltip = (args) => {
const tooltip = new Tooltip({
content: getValue(args.column.field, args.data).toString()
});
tooltip.appendTo(args.cell);
};
return (<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' queryCellInfo={tooltip}
height={320}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right'/>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { getValue } from '@syncfusion/ej2-base';
import { Tooltip } from '@syncfusion/ej2-popups';

Copyright © 2001 -2024 Syncfusion Inc. 1160


TreeGrid How To

import { ColumnsDirective, ColumnDirective, TreeGridComponent } from


'@syncfusion/ej2-react-treegrid';
import { QueryCellInfoEventArgs, Column } from '@syncfusion/ej2-react-
grids';
/* tslint:disable */
function App() {
const tooltip = (args: QueryCellInfoEventArgs) => {
const tooltip: Tooltip = new Tooltip({
content: getValue((args.column as Column).field, args.data as
object).toString()
});
tooltip.appendTo(args.cell as HTMLElement);
}
return (
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' queryCellInfo={tooltip}
height={320}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' />
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1161


TreeGrid How To

endDate: new Date('02/07/2017'), duration: 5, progress: 100,


priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,

Copyright © 2001 -2024 Syncfusion Inc. 1162


TreeGrid How To

progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,

Copyright © 2001 -2024 Syncfusion Inc. 1163


TreeGrid How To

subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1164


TreeGrid How To

endDate: new Date('02/21/2017'), duration:


2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',

Copyright © 2001 -2024 Syncfusion Inc. 1165


TreeGrid How To

'EndDate': new Date('03/13/2017'), 'Progress': '40' },


{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH

Copyright © 2001 -2024 Syncfusion Inc. 1166


TreeGrid How To

mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY

Copyright © 2001 -2024 Syncfusion Inc. 1167


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1168


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1169


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1170


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1171


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1172


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1173


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1174


TreeGrid How To

yFxYUBwdOLY9ATC0sAzNdvNI0CREYBgEFRJQ0CREYBgEFRAH1/rOKQ0IBUv4LO0a4AXJ5FBQEDAd
ieRQUBAwHYgAAAAEASv8rAe8CvQAgAAATMxEUFjI2NREzERQGBwYVFBYzMjcXBiMiJyY1NDcmJjV
KLWKIYS1mTWAaFyoaHyBBGhYsVlFuAr3990ZMTEYCCf39XFwHTi4SGyofMgsVM0A8BVxfAAABACT
/KwHGAfUAIAAAIQYVFBYzMjcXBiMiJyY1NDczNwYjIjURMxEUMzI2NREzAZlnGhcqGh8gQRoWLGA
EAzNdvC2PQEwtUi8SGyofMgsVM0M/O0a4AUj+s4pDQgFSAAABADz/+QH4ArwAGAAAEzMVFBYyNjc
RMxEUByc2NzY1NQYGIyImNTwtYpdeCi5pCzIOBhtiLGp7Arz9TFI7NQEr/d2OEh8TMRkjnCAfaWc
AAAIAHwAAAgYDngAJABMAABMhFQEhFSE1ASE3NzYzMhcWFAcHLAHU/lgBrv4ZAaj+ZeQ0CREYBgE
FRAK8Kf2WKSkCan55FBQEDAdiAAACAE4AAAG9AqcACQATAAATIRUBIRUhNQEhNzc2MzIXFhQHB1c
BUf7dATj+kQEh/uiJNAkRGAYBBUQB9Sn+XSkpAaNOeRQTBQwHYgAAAgAfAAACBgMZAAkAEQAAEyE
VASEVITUBITY0NjIWFAYiLAHU/lgBrv4ZAaj+ZdcRFhAQFgK8Kf2WKSkCamAWEBAWEQACAE4AAAG
9AloACQARAAATIRUBIRUhNQEhNjQ2MhYUBiJXAVH+3QE4/pEBIf7okREWEBAWAfUp/l0pKQGjaBY
QEBYRAAIAHwAAAgYDvQAJAA8AABMhFQEhFSE1ASETNxc3FwcsAdT+WAGu/hkBqP5lbh90cB+OArw
p/ZYpKQJqAQogb28gjQAAAgBOAAABvQL8AAkADwAAEyEVASEVITUBIRM3FzcXB1cBUf7dATj+kQE
h/uggH3RwH44B9Sn+XSkpAaMBECBvbyCNAAACACX/SAIAAsYAIgAwAAA3MxYWMjY1NC4ENTQ2MzI
XByYiBhUUHgQVFAYiJhcnJjY2MhYWFRQHJzY2JS4EZqZtPVprWj10bVM/DjmZZD1bals9ded96gc
RAQ8MDBJAIBYfsjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXPOAgofDgETCzc1FwweAAIAJP9
IAYwCAQAgAC4AAAEHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWFwMnJjY2MhYWFRQHJzY2AUs
QJnBIRVdXPFmrYgIrBk9tTjpWViEnT1sfOAxoBxEBDwwMEkAgFh8B5CYaATIqKSsaH0FuUFI8LzU
yVTIbHBwhY1YPB/2vAgofDgETCzc1FwweAAEALgJWAVADAwAFAAATNxcHJwculI4gb3QCdo2NIG9
vAAAAAAEALgJPAVAC/AAFAAATNxc3FwcuH3RwH44C3CBvbyCNAAAAAAEALgJGARACvAAPAAATMxU
UFjI2NTUzFRQGIiY1LiYqQSsmQl5CArwFHi4uHgUFL0JCLwABAAQCjwA7AsYABwAAEjQ2MhYUBiI
EERYQEBYCoBYQEBYRAAAC//4CJQDgAwcABwAPAAASFBYyNjQmIgY0NjIWFAYiJCw+LCw+UkJeQkJ
eArZAKytAK3lcQ0NcQwAAAAABAEz/LgEJAAMAEAAANwYVFBYzMjcXBiMiJyY1NDfcZxoXKhofIEE
aFixgA1IvEhsqHzILFTNDPwAAAAABAE4CZwGYAr8AEQAAEyIHJzYzMhcWMzI3FwYjIiYmsCojFS8
1GEQXGCgfFCsxFC8xApEmIDQfCyIhLxQWAAAAAv/+AjgA2wLFAAkAEwAAEzc2MzIXFhQHByM3NjM
yFxYUBwduNAkRGAYBBUSUNAkRGAYBBUQCOHkUEwUMB2J5FBMFDAdiAAAAAwBOAqIBJANoAAgAEAA
YAAATNzYzMhcWBwcGMhYUBiImNDYyFhQGIiY0ojQJERgGAwdEaBYRERYQrxYRERYQAtt5FBQNCmI
CEBYRERYQEBYRERYAAwBOAAACRwLFAAcACgAUAAABMxMjAyMDIxMDMwE3NjMyFxYUBwcBNCrpMFb
wVC/7atb+qDQJERgFAgVEArz9RAEA/wACc/65AQx5FBMFDAdiAAAAAgBOAAACQwLFAAgAFAAAEzc
2MzIXFgcHNyEVIRUzByMRIRUhTjQJERgGAwdEgwFO/t/KD7sBH/60Ajh5FBMOCmKEKvUs/rgpAAA
AAAIATgAAAqUCxQAIABQAABM3NjMyFxYHBzczESERMxEjESERI040CREYBgMHRIUtAVQtLf6sLQI
4eRQTDgpihP7hAR/9RAFx/o8AAAACAE4AAAFfAsUABQAPAAATMxEjEScHNzYzMhcWFAcH6nUtSJw
0CREYBgEFRAK8/UQCkgJceRQTBQwHYgADAE7/9QJnAswACwAXACEAADcRNDYyFhURFAYiJhMRFBY
yNjURNCYiBgc3NjMyFxYUBwfDccZte6x9LV+OXlmaWKI0CREYBgEFRLkBQmdqcGL+v2VfXwGu/rd
MTUtPAUhNUlIXeRQTBQwHYgACAE7/+QKtAsUACAAhAAATNzYzMhcWBwc3MxUUFjI2NxEzERQHJzY
3NjU1BgYjIiY1TjQJERgGAwdEfy1il14KLmkLMg0HG2IsansCOHkUEw4KYoT9TFI7NQEr/d2OEh8
TMRkjnCAfaWcAAAACAE4AAAKuAsUAJgAwAAABMzIWFREUBgczFyM1Njc2NRE0JiMjIgYVERQXFhc
VIzczJjURNDYHNzYzMhcWFAcHAXVwXl4tK1YP5D0xPU9BcEBPPC5A5A5UVV7JNAkRGAYBBUQCw3B
c/s07RhkqKggaIVcBOkxQUUv+xlchGggqKi5sATNccIt5FBMFDAdiAAAEAA8AAADkAvUAAwAMABQ
AHAAAEzMRIxM3NjMyFxYHByYyFhQGIiY0NjIWFAYiJjRfLS0BNAkRGAYDB0RlFhERFhCuFhERFhA
B9f4LAmh5FBMOCmISEBYRERYQEBYRERYAAAAAAgAMAAACBQK8AAcACgAAEzMTIwMjAyMTAzPyKuk
wVvBUL/tq1gK8/UQBAP8AAnP+uQAAAAMATgAAAf8CvAARABkAIQAAEzMyFhQHBhUVFhYVFAcGBiM
jExUzMjY0JiMDETMyNTQmI07dUl5IAS8+KRVTOuYtuTVESkCot51SPgK8VLArAQEBFFtKUDsgJgK
R9D57O/7g/rqqSFQAAQBOAAABnAK8AAUAABMhFSERI04BTv7fLQK8K/1vAAACAAwAAAIFArwAAwA
GAAATMxMhEwMh8Svp/gf6vgGAArz9RAJ3/bIAAQBOAAABnAK8AAsAABMhFSEVMwcjESEVIU4BTv7
fyg+7AR/+tAK8KvUs/rgpAAAAAQBOAAACNQK8AAkAABMhFQEhFSE1ASFbAdT+WAGu/hkBqP5lArw
p/ZYpKQJqAAAAAQBQAAAB/gK8AAsAABMzESERMxEjESERI1AtAVQtLf6sLQK8/uEBH/1EAXH+jwA
AAwBO//UB8gLMAAsAEwAbAAA3ETQ2MhYVERQGIiYTFSE1NCYiBhAWMjY1NSEVTnHGbXusfS0BS1m
aWF+OXv61uQFCZ2pwYv6/ZV9fAa6ZmU1SUv4eTUtPgoMAAAABAFAAAADFArwABQAAEzMRIxEnUHU
tSAK8/UQCkgIAAAEATgAAAdsCvQALAAATMxETMwMBIwMHESNOLfg00QEFNew/LQK9/qABYP7X/mw
Balr+8AABAAwAAAIFArwABgAAEzMTIwMDI/Er6TDPyy8CvP1EAnb9igABAFAAAAJoArwADAAAEzM
TEzMRIxEDIwMRI1At3uAtLcgwxi0CvP2JAnf9RAI5/ccCOf3HAAAAAAEAUAAAAjwCvAAJAAATMwE
RMxEjAREjUC0Bkyws/m0tArz9lgJq/UQCa/2VAAAAAAMATgAAAksCvAADAAwAFQAAEyEVIRMhByE
iByc2NgMhMjcXBgYjIc0BCP74EgFFEf7MVBojEEYeATRTGiQQRjv+uwGdLAFLKkwNODH9bk0NODI
AAAIAPv/1AeICzAALABcAADcRNDYyFhURFAYiJhMRFBYyNjURNCYiBj5xxm17rH0tX45eWZpYuQF
CZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUgAAAQBQAAAB/gK8AAcAABMhESMRIREjUAGuLf6sLQK8/UQ
Cj/1xAAAAAAIATgAAAgACvAALABgAABMRMzI2Njc2NTQmIyczMhYVFAcGBiMjESN7yig4HAgKSET

Copyright © 2001 -2024 Syncfusion Inc. 1175


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1176


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1177


TreeGrid How To

8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF

Copyright © 2001 -2024 Syncfusion Inc. 1178


TreeGrid How To

FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U

Copyright © 2001 -2024 Syncfusion Inc. 1179


TreeGrid How To

Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,

Copyright © 2001 -2024 Syncfusion Inc. 1180


TreeGrid How To

duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',

Copyright © 2001 -2024 Syncfusion Inc. 1181


TreeGrid How To

startDate: new Date('02/17/2017'),


endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1182


TreeGrid How To

endDate: new Date('02/28/2017'),


priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',

Copyright © 2001 -2024 Syncfusion Inc. 1183


TreeGrid How To

approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },

Copyright © 2001 -2024 Syncfusion Inc. 1184


TreeGrid How To

{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new


Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE

Copyright © 2001 -2024 Syncfusion Inc. 1185


TreeGrid How To

ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG

Copyright © 2001 -2024 Syncfusion Inc. 1186


TreeGrid How To

MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY
yFxYUBwMhFSE1ATY1NCYiBlEqE1SGLzQs/QEr/qEBCSZLX0ACPhA1Qyowhkn+jSorAYc8LzpENAA
AAAEAGv/0AaACvAAYAAATIRUHMzIWFAYjIiYnNxYWMzI2NCYnIxMjSQEfrA9ZfHxZNl4dJhdJK0h
gYEJnx+gCvCj3fLF8MywYIihkil8DAR4AAQAaAAAB0AK8AA0AABMzAzMRMxEzByMRIxEh1S+d8y1
JDzot/sACvP7hAR/+4Sz+jwFxAAEAGv/0AaACvAAXAAATIRUjBzMyFhQGIyImJzcWFjMyNjQmIyN
fAQniGV5ZfHxZNl4dJRZLK0dhYEiPArwt8nyxfDMsGCIoY4pjAAACABr/9AHDArwAGAAiAAABMxU
jIgcGBhUVNjYzMhYUBiImNRE0NzY2AxUUFjI2NCYiBgEOIydLOh0iGFs1WXx9sHwyG2SFYoxjYox
hArwtLhdRNYYvMHyxfHxZAQRTSCUv/hQHR2JijWJdAAABABoAAAGkArwABgAAEyEVASMBIRoBiv6
0MQFJ/qoCvC39cQKPAAAAAwAa//QBwALFAAgAHgAmAAATBgYUFjI2NCYnJiY1NDYyFhUUBgcWFhU
UBiImNTQ2EgYUFhY2NCboRF1gjGBimicvZJJlLyk4RHqyekRZTExqT0sBawJfil9fil8bFVAtSmV
lSi5PFhhpPFh6elg+ZwEvTWxJAUluTAAAAAIAGgAAAcMCxQAWACAAADMjNTMyNjU1BgYjIiY0NjI
WFREUBwYGEzU0JiIGFBYyNs8jJ091GFs1WXx8sXwzGmSFYo1iYoxgLWRmgy8vfLB9fFn+/lNHJi4
B6QdHYmOMYl0AAAACABoAbwBRAaEABwAPAAA2MhYUBiImNBIyFhQGIiY0KhYRERYQEBYRERYQphA
WEREWAQsQFhERFgAAAAACABr/rQB6ASwABwAVAAASMhYUBiImNBMnJjY2MhYWFRQHJzY2URYRERY
QFwcRAQ8MDBJAIBYfASwQFhERFv7jAgofDgETCzc1FwweAAAAAAEAGgBQAU8CfQAGAAABFwcXBwE
1ATAf+fkf/uoCfR/49x8BFgEAAAACABoBCAFaAZ0AAwAHAAATIRUhFSEVIRoBQP7AAUD+wAGdLD0
sAAAAAQAaAFABTwJ9AAYAABM3ARUBJzcaHwEW/uof+QJeH/7qAf7qH/cAAAIAGgAAAXwCxQAdACU
AABMjNDYzMhcWFRQHDgMVFSM1ND4CNzY1NCYiBhIyFhQGIiY0Ry1dVTQqUiUTOB8ZKRwjNQ0hTG5
MbRYRERYRAhRLZhszXj42GzkhSDQ9VS5KJzgSNDA3SkX94hAWEREWAAACABr/vgKtAkMANwBCAAA
lIic1NDc2MzIXJicmIyIGFRUUFjMyMzI2NTU0NzY3FwYVFxQGBwYiJjU1NDc2MzIXFhUXFScRBhM
mIyIGFRUWMzI3AUKiC1ghJk1lBCwsTGqNjW0CAnugDRIhDSIBPTJk9KtZTXyENiAlJYhbX10uPgG
MQ1g2lmVvIQwwPSAgXWeYaWtjVb9PFBsMHw832z9gGjR/fZt7PjVHK0MQKRD+9iUBPi85PGFvHwA
AAAIADAAAAgUCvAAHAAoAABMzEyMDIwMjEwMz8irpMFbwVC/7atYCvP1EAQD/AAJz/rkAAAADAE4
AAAH/ArwAEQAZACEAABMzMhYUBwYVFRYWFRQHBgYjIxMVMzI2NCYjAxEzMjU0JiNO3VJeSAEvPik
VUzrmLbk1REpAqLedUj4CvFSwKwEBARRbSlA7ICYCkfQ+ezv+4P66qkhUAAEAQv/2AasCxgAdAAA
lBiMiLgI1ETQ2NzYzMhcHJiMiBwYGFREUFxYyNwGrVU0QQUktKywtPk5ADjo5UCkRGE8fa1kXIQY
nVT8BQUxOGxkhIBgoEDwo/rhrIg0eAAAAAAIATgAAAfICvQAIABMAABMzMhYVERQjIxMRMzI3NjU
RNCYjTrxxd9TQLZVCM0BpSAK9fGf+7sgCk/2WGB5mARpbWQAAAQBOAAABnAK8AAsAABMhFSEVMwc
jESEVIU4BTv7fyg+7AR/+tAK8KvUs/rgpAAAAAQBOAAABnAK8AAkAABMhFSEVMwcjESNOAU7+37Y
Toy0CvCv0LP6PAAEAQf/2AdwCxQAdAAATERQWMjY1NSMnMxEjJwYjIiY1ETQ3NjMyFwcmJyJuXJZ
RTxCKIgoxa1h7Vy0+TUENOTanAfv+wEdTVkJHLP7UN0FkYwE6gDUZISAYAQAAAQBOAAAB/AK8AAs
AABMzESERMxEjESERI04tAVQtLf6sLQK8/uEBH/1EAXH+jwAAAQAdAAAAkgK8AAUAABMzESMRJx1
1LUgCvP1EApICAAAB//7/2wCAArwACgAAEzMRFAcnNjY1EScLdXcLIzJIArz9u5YGHwI4PwIfAgA
AAAABAE8AAAHcAr0ACwAAEzMREzMDASMDBxEjTy34NNEBBTXsPy0Cvf6gAWD+1/5sAWpa/vAAAQB
OAAABtwK8AAUAABMzESEVIU4tATz+lwK8/W0pAAABAE4AAAJmArwADAAAEzMTEzMRIxEDIwMRI04
t3uAtLcgwxi0CvP2JAnf9RAI5/ccCOf3HAAAAAAEATgAAAjoCvAAJAAATMwERMxEjAREjTi0Bkyw
s/m0tArz9lgJq/UQCa/2VAAAAAAIAP//1AeMCzAALABcAADcRNDYyFhURFAYiJhMRFBYyNjURNCY
iBj9xxm17rH0tX45eWZpYuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUgAAAgBOAAACAAK8AAsAGAA
AExEzMjY2NzY1NCYjJzMyFhUUBwYGIyMRI3vKKDgcCApIRPn2X10tE0kyyi0Ckf6bHSUdJDdTWCt
0Yno2FiD/AAACAD//ogHjAswAEQAlAAA3ETQ2MhYVERQGBxYzFSInJiYTERQWFyY1NTMVFBc2NjU
RNCYiBj9xxm1dSxlYeSZWeC1WPgQtBD9KW5NcuQFCZ2pwYv6/V18LKytTAl8Brv61SE0EGCdPTig
XBlBEAUlOT04AAAIATgAAAgECvAAOABYAABMzMhYVFAcTIwMGIyMRIxMRMzI1NCYjTvRgXmZnLmQ
WDtAtLcyMS0QCvHRiqS3+8AECAv8AApH+m7pUVwABACX/9QIAAsYAIgAANzMWFjI2NTQuBDU0NjM
yFwcmIgYVFB4EFRQGIiYlLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11532yOFpKUS9DIicmSjRGZh4
rHUQ/KDsfJylQN1xtcwAAAQAAAAABkgK8AAcAABEhFSMRIxEjAZK1LbACvCn9bQKTAAAAAQBK//k
B7wK9ABMAABMzERQWMjY1ETMRFA4CIi4CNUotYohhLSU/RlBHPyUCvf33RkxMRgIJ/f01TioUFCp
ONQAAAAABAE4AAAIsArwABgAAEzMTEzMDI04wv78w0D0CvP18AoT9RAABAE4AAAMGArwADAAAEzM
TEzMTEzMDIwMDI04wmHc8d5UxqEJxcUICvP1/AoH9fwKB/UQCZ/2ZAAEALQAAAigCvAALAAATMxM
TMwMTBwMDIxNAMrm5NNLiN8bGOOMCvP7TAS3+qP6dAQE2/soBZAAAAQA8//kB+AK8ABgAABMzFRQ
WMjY3ETMRFAcnNjc2NTUGBiMiJjU8LWKXXgouaQsyDgYbYixqewK8/UxSOzUBK/3djhIfEzEZI5w
gH2lnAAABAB8AAAIGArwACQAAEyEVASEVITUBISwB1P5YAa7+GQGo/mUCvCn9likpAmoAAAABAE7
/jgDvAzEABwAAEzMVBxEXFSNOoXR0oQMxJQf8tQclAAABAE7/jgHAAzEAAwAAEzMBI04uAUQwAzH
8XQAAAQBO/44A7wMxAAcAABMzESM1NxEnTqGhdHQDMfxdJQcDSwcAAQBOAtYBcAODAAUAABM3Fwc
nB06Ujh9wdAL2jY0gb28AAAAAAQBM/9QBjAAAAAMAADMhFSFMAUD+wCwAAQAuAksAmwLYAAgAABM
XIycmNTQzMmY1JUMFHhICxHljBwYdAAAAAAIAJf/2AaYB/QAaACgAAAUiNTU0NzYzMhc0JiMiIzc

Copyright © 2001 -2024 Syncfusion Inc. 1187


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1188


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1189


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1190


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1191


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1192


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1193


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1194


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1195


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1196


TreeGrid How To

jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8

Copyright © 2001 -2024 Syncfusion Inc. 1197


TreeGrid How To

AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA

Copyright © 2001 -2024 Syncfusion Inc. 1198


TreeGrid How To

P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Change orientation of header text in React Treegrid component
You can change the orientation of the header text by using the customAttributes property.

Copyright © 2001 -2024 Syncfusion Inc. 1199


TreeGrid How To

Ensure the following steps:


Step 1:
Create a css class with orientation style for treegrid header cell.
`css
.orientationcss .e-headercelldiv {
transform: rotate(90deg);
}
`
Step 2:
Add the custom css class to particular column by using customAttributes property.
`ts
<ColumnDirective field='EndDate' headerText='End Date' width='90' format='yMd'
customAttributes={this.customAttributes} textAlign='Center' />
`
Step 3:
Resize the header cell height in create event by using the following code.
`ts
const setHeaderHeight = () => {
/ Obtain the width of the headerText content */
const textWidth: number = (document.querySelector(".orientationcss > div") as
HTMLElement).scrollWidth;
const headerCell: NodeList = document.querySelectorAll(".e-headercell");
for(let i: number = 0; i < headerCell.length; i++) {
/ Assign the obtained textWidth as the height of the headerCell */
((headerCell as any).item(i)).style.height = textWidth + 'px';
}
}
`
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const customAttributes = { class: 'orientationcss' };
const setHeaderHeight = () => {

Copyright © 2001 -2024 Syncfusion Inc. 1200


TreeGrid How To

/** Obtain the width of the headerText content */


const textWidth = document.querySelector(".orientationcss >
div").scrollWidth;
const headerCell = document.querySelectorAll(".e-headercell");
for (let i = 0; i < headerCell.length; i++) {
/** Assign the obtained textWidth as the height of the
headerCell */
(headerCell.item(i)).style.height = textWidth + 'px';
}
};
return (<div>
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' created={setHeaderHeight}
height={230}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right'/>
<ColumnDirective field='EndDate' headerText='End Date'
width='90' format='yMd' customAttributes={customAttributes}
textAlign='Center'/>
<ColumnDirective field='Duration' headerText='Duration'
width='90' textAlign='Right'/>
<ColumnDirective field='Progress' headerText='Progress'
width='90' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>
</div>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const customAttributes: any = { class: 'orientationcss'};
const setHeaderHeight = () => {
/** Obtain the width of the headerText content */
const textWidth: number = (document.querySelector(".orientationcss >
div") as HTMLElement).scrollWidth;
const headerCell: NodeList = document.querySelectorAll(".e-headercell");
for(let i: number = 0; i < headerCell.length; i++) {
/** Assign the obtained textWidth as the height of the headerCell */
((headerCell as any).item(i)).style.height = textWidth + 'px';
}
}
return (<div>

Copyright © 2001 -2024 Syncfusion Inc. 1201


TreeGrid How To

<TreeGridComponent dataSource={projectData} treeColumnIndex={1}


idMapping= 'TaskID' parentIdMapping='parentID' created={setHeaderHeight}
height={230}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' />
<ColumnDirective field='EndDate' headerText='End Date'
width='90' format='yMd' customAttributes={customAttributes}
textAlign='Center' />
<ColumnDirective field='Duration' headerText='Duration'
width='90' textAlign='Right' />
<ColumnDirective field='Progress' headerText='Progress'
width='90' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
</div>
);
};
export default App;

CUSTOM.CSS
.orientationcss .e-headercelldiv {
transform: rotate(90deg);
}

CUSTOM.JSX
orientationcss.e - headercelldiv;
{
transform: rotate(90, deg);
}

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1202


TreeGrid How To

{ taskID: 3, taskName: 'Plan budget', startDate: new


Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{

Copyright © 2001 -2024 Syncfusion Inc. 1203


TreeGrid How To

taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',

Copyright © 2001 -2024 Syncfusion Inc. 1204


TreeGrid How To

startDate: new Date('02/17/2017'),


endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 1205


TreeGrid How To

{ taskID: 32, taskName: 'Development Task 2',


startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},

Copyright © 2001 -2024 Syncfusion Inc. 1206


TreeGrid How To

{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new


Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA

Copyright © 2001 -2024 Syncfusion Inc. 1207


TreeGrid How To

AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl

Copyright © 2001 -2024 Syncfusion Inc. 1208


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1209


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1210


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1211


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1212


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1213


TreeGrid How To

hIBgBZ42NIG9vAAADAE7/LgHHAtEABQAYACQAABM3FwcnBwUnMxEUBgcnNjU1BiImNTU0NjIHFRQ
WMjY1NSYmIgZ+lI4gb3QBAAMtMjkMSi+7Ymi59Et8WAZScFcCRI2NIG9vazz9yzxEEiMcVIBNYFy
VWGG+mUJHR0S5OzhFAAIAQf/2AdwDTgAdAC0AABMRFBYyNjU1IyczESMnBiMiJjURNDc2MzIXByY
nIjczFRQWMjY1NTMVFAYiJjVuXJZRTxCKIgoxa1h7Vy0+TUENOTanNSYrQCsmQ1xDAfv+wEdTVkJ
HLP7UN0FkYwE6gDUZISAYAbEFHi4uHgUFL0JCLwAAAAMATv8uAccCigAPACIALgAAEzMVFBYyNjU
1MxUUBiImNRcnMxEUBgcnNjU1BiImNTU0NjIHFRQWMjY1NSYmIgapJipBKyZDXEP0Ay0yOQxKL7t
iaLn0S3xYBlJwVwKKBR4uLh4FBS9CQi/MPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAACAEr
/+QHvAxwAEwAbAAATMxEUFjI2NREzERQOAiIuAjUSNDYyFhQGIkotYohhLSU/RlBHPyW+ERYQEBY
Cvf33RkxMRgIJ/f01TioUFCpONQI8FhAQFhEAAwBO/y4BxwJcAAcAGgAmAAASNDYyFhQGIhcnMxE
UBgcnNjU1BiImNTU0NjIHFRQWMjY1NSYmIgb7ERYQEBaRAy0yOQxKL7tiaLn0S3xYBlJwVwI2FhA
QFhFsPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAAAAgBB/0gB3ALFAB0AKwAAExEUFjI2NTU
jJzMRIycGIyImNRE0NzYzMhcHJiciEycmNjYyFhYVFAcnNjZuXJZRTxCKIgoxa1h7Vy0+TUENOTa
nnwcRAQ8MDBJAIBYfAfv+wEdTVkJHLP7UN0FkYwE6gDUZISAYAfz9AgofDgETCzc1FwweAAAAAAM
ATv8uAccCswASAB4ALAAAASczERQGByc2NTUGIiY1NTQ2MgcVFBYyNjU1JiYiBjcXFgYGIiYmNTQ
3FwYGAZ0DLTI5DEovu2JoufRLfFgGUnBXjgcRAQ8MDBJAIBYfAbk8/cs8RBIjHFSATWBclVhhvpl
CR0dEuTs4RdECCh8OARMLNzUXDB4AAAAAAgBOAAAB/AORAAsAEQAAEzMRIREzESMRIREjEzcXByc
HTi0BVC0t/qwtR5SOIG90Arz+4QEf/UQBcf6PAwSNjSBvbwACAB8AAAIHA5QABQAYAAATNxcHJwc
TESMRMxU2MzIXFhURIxE0JyYiH5SOIG90hS0tOFc5J1UsHiSWAweNjSBvb/7L/k4CvOIjEydp/qY
BWDcfJwACAE4AAAJdArwAEwAXAAATMzUzFSE1MxUzFSMRIxEhESMRIxchNSFOMS0BVC0wMC3+rC0
xXgFU/qwCGqKioqIs/hIBcf6PAe5RUQAAAQBOAAAB/QK8ABoAABMRIxEjNTM1MxUzFSMVNjMyFxY
VESMRNCcmIrktPj4tf384VzknVSweJJYBsv5OAj0sU1MsYyMTJ2n+pgFYNx8nAAACAE4AAAGYAzs
ABQAXAAATMxEjESc3IgcnNjMyFxYzMjcXBiMiJiajdS1IDSojFS81GEQXGCgfFCsxFC8xArz9RAK
SAnkmIDQfCyIhLxQWAAIATgAAAZgCdAARABUAABMiByc2MzIXFjMyNxcGIyImJhczESOwKiMVLzU
YRBcYKB8UKzEULzERLS0CRiYgNB8LIiEvFBZR/gsAAAACAE4AAAEmAxQABQAJAAATMxEjEScnMxU
jenUtSCzY2AK8/UQCkgKALgAAAAIATgAAAScCVAADAAcAABMzFSMXMxEjTtnZWi0tAlQuMf4LAAE
ATv8rAQsCvAAWAAAzBhUUFjMyNxcGIyInJjU0NzMRJzUzEd5nGhcqGh8gQRoWLGACSHVSLxIbKh8
yCxUzQz8CkgIo/UQAAAL/+v8rALcCxgAUABwAADMGFRQWMzI3FwYjIicmNTQ3MxEzEQI0NjIWFAY
iimcaFyoaHyBBGhYsYAItMhEWEBAWUi8SGyofMgsVM0M/AfX+CwKgFhAQFhEAAAAAAgBOAAAAyAM
dAAUADQAAEzMRIxEnNjQ2MhYUBiJOdS1IQxEWEBAWArz9RAKSAmMWEBAWEQAAAAABACkAAABWAfU
AAwAAEzMRIyktLQH1/gsAAAAAAv/+/9sA4ANOAAoAGgAAEzMRFAcnNjY1EScnMxUUFjI2NTUzFRQ
GIiY1FXV3CyMySBcmKkErJkJeQgK8/buWBh8COD8CHwK6BR4uLh4FBS9CQi8AAgBO/y8BcALRAAU
AEwAAEzcXBycHFzMRBgYHJzI2NzY1ESdOlI4gb3QRdgI9NwYIIgocNgJEjY0gb28v/b42SwMjEAs
dNgIJAgAAAAIAT/9IAdwCvQALABkAABMzERMzAwEjAwcRIxcnJjY2MhYWFRQHJzY2Ty34NNEBBTX
sPy2zBxEBDwwMEkAgFh8Cvf6gAWD+1/5sAWpa/vBmAgofDgETCzc1FwweAAAAAAIAQ/9IAbICvAA
MABoAABMzETcXBxYXIwMHESMXJyY2NjIWFhUUByc2NkMt0yCRRZs2ykItpwcRAQ8MDBJAIBYfArz
+icMfgXP1AUw7/u9mAgofDgETCzc1FwweAAAAAAEATv//AcACAAAQAAATFxU3MwcXFjMXJiYnJwc
VI04t4zy9fzkpAixAJnBDLQIAC/j4zrNNKAE2NJtFwAAAAAACAE4AAAG3A2cABQAPAAATMxEhFSE
TNzYzMhcWFAcHTi0BPP6XAzQJERgFAgVEArz9bSkC2nkUEwUMB2IAAAAAAgBRAAAAxANrAAMADQA
AEzMRIxM3NjMyFxYUBwdRLS0GNAkRGAUCBUQCvP1EAt55FBMFDAdiAAACAE7/SAG3ArwABQATAAA
TMxEhFSEXJyY2NjIWFhUUByc2Nk4tATz+l78HEQEPDAwSQCAWHwK8/W0pZgIKHw4BEws3NRcMHgA
CAE7/SACuArwAAwARAAATMxEjFycmNjYyFhYVFAcnNjZ3LS0VBxEBDwwMEkAgFh8CvP1EZgIKHw4
BEws3NRcMHgAAAAL/3gAAAb4DiwAFAAsAABMzESEVIQM3FzcXB1UtATz+l3cfdHAfjgK8/W0pA2s
gb28gjQAC/9oAAAD8A4sAAwAJAAATMxEjAzcXNxcHVC0teh90cB+OArz9RANrIG9vII0AAAABAE4
AAAIyArwADQAAEzMRNxcHESEVIREHJzfJLXsSjQE8/pdqEXsCvP71OChA/qgpAW0vKDcAAAEATgA
AAYMCvAANAAATMxE3FwcRIxEHJzc1J4p1chKELXMRhEgCvP75NCg8/nsBcTMoO/ECAAAAAgBOAAA
COgNnAAkAEwAAEzMBETMRIwERIxM3NjMyFxYUBwdOLQGTLCz+bS3INAkRGAYBBUQCvP2WAmr9RAJ
r/ZUC2nkUEwUMB2IAAAIATgAAAb8CpwAUAB4AAAEiBxEjETMVNjMyFxYVESMRNCYnJic3NjMyFxY
UBwcBCE4/LS04VzknVSw9LBEyNAkRGAUCBUQB1CL+TgH1GyMTJ2n+pgFYNj8FAkZ5FBMFDAdiAAA
CAE7/SAI6ArwACQAXAAATMwERMxEjAREjBScmNjYyFhYVFAcnNjZOLQGTLCz+bS0BCAcRAQ8MDBJ
AIBYfArz9lgJq/UQCa/2VZgIKHw4BEws3NRcMHgAAAgBA/0gBsQH9ABQAIgAAEyIHESMRMxU2MzI
XFhURIxE0JicmAycmNjYyFhYVFAcnNjb6Tj8tLThXOSdVLD0sERUHEQEPDAwSQCAWHwHUIv5OAfU
bIxMnaf6mAVg2PwUC/cYCCh8OARMLNzUXDB4AAAIATgAAAjoDiwAJAA8AABMzAREzESMBESMTNxc
3FwdOLQGTLCz+bS1qH3RwH44CvP2WAmr9RAJr/ZUDayBvbyCNAAAAAgBOAAABvwL9ABQAGgAAASI
HESMRMxU2MzIXFhURIxE0JicmAzcXNxcHAQhOPy0tOFc5J1UsPSwRlh90cB+OAdQi/k4B9RsjEyd
p/qYBWDY/BQIBCSBvbyCNAAABAE7/2wI7ArwAFQAAATMRFAcmJzY3JgMRIxEzFgAXNjURJwHFdng
EBywVgP4tLRkBKE8CSAK8/buWBg4RBCHEAYj9lQK8Jv44eA4jAgsCAAEAQP8vAbIB/QAdAAATIgc
RIxEzFTYzMhcWFzcRBgYHJzI+AjURNCYnJvpOPy0tOFc5J1QBAQI9NwYIIRURPSwRAdQi/k4B9Rs

Copyright © 2001 -2024 Syncfusion Inc. 1214


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1215


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1216


TreeGrid How To

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
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq

Copyright © 2001 -2024 Syncfusion Inc. 1217


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1218


TreeGrid How To

ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB

Copyright © 2001 -2024 Syncfusion Inc. 1219


TreeGrid How To

aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr

Copyright © 2001 -2024 Syncfusion Inc. 1220


TreeGrid How To

/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [

Copyright © 2001 -2024 Syncfusion Inc. 1221


TreeGrid How To

{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1222


TreeGrid How To

endDate: new Date('02/14/2017'), duration: 0, progress: 0,


priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }

Copyright © 2001 -2024 Syncfusion Inc. 1223


TreeGrid How To

]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,

Copyright © 2001 -2024 Syncfusion Inc. 1224


TreeGrid How To

progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },

Copyright © 2001 -2024 Syncfusion Inc. 1225


TreeGrid How To

{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new


Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4

Copyright © 2001 -2024 Syncfusion Inc. 1226


TreeGrid How To

B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+

Copyright © 2001 -2024 Syncfusion Inc. 1227


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1228


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1229


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1230


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1231


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1232


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1233


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1234


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1235


TreeGrid How To

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
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE

Copyright © 2001 -2024 Syncfusion Inc. 1236


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1237


TreeGrid How To

z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ

Copyright © 2001 -2024 Syncfusion Inc. 1238


TreeGrid How To

ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9

Copyright © 2001 -2024 Syncfusion Inc. 1239


TreeGrid How To

0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

Copyright © 2001 -2024 Syncfusion Inc. 1240


TreeGrid How To

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Render react component in column in React Treegrid component
You can use queryCellInfo event to render the React component inside TreeGrid cells.
In the following sample, the DropDownList is rendered in the Priority column.
APP.JSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { projectData } from './datasource';
import { getValue } from '@syncfusion/ej2-base';
import { DataUtil } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnsDirective, ColumnDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
let drop;
const dropdown = (args) => {
drop = DataUtil.distinct(projectData, 'Priority');
if (args.column.field === "Priority") {
const val = getValue(args.column.field, args.data);
ReactDOM.render(<DropDownListComponent id="dropdown" value={val}
dataSource={drop} change={onChange}/>, args.cell);
}
};
const onChange = (args) => {
/** Event will trigger when you have change the value in dropdown
column */
alert(args.value);
};
return (<div>
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' queryCellInfo={dropdown}
height={315}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right'/>
<ColumnDirective field='EndDate' headerText='End Date' width='90'
format='yMd' textAlign='Right'/>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right'/>
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>
</div>);
}
;
export default App;

Copyright © 2001 -2024 Syncfusion Inc. 1241


TreeGrid How To

APP.TSX
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { projectData } from './datasource';
import { getValue } from '@syncfusion/ej2-base';
import { DataUtil } from '@syncfusion/ej2-data';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnsDirective, ColumnDirective, TreeGridComponent } from
'@syncfusion/ej2-react-treegrid';
import { QueryCellInfoEventArgs, Column } from '@syncfusion/ej2-react-
grids';
/* tslint:disable */
function App() {
let drop: string[];
const dropdown = (args: QueryCellInfoEventArgs) => {
drop = DataUtil.distinct(projectData, 'Priority') as string[];
if((args.column as Column).field === "Priority") {
const val = getValue((args.column as Column).field, args.data);
ReactDOM.render(<DropDownListComponent id="dropdown"value={val}
dataSource={drop} change={onChange}/>, args.cell as Element)
}
}
const onChange = (args: ChangeEventArgs) => {
/** Event will trigger when you have change the value in dropdown column
*/
alert(args.value)
}
return (<div>
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' queryCellInfo={dropdown}
height={315}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' />
<ColumnDirective field='EndDate' headerText='End Date' width='90'
format='yMd' textAlign='Right' />
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' />
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
</div>
);
};
export default App;

DATASOURCE.JSX

Copyright © 2001 -2024 Syncfusion Inc. 1242


TreeGrid How To

export let sampleData = [


{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1243


TreeGrid How To

endDate: new Date('02/14/2017'), duration: 0, progress: 0,


priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }

Copyright © 2001 -2024 Syncfusion Inc. 1244


TreeGrid How To

]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,

Copyright © 2001 -2024 Syncfusion Inc. 1245


TreeGrid How To

progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},

Copyright © 2001 -2024 Syncfusion Inc. 1246


TreeGrid How To

{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new


Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4

Copyright © 2001 -2024 Syncfusion Inc. 1247


TreeGrid How To

CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY

Copyright © 2001 -2024 Syncfusion Inc. 1248


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1249


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1250


TreeGrid How To

nETI3FwYjFSM1JicmNTU0NjcHFQYXEQYG8yw2OQ00LjE2Cjs2LGMoGltKeAF5N0ECb3MEGiMWA/5
JDiUQaGoJPylLgFxnBsOReBIBtAhMAAAAAQBOAAABtgLFAB8AABMzJjU0NjIXByYiBhUUFzMVIxY
UBgchFSE1NjY1NicjZTsjbZkoDyt1UyfVxxAxJwEg/pgzPwESSgFmazJXaxkoGFdEJHcsN1xiGC0
nGmI4ID8AAgBOAJQBrQHzABcAHwAAEzcXNjIXNxcHFhQHFwcnBiInByc3JjQ3NgYUFjI2NCZUHB4
xfi4fHB8mJyEbIS6ALiAbHyUlU05Obk1NAdAbHycmHx0fMHoxIRshJiYiGyIwezAYTm1MS25OAAA
AAQA1AAACDQK8ABkAABMzNScjNTMDMxMzEzMDMxUjBxUzFSMRIxEjgogHgWe0M7UFuDO1aoUGi4s
tiAEwJQwsAS/+0QEv/tEsCyYs/vwBBAACAE7/OwIpAsgAKgA4AAAXMxYWMjY1NC4DJyY0NyY1NDY
zMhcHJiIGFRQXHgQUBxYVFAYiJhMGFRQeAhc2NTQmJyZOLgRopW08WmlbHyAfIHRtUz8OOZhmUSR
YV0ktFxh35X1SE1NngiQKTzGgCDtXTk0wRSMoJiQlZicoN0ZmHiodQ0FEJxIfIitHYislMVxvcwH
xHh4vQB41ICUPNEgRNQAAAAIABAKiANoC2QAHAA8AABIyFhQGIiY0NjIWFAYiJjQVFhERFhGvFhE
RFhAC2REWEBAWERAWEREWAAAAAAMAGf+BAwYCbQAHAA8AJwAAFiYQNiAWEAYABhAWIDYQJhcjJiY
jIgYUFjMyNjczBgYjIiY0NjMyFvXc2gE72Nr+3MDBAQ7BwD4yCU45UlJUUThQBzMQbEZjc3JiSW5
/2AE+1tb+wtgCwLr+4bu8ARm//itBa5ltQy5IV4LFh1YAAgBOAXwBWwLFABIAHgAAAQYiLgI1NDc
2MzIXNCc3MhYVBxQzMjc1JiciIyIGAVtFPj0uH0AQFDZJfwNiROZwISs7PgMEGSMBhwsGHDwtUxY
GLVgBI0tPKmAJdikGJAAAAgAqAFAB3wHHAAYADQAAExcHFwcnNSUXBxcHJzXlHp2cHbsBlx6dnB2
7AccfnZ4duwG7H52eHbsBAAAAAQAtAXEBbQGdAAMAABMhFSEtAUD+wAGdLAAAAAQAGf+BAwYCbQA
MABYAHgAmAAABMzIWFAYHFyMnIxUjExUzMjc2NTQmIwImEDYgFhAGAAYQFiA2ECYBCKRHTj8zfDZ
4aC0tY1oXC0Qsr9zaATvY2v7bv8ABEr7AAdxEbTwGwr6+AYyjJRIbLCX9ztgBPtbW/sLYAsC6/uG
7vAEavgAAAAEATgJ3ASsCpQADAAATMxUjTt3dAqUuAAIATgGlAW4CxQAHAA8AABIyFhQGIiY0FhQ
WMjY0JiKieFRUeFQpOF44OVwCxVR4VFR4E1I+PlI+AAAAAAEATgDtAZICIQAPAAATMzUzFTMVIxU
zFSE1MzUjUossiYmF/sCPiwGdhIQsWCwsWAAAAAABAC4CTACbAtkACQAAEzc2MzIXFhQHBy40CRE
YBgEFRAJMeRQTBQwHYgAAAAEAJf8wAbsB/gAbAAATMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxU
nJS4ZLzIvKSEtLgIYFggaBylTPy0zDi4B9f5wHBUWEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBO/zk
CfALuABQAAAEhESMRJxEjESMiJy4DJyY1NDYBCAF0LU8t1EMjEhsPCgIDXALu/EsDigH8dgG8Gg4
dMCQeLTJkfgAAAQBM/y4BJAAAABQAADMzBzYyFhQGIic3FjI2NCcmIgcHJ60jKA47M0paNBQjSi0
ZCx8VJA43CCVVKRMrGBo0CwUIDxcAAAAAAgAEAFABuQHHAAYADQAAEzcXFQcnNyU3FxUHJzfgHru
7HZz+hx67ux2cAagfuwG7HZ6dH7sBux2eAAAAAgBPAAABsQLFAB0AJQAAJTMUBiMiJyY1NDc+AzU
1MxUUDgIHBhUUFjI2AiImNDYyFhQBhC1dVTQqUiUTOB8ZKRwjNQ0hTG5MbRYRERYRsUtmGjRePjY
bOSFIND1VLkonOBI0MDdKRQIeEBYRERYAAAMADAAAAgUDZwAHAAoAEwAAEzMTIwMjAyMTAzMDFyM
nJjU0MzLyKukwVvBUL/tq1pM1JUMFHhICvP1EAQD/AAJz/rkCJ3ljBwYdAAADAAwAAAIFA2gABwA
KABQAABMzEyMDIwMjEwMzAzc2MzIXFhQHB/Iq6TBW8FQv+2rWgTQJERgGAQVEArz9RAEA/wACc/6
5Aa95FBQEDAdiAAMADAAAAgUDkQAHAAoAEAAAEzMTIwMjAyMTAzMDNxcHJwfyKukwVvBUL/tq1v2
UjiBvdAK8/UQBAP8AAnP+uQHYjY0gb28AAAMADAAAAgUDOgAHAAoAHAAAEzMTIwMjAyMTAzMDIgc
nNjMyFxYzMjcXBiMiJibyKukwVvBUL/tq1rEqIxUvNRhEFxgoHxQrMRQvMQK8/UQBAP8AAnP+uQH
gJiA0HwsiIS8UFgACAAwAAAIFArwABwAKAAATMxMjAyMDIxMDM/Iq6TBW8FQv+2rWArz9RAEA/wA
Cc/65AAAAAwAMAAACBQN1AA8AEgAaAAASJjQ2MhYUBgcTIwMjAyMTFwMzAhQWMjY0JiLELEFbQSw
i3jBW8FQv2yBq1rYrPioqPgKmO1NBQVM7C/1lAQD/AAKbKP65Afk+Kio+KgAAAgBOAAADCwK8AA8
AEgAAASEVIRUzByMRIRUhEyMDIwEDMwG8AU/+38oPuwEf/rMBuYYwAW+jowK8KvUs/rgpAQD/AAJ
k/sgAAQBC/y4BqwLGAC8AABMRFBcWMjcXBiMHNjIWFAYiJzcWMjY0JyYiBwcnNyYmNRE0Njc2MzI
XByYjIgcGBm9PH2tZClVTIA47M0paNBQjSi0ZDB4VJA42SFcrLC0+TkAOOjlQKREYAgH+uGsiDR4
mIS0IJVUpEysYGjQLBQgPF0YIXFsBQUxOGxkhIBgoEDwAAgBOAAABnANmAAsAFAAAEyEVIRUzByM
RIRUhExcjJyY1NDMyTgFO/t/KD7sBH/60jDUlQwUeEgK8KvUs/rgpA1J5YwcGHQAAAgBOAAABnAN
nAAsAFQAAEyEVIRUzByMRIRUhEzc2MzIXFhQHB04BTv7fyg+7AR/+tJ80CREYBQIFRAK8KvUs/rg
pAtp5FBMFDAdiAAIATgAAAZwDkQALABEAABMhFSEVMwcjESEVIRM3FwcnB04BTv7fyg+7AR/+tA+
UjiBvdAK8KvUs/rgpAwSNjSBvbwAAAQBOAAABnAK8AAsAABMhFSEVMwcjESEVIU4BTv7fyg+7AR/
+tAK8KvUs/rgpAAAAAgBTAAAAyANmAAUADgAAEzMRIxEnNxcjJyY1NDMyU3UtSDg1JUMFHhICvP1
EApICvnljBwYdAAACAE4AAAEJA2cABQAPAAATMxEjESc3NzYzMhcWFAcHTnUtSE40CREYBgEFRAK
8/UQCkgJGeRQTBQwHYgACAE4AAAFwA5EABQALAAATMxEjEScnNxcHJweGdS1IOJSOIG90Arz9RAK
SAnCNjSBvbwAAAQBOAAAAwwK8AAUAABMzESMRJ051LUgCvP1EApICAAADAE4AAAJdAr0AEQAbACE
AABMzNTMyFhczFSMWFREUIyMRIwU0JyERMzI3NjUBFSEmJiNOMbxdcxFBOwHU0DEBqAH+t5VCM0D
+tgFCEF86AhqjWEssBw3+7sgB7g8KBf47GB5mAc55PTwAAAACAE4AAAI6AzoACQAbAAATMwERMxE
jAREjEyIHJzYzMhcWMzI3FwYjIiYmTi0Bkyws/m0tsiojFS81GEQXGCgfFCsxFC8xArz9lgJq/UQ
Ca/2VAwwmIDQfCyIhLxQWAAADAD//9QHjA2YACwAXACAAADcRNDYyFhURFAYiJhMRFBYyNjURNCY
iBhMXIycmNTQzMj9xxm17rH0tX45eWZpYhDUlQwUeErkBQmdqcGL+v2VfXwGu/rdMTUtPAUhNUlI
BA3ljBwYdAAMAP//1AeMDZwALABcAIQAANxE0NjIWFREUBiImExEUFjI2NRE0JiIGNzc2MzIXFhQ
HBz9xxm17rH0tX45eWZpYlTQJERgFAgVEuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUot5FBMFDAd
iAAMAP//1AeMDkQALABcAHQAANxE0NjIWFREUBiImExEUFjI2NRE0JiIGNzcXBycHP3HGbXusfS1

Copyright © 2001 -2024 Syncfusion Inc. 1251


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1252


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1253


TreeGrid How To

BBEA4uz0gIQoCQSx/UywsAAAAAgBOAAABnAMUAAsADwAAEyEVIRUzByMRIRUhEzMVI04BTv7fyg+
7AR/+tDnZ2QK8KvUs/rgpAxQuAAAAAwAj//QBiwJUABIAGgAeAAAlBiMiNTU0NjIWFRUFFRQWMzI
3ARUlNTQmIgY3MxUjAXJNVK5lpl3+xUovSE/+8AEOUm1PHdnZIy+SzVFaWU94EUg5MSsBDVoOVEM
5QL0uAAAAAAIATgAAAZwDHQALABMAABMhFSEVMwcjESEVIRI0NjIWFAYiTgFO/t/KD7sBH/60lRE
WEBAWArwq9Sz+uCkC9xYQEBYRAAAAAAMATv/0AbYCXQASABoAIgAAJQYjIjU1NDYyFhUVBRUUFjM
yNwEVJTU0JiIGNjQ2MhYUBiIBnU1UrmWmXf7FSi9IT/7wAQ5SbU92ERYQEBYjL5LNUVpZT3gRSDk
xKwENWg5UQzlAoBYQEBYRAAEATv8rAcYCvAAcAAAhBhUUFjMyNxcGIyInJjU0NyERIRUhFTMHIxE
hFQGZZxoXKhofIEEaFixg/uUBTv7fyg+7AR9SLxIbKh8yCxUzQz8CvCr1LP64KQACACP/KwGLAf4
AIwArAAA3MjcXBgcGFRQWMzI3FwYjIicmNTQ3IiY1NTQ2MhYVFQUVFBYDFSU1NCYiBslITxI0Ql0
aFyoaHyBBGhYsTkpXZaZd/sVKSgEOUm1PGysjIAtLLhIbKh8yCxUzPTlJSc1RWllPeBFIOTEBOFo
OVEM5QAAAAAACAE4AAAGcA4sACwARAAATIRUhFTMHIxEhFSETNxc3FwdOAU7+38oPuwEf/rQXH3R
wH44CvCr1LP64KQNrIG9vII0AAAMATv/0AbYCywASABoAIAAAJQYjIjU1NDYyFhUVBRUUFjMyNwE
VJTU0JiIGAzcXNxcHAZ1NVK5lpl3+xUovSE/+8AEOUm1PBh90cB+OIy+SzVFaWU94EUg5MSsBDVo
OVEM5QAEUIG9vII0AAAIAQf/2AdwDkQAdACMAABMRFBYyNjU1IyczESMnBiMiJjURNDc2MzIXByY
nIjc3FwcnB25cllFPEIoiCjFrWHtXLT5NQQ05NqcYlI4gb3QB+/7AR1NWQkcs/tQ3QWRjATqANRk
hIBgBZ42NIG9vAAADAE7/LgHHAtEABQAYACQAABM3FwcnBwUnMxEUBgcnNjU1BiImNTU0NjIHFRQ
WMjY1NSYmIgZ+lI4gb3QBAAMtMjkMSi+7Ymi59Et8WAZScFcCRI2NIG9vazz9yzxEEiMcVIBNYFy
VWGG+mUJHR0S5OzhFAAIAQf/2AdwDTgAdAC0AABMRFBYyNjU1IyczESMnBiMiJjURNDc2MzIXByY
nIjczFRQWMjY1NTMVFAYiJjVuXJZRTxCKIgoxa1h7Vy0+TUENOTanNSYrQCsmQ1xDAfv+wEdTVkJ
HLP7UN0FkYwE6gDUZISAYAbEFHi4uHgUFL0JCLwAAAAMATv8uAccCigAPACIALgAAEzMVFBYyNjU
1MxUUBiImNRcnMxEUBgcnNjU1BiImNTU0NjIHFRQWMjY1NSYmIgapJipBKyZDXEP0Ay0yOQxKL7t
iaLn0S3xYBlJwVwKKBR4uLh4FBS9CQi/MPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAACAEr
/+QHvAxwAEwAbAAATMxEUFjI2NREzERQOAiIuAjUSNDYyFhQGIkotYohhLSU/RlBHPyW+ERYQEBY
Cvf33RkxMRgIJ/f01TioUFCpONQI8FhAQFhEAAwBO/y4BxwJcAAcAGgAmAAASNDYyFhQGIhcnMxE
UBgcnNjU1BiImNTU0NjIHFRQWMjY1NSYmIgb7ERYQEBaRAy0yOQxKL7tiaLn0S3xYBlJwVwI2FhA
QFhFsPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAAAAgBB/0gB3ALFAB0AKwAAExEUFjI2NTU
jJzMRIycGIyImNRE0NzYzMhcHJiciEycmNjYyFhYVFAcnNjZuXJZRTxCKIgoxa1h7Vy0+TUENOTa
nnwcRAQ8MDBJAIBYfAfv+wEdTVkJHLP7UN0FkYwE6gDUZISAYAfz9AgofDgETCzc1FwweAAAAAAM
ATv8uAccCswASAB4ALAAAASczERQGByc2NTUGIiY1NTQ2MgcVFBYyNjU1JiYiBjcXFgYGIiYmNTQ
3FwYGAZ0DLTI5DEovu2JoufRLfFgGUnBXjgcRAQ8MDBJAIBYfAbk8/cs8RBIjHFSATWBclVhhvpl
CR0dEuTs4RdECCh8OARMLNzUXDB4AAAAAAgBOAAAB/AORAAsAEQAAEzMRIREzESMRIREjEzcXByc
HTi0BVC0t/qwtR5SOIG90Arz+4QEf/UQBcf6PAwSNjSBvbwACAB8AAAIHA5QABQAYAAATNxcHJwc
TESMRMxU2MzIXFhURIxE0JyYiH5SOIG90hS0tOFc5J1UsHiSWAweNjSBvb/7L/k4CvOIjEydp/qY
BWDcfJwACAE4AAAJdArwAEwAXAAATMzUzFSE1MxUzFSMRIxEhESMRIxchNSFOMS0BVC0wMC3+rC0
xXgFU/qwCGqKioqIs/hIBcf6PAe5RUQAAAQBOAAAB/QK8ABoAABMRIxEjNTM1MxUzFSMVNjMyFxY
VESMRNCcmIrktPj4tf384VzknVSweJJYBsv5OAj0sU1MsYyMTJ2n+pgFYNx8nAAACAE4AAAGYAzs
ABQAXAAATMxEjESc3IgcnNjMyFxYzMjcXBiMiJiajdS1IDSojFS81GEQXGCgfFCsxFC8xArz9RAK
SAnkmIDQfCyIhLxQWAAIATgAAAZgCdAARABUAABMiByc2MzIXFjMyNxcGIyImJhczESOwKiMVLzU
YRBcYKB8UKzEULzERLS0CRiYgNB8LIiEvFBZR/gsAAAACAE4AAAEmAxQABQAJAAATMxEjEScnMxU
jenUtSCzY2AK8/UQCkgKALgAAAAIATgAAAScCVAADAAcAABMzFSMXMxEjTtnZWi0tAlQuMf4LAAE
ATv8rAQsCvAAWAAAzBhUUFjMyNxcGIyInJjU0NzMRJzUzEd5nGhcqGh8gQRoWLGACSHVSLxIbKh8
yCxUzQz8CkgIo/UQAAAL/+v8rALcCxgAUABwAADMGFRQWMzI3FwYjIicmNTQ3MxEzEQI0NjIWFAY
iimcaFyoaHyBBGhYsYAItMhEWEBAWUi8SGyofMgsVM0M/AfX+CwKgFhAQFhEAAAAAAgBOAAAAyAM
dAAUADQAAEzMRIxEnNjQ2MhYUBiJOdS1IQxEWEBAWArz9RAKSAmMWEBAWEQAAAAABACkAAABWAfU
AAwAAEzMRIyktLQH1/gsAAAAAAv/+/9sA4ANOAAoAGgAAEzMRFAcnNjY1EScnMxUUFjI2NTUzFRQ
GIiY1FXV3CyMySBcmKkErJkJeQgK8/buWBh8COD8CHwK6BR4uLh4FBS9CQi8AAgBO/y8BcALRAAU
AEwAAEzcXBycHFzMRBgYHJzI2NzY1ESdOlI4gb3QRdgI9NwYIIgocNgJEjY0gb28v/b42SwMjEAs
dNgIJAgAAAAIAT/9IAdwCvQALABkAABMzERMzAwEjAwcRIxcnJjY2MhYWFRQHJzY2Ty34NNEBBTX
sPy2zBxEBDwwMEkAgFh8Cvf6gAWD+1/5sAWpa/vBmAgofDgETCzc1FwweAAAAAAIAQ/9IAbICvAA
MABoAABMzETcXBxYXIwMHESMXJyY2NjIWFhUUByc2NkMt0yCRRZs2ykItpwcRAQ8MDBJAIBYfArz
+icMfgXP1AUw7/u9mAgofDgETCzc1FwweAAAAAAEATv//AcACAAAQAAATFxU3MwcXFjMXJiYnJwc
VI04t4zy9fzkpAixAJnBDLQIAC/j4zrNNKAE2NJtFwAAAAAACAE4AAAG3A2cABQAPAAATMxEhFSE
TNzYzMhcWFAcHTi0BPP6XAzQJERgFAgVEArz9bSkC2nkUEwUMB2IAAAAAAgBRAAAAxANrAAMADQA
AEzMRIxM3NjMyFxYUBwdRLS0GNAkRGAUCBUQCvP1EAt55FBMFDAdiAAACAE7/SAG3ArwABQATAAA
TMxEhFSEXJyY2NjIWFhUUByc2Nk4tATz+l78HEQEPDAwSQCAWHwK8/W0pZgIKHw4BEws3NRcMHgA
CAE7/SACuArwAAwARAAATMxEjFycmNjYyFhYVFAcnNjZ3LS0VBxEBDwwMEkAgFh8CvP1EZgIKHw4
BEws3NRcMHgAAAAL/3gAAAb4DiwAFAAsAABMzESEVIQM3FzcXB1UtATz+l3cfdHAfjgK8/W0pA2s

Copyright © 2001 -2024 Syncfusion Inc. 1254


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1255


TreeGrid How To

DiwAHAA0AABEhFSMRIxEjNzcXNxcHAZK1LbA2H3RwH44CvCn9bQKT2CBvbyCNAAAAAv/r//MBGAO
LAAwAEgAAEzMVMwcjERQXByYmNQM3FzcXB2gtgxRvSg04Mn0fdHAfjgK8xyv+ulUYJBBGOwLnIG9
vII0AAAAAAgAAAAABkgMUAAcACwAAESEVIxEjESM3MxUjAZK1LbBa2dkCvCn9bQKTgS4AAAAAAQB
O//MBRAK8ABQAABMzETMVMwcjFTMVIxUUFwcmJjU1I05GLYMUb3d3Sg04MkYBZgFWxytkLLZVGCQ
QRju2AAIASv/5Ae8DOwATACUAABMzERQWMjY1ETMRFA4CIi4CNRMiByc2MzIXFjMyNxcGIyImJko
tYohhLSU/RlBHPyWQKiMVLzUYRBcYKB8UKzEULzECvf33RkxMRgIJ/f01TioUFCpONQJTJiA0Hws
iIS8UFgAAAgBO//UBwwJ+ABAAIgAAEzMRFDMyNjURMxEjNwYjIjUTIgcnNjMyFxYzMjcXBiMiJiZ
OLY9ATC0sAzNdvHUqIxUvNRhDGBgoHxQrMRUuMQH1/rOKQ0IBUv4LO0a4AaMmIDQfCyIhLxQWAAA
AAgBK//kB7wMUABMAFwAAEzMRFBYyNjURMxEUDgIiLgI1EzMVI0otYohhLSU/RlBHPyVk2dkCvf3
3RkxMRgIJ/f01TioUFCpONQJaLgAAAAACAE7/9QHDAlQAEAAUAAATMxEUMzI2NREzESM3BiMiNRM
zFSNOLY9ATC0sAzNdvEnZ2QH1/rOKQ0IBUv4LO0a4AacuAAIASv/5Ae8DSgATACMAABMzERQWMjY
1ETMRFA4CIi4CNRMzFRQWMjY1NTMVFAYiJjVKLWKIYS0lP0ZQRz8lYSYrQCsmQ1xDAr3990ZMTEY
CCf39NU4qFBQqTjUCkAUeLi4eBQUvQkIvAAAAAAIATv/1AcMCjQAPACAAABMzFRQWMjY1NTMVFAY
iJjUHMxEUMzI2NREzESM3BiMiNZ0mK0ArJkNcQ08tj0BMLSwDM128Ao0FHi4uHgUFLkNDLpP+s4p
DQgFS/gs7RrgAAAMASv/5Ae8DcwATABsAIwAAEzMRFBYyNjURMxEUDgIiLgI1EhQWMjY0JiIGNDY
yFhQGIkotYohhLSU/RlBHPyWHK0ArK0BRQ1xDQ1wCvf33RkxMRgIJ/f01TioUFCpONQJoQCsrQCt
5XENDXEMAAAADAE7/9QHDAr0AEAAYACAAABMzERQzMjY1ETMRIzcGIyI1EhQWMjY0JiIGNDYyFhQ
GIk4tj0BMLSwDM128dStAKytAUUNcQ0NcAfX+s4pDQgFS/gs7RrgBv0ArK0AreVxDQ1xDAAAAAAM
ASv/5Ae8DaAATAB0AJwAAEzMRFBYyNjURMxEUDgIiLgI1Ezc2MzIXFhQHByM3NjMyFxYUBwdKLWK
IYS0lP0ZQRz8l7zQJERgFAgVElDQJERgFAgVEAr3990ZMTEYCCf39NU4qFBQqTjUCIXkUFAQMB2J
5FBQEDAdiAAADAE7/9QHDAqwAEAAaACQAABMzERQzMjY1ETMRIzcGIyI1Ezc2MzIXFhQHByM3NjM
yFxYUBwdOLY9ATC0sAzNdvNI0CREYBgEFRJQ0CREYBgEFRAH1/rOKQ0IBUv4LO0a4AXJ5FBQEDAd
ieRQUBAwHYgAAAAEASv8rAe8CvQAgAAATMxEUFjI2NREzERQGBwYVFBYzMjcXBiMiJyY1NDcmJjV
KLWKIYS1mTWAaFyoaHyBBGhYsVlFuAr3990ZMTEYCCf39XFwHTi4SGyofMgsVM0A8BVxfAAABACT
/KwHGAfUAIAAAIQYVFBYzMjcXBiMiJyY1NDczNwYjIjURMxEUMzI2NREzAZlnGhcqGh8gQRoWLGA
EAzNdvC2PQEwtUi8SGyofMgsVM0M/O0a4AUj+s4pDQgFSAAABADz/+QH4ArwAGAAAEzMVFBYyNjc
RMxEUByc2NzY1NQYGIyImNTwtYpdeCi5pCzIOBhtiLGp7Arz9TFI7NQEr/d2OEh8TMRkjnCAfaWc
AAAIAHwAAAgYDngAJABMAABMhFQEhFSE1ASE3NzYzMhcWFAcHLAHU/lgBrv4ZAaj+ZeQ0CREYBgE
FRAK8Kf2WKSkCan55FBQEDAdiAAACAE4AAAG9AqcACQATAAATIRUBIRUhNQEhNzc2MzIXFhQHB1c
BUf7dATj+kQEh/uiJNAkRGAYBBUQB9Sn+XSkpAaNOeRQTBQwHYgAAAgAfAAACBgMZAAkAEQAAEyE
VASEVITUBITY0NjIWFAYiLAHU/lgBrv4ZAaj+ZdcRFhAQFgK8Kf2WKSkCamAWEBAWEQACAE4AAAG
9AloACQARAAATIRUBIRUhNQEhNjQ2MhYUBiJXAVH+3QE4/pEBIf7okREWEBAWAfUp/l0pKQGjaBY
QEBYRAAIAHwAAAgYDvQAJAA8AABMhFQEhFSE1ASETNxc3FwcsAdT+WAGu/hkBqP5lbh90cB+OArw
p/ZYpKQJqAQogb28gjQAAAgBOAAABvQL8AAkADwAAEyEVASEVITUBIRM3FzcXB1cBUf7dATj+kQE
h/uggH3RwH44B9Sn+XSkpAaMBECBvbyCNAAACACX/SAIAAsYAIgAwAAA3MxYWMjY1NC4ENTQ2MzI
XByYiBhUUHgQVFAYiJhcnJjY2MhYWFRQHJzY2JS4EZqZtPVprWj10bVM/DjmZZD1bals9ded96gc
RAQ8MDBJAIBYfsjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXPOAgofDgETCzc1FwweAAIAJP9
IAYwCAQAgAC4AAAEHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWFwMnJjY2MhYWFRQHJzY2AUs
QJnBIRVdXPFmrYgIrBk9tTjpWViEnT1sfOAxoBxEBDwwMEkAgFh8B5CYaATIqKSsaH0FuUFI8LzU
yVTIbHBwhY1YPB/2vAgofDgETCzc1FwweAAEALgJWAVADAwAFAAATNxcHJwculI4gb3QCdo2NIG9
vAAAAAAEALgJPAVAC/AAFAAATNxc3FwcuH3RwH44C3CBvbyCNAAAAAAEALgJGARACvAAPAAATMxU
UFjI2NTUzFRQGIiY1LiYqQSsmQl5CArwFHi4uHgUFL0JCLwABAAQCjwA7AsYABwAAEjQ2MhYUBiI
EERYQEBYCoBYQEBYRAAAC//4CJQDgAwcABwAPAAASFBYyNjQmIgY0NjIWFAYiJCw+LCw+UkJeQkJ
eArZAKytAK3lcQ0NcQwAAAAABAEz/LgEJAAMAEAAANwYVFBYzMjcXBiMiJyY1NDfcZxoXKhofIEE
aFixgA1IvEhsqHzILFTNDPwAAAAABAE4CZwGYAr8AEQAAEyIHJzYzMhcWMzI3FwYjIiYmsCojFS8
1GEQXGCgfFCsxFC8xApEmIDQfCyIhLxQWAAAAAv/+AjgA2wLFAAkAEwAAEzc2MzIXFhQHByM3NjM
yFxYUBwduNAkRGAYBBUSUNAkRGAYBBUQCOHkUEwUMB2J5FBMFDAdiAAAAAwBOAqIBJANoAAgAEAA
YAAATNzYzMhcWBwcGMhYUBiImNDYyFhQGIiY0ojQJERgGAwdEaBYRERYQrxYRERYQAtt5FBQNCmI
CEBYRERYQEBYRERYAAwBOAAACRwLFAAcACgAUAAABMxMjAyMDIxMDMwE3NjMyFxYUBwcBNCrpMFb
wVC/7atb+qDQJERgFAgVEArz9RAEA/wACc/65AQx5FBMFDAdiAAAAAgBOAAACQwLFAAgAFAAAEzc
2MzIXFgcHNyEVIRUzByMRIRUhTjQJERgGAwdEgwFO/t/KD7sBH/60Ajh5FBMOCmKEKvUs/rgpAAA
AAAIATgAAAqUCxQAIABQAABM3NjMyFxYHBzczESERMxEjESERI040CREYBgMHRIUtAVQtLf6sLQI
4eRQTDgpihP7hAR/9RAFx/o8AAAACAE4AAAFfAsUABQAPAAATMxEjEScHNzYzMhcWFAcH6nUtSJw
0CREYBgEFRAK8/UQCkgJceRQTBQwHYgADAE7/9QJnAswACwAXACEAADcRNDYyFhURFAYiJhMRFBY
yNjURNCYiBgc3NjMyFxYUBwfDccZte6x9LV+OXlmaWKI0CREYBgEFRLkBQmdqcGL+v2VfXwGu/rd
MTUtPAUhNUlIXeRQTBQwHYgACAE7/+QKtAsUACAAhAAATNzYzMhcWBwc3MxUUFjI2NxEzERQHJzY
3NjU1BgYjIiY1TjQJERgGAwdEfy1il14KLmkLMg0HG2IsansCOHkUEw4KYoT9TFI7NQEr/d2OEh8

Copyright © 2001 -2024 Syncfusion Inc. 1256


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1257


TreeGrid How To

AMAABADYAAABjAfUAAwAAEzMRIzYtLQH1/gsAAAAAAQBO//8BwAIAABAAABMXFTczBxcWMxcmJic
nBxUjTi3jPL1/OSkCLEAmcEMtAgAL+PjOs00oATY0m0XAAAAAAAEATv/2Ah0CvAAjAAATNTIzMhY
XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq
5X10tTUKNIRsGMyeAr7MwQw8ZBAUDByENOQwmcYfCZwELt0pIko4vSRoBCwAAAAABAE7/8wF7AfQ
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

Copyright © 2001 -2024 Syncfusion Inc. 1258


TreeGrid How To

AAAEATgAAAWQCwgASAAATNDYyFxEjESYiBwYVFTMHIxEjTleCPSwtQBU7fRNqLQIxRE0x/W8Cdh0
JGkY1K/42AAABAE4AAAJKAsIAIwAAATYyFxEjESYiBwYVFTMHIxEjETQ3JiMHBhUVMwcjESMRNDY
yAV0nijwsLUAVO30Tai0QKyoxQ30UaS1UeAKZKTH9bwJ2HQkaRjUr/jYCMSceHQkbRzMr/jYCMUF
QAAADAE7/+QIKAxoAGAAgACgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjUSMhYUBiImNDYyFhQ
GIiY0Ti1il14KLmkLMg4GG2IsanuBFhERFhGvFhERFhACvP1MUjs1ASv93Y4SHxMxGSOcIB9pZwF
VERYQEBYREBYRERYAAgBOAAACRwK8AAMABgAAATMTIRMDIQEzK+n+B/q+AYACvP1EAnf9sgAAAAA
BABIAAAdeAfUAJAAAEzMTEzMTEzMTEzMTEzMTEzMTEzMDIwMDIwMDIwMDIwMDIwMDIxIvi3grdow
vi3grdowvi3grdowvnzpucDmHhzpucDmHhzpucDkB9f4/AcH+PwHB/j8Bwf4/AcH+PwHB/j8Bwf4
LAaT+XAGq/lYBpP5cAar+VgGk/lwAAQBO//MB4QLDABsAABM0NjIXFTMHIxEUFwcmJjURJiIHBhU
VMwcjESNOVoQ8fRNqSg04Mi4/Fjl9FGktAjFDTzKcK/66VRkjEEY7AfIdChtGMyv+NgAAAAEALP/
zAcYCvAAZAAABMxUzByMRFBcHJiY1ESMRFBcHJiY1ETMVMwEWLYMUb0oNODK9Sg04Mi29ArzHK/6
6VRgkEEY7AUb+ulUYJBBGOwI4xwAAAAEAMQAAAgkCvAAIAAATMxMTMwMRIxExM7i6M9YtArz+zQE
z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw

Copyright © 2001 -2024 Syncfusion Inc. 1259


TreeGrid How To

AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA

Copyright © 2001 -2024 Syncfusion Inc. 1260


TreeGrid How To

AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn

Copyright © 2001 -2024 Syncfusion Inc. 1261


TreeGrid How To

/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1262


TreeGrid How To

{ taskID: 8, taskName: 'Develop prototype', startDate: new


Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1263


TreeGrid How To

endDate: new Date('02/21/2017'), duration: 2,


progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 1264


TreeGrid How To

{ taskID: 28, taskName: 'Phase 2 complete',


startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [

Copyright © 2001 -2024 Syncfusion Inc. 1265


TreeGrid How To

{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new


Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG

Copyright © 2001 -2024 Syncfusion Inc. 1266


TreeGrid How To

aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ

Copyright © 2001 -2024 Syncfusion Inc. 1267


TreeGrid How To

+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY
yFxYUBwMhFSE1ATY1NCYiBlEqE1SGLzQs/QEr/qEBCSZLX0ACPhA1Qyowhkn+jSorAYc8LzpENAA
AAAEAGv/0AaACvAAYAAATIRUHMzIWFAYjIiYnNxYWMzI2NCYnIxMjSQEfrA9ZfHxZNl4dJhdJK0h
gYEJnx+gCvCj3fLF8MywYIihkil8DAR4AAQAaAAAB0AK8AA0AABMzAzMRMxEzByMRIxEh1S+d8y1
JDzot/sACvP7hAR/+4Sz+jwFxAAEAGv/0AaACvAAXAAATIRUjBzMyFhQGIyImJzcWFjMyNjQmIyN
fAQniGV5ZfHxZNl4dJRZLK0dhYEiPArwt8nyxfDMsGCIoY4pjAAACABr/9AHDArwAGAAiAAABMxU
jIgcGBhUVNjYzMhYUBiImNRE0NzY2AxUUFjI2NCYiBgEOIydLOh0iGFs1WXx9sHwyG2SFYoxjYox
hArwtLhdRNYYvMHyxfHxZAQRTSCUv/hQHR2JijWJdAAABABoAAAGkArwABgAAEyEVASMBIRoBiv6
0MQFJ/qoCvC39cQKPAAAAAwAa//QBwALFAAgAHgAmAAATBgYUFjI2NCYnJiY1NDYyFhUUBgcWFhU
UBiImNTQ2EgYUFhY2NCboRF1gjGBimicvZJJlLyk4RHqyekRZTExqT0sBawJfil9fil8bFVAtSmV
lSi5PFhhpPFh6elg+ZwEvTWxJAUluTAAAAAIAGgAAAcMCxQAWACAAADMjNTMyNjU1BgYjIiY0NjI
WFREUBwYGEzU0JiIGFBYyNs8jJ091GFs1WXx8sXwzGmSFYo1iYoxgLWRmgy8vfLB9fFn+/lNHJi4
B6QdHYmOMYl0AAAACABoAbwBRAaEABwAPAAA2MhYUBiImNBIyFhQGIiY0KhYRERYQEBYRERYQphA
WEREWAQsQFhERFgAAAAACABr/rQB6ASwABwAVAAASMhYUBiImNBMnJjY2MhYWFRQHJzY2URYRERY
QFwcRAQ8MDBJAIBYfASwQFhERFv7jAgofDgETCzc1FwweAAAAAAEAGgBQAU8CfQAGAAABFwcXBwE
1ATAf+fkf/uoCfR/49x8BFgEAAAACABoBCAFaAZ0AAwAHAAATIRUhFSEVIRoBQP7AAUD+wAGdLD0
sAAAAAQAaAFABTwJ9AAYAABM3ARUBJzcaHwEW/uof+QJeH/7qAf7qH/cAAAIAGgAAAXwCxQAdACU
AABMjNDYzMhcWFRQHDgMVFSM1ND4CNzY1NCYiBhIyFhQGIiY0Ry1dVTQqUiUTOB8ZKRwjNQ0hTG5
MbRYRERYRAhRLZhszXj42GzkhSDQ9VS5KJzgSNDA3SkX94hAWEREWAAACABr/vgKtAkMANwBCAAA
lIic1NDc2MzIXJicmIyIGFRUUFjMyMzI2NTU0NzY3FwYVFxQGBwYiJjU1NDc2MzIXFhUXFScRBhM
mIyIGFRUWMzI3AUKiC1ghJk1lBCwsTGqNjW0CAnugDRIhDSIBPTJk9KtZTXyENiAlJYhbX10uPgG
MQ1g2lmVvIQwwPSAgXWeYaWtjVb9PFBsMHw832z9gGjR/fZt7PjVHK0MQKRD+9iUBPi85PGFvHwA
AAAIADAAAAgUCvAAHAAoAABMzEyMDIwMjEwMz8irpMFbwVC/7atYCvP1EAQD/AAJz/rkAAAADAE4
AAAH/ArwAEQAZACEAABMzMhYUBwYVFRYWFRQHBgYjIxMVMzI2NCYjAxEzMjU0JiNO3VJeSAEvPik
VUzrmLbk1REpAqLedUj4CvFSwKwEBARRbSlA7ICYCkfQ+ezv+4P66qkhUAAEAQv/2AasCxgAdAAA
lBiMiLgI1ETQ2NzYzMhcHJiMiBwYGFREUFxYyNwGrVU0QQUktKywtPk5ADjo5UCkRGE8fa1kXIQY
nVT8BQUxOGxkhIBgoEDwo/rhrIg0eAAAAAAIATgAAAfICvQAIABMAABMzMhYVERQjIxMRMzI3NjU
RNCYjTrxxd9TQLZVCM0BpSAK9fGf+7sgCk/2WGB5mARpbWQAAAQBOAAABnAK8AAsAABMhFSEVMwc
jESEVIU4BTv7fyg+7AR/+tAK8KvUs/rgpAAAAAQBOAAABnAK8AAkAABMhFSEVMwcjESNOAU7+37Y
Toy0CvCv0LP6PAAEAQf/2AdwCxQAdAAATERQWMjY1NSMnMxEjJwYjIiY1ETQ3NjMyFwcmJyJuXJZ
RTxCKIgoxa1h7Vy0+TUENOTanAfv+wEdTVkJHLP7UN0FkYwE6gDUZISAYAQAAAQBOAAAB/AK8AAs
AABMzESERMxEjESERI04tAVQtLf6sLQK8/uEBH/1EAXH+jwAAAQAdAAAAkgK8AAUAABMzESMRJx1
1LUgCvP1EApICAAAB//7/2wCAArwACgAAEzMRFAcnNjY1EScLdXcLIzJIArz9u5YGHwI4PwIfAgA
AAAABAE8AAAHcAr0ACwAAEzMREzMDASMDBxEjTy34NNEBBTXsPy0Cvf6gAWD+1/5sAWpa/vAAAQB

Copyright © 2001 -2024 Syncfusion Inc. 1268


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1269


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1270


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1271


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1272


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1273


TreeGrid How To

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
nBxcHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWF3SUjiBvdOIQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAwCRI2NIG9vQCYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPBwAAAAABACT/LgGMAgE
ANQAAAQcmJgYVFB4DFAYHBzYyFhQGIic3FjI2NCcmIgcHJzcmJiczFhYyNjQuAicmNDYzMhYXAUs
QJnBIRVdXPFRRHQ47M0paNBQjSi0ZCx8VJA4ySlQCKwZPbU46VlYhJ09bHzgMAeQmGgEyKikrGh9
BbE8DKAglVSkTKxgaNAsFCA8XQAZQNy81MlUyGxwcIWNWDwcAAgAl//UCAAO9ACIAKAAANzMWFjI
2NTQuBDU0NjMyFwcmIgYVFB4EFRQGIiYTNxc3FwclLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11531
zH3RwH46yOFpKUS9DIicmSjRGZh4rHUQ/KDsfJylQN1xtcwM1IG9vII0AAgBO//EBtgL8ACAAJgA
AAQcmJgYVFB4DFAYiJiczFhYyNjQuAicmNDYzMhYXJzcXNxcHAXUQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAzbH3RwH44B5CYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPB/Egb28gjQAAAAIAAP9

Copyright © 2001 -2024 Syncfusion Inc. 1274


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1275


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1276


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1277


TreeGrid How To

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
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB

Copyright © 2001 -2024 Syncfusion Inc. 1278


TreeGrid How To

tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF

Copyright © 2001 -2024 Syncfusion Inc. 1279


TreeGrid How To

fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA

Copyright © 2001 -2024 Syncfusion Inc. 1280


TreeGrid How To

GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Customize the icon for column menu in React Treegrid component
You can customize the column menu icon by overriding the default treegrid class .e-icons.e-
columnmenu with a custom property content as mentioned below,
`css
.e-treegrid .e-columnheader .e-icons.e-columnmenu::before {
content: "\e903";
}
`
In the below sample, treegrid is rendered with a customized column menu icon.
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, ColumnMenu,
Inject } from '@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
return (<div>
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' showColumnMenu={true}
height={315}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right'/>
<ColumnDirective field='EndDate' headerText='End Date' width='90'
format='yMd' textAlign='Right'/>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right'/>
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right'/>

Copyright © 2001 -2024 Syncfusion Inc. 1281


TreeGrid How To

</ColumnsDirective>
<Inject services={[ColumnMenu]}/>
</TreeGridComponent>
</div>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, ColumnMenu,
Inject } from '@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
return (<div>
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' showColumnMenu={true}
height={315}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right'></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='90' format='yMd' textAlign='Right' />
<ColumnDirective field='EndDate' headerText='End Date' width='90'
format='yMd' textAlign='Right' />
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' />
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[ColumnMenu]} />
</TreeGridComponent>
</div>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1282


TreeGrid How To

endDate: new Date('02/07/2017'), duration: 5, progress: 100,


priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,

Copyright © 2001 -2024 Syncfusion Inc. 1283


TreeGrid How To

subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{

Copyright © 2001 -2024 Syncfusion Inc. 1284


TreeGrid How To

taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1285


TreeGrid How To

endDate: new Date('02/19/2017'), duration:


3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',

Copyright © 2001 -2024 Syncfusion Inc. 1286


TreeGrid How To

'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5


},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH

Copyright © 2001 -2024 Syncfusion Inc. 1287


TreeGrid How To

0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE

Copyright © 2001 -2024 Syncfusion Inc. 1288


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1289


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1290


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1291


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1292


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1293


TreeGrid How To

OVEM5QAEUIG9vII0AAAIAQf/2AdwDkQAdACMAABMRFBYyNjU1IyczESMnBiMiJjURNDc2MzIXByY
nIjc3FwcnB25cllFPEIoiCjFrWHtXLT5NQQ05NqcYlI4gb3QB+/7AR1NWQkcs/tQ3QWRjATqANRk
hIBgBZ42NIG9vAAADAE7/LgHHAtEABQAYACQAABM3FwcnBwUnMxEUBgcnNjU1BiImNTU0NjIHFRQ
WMjY1NSYmIgZ+lI4gb3QBAAMtMjkMSi+7Ymi59Et8WAZScFcCRI2NIG9vazz9yzxEEiMcVIBNYFy
VWGG+mUJHR0S5OzhFAAIAQf/2AdwDTgAdAC0AABMRFBYyNjU1IyczESMnBiMiJjURNDc2MzIXByY
nIjczFRQWMjY1NTMVFAYiJjVuXJZRTxCKIgoxa1h7Vy0+TUENOTanNSYrQCsmQ1xDAfv+wEdTVkJ
HLP7UN0FkYwE6gDUZISAYAbEFHi4uHgUFL0JCLwAAAAMATv8uAccCigAPACIALgAAEzMVFBYyNjU
1MxUUBiImNRcnMxEUBgcnNjU1BiImNTU0NjIHFRQWMjY1NSYmIgapJipBKyZDXEP0Ay0yOQxKL7t
iaLn0S3xYBlJwVwKKBR4uLh4FBS9CQi/MPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAACAEr
/+QHvAxwAEwAbAAATMxEUFjI2NREzERQOAiIuAjUSNDYyFhQGIkotYohhLSU/RlBHPyW+ERYQEBY
Cvf33RkxMRgIJ/f01TioUFCpONQI8FhAQFhEAAwBO/y4BxwJcAAcAGgAmAAASNDYyFhQGIhcnMxE
UBgcnNjU1BiImNTU0NjIHFRQWMjY1NSYmIgb7ERYQEBaRAy0yOQxKL7tiaLn0S3xYBlJwVwI2FhA
QFhFsPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAAAAgBB/0gB3ALFAB0AKwAAExEUFjI2NTU
jJzMRIycGIyImNRE0NzYzMhcHJiciEycmNjYyFhYVFAcnNjZuXJZRTxCKIgoxa1h7Vy0+TUENOTa
nnwcRAQ8MDBJAIBYfAfv+wEdTVkJHLP7UN0FkYwE6gDUZISAYAfz9AgofDgETCzc1FwweAAAAAAM
ATv8uAccCswASAB4ALAAAASczERQGByc2NTUGIiY1NTQ2MgcVFBYyNjU1JiYiBjcXFgYGIiYmNTQ
3FwYGAZ0DLTI5DEovu2JoufRLfFgGUnBXjgcRAQ8MDBJAIBYfAbk8/cs8RBIjHFSATWBclVhhvpl
CR0dEuTs4RdECCh8OARMLNzUXDB4AAAAAAgBOAAAB/AORAAsAEQAAEzMRIREzESMRIREjEzcXByc
HTi0BVC0t/qwtR5SOIG90Arz+4QEf/UQBcf6PAwSNjSBvbwACAB8AAAIHA5QABQAYAAATNxcHJwc
TESMRMxU2MzIXFhURIxE0JyYiH5SOIG90hS0tOFc5J1UsHiSWAweNjSBvb/7L/k4CvOIjEydp/qY
BWDcfJwACAE4AAAJdArwAEwAXAAATMzUzFSE1MxUzFSMRIxEhESMRIxchNSFOMS0BVC0wMC3+rC0
xXgFU/qwCGqKioqIs/hIBcf6PAe5RUQAAAQBOAAAB/QK8ABoAABMRIxEjNTM1MxUzFSMVNjMyFxY
VESMRNCcmIrktPj4tf384VzknVSweJJYBsv5OAj0sU1MsYyMTJ2n+pgFYNx8nAAACAE4AAAGYAzs
ABQAXAAATMxEjESc3IgcnNjMyFxYzMjcXBiMiJiajdS1IDSojFS81GEQXGCgfFCsxFC8xArz9RAK
SAnkmIDQfCyIhLxQWAAIATgAAAZgCdAARABUAABMiByc2MzIXFjMyNxcGIyImJhczESOwKiMVLzU
YRBcYKB8UKzEULzERLS0CRiYgNB8LIiEvFBZR/gsAAAACAE4AAAEmAxQABQAJAAATMxEjEScnMxU
jenUtSCzY2AK8/UQCkgKALgAAAAIATgAAAScCVAADAAcAABMzFSMXMxEjTtnZWi0tAlQuMf4LAAE
ATv8rAQsCvAAWAAAzBhUUFjMyNxcGIyInJjU0NzMRJzUzEd5nGhcqGh8gQRoWLGACSHVSLxIbKh8
yCxUzQz8CkgIo/UQAAAL/+v8rALcCxgAUABwAADMGFRQWMzI3FwYjIicmNTQ3MxEzEQI0NjIWFAY
iimcaFyoaHyBBGhYsYAItMhEWEBAWUi8SGyofMgsVM0M/AfX+CwKgFhAQFhEAAAAAAgBOAAAAyAM
dAAUADQAAEzMRIxEnNjQ2MhYUBiJOdS1IQxEWEBAWArz9RAKSAmMWEBAWEQAAAAABACkAAABWAfU
AAwAAEzMRIyktLQH1/gsAAAAAAv/+/9sA4ANOAAoAGgAAEzMRFAcnNjY1EScnMxUUFjI2NTUzFRQ
GIiY1FXV3CyMySBcmKkErJkJeQgK8/buWBh8COD8CHwK6BR4uLh4FBS9CQi8AAgBO/y8BcALRAAU
AEwAAEzcXBycHFzMRBgYHJzI2NzY1ESdOlI4gb3QRdgI9NwYIIgocNgJEjY0gb28v/b42SwMjEAs
dNgIJAgAAAAIAT/9IAdwCvQALABkAABMzERMzAwEjAwcRIxcnJjY2MhYWFRQHJzY2Ty34NNEBBTX
sPy2zBxEBDwwMEkAgFh8Cvf6gAWD+1/5sAWpa/vBmAgofDgETCzc1FwweAAAAAAIAQ/9IAbICvAA
MABoAABMzETcXBxYXIwMHESMXJyY2NjIWFhUUByc2NkMt0yCRRZs2ykItpwcRAQ8MDBJAIBYfArz
+icMfgXP1AUw7/u9mAgofDgETCzc1FwweAAAAAAEATv//AcACAAAQAAATFxU3MwcXFjMXJiYnJwc
VI04t4zy9fzkpAixAJnBDLQIAC/j4zrNNKAE2NJtFwAAAAAACAE4AAAG3A2cABQAPAAATMxEhFSE
TNzYzMhcWFAcHTi0BPP6XAzQJERgFAgVEArz9bSkC2nkUEwUMB2IAAAAAAgBRAAAAxANrAAMADQA
AEzMRIxM3NjMyFxYUBwdRLS0GNAkRGAUCBUQCvP1EAt55FBMFDAdiAAACAE7/SAG3ArwABQATAAA
TMxEhFSEXJyY2NjIWFhUUByc2Nk4tATz+l78HEQEPDAwSQCAWHwK8/W0pZgIKHw4BEws3NRcMHgA
CAE7/SACuArwAAwARAAATMxEjFycmNjYyFhYVFAcnNjZ3LS0VBxEBDwwMEkAgFh8CvP1EZgIKHw4
BEws3NRcMHgAAAAL/3gAAAb4DiwAFAAsAABMzESEVIQM3FzcXB1UtATz+l3cfdHAfjgK8/W0pA2s
gb28gjQAC/9oAAAD8A4sAAwAJAAATMxEjAzcXNxcHVC0teh90cB+OArz9RANrIG9vII0AAAABAE4
AAAIyArwADQAAEzMRNxcHESEVIREHJzfJLXsSjQE8/pdqEXsCvP71OChA/qgpAW0vKDcAAAEATgA
AAYMCvAANAAATMxE3FwcRIxEHJzc1J4p1chKELXMRhEgCvP75NCg8/nsBcTMoO/ECAAAAAgBOAAA
COgNnAAkAEwAAEzMBETMRIwERIxM3NjMyFxYUBwdOLQGTLCz+bS3INAkRGAYBBUQCvP2WAmr9RAJ
r/ZUC2nkUEwUMB2IAAAIATgAAAb8CpwAUAB4AAAEiBxEjETMVNjMyFxYVESMRNCYnJic3NjMyFxY
UBwcBCE4/LS04VzknVSw9LBEyNAkRGAUCBUQB1CL+TgH1GyMTJ2n+pgFYNj8FAkZ5FBMFDAdiAAA
CAE7/SAI6ArwACQAXAAATMwERMxEjAREjBScmNjYyFhYVFAcnNjZOLQGTLCz+bS0BCAcRAQ8MDBJ
AIBYfArz9lgJq/UQCa/2VZgIKHw4BEws3NRcMHgAAAgBA/0gBsQH9ABQAIgAAEyIHESMRMxU2MzI
XFhURIxE0JicmAycmNjYyFhYVFAcnNjb6Tj8tLThXOSdVLD0sERUHEQEPDAwSQCAWHwHUIv5OAfU
bIxMnaf6mAVg2PwUC/cYCCh8OARMLNzUXDB4AAAIATgAAAjoDiwAJAA8AABMzAREzESMBESMTNxc
3FwdOLQGTLCz+bS1qH3RwH44CvP2WAmr9RAJr/ZUDayBvbyCNAAAAAgBOAAABvwL9ABQAGgAAASI
HESMRMxU2MzIXFhURIxE0JicmAzcXNxcHAQhOPy0tOFc5J1UsPSwRlh90cB+OAdQi/k4B9RsjEyd
p/qYBWDY/BQIBCSBvbyCNAAABAE7/2wI7ArwAFQAAATMRFAcmJzY3JgMRIxEzFgAXNjURJwHFdng

Copyright © 2001 -2024 Syncfusion Inc. 1294


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1295


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1296


TreeGrid How To

tSAK8/UQCkgIAAAEATgAAAdsCvQALAAATMxETMwMBIwMHESNOLfg00QEFNew/LQK9/qABYP7X/mw
Balr+8AABAAwAAAIFArwABgAAEzMTIwMDI/Er6TDPyy8CvP1EAnb9igABAFAAAAJoArwADAAAEzM
TEzMRIxEDIwMRI1At3uAtLcgwxi0CvP2JAnf9RAI5/ccCOf3HAAAAAAEAUAAAAjwCvAAJAAATMwE
RMxEjAREjUC0Bkyws/m0tArz9lgJq/UQCa/2VAAAAAAMATgAAAksCvAADAAwAFQAAEyEVIRMhByE
iByc2NgMhMjcXBgYjIc0BCP74EgFFEf7MVBojEEYeATRTGiQQRjv+uwGdLAFLKkwNODH9bk0NODI
AAAIAPv/1AeICzAALABcAADcRNDYyFhURFAYiJhMRFBYyNjURNCYiBj5xxm17rH0tX45eWZpYuQF
CZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUgAAAQBQAAAB/gK8AAcAABMhESMRIREjUAGuLf6sLQK8/UQ
Cj/1xAAAAAAIATgAAAgACvAALABgAABMRMzI2Njc2NTQmIyczMhYVFAcGBiMjESN7yig4HAgKSET
59l9dLRNJMsotApH+mx0lHSQ3U1grdGJ6NhYg/wAAAQBOAAACIgK8AA4AABMhByETAzMyNxcGBiM
hE14BrA/+tbbN8FwZJBBGO/694gK8Kv7w/qhNDTgyAYAAAQBOAAAB4AK8AAcAABMhFSMRIxEjTgG
StS2wArwp/W0CkwAAAQA8//kB+AK8ABgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjU8LWKXXgo
uaQsyDgYbYixqewK8/UxSOzUBK/3djhIfEzEZI5wgH2lnAAACAE7/3gJdAscAHQAoAAATFwYVERQ
WMzMRNjYzMhYVERQGIyMVJzUjIiY1ETQhIhURMzI2NRE0JsIXXk1CMgI4L1VjXV83LjJfXQFfQzl
CS1QCwiQaf/7SR0kCFjI4bVv+4ltoQAs1aFsBJJhJ/fRKRQEySkoAAAABAE4AAAJJArwACwAAEzM
TEzMDEwcDAyMTYTK5uTTS4jfGxjjjArz+0wEt/qj+nQEBNv7KAWQAAAEALAAAAjsCxQAjAAATMxE
UFjMzETMRMzI2NTU0JiYnNx4CFRUUBiMjFSM1IyImNSwtTkEyLjdDTBEMEyUbGgNdXzcuMl9dArz
+00pIAb/+QUtHpSs4DhMNETsqKo9bZ9TUZ1sAAAAAAwAjAAAA+QMcAAUADQAVAAATMxEjESc2MhY
UBiImNDYyFhQGIiY0L3UtSAUWEREWEa8WEREWEAK8/UQCkgKIERYQEBYREBYRERYAAAMAAAAAAdg
DGgAIABAAGAAAETMTEzMDESMRAjIWFAYiJjQ2MhYUBiImNDO4ujPWLUkWEREWEa8WEREWEAK8/s0
BM/6a/qoBVQHFERYQEBYREBYRERYAAAADAE7//AHWAqcAFgAiACwAABMyFzcXBhURFhcHIiYGIic
mNTU0Njc2FyYjIgYVFRQXMjI3Azc2MzIXFhQHB99ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBR6E
0CREYBQIFRAH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAHueRQTBQwHYgAAAAIATv/2Aac
CpwAIAC0AABM3NjMyFxYPAjQ3NjIXFSYiBgcGFBYzMwcjIgYUFjMyNjc3FwYiJyY1NDcmJuE0CRE
YBQQHRKI0Kmg4LEMzFxcnKX8PZjE/RkAkTRQUDU6pLjRRHCACGnkUEw4KYphBIRsPKg8HFBRDNiw
4az4QCAkpIiguS2QeCkAAAAAAAgBO/y0BvwKnAAgAHQAAEzc2MzIXFg8CIgcRIxEzFTYzMhcWFRE
nETQmJyb5NAkRGAUEB0QVTj8tLThXOSdVLD0sEQIaeRQTDgpiRiL+TgH1GyMTJ2n90xQCFzY/BQI
AAgBRAAAAwgKnAAkADQAAEzc2MzIXFhQPAjMRI1U0CREYBQIFRCgtLQIaeRQTBQwHYiX+CwAAAAA
EAE7/9gHKAvYACwAUABwAJAAAEzMRFCA1ETMRFCA1Ezc2MzIXFgcHJjIWFAYiJjQ2MhYUBiImNE4
tASIt/oSsNAkRGAYDB0RqFhERFhCvFhERFhAB9f6whoYBUP63trYBvXkUFA0KYhEQFhERFhAQFhE
RFgAAAAACAE7//AHWAfsAFgAiAAATMhc3FwYVERYXByImBiInJjU1NDY3NhcmIyIGFRUUFzIyN99
ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBRwH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAA
DAE7/XwHAAr0AEAAeACoAABI2MhYUBxYWFRUUIyInFSMRFyIHERYyNjY1NTQmJyYnFTY3Njc2NCc
mIyJORYBDKEFR2jI5LbxRPTpZUzI/Lg+cKFMjCgMOFSpeAmZXS2MgCFlEuKUKmAK6UyD+egsROi+
4OkAEAVRLFRcKJQwkFiEAAAABABX/OgHjAf8AGwAAEzMTFhYXEzY2NxcGBgcDBhQXByY1NDc3LgI
nFS5qDSIdahAoKR8jIhJ9FgwfHAoWHBgnDgH1/pcuMQkBYDQ6DRsRJDf+XkIuEhobKBgdSQ8ROS0
AAAAAAgBO//YBwwLBABsAKAAAEyY1NDYzMwcjIgcGFRQXFhcWFRUUIyImNTU0NgcVFBYzMjU1NCY
nBgbcLDs7LBIhIxIMMnQeIblfXUseUD+MRkZCTQH5JjgnQykaEBA3HkkuND9nwmdbflBltYVLR5J
8KmAhBlAAAAAAAQBO//YBpwH/ACQAABM0NzYyFxUmIgYHBhQWMzMHIyIGFBYzMjY3NxcGIicmNTQ
3JiZjNCpoOCxDMxcXJyl/D2YxP0ZAJE0UFA1OqS40URwgAYJBIRsPKg8HFBRDNiw4az4QCAkpIig
uS2QeCkAAAAEATv8vAa8CvAAXAAATIRcGBwYVFBYyNxUHNQYiJyY1NDc2NyOSARANO0quUYBKLTF
lLFokSrLcArwoL1XGkkhGFPoV2gwXMG1US5uqAAAAAQBO/y0BvwH9ABQAAAEiBxEjETMVNjMyFxY
VEScRNCYnJgEITj8tLThXOSdVLD0sEQHUIv5OAfUbIxMnaf3TFAIXNj8FAgAAAwA+//oBugLGABA
AHQAqAAA3NTY3JjU0NjMWFhURFAYmJjcVFBYyNjURJiIOAjc2MzIXNCYjIgcGFRQ+AjQiXUtfYWO
3Yi1SfVMMKFBeQDFYfA8OUUEtHi+/j0IlQjpBVAJsX/7GWWwBa+iSR1BRQwEVAQodN1kxAVNOEx1
AMAABADYAAABjAfUAAwAAEzMRIzYtLQH1/gsAAAAAAQBO//8BwAIAABAAABMXFTczBxcWMxcmJic
nBxUjTi3jPL1/OSkCLEAmcEMtAgAL+PjOs00oATY0m0XAAAAAAAEATv/2Ah0CvAAjAAATNTIzMhY
XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U

Copyright © 2001 -2024 Syncfusion Inc. 1297


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1298


TreeGrid How To

CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA

Copyright © 2001 -2024 Syncfusion Inc. 1299


TreeGrid How To

hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH

Copyright © 2001 -2024 Syncfusion Inc. 1300


TreeGrid How To

/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX

Copyright © 2001 -2024 Syncfusion Inc. 1301


TreeGrid How To

export let sampleData: Object[] = [


{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1302


TreeGrid How To

endDate: new Date('02/14/2017'), duration: 0, progress: 0,


priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }

Copyright © 2001 -2024 Syncfusion Inc. 1303


TreeGrid How To

]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,

Copyright © 2001 -2024 Syncfusion Inc. 1304


TreeGrid How To

progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },

Copyright © 2001 -2024 Syncfusion Inc. 1305


TreeGrid How To

{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new


Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4

Copyright © 2001 -2024 Syncfusion Inc. 1306


TreeGrid How To

B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+

Copyright © 2001 -2024 Syncfusion Inc. 1307


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1308


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1309


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1310


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1311


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1312


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1313


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1314


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1315


TreeGrid How To

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
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE

Copyright © 2001 -2024 Syncfusion Inc. 1316


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1317


TreeGrid How To

z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ

Copyright © 2001 -2024 Syncfusion Inc. 1318


TreeGrid How To

ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9

Copyright © 2001 -2024 Syncfusion Inc. 1319


TreeGrid How To

0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

Copyright © 2001 -2024 Syncfusion Inc. 1320


TreeGrid How To

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Customize the edit dialog in React Treegrid component
You can customize the appearance of the edit dialog in the actionComplete event based on requestType
as beginEdit or add.
In the below example, we have changed the dialog's header text for editing and adding records.
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { getValue } from '@syncfusion/ej2-base';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const editOptions = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Dialog' };
const toolbarOptions = ['Add', 'Edit', 'Delete'];
const actionComplete = (args) => {
if ((args.requestType === 'beginEdit' || args.requestType ===
'add')) {
const dialog = args.dialog;
dialog.height = 400;
// change the header of the dialog
dialog.header = args.requestType === 'beginEdit' ?
'Record of ' + getValue('TaskName', args.rowData) : 'New
Customer';
}
};
return (<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID'
actionComplete={actionComplete} editSettings={editOptions}
toolbar={toolbarOptions} height={265}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right'/>
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>);
}
;
export default App;

APP.TSX
import * as React from 'react';

Copyright © 2001 -2024 Syncfusion Inc. 1321


TreeGrid How To

import { projectData } from './datasource';


import { getValue } from '@syncfusion/ej2-base';
import { Dialog } from '@syncfusion/ej2-popups';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar, ToolbarItems, EditSettingsModel } from
'@syncfusion/ej2-react-treegrid';
import { DialogEditEventArgs } from '@syncfusion/ej2-react-grids';
/* tslint:disable */
function App() {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding:
true, allowDeleting: true, mode: 'Dialog' };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete'];
const actionComplete = (args: DialogEditEventArgs): void => {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
const dialog: Dialog = args.dialog as Dialog;
dialog.height = 400;
// change the header of the dialog
dialog.header = args.requestType === 'beginEdit' ?
'Record of ' + getValue('TaskName', args.rowData) : 'New Customer';
}
}
return (
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID'
actionComplete={actionComplete} editSettings={editOptions}
toolbar={toolbarOptions} height={265}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' />
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar]} />
</TreeGridComponent>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1322


TreeGrid How To

{ taskID: 2, taskName: 'Plan timeline', startDate: new


Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,

Copyright © 2001 -2024 Syncfusion Inc. 1323


TreeGrid How To

duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,

Copyright © 2001 -2024 Syncfusion Inc. 1324


TreeGrid How To

progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1325


TreeGrid How To

{ taskID: 31, taskName: 'Development Task 1',


startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},

Copyright © 2001 -2024 Syncfusion Inc. 1326


TreeGrid How To

{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new


Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let stackedData = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.00',
price: 65.95,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', shipMentCategory:
'Frozen seafood', units: '35',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.56', price: 43.96 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', shipMentCategory:
'Frozen seafood', units: '324',
orderDate: new Date('05/03/2017'), shippedDate: new
Date('05/10/2017'), unitPrice: '28.26', price: 91.24 },
{ orderID: '1.3', orderName: 'Herrings', shipMentCategory:
'Frozen seafood', units: '48',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.35', price: 54.48 },
{ orderID: '1.4', orderName: 'Preserved Olives',
shipMentCategory: 'Edible', units: '125',

Copyright © 2001 -2024 Syncfusion Inc. 1327


TreeGrid How To

orderDate: new Date('06/10/2017'), shippedDate: new


Date('06/17/2017'), unitPrice: '29.23', price: 36.75 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen',
shipMentCategory: 'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2017'), unitPrice: '47.17', price: 10.91 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 26.78,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', shipMentCategory:
'Frozen Seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.25', price: 42.45 },
{ orderID: '2.2', orderName: 'White Shrimp', shipMentCategory:
'Frozen seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '72.45', price: 36.25 },
{ orderID: '2.3', orderName: 'Fresh Cheese', shipMentCategory:
'Dairy', units: '323', unitPrice: 12.45,
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 40.35 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese',
shipMentCategory: 'Dairy', units: '370', unitPrice: 15.36,
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 56.82 },
{ orderID: '2.5', orderName: 'Butter', shipMentCategory:
'Dairy', units: '413', unitPrice: '19.35',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 79.55 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.34',
price: 37.48,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', shipMentCategory:
'Solid crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '46.45', price: 25.79 },
{ orderID: '3.2', orderName: 'Pharmaceutical', shipMentCategory:
'Solid crystals',

Copyright © 2001 -2024 Syncfusion Inc. 1328


TreeGrid How To

orderDate: new Date('04/19/2018'), shippedDate: new


Date('04/26/2018'), units: '324', unitPrice: '11.56', price: 37.44 },
{ orderID: '3.3', orderName: 'Glass beads', shipMentCategory:
'Solid crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.25', price: 41.25 }
]
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4

Copyright © 2001 -2024 Syncfusion Inc. 1329


TreeGrid How To

ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY
yFxYUBwMhFSE1ATY1NCYiBlEqE1SGLzQs/QEr/qEBCSZLX0ACPhA1Qyowhkn+jSorAYc8LzpENAA
AAAEAGv/0AaACvAAYAAATIRUHMzIWFAYjIiYnNxYWMzI2NCYnIxMjSQEfrA9ZfHxZNl4dJhdJK0h
gYEJnx+gCvCj3fLF8MywYIihkil8DAR4AAQAaAAAB0AK8AA0AABMzAzMRMxEzByMRIxEh1S+d8y1
JDzot/sACvP7hAR/+4Sz+jwFxAAEAGv/0AaACvAAXAAATIRUjBzMyFhQGIyImJzcWFjMyNjQmIyN
fAQniGV5ZfHxZNl4dJRZLK0dhYEiPArwt8nyxfDMsGCIoY4pjAAACABr/9AHDArwAGAAiAAABMxU
jIgcGBhUVNjYzMhYUBiImNRE0NzY2AxUUFjI2NCYiBgEOIydLOh0iGFs1WXx9sHwyG2SFYoxjYox
hArwtLhdRNYYvMHyxfHxZAQRTSCUv/hQHR2JijWJdAAABABoAAAGkArwABgAAEyEVASMBIRoBiv6
0MQFJ/qoCvC39cQKPAAAAAwAa//QBwALFAAgAHgAmAAATBgYUFjI2NCYnJiY1NDYyFhUUBgcWFhU
UBiImNTQ2EgYUFhY2NCboRF1gjGBimicvZJJlLyk4RHqyekRZTExqT0sBawJfil9fil8bFVAtSmV
lSi5PFhhpPFh6elg+ZwEvTWxJAUluTAAAAAIAGgAAAcMCxQAWACAAADMjNTMyNjU1BgYjIiY0NjI
WFREUBwYGEzU0JiIGFBYyNs8jJ091GFs1WXx8sXwzGmSFYo1iYoxgLWRmgy8vfLB9fFn+/lNHJi4
B6QdHYmOMYl0AAAACABoAbwBRAaEABwAPAAA2MhYUBiImNBIyFhQGIiY0KhYRERYQEBYRERYQphA
WEREWAQsQFhERFgAAAAACABr/rQB6ASwABwAVAAASMhYUBiImNBMnJjY2MhYWFRQHJzY2URYRERY

Copyright © 2001 -2024 Syncfusion Inc. 1330


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1331


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1332


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1333


TreeGrid How To

CFxYVEQYDFRQWFxYyNxEmJyIjIgYSFBYyNjQmIgEp20YkJXpLRVwCAyw8Ql5CJyUzGQYJaO0vKS9
tNFNiBQQrP0AsPiwsPgqzU2MiETg5RgRBWkNDYSIIIiIdJzv+1goBA1cwPgoNCQEPLgY1ATZAKyt
AKwAAAAMATv/0AwsB/gAkADMAOwAABSI1NTQ3NjMyFzQmIyIjNzIXNjMyFhUVBRUUFjMyNxcGIic
VBgMVFBYXFjI3ESYnIiMiBiUVJTU0JiIGASnbRiQlektFXAIDA5EqLnNTXf7FSi9ITxJNrSlo7S8
pL200U2IFBCs/AVYBDlJtTwqzU2MiETg5RiROT1lPeBFIOTErIy8kGAoBA1cwPgoNCQEPLgY1H1o
OVEM5QAABACT/LgFmAf4ALgAAASYiBgYVFRQzMjcXBiInBzYyFhQGIic3FjI2NCcmIgcHJzcmJyY
mNTU0NzYzMhcBVzpaQy+gMToKPUkQIQ47M0paNBQjSi0ZDB4VJA45Ego7NRwwbkJEAbsaF0s5kYw
OJRABLgglVSkTKxgaNAsFCA8XSQMEFFNLgEcwUyAAAAMATv/0AbYCpgASABoAIwAAJQYjIjU1NDY
yFhUVBRUUFjMyNwEVJTU0JiIGNxcjJyY1NDMyAZ1NVK5lpl3+xUovSE/+8AEOUm1PbTUlQwUeEiM
vks1RWllPeBFIOTErAQ1aDlRDOUD7eWMHBh0AAAADAE7/9AG2AqcAEgAaACQAACUGIyI1NTQ2MhY
VFQUVFBYzMjcBFSU1NCYiBjc3NjMyFxYUBwcBnU1UrmWmXf7FSi9IT/7wAQ5SbU91NAkRGAYBBUQ
jL5LNUVpZT3gRSDkxKwENWg5UQzlAg3kUEwUMB2IAAAMATv/0AbYC0AASABoAIAAAJQYjIjU1NDY
yFhUVBRUUFjMyNwEVJTU0JiIGJzcXBycHAZ1NVK5lpl3+xUovSE/+8AEOUm1PEJSOIG90Iy+SzVF
aWU94EUg5MSsBDVoOVEM5QKyNjSBvbwAAAAIAI//0AYsB/gASABoAACUGIyI1NTQ2MhYVFQUVFBY
zMjcBFSU1NCYiBgFyTVSuZaZd/sVKL0hP/vABDlJtTyMvks1RWllPeBFIOTErAQ1aDlRDOUAAAAA
CAE4AAADDAqYACAAMAAATFyMnJjU0MzIXMxEjhjUlQwUeEhgtLQKSeWMHBh2x/gsAAAAAAgBRAAA
AwQKnAAkADQAAEzc2MzIXFhQPAjMRI1Q0CREYBgEFRCctLQIaeRQTBQwHYiX+CwAAAAAC/8QAAAD
mAtAABQAJAAADNxcHJwcXMxEjPJSOIG90XC0tAkONjSBvby7+CwAAAAAD/98AAAC1AlwAAwALABM
AABMzESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAA
CAE4AAAG/An4AFAAmAAABIgcRIxEzFTYzMhcWFREjETQmJyYnIgcnNjMyFxYzMjcXBiMiJiYBCE4
/LS04VzknVSw9LBFbKiMVLzUYRBcYKB8UKzEULzEB1CL+TgH1GyMTJ2n+pgFYNj8FAnwmIDQfCyI
hLxQWAAADAE7/9gHDAqYACwAXACAAADc1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBhMXIycmNTQzMk5
hsmJcul8tS4hITYBObDUlQwUeEriEX2VpW4RUbm/YjEBTUkGMTkxLAQZ5YwcGHQAAAwBO//YBwwK
nAAsAFwAhAAA3NTQ2MhYVFRQGIiY3FRQWMjY1NTQmIgY3NzYzMhcWFAcHTmGyYly6Xy1LiEhNgE5
0NAkRGAUCBUS4hF9laVuEVG5v2IxAU1JBjE5MS455FBMFDAdiAAADAE7/9gHDAtAACwAXAB0AADc
1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBic3FwcnB05hsmJcul8tS4hITYBOBJSOIG90uIRfZWlbhFR
ub9iMQFNSQYxOTEu3jY0gb28AAAADAE7/9gHDAn4ACwAXACkAADc1NDYyFhUVFAYiJjcVFBYyNjU
1NCYiBjciByc2MzIXFjMyNxcGIyImJk5hsmJcul8tS4hITYBOTCojFS81GEMYGCgfFCsxFS4xuIR
fZWlbhFRub9iMQFNSQYxOTEvEJiA0HwsiIS8UFgAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiI
mNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEhNgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAMATgDpAY0
CFgADAAsAEwAAEyEVIRYyFhQGIiY0EjIWFAYiJjROAT/+wZcWEREWEBAWEREWEAGYLEwQFhERFgE
GEBYRERYAAAMATv+OAc0CgwAVAB4AJwAAATMHFhUVFAYjIicHIzcmNTU0NjMyFwcVFBcTJiMiBgU
0JwMWMzI2NQGhLEg+XF0lIS8vN09hWzAp6DOkIChBTgEbIqEaHURIAoOsNWaEVG4KcoUzcoRfZRO
wjE0pAYsRS09HKP56CFJBAAACAE7/9QHDAqYAEAAZAAATMxEUMzI2NREzESM3BiMiNRMXIycmNTQ
zMk4tj0BMLSwDM128oDUlQwUeEgH1/rOKQ0IBUv4LO0a4AeV5YwcGHQAAAAACAE7/9QHDAqcAEAA
aAAATMxEUMzI2NREzESM3BiMiNRM3NjMyFxYUBwdOLY9ATC0sAzNdvKE0CREYBQIFRAH1/rOKQ0I
BUv4LO0a4AW15FBMFDAdiAAAAAgBO//UBwwLQABAAFgAAEzMRFDMyNjURMxEjNwYjIjUTNxcHJwd
OLY9ATC0sAzNdvCyUjiBvdAH1/rOKQ0IBUv4LO0a4AZaNjSBvbwAAAAABAE7/9QHDAfUAEAAAEzM
RFDMyNjURMxEjNwYjIjVOLY9ATC0sAzNdvAH1/rOKQ0IBUv4LO0a4AAIATv8uAeUCpwAcACYAABM
zERQWMjY1NTQ3NjcXBhURFAYHJzY1NQYjIiY1Ezc2MzIXFhQHB04rSYVSGg4XDSAwOQxKKG1YX54
0CREYBgEFRAH1/rFCR0dCyGMYDQgfEjr+MD1GEiMaVntIX10BankUEwUMB2IAAAIATgAAAccChAA
NABYAABMzFTYyFhQGIyImJxUjACYiBgcUFjI2Ti02tWFoUilUFS0BTFRzVgJRfVEChMtEbbNpKir
IAYtKSEhRVU8AAAAAAwBO/y4B5QJcABwAJAAsAAATMxEUFjI2NTU0NzY3FwYVERQGByc2NTUGIyI
mNRIyFhQGIiY0NjIWFAYiJjROK0mFUhoOFw0gMDkMSihtWF9nFhERFhGvFhERFhAB9f6xQkdHQsh
jGA0IHxI6/jA9RhIjGlZ7SF9dAawRFhAQFhEQFhERFgAAAAMADAAAAgUDFAAHAAoADgAAEzMTIwM
jAyMTAzMDMxUj8irpMFbwVC/7atbc2dkCvP1EAQD/AAJz/rkB6C4AAAADAE7/9gHPAlQAGgApAC0
AAAUiNTU0NzYzMhc0JiMiIzcyFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgYTMxUjASnbRiQlektFXAI
DA1EnFSASDAIDaO0vKS9tNFNiBQQrPy/Z2QqzU2MiETg5RiQTCxYkGxcjJv7WCgEDVzA+Cg0JAQ8
uBjUBIC4AAwAMAAACBQNQAAcACgAaAAATMxMjAyMDIxMDMwMzFRQWMjY1NTMVFAYiJjXyKukwVvB
UL/tq1tsmKkErJkJeQgK8/UQBAP8AAnP+uQIkBR4uLh4FBS9CQi8AAAADAE7/9gHPApAAGgApADk
AAAUiNTU0NzYzMhc0JiMiIzcyFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgYTMxUUFjI2NTUzFRQGIiY
1ASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrP0omKkErJkJeQgqzU2MiETg5RiQTCxY
kGxcjJv7WCgEDVzA+Cg0JAQ8uBjUBXAUeLi4eBQUvQkIvAAIATv8rAnMCvAAYABsAACEGFRQWMzI
3FwYjIicmNTQ3MwMjAyMTMxMDAzMCRmcaFyoaHyBBGhYsYAFW8FQv5irp/mrWUi8SGyofMgsVM0M
/AQD/AAK8/UQCc/65AAAAAAIAJf8rAdIB/QAtADsAAAUGIi4CNTU0NzYzMhc0JiMiIzcyFx4DFxY
VESMGFRQWMzI3FwYjIicmNTQDFRQWFxY3ESYnIiMiBgFsPEtcOylGJCV6S0VcAgMDUScVIBIMAgM
BZxoXKhofIEEaFizELyhad1NiBQQrPwUGDyRLNlNjIhE4OUYkEwsWJBsXIyb+1lIvEhsqHzILFTN

Copyright © 2001 -2024 Syncfusion Inc. 1334


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1335


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1336


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1337


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1338


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1339


TreeGrid How To

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
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc

Copyright © 2001 -2024 Syncfusion Inc. 1340


TreeGrid How To

uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN

Copyright © 2001 -2024 Syncfusion Inc. 1341


TreeGrid How To

jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/

Copyright © 2001 -2024 Syncfusion Inc. 1342


TreeGrid How To

gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 1343


TreeGrid How To

{ taskID: 4, taskName: 'Allocate resources', startDate: new


Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1344


TreeGrid How To

priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,

Copyright © 2001 -2024 Syncfusion Inc. 1345


TreeGrid How To

duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1346


TreeGrid How To

{ taskID: 33, taskName: 'Testing', startDate: new


Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },

Copyright © 2001 -2024 Syncfusion Inc. 1347


TreeGrid How To

{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new


Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let stackedData: Object[] = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.00',
price: 65.95,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', shipMentCategory:
'Frozen seafood', units: '35',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.56', price: 43.96},
{ orderID: '1.2', orderName: 'Yellowfin Tuna', shipMentCategory:
'Frozen seafood', units: '324',
orderDate: new Date('05/03/2017'), shippedDate: new
Date('05/10/2017'), unitPrice: '28.26', price: 91.24 },
{ orderID: '1.3', orderName: 'Herrings', shipMentCategory:
'Frozen seafood', units: '48',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.35', price: 54.48 },
{ orderID: '1.4', orderName: 'Preserved Olives',
shipMentCategory: 'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '29.23', price: 36.75},
{ orderID: '1.5', orderName: 'Sweet corn Frozen',
shipMentCategory: 'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2017'), unitPrice: '47.17', price: 10.91 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 26.78,
shipMentCategory: 'Seafood',
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1348


TreeGrid How To

{ orderID: '2.1', orderName: 'Tilapias', shipMentCategory:


'Frozen Seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.25', price: 42.45 },
{ orderID: '2.2', orderName: 'White Shrimp', shipMentCategory:
'Frozen seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '72.45', price: 36.25 },
{ orderID: '2.3', orderName: 'Fresh Cheese', shipMentCategory:
'Dairy', units: '323', unitPrice: 12.45,
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 40.35 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese',
shipMentCategory: 'Dairy', units: '370', unitPrice: 15.36,
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 56.82 },
{ orderID: '2.5', orderName: 'Butter', shipMentCategory:
'Dairy', units: '413', unitPrice: '19.35',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 79.55}
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.34',
price: 37.48,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', shipMentCategory:
'Solid crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '46.45', price: 25.79 },
{ orderID: '3.2', orderName: 'Pharmaceutical', shipMentCategory:
'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.56', price: 37.44 },
{ orderID: '3.3', orderName: 'Glass beads', shipMentCategory:
'Solid crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.25', price: 41.25 }
]
}
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA

Copyright © 2001 -2024 Syncfusion Inc. 1349


TreeGrid How To

BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo

Copyright © 2001 -2024 Syncfusion Inc. 1350


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1351


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1352


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1353


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1354


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1355


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1356


TreeGrid How To

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
0sjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXMCnI2NIG9vAAIATv/xAbYC0QAFACYAABM3Fwc
nBxcHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWF3SUjiBvdOIQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAwCRI2NIG9vQCYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPBwAAAAABACT/LgGMAgE
ANQAAAQcmJgYVFB4DFAYHBzYyFhQGIic3FjI2NCcmIgcHJzcmJiczFhYyNjQuAicmNDYzMhYXAUs
QJnBIRVdXPFRRHQ47M0paNBQjSi0ZCx8VJA4ySlQCKwZPbU46VlYhJ09bHzgMAeQmGgEyKikrGh9
BbE8DKAglVSkTKxgaNAsFCA8XQAZQNy81MlUyGxwcIWNWDwcAAgAl//UCAAO9ACIAKAAANzMWFjI
2NTQuBDU0NjMyFwcmIgYVFB4EFRQGIiYTNxc3FwclLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11531
zH3RwH46yOFpKUS9DIicmSjRGZh4rHUQ/KDsfJylQN1xtcwM1IG9vII0AAgBO//EBtgL8ACAAJgA
AAQcmJgYVFB4DFAYiJiczFhYyNjQuAicmNDYzMhYXJzcXNxcHAXUQJnBIRVdXPFmrYgIrBk9tTjp

Copyright © 2001 -2024 Syncfusion Inc. 1357


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1358


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1359


TreeGrid How To

lLFokSrLcArwoL1XGkkhGFPoV2gwXMG1US5uqAAAAAQBO/y0BvwH9ABQAAAEiBxEjETMVNjMyFxY
VEScRNCYnJgEITj8tLThXOSdVLD0sEQHUIv5OAfUbIxMnaf3TFAIXNj8FAgAAAwA+//oBugLGABA
AHQAqAAA3NTY3JjU0NjMWFhURFAYmJjcVFBYyNjURJiIOAjc2MzIXNCYjIgcGFRQ+AjQiXUtfYWO
3Yi1SfVMMKFBeQDFYfA8OUUEtHi+/j0IlQjpBVAJsX/7GWWwBa+iSR1BRQwEVAQodN1kxAVNOEx1
AMAABADYAAABjAfUAAwAAEzMRIzYtLQH1/gsAAAAAAQBO//8BwAIAABAAABMXFTczBxcWMxcmJic
nBxUjTi3jPL1/OSkCLEAmcEMtAgAL+PjOs00oATY0m0XAAAAAAAEATv/2Ah0CvAAjAAATNTIzMhY
XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq
5X10tTUKNIRsGMyeAr7MwQw8ZBAUDByENOQwmcYfCZwELt0pIko4vSRoBCwAAAAABAE7/8wF7AfQ
ADQAAEyEVIxEUFhcHJiY1ESNOAS2CICQNNy1+AfQr/rswMgwjEEU8AUUAAQBC//YBvgH1AAsAABM
zERQgNREzERQgNUItASIt/oQB9f6whoYBUP63trYAAAAAAgBO/ykCXQH7AB0AKAAAExcGFRUUFjM
zETY2MzIWFRUUBiMjFSc1IyImNTU0BREzMjY1NTQmIyLCGF9PQDICNi9XY11fNy4yX10BHDdDTFY
wQAH3JBiAiEdJAW8wOW1bdltn0gvHZ1t9mEj+mUtHiEtJAAABAE7/LAIVAfUAFQAAEzMTEzMDFx4
EMwciIyInJwMnE1IykZoys3oPJhoZAwIXAQFLMmqdKq4B9f7VASv+o/sgIwkDASFj2f7NEQFTAAA
AAAEATv8lAl0B+gAjAAATMxEUFjMzETMRMzI2NTU0JyYnNx4CFRUUBiMjFSc1IyImNU4tUD8yLjd
ATxYIESQbGgNdXzcuMl9dAfT+wktHAdD+MEdMskseCw8OETsqKp1bZ9YLy2dbAAAAAQBC//QCVgH
0ACQAABMXBgYVFRQWMzI3NTMVFjMyNjU1NCYnNxYVFRQjIicGIyI1NTStGigwQy5SAy4BVC5DMCk
ba6FHIiJHoQH0JAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAD/98AAAC1AlwAAwALABMAABM
zESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAADAE7
/9gHKAlwACwATABsAABMzERQgNREzERQgNRIyFhQGIiY0NjIWFAYiJjROLQEiLf6EZhYRERYRrxY
RERYQAfX+sIaGAVD+t7a2AbARFhAQFhEQFhERFgAAAAMATv/2AcMCpwAIABQAIAAAEzc2MzIXFgc
HAzU0NjIWFRUUBiImNxUUFjI2NTU0JiIG7zQJERgFBAdExWGyYly6Xy1LiEhNgE4CGnkUEw4KYv6
ehF9laVuEVG5v2IxAU1JBjE5MSwAAAgBO//YBygKnAAgAFAAAEzc2MzIXFg8CMxEUIDURMxEUIDX
5NAkRGAUEB0TPLQEiLf6EAhp5FBMOCmIl/rCGhgFQ/re2tgAAAgBO//QCYgKnAAgALQAAATc2MzI
XFg8CFwYGFRUUFjMyNzUzFRYzMjY1NTQmJzcWFRUUIyInBiMiNTU0AUM0CREYBQQHRK4aKDBDLlI
DLgFULkMwKRtroUciIkehAhp5FBMOCmImJAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAAAf/
+Aj0AXgLIAA0AABMXFgYGIiYmNTQ3FwYGIAcRAQ8MDBJAIBYfAnYCCh8OARMLNzUXDB4AAAAB//4
CMABeArsADQAAEycmNjYyFhYVFAcnNjY8BxEBDwwMEkAgFh8CggIKHw4BEws3NRcMHgAAAAEAEf+
sAHEANwANAAAXJyY2NjIWFhUUByc2Nk8HEQEPDAwSQCAWHwICCh8OARMLNzUXDB4AAAAAAv/+AkE
A9QLMAA0AGwAAExcWBgYiJiY1NDcXBgYXFxYGBiImJjU0NxcGBiAHEQEPDAwSQCAWH44HEQEPDAw
SQCAWHwJ6AgofDgETCzc1FwweEQIKHw4BEws3NRcMHgAAAv/+AjAA9QK7AA0AGwAAEycmNjYyFhY
VFAcnNjY3JyY2NjIWFhUUByc2NjwHEQEPDAwSQCAWH6AHEQEPDAwSQCAWHwKCAgofDgETCzc1Fww
eEQIKHw4BEws3NRcMHgAAAgAR/64BCAA5AA0AGwAAMycmNjYyFhYVFAcnNjY3JyY2NjIWFhUUByc
2Nk8HEQEPDAwSQCAWH6AHEQEPDAwSQCAWHwIKHw4BEws3NRcMHhECCh8OARMLNzUXDB4AAAAAAQB
OAJ4BswIDAAcAABIyFhQGIiY0tpRpaZRoAgNolGlplAAAAwARAAABrQA3AAcADwAXAAA2MhYUBiI
mNDYyFhQGIiY0NjIWFAYiJjQhFhERFhDBFhERFhDEFhERFhA3EBYRERYQEBYRERYQEBYRERYAAAA
HAFL/9QP0AuQABwAPABMAGwAjACsAMwAAADIWFAYiJjQWFBYyNjQmIgMXASckMhYUBiImNBYUFjI
2NCYiADIWFAYiJjQWFBYyNjQmIgMoeFRUeFQpOF44OVyzIf3LHAGKeFRUeFQpOF44OVz+u3hUVHh
UKTlcOTlcARVUeFRUeBNSPj5SPgH4If0+IfNUeFRUeBNSPj5SPgHrVHhUVHgTUj4+Uj4AAAABACo
AUAEEAccABgAAExcHFwcnNeUfnpwduwHHH52eHbsBAAABAAQAUADeAccABgAAEzcXFQcnNwQfu7s
dnAGoH7sBux2eAAABAE7/jgHAAzEAAwAAATMBIwGSLv6/MQMx/F0AAQBO//YB7gLGAC0AACUGIyI
uAjU1IzUzNSM1MzU0Njc2MzIXByYjIgcGBhUVMxUjFTMVIxUUFxYyNwHuVU0QQUktNzc3NyssLT5
OQA46OVAqEBjc3NzcTyBqWRchBidVP1EsPSxbTE4bGSEgGCgQPChkLD0sT2siDR4AAAEAcwIAAec
CvAASAAATMxc3MxUjNQcjJxUjNSMVIzUjc90xMDYmMhwyJzwoQwK8fn68hoaGhpaWlgAAAAEATgA
AAlACwwAmAAABMzIWFREUBgczFyM1Njc2NRE0JiMjIgYVERQXFhcVIzczJjURNDYBF3BeXi0rVg/
kPTE9T0FwQE88LkDkDlRVXgLDcFz+zTtGGSoqCBohVwE6TFBRS/7GVyEaCCoqLmwBM1xwAAAAAgB

Copyright © 2001 -2024 Syncfusion Inc. 1360


TreeGrid How To

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
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA

Copyright © 2001 -2024 Syncfusion Inc. 1361


TreeGrid How To

AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN

Copyright © 2001 -2024 Syncfusion Inc. 1362


TreeGrid How To

pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0

Copyright © 2001 -2024 Syncfusion Inc. 1363


TreeGrid How To

ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Cascading drop down list with treegrid editing in React Treegrid component
You can achieve the Cascading DropDownList with treegrid Editing by using the Cell Edit Template
feature.
In the below demo, Cascading DropDownList rendered for Priority and Duration column.
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const editOptions = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Row' };
const toolbarOptions = ['Add', 'Edit', 'Delete'];
let treegridObj;
let priorityElem;
let priorityObj;
let durationElem;
let durationObj;
const priority = {
create: () => {
priorityElem = document.createElement('input');
return priorityElem;
},
destroy: () => {
priorityObj.destroy();
},
read: () => {
return priorityObj.text;
},
write: () => {
priorityObj = new DropDownList({

Copyright © 2001 -2024 Syncfusion Inc. 1364


TreeGrid How To

change: () => {
durationObj.enabled = true;
const tempQuery = new Query().where('priorityId',
'equal', priorityObj.value);
durationObj.query = tempQuery;
durationObj.text = '';
durationObj.dataBind();
},
dataSource: new DataManager(priorityData),
fields: { value: 'priorityId', text: 'priorityName' },
floatLabelType: 'Never',
placeholder: 'Select a Priority'
});
priorityObj.appendTo(priorityElem);
}
};
const duration = {
create: () => {
durationElem = document.createElement('input');
return durationElem;
},
destroy: () => {
durationObj.destroy();
},
read: () => {
return durationObj.text;
},
write: () => {
durationObj = new DropDownList({
dataSource: new DataManager(durationData),
enabled: false,
fields: { value: 'durationId', text: 'durationValue' },
floatLabelType: 'Never',
placeholder: 'Select a duration'
});
durationObj.appendTo(durationElem);
}
};
const priorityData = [
{ priorityName: 'Normal', priorityId: '1' },
{ priorityName: 'High', priorityId: '2' }
];
const durationData = [
{ durationValue: 2, priorityId: '1', durationId: 2 },
{ durationValue: 3, priorityId: '1', durationId: 3 },
{ durationValue: 4, priorityId: '1', durationId: 4 },
{ durationValue: 11, priorityId: '2', durationId: 11 },
{ durationValue: 15, priorityId: '2', durationId: 15 },
{ durationValue: 20, priorityId: '2', durationId: 20 }
];
return (<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' editSettings={editOptions}
toolbar={toolbarOptions} ref={g => treegridObj = g} height={273}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 1365


TreeGrid How To

<ColumnDirective field='TaskName' headerText='Task Name'


width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right' edit={priority}/>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' edit={duration}/>
<ColumnDirective field='Progress' headerText='Progress' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar, ToolbarItems, EditSettingsModel } from
'@syncfusion/ej2-react-treegrid';
import { IEditCell } from '@syncfusion/ej2-react-grids';
/* tslint:disable */
function App() {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding:
true, allowDeleting: true, mode: 'Row' };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete'];
let treegridObj: TreeGridComponent | null;
let priorityElem: HTMLElement;
let priorityObj: DropDownList;
let durationElem: HTMLElement;
let durationObj: DropDownList;
const priority: IEditCell = {
create:()=>{
priorityElem = document.createElement('input');
return priorityElem;
},
destroy:()=>{
priorityObj.destroy();
},
read:()=>{
return priorityObj.text;
},
write:()=>{
priorityObj = new DropDownList({
change: () => {
durationObj.enabled = true;

Copyright © 2001 -2024 Syncfusion Inc. 1366


TreeGrid How To

const tempQuery: Query = new Query().where('priorityId', 'equal',


priorityObj.value);
durationObj.query = tempQuery;
durationObj.text = '';
durationObj.dataBind();
},
dataSource: new DataManager(priorityData),
fields: { value: 'priorityId', text: 'priorityName' },
floatLabelType: 'Never',
placeholder: 'Select a Priority'
});
priorityObj.appendTo(priorityElem);
}
}
const duration: IEditCell = {
create:()=>{
durationElem = document.createElement('input');
return durationElem;
},
destroy:()=>{
durationObj.destroy();
},
read:()=>{
return durationObj.text;
},
write:()=>{
durationObj = new DropDownList({
dataSource: new DataManager(durationData),
enabled: false,
fields: { value: 'durationId', text: 'durationValue' },
floatLabelType: 'Never',
placeholder: 'Select a duration'
});
durationObj.appendTo(durationElem);
}
}
const priorityData: object[] = [
{ priorityName: 'Normal', priorityId: '1' },
{ priorityName: 'High', priorityId: '2' }
];
const durationData: object[] = [
{ durationValue: 2, priorityId: '1', durationId: 2 },
{ durationValue: 3, priorityId: '1', durationId: 3 },
{ durationValue: 4, priorityId: '1', durationId: 4 },
{ durationValue: 11, priorityId: '2', durationId: 11 },
{ durationValue: 15, priorityId: '2', durationId: 15 },
{ durationValue: 20, priorityId: '2', durationId: 20 }
];
return (
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' editSettings={editOptions}
toolbar={toolbarOptions}
ref={g => treegridObj = g} height={273}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 1367


TreeGrid How To

<ColumnDirective field='TaskName' headerText='Task Name'


width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right' edit={priority} />
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' edit={duration} />
<ColumnDirective field='Progress' headerText='Progress' width='90'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar]} />
</TreeGridComponent>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1368


TreeGrid How To

duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1369


TreeGrid How To

{ taskID: 15, taskName: 'Development Task 1',


startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1370


TreeGrid How To

endDate: new Date('02/24/2017'), duration:


2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 1371


TreeGrid How To

{ taskID: 36, taskName: 'Phase 3 complete',


startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},

Copyright © 2001 -2024 Syncfusion Inc. 1372


TreeGrid How To

{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new


Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA

Copyright © 2001 -2024 Syncfusion Inc. 1373


TreeGrid How To

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY
yFxYUBwMhFSE1ATY1NCYiBlEqE1SGLzQs/QEr/qEBCSZLX0ACPhA1Qyowhkn+jSorAYc8LzpENAA
AAAEAGv/0AaACvAAYAAATIRUHMzIWFAYjIiYnNxYWMzI2NCYnIxMjSQEfrA9ZfHxZNl4dJhdJK0h
gYEJnx+gCvCj3fLF8MywYIihkil8DAR4AAQAaAAAB0AK8AA0AABMzAzMRMxEzByMRIxEh1S+d8y1
JDzot/sACvP7hAR/+4Sz+jwFxAAEAGv/0AaACvAAXAAATIRUjBzMyFhQGIyImJzcWFjMyNjQmIyN
fAQniGV5ZfHxZNl4dJRZLK0dhYEiPArwt8nyxfDMsGCIoY4pjAAACABr/9AHDArwAGAAiAAABMxU
jIgcGBhUVNjYzMhYUBiImNRE0NzY2AxUUFjI2NCYiBgEOIydLOh0iGFs1WXx9sHwyG2SFYoxjYox
hArwtLhdRNYYvMHyxfHxZAQRTSCUv/hQHR2JijWJdAAABABoAAAGkArwABgAAEyEVASMBIRoBiv6
0MQFJ/qoCvC39cQKPAAAAAwAa//QBwALFAAgAHgAmAAATBgYUFjI2NCYnJiY1NDYyFhUUBgcWFhU
UBiImNTQ2EgYUFhY2NCboRF1gjGBimicvZJJlLyk4RHqyekRZTExqT0sBawJfil9fil8bFVAtSmV

Copyright © 2001 -2024 Syncfusion Inc. 1374


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1375


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1376


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1377


TreeGrid How To

vNRhEFxgoHxQrMRQvMQqzU2MiETg5RiQTCxYkGxcjJv7WCgEDVzA+Cg0JAQ8uBjUBHCYgNB8LIiE
vFBYAAAACAE7/9gHPAf0AGgApAAAFIjU1NDc2MzIXNCYjIiM3MhceAxcWFREGAxUUFhcWMjcRJic
iIyIGASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrPwqzU2MiETg5RiQTCxYkGxcjJv7
WCgEDVzA+Cg0JAQ8uBjUAAwBO//YBzwK7AB4ALQA1AAAFIjU1NDc2MzIXNCYjIiMmJjQ2MhYUBx4
CFxYVEQYDFRQWFxYyNxEmJyIjIgYSFBYyNjQmIgEp20YkJXpLRVwCAyw8Ql5CJyUzGQYJaO0vKS9
tNFNiBQQrP0AsPiwsPgqzU2MiETg5RgRBWkNDYSIIIiIdJzv+1goBA1cwPgoNCQEPLgY1ATZAKyt
AKwAAAAMATv/0AwsB/gAkADMAOwAABSI1NTQ3NjMyFzQmIyIjNzIXNjMyFhUVBRUUFjMyNxcGIic
VBgMVFBYXFjI3ESYnIiMiBiUVJTU0JiIGASnbRiQlektFXAIDA5EqLnNTXf7FSi9ITxJNrSlo7S8
pL200U2IFBCs/AVYBDlJtTwqzU2MiETg5RiROT1lPeBFIOTErIy8kGAoBA1cwPgoNCQEPLgY1H1o
OVEM5QAABACT/LgFmAf4ALgAAASYiBgYVFRQzMjcXBiInBzYyFhQGIic3FjI2NCcmIgcHJzcmJyY
mNTU0NzYzMhcBVzpaQy+gMToKPUkQIQ47M0paNBQjSi0ZDB4VJA45Ego7NRwwbkJEAbsaF0s5kYw
OJRABLgglVSkTKxgaNAsFCA8XSQMEFFNLgEcwUyAAAAMATv/0AbYCpgASABoAIwAAJQYjIjU1NDY
yFhUVBRUUFjMyNwEVJTU0JiIGNxcjJyY1NDMyAZ1NVK5lpl3+xUovSE/+8AEOUm1PbTUlQwUeEiM
vks1RWllPeBFIOTErAQ1aDlRDOUD7eWMHBh0AAAADAE7/9AG2AqcAEgAaACQAACUGIyI1NTQ2MhY
VFQUVFBYzMjcBFSU1NCYiBjc3NjMyFxYUBwcBnU1UrmWmXf7FSi9IT/7wAQ5SbU91NAkRGAYBBUQ
jL5LNUVpZT3gRSDkxKwENWg5UQzlAg3kUEwUMB2IAAAMATv/0AbYC0AASABoAIAAAJQYjIjU1NDY
yFhUVBRUUFjMyNwEVJTU0JiIGJzcXBycHAZ1NVK5lpl3+xUovSE/+8AEOUm1PEJSOIG90Iy+SzVF
aWU94EUg5MSsBDVoOVEM5QKyNjSBvbwAAAAIAI//0AYsB/gASABoAACUGIyI1NTQ2MhYVFQUVFBY
zMjcBFSU1NCYiBgFyTVSuZaZd/sVKL0hP/vABDlJtTyMvks1RWllPeBFIOTErAQ1aDlRDOUAAAAA
CAE4AAADDAqYACAAMAAATFyMnJjU0MzIXMxEjhjUlQwUeEhgtLQKSeWMHBh2x/gsAAAAAAgBRAAA
AwQKnAAkADQAAEzc2MzIXFhQPAjMRI1Q0CREYBgEFRCctLQIaeRQTBQwHYiX+CwAAAAAC/8QAAAD
mAtAABQAJAAADNxcHJwcXMxEjPJSOIG90XC0tAkONjSBvby7+CwAAAAAD/98AAAC1AlwAAwALABM
AABMzESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAA
CAE4AAAG/An4AFAAmAAABIgcRIxEzFTYzMhcWFREjETQmJyYnIgcnNjMyFxYzMjcXBiMiJiYBCE4
/LS04VzknVSw9LBFbKiMVLzUYRBcYKB8UKzEULzEB1CL+TgH1GyMTJ2n+pgFYNj8FAnwmIDQfCyI
hLxQWAAADAE7/9gHDAqYACwAXACAAADc1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBhMXIycmNTQzMk5
hsmJcul8tS4hITYBObDUlQwUeEriEX2VpW4RUbm/YjEBTUkGMTkxLAQZ5YwcGHQAAAwBO//YBwwK
nAAsAFwAhAAA3NTQ2MhYVFRQGIiY3FRQWMjY1NTQmIgY3NzYzMhcWFAcHTmGyYly6Xy1LiEhNgE5
0NAkRGAUCBUS4hF9laVuEVG5v2IxAU1JBjE5MS455FBMFDAdiAAADAE7/9gHDAtAACwAXAB0AADc
1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBic3FwcnB05hsmJcul8tS4hITYBOBJSOIG90uIRfZWlbhFR
ub9iMQFNSQYxOTEu3jY0gb28AAAADAE7/9gHDAn4ACwAXACkAADc1NDYyFhUVFAYiJjcVFBYyNjU
1NCYiBjciByc2MzIXFjMyNxcGIyImJk5hsmJcul8tS4hITYBOTCojFS81GEMYGCgfFCsxFS4xuIR
fZWlbhFRub9iMQFNSQYxOTEvEJiA0HwsiIS8UFgAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiI
mNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEhNgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAMATgDpAY0
CFgADAAsAEwAAEyEVIRYyFhQGIiY0EjIWFAYiJjROAT/+wZcWEREWEBAWEREWEAGYLEwQFhERFgE
GEBYRERYAAAMATv+OAc0CgwAVAB4AJwAAATMHFhUVFAYjIicHIzcmNTU0NjMyFwcVFBcTJiMiBgU
0JwMWMzI2NQGhLEg+XF0lIS8vN09hWzAp6DOkIChBTgEbIqEaHURIAoOsNWaEVG4KcoUzcoRfZRO
wjE0pAYsRS09HKP56CFJBAAACAE7/9QHDAqYAEAAZAAATMxEUMzI2NREzESM3BiMiNRMXIycmNTQ
zMk4tj0BMLSwDM128oDUlQwUeEgH1/rOKQ0IBUv4LO0a4AeV5YwcGHQAAAAACAE7/9QHDAqcAEAA
aAAATMxEUMzI2NREzESM3BiMiNRM3NjMyFxYUBwdOLY9ATC0sAzNdvKE0CREYBQIFRAH1/rOKQ0I
BUv4LO0a4AW15FBMFDAdiAAAAAgBO//UBwwLQABAAFgAAEzMRFDMyNjURMxEjNwYjIjUTNxcHJwd
OLY9ATC0sAzNdvCyUjiBvdAH1/rOKQ0IBUv4LO0a4AZaNjSBvbwAAAAABAE7/9QHDAfUAEAAAEzM
RFDMyNjURMxEjNwYjIjVOLY9ATC0sAzNdvAH1/rOKQ0IBUv4LO0a4AAIATv8uAeUCpwAcACYAABM
zERQWMjY1NTQ3NjcXBhURFAYHJzY1NQYjIiY1Ezc2MzIXFhQHB04rSYVSGg4XDSAwOQxKKG1YX54
0CREYBgEFRAH1/rFCR0dCyGMYDQgfEjr+MD1GEiMaVntIX10BankUEwUMB2IAAAIATgAAAccChAA
NABYAABMzFTYyFhQGIyImJxUjACYiBgcUFjI2Ti02tWFoUilUFS0BTFRzVgJRfVEChMtEbbNpKir
IAYtKSEhRVU8AAAAAAwBO/y4B5QJcABwAJAAsAAATMxEUFjI2NTU0NzY3FwYVERQGByc2NTUGIyI
mNRIyFhQGIiY0NjIWFAYiJjROK0mFUhoOFw0gMDkMSihtWF9nFhERFhGvFhERFhAB9f6xQkdHQsh
jGA0IHxI6/jA9RhIjGlZ7SF9dAawRFhAQFhEQFhERFgAAAAMADAAAAgUDFAAHAAoADgAAEzMTIwM
jAyMTAzMDMxUj8irpMFbwVC/7atbc2dkCvP1EAQD/AAJz/rkB6C4AAAADAE7/9gHPAlQAGgApAC0
AAAUiNTU0NzYzMhc0JiMiIzcyFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgYTMxUjASnbRiQlektFXAI
DA1EnFSASDAIDaO0vKS9tNFNiBQQrPy/Z2QqzU2MiETg5RiQTCxYkGxcjJv7WCgEDVzA+Cg0JAQ8
uBjUBIC4AAwAMAAACBQNQAAcACgAaAAATMxMjAyMDIxMDMwMzFRQWMjY1NTMVFAYiJjXyKukwVvB
UL/tq1tsmKkErJkJeQgK8/UQBAP8AAnP+uQIkBR4uLh4FBS9CQi8AAAADAE7/9gHPApAAGgApADk
AAAUiNTU0NzYzMhc0JiMiIzcyFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgYTMxUUFjI2NTUzFRQGIiY
1ASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrP0omKkErJkJeQgqzU2MiETg5RiQTCxY
kGxcjJv7WCgEDVzA+Cg0JAQ8uBjUBXAUeLi4eBQUvQkIvAAIATv8rAnMCvAAYABsAACEGFRQWMzI

Copyright © 2001 -2024 Syncfusion Inc. 1378


TreeGrid How To

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
iaLn0S3xYBlJwVwKKBR4uLh4FBS9CQi/MPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAACAEr
/+QHvAxwAEwAbAAATMxEUFjI2NREzERQOAiIuAjUSNDYyFhQGIkotYohhLSU/RlBHPyW+ERYQEBY
Cvf33RkxMRgIJ/f01TioUFCpONQI8FhAQFhEAAwBO/y4BxwJcAAcAGgAmAAASNDYyFhQGIhcnMxE
UBgcnNjU1BiImNTU0NjIHFRQWMjY1NSYmIgb7ERYQEBaRAy0yOQxKL7tiaLn0S3xYBlJwVwI2FhA
QFhFsPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAAAAgBB/0gB3ALFAB0AKwAAExEUFjI2NTU
jJzMRIycGIyImNRE0NzYzMhcHJiciEycmNjYyFhYVFAcnNjZuXJZRTxCKIgoxa1h7Vy0+TUENOTa
nnwcRAQ8MDBJAIBYfAfv+wEdTVkJHLP7UN0FkYwE6gDUZISAYAfz9AgofDgETCzc1FwweAAAAAAM
ATv8uAccCswASAB4ALAAAASczERQGByc2NTUGIiY1NTQ2MgcVFBYyNjU1JiYiBjcXFgYGIiYmNTQ
3FwYGAZ0DLTI5DEovu2JoufRLfFgGUnBXjgcRAQ8MDBJAIBYfAbk8/cs8RBIjHFSATWBclVhhvpl

Copyright © 2001 -2024 Syncfusion Inc. 1379


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1380


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1381


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1382


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1383


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1384


TreeGrid How To

mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV

Copyright © 2001 -2024 Syncfusion Inc. 1385


TreeGrid How To

4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC

Copyright © 2001 -2024 Syncfusion Inc. 1386


TreeGrid How To

p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1387


TreeGrid How To

{ taskID: 3, taskName: 'Plan budget', startDate: new


Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{

Copyright © 2001 -2024 Syncfusion Inc. 1388


TreeGrid How To

taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',

Copyright © 2001 -2024 Syncfusion Inc. 1389


TreeGrid How To

startDate: new Date('02/17/2017'),


endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 1390


TreeGrid How To

{ taskID: 32, taskName: 'Development Task 2',


startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },

Copyright © 2001 -2024 Syncfusion Inc. 1391


TreeGrid How To

{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new


Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC

Copyright © 2001 -2024 Syncfusion Inc. 1392


TreeGrid How To

hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY
yFxYUBwMhFSE1ATY1NCYiBlEqE1SGLzQs/QEr/qEBCSZLX0ACPhA1Qyowhkn+jSorAYc8LzpENAA
AAAEAGv/0AaACvAAYAAATIRUHMzIWFAYjIiYnNxYWMzI2NCYnIxMjSQEfrA9ZfHxZNl4dJhdJK0h
gYEJnx+gCvCj3fLF8MywYIihkil8DAR4AAQAaAAAB0AK8AA0AABMzAzMRMxEzByMRIxEh1S+d8y1
JDzot/sACvP7hAR/+4Sz+jwFxAAEAGv/0AaACvAAXAAATIRUjBzMyFhQGIyImJzcWFjMyNjQmIyN
fAQniGV5ZfHxZNl4dJRZLK0dhYEiPArwt8nyxfDMsGCIoY4pjAAACABr/9AHDArwAGAAiAAABMxU
jIgcGBhUVNjYzMhYUBiImNRE0NzY2AxUUFjI2NCYiBgEOIydLOh0iGFs1WXx9sHwyG2SFYoxjYox

Copyright © 2001 -2024 Syncfusion Inc. 1393


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1394


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1395


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1396


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1397


TreeGrid How To

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
nIjczFRQWMjY1NTMVFAYiJjVuXJZRTxCKIgoxa1h7Vy0+TUENOTanNSYrQCsmQ1xDAfv+wEdTVkJ
HLP7UN0FkYwE6gDUZISAYAbEFHi4uHgUFL0JCLwAAAAMATv8uAccCigAPACIALgAAEzMVFBYyNjU
1MxUUBiImNRcnMxEUBgcnNjU1BiImNTU0NjIHFRQWMjY1NSYmIgapJipBKyZDXEP0Ay0yOQxKL7t
iaLn0S3xYBlJwVwKKBR4uLh4FBS9CQi/MPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAACAEr
/+QHvAxwAEwAbAAATMxEUFjI2NREzERQOAiIuAjUSNDYyFhQGIkotYohhLSU/RlBHPyW+ERYQEBY
Cvf33RkxMRgIJ/f01TioUFCpONQI8FhAQFhEAAwBO/y4BxwJcAAcAGgAmAAASNDYyFhQGIhcnMxE
UBgcnNjU1BiImNTU0NjIHFRQWMjY1NSYmIgb7ERYQEBaRAy0yOQxKL7tiaLn0S3xYBlJwVwI2FhA
QFhFsPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAAAAgBB/0gB3ALFAB0AKwAAExEUFjI2NTU
jJzMRIycGIyImNRE0NzYzMhcHJiciEycmNjYyFhYVFAcnNjZuXJZRTxCKIgoxa1h7Vy0+TUENOTa

Copyright © 2001 -2024 Syncfusion Inc. 1398


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1399


TreeGrid How To

rTSMvUU9vU4RfZTErWllPeBFHOjEr9o5CTUw+mEtLSzpYDFdCOEQAAAAAAwBOAAACAQNnAA4AFgA
gAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIyc3NjMyFxYUBwdO9GBeZmcuZBYO0C0tzIxLRGE0CRE
YBQIFRAK8dGKpLf7wAQIC/wACkf6bulRXSXkUEwUMB2IAAAAAAgBOAAABSAKnAA4AGAAAEzMHNjM
yFwcmIgcGFREjEzc2MzIXFhQHB04tAjFTIikMHj8hQy08NAkRGAYBBUQB9SgxCSoLChMv/nYCGnk
UEwUMB2IAAwBO/0gCAQK8AA4AFgAkAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIwMnJjY2MhYWFRQ
HJzY2TvRgXmZnLmQWDtAtLcyMS0QtBxEBDwwMEkAgFh8CvHRiqS3+8AECAv8AApH+m7pUV/0JAgo
fDgETCzc1FwweAAAAAgA9/0gBNwH+AA4AHAAAEzMHNjMyFwcmIgcGFREjFycmNjYyFhYVFAcnNjY
9LQIxUyIpDB8/IEMtTgcRAQ8MDBJAIBYfAfUoMQkqCwoTL/52ZgIKHw4BEws3NRcMHgAAAwBOAAA
CAQOLAA4AFgAcAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIyc3FzcXB070YF5mZy5kFg7QLS3MjEt
Eux90cB+OArx0Yqkt/vABAgL/AAKR/pu6VFfaIG9vII0AAgBOAAABcAL9AA4AFAAAEzMHNjMyFwc
mIgcGFREjAzcXNxcHTy0CMVMiKQwfPyBDLQEfdHAfjgH1KDEJKgsKEy/+dgLdIG9vII0AAAIAJf/
1AgADbAAiACwAADczFhYyNjU0LgQ1NDYzMhcHJiIGFRQeBBUUBiImEzc2MzIXFhQHByUuBGambT1
aa1o9dG1TPw45mWQ9W2pbPXXnfck0CREYBgEFRLI4WkpRL0MiJyZKNEZmHisdRD8oOx8nKVA3XG1
zAnd5FBQEDAdiAAAAAAIAMf/xAZkCpwAgACoAAAEHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzI
WFyc3NjMyFxYUBwcBWBAmcEhFV1c8WatiAisGT21OOlZWISdPWx84DYk0CREYBQIFRAHkJhoBMio
pKxofQW5QUjwvNTJVMhscHCFjVg8HL3kUEwUMB2IAAAIAJf/1AgADkQAiACgAADczFhYyNjU0LgQ
1NDYzMhcHJiIGFRQeBBUUBiImEzcXBycHJS4EZqZtPVprWj10bVM/DjmZZD1bals9ded9ZJSOIG9
0sjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXMCnI2NIG9vAAIATv/xAbYC0QAFACYAABM3Fwc
nBxcHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWF3SUjiBvdOIQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAwCRI2NIG9vQCYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPBwAAAAABACT/LgGMAgE
ANQAAAQcmJgYVFB4DFAYHBzYyFhQGIic3FjI2NCcmIgcHJzcmJiczFhYyNjQuAicmNDYzMhYXAUs
QJnBIRVdXPFRRHQ47M0paNBQjSi0ZCx8VJA4ySlQCKwZPbU46VlYhJ09bHzgMAeQmGgEyKikrGh9
BbE8DKAglVSkTKxgaNAsFCA8XQAZQNy81MlUyGxwcIWNWDwcAAgAl//UCAAO9ACIAKAAANzMWFjI
2NTQuBDU0NjMyFwcmIgYVFB4EFRQGIiYTNxc3FwclLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11531
zH3RwH46yOFpKUS9DIicmSjRGZh4rHUQ/KDsfJylQN1xtcwM1IG9vII0AAgBO//EBtgL8ACAAJgA
AAQcmJgYVFB4DFAYiJiczFhYyNjQuAicmNDYzMhYXJzcXNxcHAXUQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAzbH3RwH44B5CYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPB/Egb28gjQAAAAIAAP9
IAZICvAAHABUAABEhFSMRIxEjEycmNjYyFhYVFAcnNjYBkrUtsMcHEQEPDAwSQCAWHwK8Kf1tApP
9BwIKHw4BEws3NRcMHgACACz/SADqArwADAAaAAATMxUzByMRFBcHJiY1FycmNjYyFhYVFAcnNjY
6LYMUb0oNODIwBxEBDwwMEkAgFh8CvMcr/rpVGCQQRjvqAgofDgETCzc1FwweAAAAAAIAAAAAAZI
DiwAHAA0AABEhFSMRIxEjNzcXNxcHAZK1LbA2H3RwH44CvCn9bQKT2CBvbyCNAAAAAv/r//MBGAO
LAAwAEgAAEzMVMwcjERQXByYmNQM3FzcXB2gtgxRvSg04Mn0fdHAfjgK8xyv+ulUYJBBGOwLnIG9
vII0AAAAAAgAAAAABkgMUAAcACwAAESEVIxEjESM3MxUjAZK1LbBa2dkCvCn9bQKTgS4AAAAAAQB
O//MBRAK8ABQAABMzETMVMwcjFTMVIxUUFwcmJjU1I05GLYMUb3d3Sg04MkYBZgFWxytkLLZVGCQ
QRju2AAIASv/5Ae8DOwATACUAABMzERQWMjY1ETMRFA4CIi4CNRMiByc2MzIXFjMyNxcGIyImJko
tYohhLSU/RlBHPyWQKiMVLzUYRBcYKB8UKzEULzECvf33RkxMRgIJ/f01TioUFCpONQJTJiA0Hws
iIS8UFgAAAgBO//UBwwJ+ABAAIgAAEzMRFDMyNjURMxEjNwYjIjUTIgcnNjMyFxYzMjcXBiMiJiZ
OLY9ATC0sAzNdvHUqIxUvNRhDGBgoHxQrMRUuMQH1/rOKQ0IBUv4LO0a4AaMmIDQfCyIhLxQWAAA
AAgBK//kB7wMUABMAFwAAEzMRFBYyNjURMxEUDgIiLgI1EzMVI0otYohhLSU/RlBHPyVk2dkCvf3
3RkxMRgIJ/f01TioUFCpONQJaLgAAAAACAE7/9QHDAlQAEAAUAAATMxEUMzI2NREzESM3BiMiNRM
zFSNOLY9ATC0sAzNdvEnZ2QH1/rOKQ0IBUv4LO0a4AacuAAIASv/5Ae8DSgATACMAABMzERQWMjY
1ETMRFA4CIi4CNRMzFRQWMjY1NTMVFAYiJjVKLWKIYS0lP0ZQRz8lYSYrQCsmQ1xDAr3990ZMTEY
CCf39NU4qFBQqTjUCkAUeLi4eBQUvQkIvAAAAAAIATv/1AcMCjQAPACAAABMzFRQWMjY1NTMVFAY
iJjUHMxEUMzI2NREzESM3BiMiNZ0mK0ArJkNcQ08tj0BMLSwDM128Ao0FHi4uHgUFLkNDLpP+s4p
DQgFS/gs7RrgAAAMASv/5Ae8DcwATABsAIwAAEzMRFBYyNjURMxEUDgIiLgI1EhQWMjY0JiIGNDY
yFhQGIkotYohhLSU/RlBHPyWHK0ArK0BRQ1xDQ1wCvf33RkxMRgIJ/f01TioUFCpONQJoQCsrQCt
5XENDXEMAAAADAE7/9QHDAr0AEAAYACAAABMzERQzMjY1ETMRIzcGIyI1EhQWMjY0JiIGNDYyFhQ
GIk4tj0BMLSwDM128dStAKytAUUNcQ0NcAfX+s4pDQgFS/gs7RrgBv0ArK0AreVxDQ1xDAAAAAAM
ASv/5Ae8DaAATAB0AJwAAEzMRFBYyNjURMxEUDgIiLgI1Ezc2MzIXFhQHByM3NjMyFxYUBwdKLWK
IYS0lP0ZQRz8l7zQJERgFAgVElDQJERgFAgVEAr3990ZMTEYCCf39NU4qFBQqTjUCIXkUFAQMB2J
5FBQEDAdiAAADAE7/9QHDAqwAEAAaACQAABMzERQzMjY1ETMRIzcGIyI1Ezc2MzIXFhQHByM3NjM
yFxYUBwdOLY9ATC0sAzNdvNI0CREYBgEFRJQ0CREYBgEFRAH1/rOKQ0IBUv4LO0a4AXJ5FBQEDAd
ieRQUBAwHYgAAAAEASv8rAe8CvQAgAAATMxEUFjI2NREzERQGBwYVFBYzMjcXBiMiJyY1NDcmJjV
KLWKIYS1mTWAaFyoaHyBBGhYsVlFuAr3990ZMTEYCCf39XFwHTi4SGyofMgsVM0A8BVxfAAABACT
/KwHGAfUAIAAAIQYVFBYzMjcXBiMiJyY1NDczNwYjIjURMxEUMzI2NREzAZlnGhcqGh8gQRoWLGA
EAzNdvC2PQEwtUi8SGyofMgsVM0M/O0a4AUj+s4pDQgFSAAABADz/+QH4ArwAGAAAEzMVFBYyNjc
RMxEUByc2NzY1NQYGIyImNTwtYpdeCi5pCzIOBhtiLGp7Arz9TFI7NQEr/d2OEh8TMRkjnCAfaWc

Copyright © 2001 -2024 Syncfusion Inc. 1400


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1401


TreeGrid How To

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
XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq
5X10tTUKNIRsGMyeAr7MwQw8ZBAUDByENOQwmcYfCZwELt0pIko4vSRoBCwAAAAABAE7/8wF7AfQ
ADQAAEyEVIxEUFhcHJiY1ESNOAS2CICQNNy1+AfQr/rswMgwjEEU8AUUAAQBC//YBvgH1AAsAABM
zERQgNREzERQgNUItASIt/oQB9f6whoYBUP63trYAAAAAAgBO/ykCXQH7AB0AKAAAExcGFRUUFjM
zETY2MzIWFRUUBiMjFSc1IyImNTU0BREzMjY1NTQmIyLCGF9PQDICNi9XY11fNy4yX10BHDdDTFY
wQAH3JBiAiEdJAW8wOW1bdltn0gvHZ1t9mEj+mUtHiEtJAAABAE7/LAIVAfUAFQAAEzMTEzMDFx4
EMwciIyInJwMnE1IykZoys3oPJhoZAwIXAQFLMmqdKq4B9f7VASv+o/sgIwkDASFj2f7NEQFTAAA
AAAEATv8lAl0B+gAjAAATMxEUFjMzETMRMzI2NTU0JyYnNx4CFRUUBiMjFSc1IyImNU4tUD8yLjd
ATxYIESQbGgNdXzcuMl9dAfT+wktHAdD+MEdMskseCw8OETsqKp1bZ9YLy2dbAAAAAQBC//QCVgH
0ACQAABMXBgYVFRQWMzI3NTMVFjMyNjU1NCYnNxYVFRQjIicGIyI1NTStGigwQy5SAy4BVC5DMCk
ba6FHIiJHoQH0JAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAD/98AAAC1AlwAAwALABMAABM
zESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAADAE7
/9gHKAlwACwATABsAABMzERQgNREzERQgNRIyFhQGIiY0NjIWFAYiJjROLQEiLf6EZhYRERYRrxY

Copyright © 2001 -2024 Syncfusion Inc. 1402


TreeGrid How To

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
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM

Copyright © 2001 -2024 Syncfusion Inc. 1403


TreeGrid How To

nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9

Copyright © 2001 -2024 Syncfusion Inc. 1404


TreeGrid How To

nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w

Copyright © 2001 -2024 Syncfusion Inc. 1405


TreeGrid How To

AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Provide custom data source and enabling filtering to drop down list in React Treegrid component
You can provide data source to the DropDownList by using the params of columns.edit property.
While setting new data source using edit params, you must specify a new query property for the
DropDownList as follows,
`ts
const priority : IEditCell = {
params: {
actionComplete: () => false,

Copyright © 2001 -2024 Syncfusion Inc. 1406


TreeGrid How To

allowFiltering: true,
dataSource: new DataManager(this.priorityData),
fields: { text: "countryName", value: "countryName"},
query: new Query()
}
};
`
You can also enable filtering for the DropDownList by passing the allowFiltering as true to the edit
params.
In the below demo, DropDownList is rendered with custom dataSource for the Priority column and
enabled filtering to search DropDownList items.
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar, Page } from '@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const editOptions = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Row' };
const toolbarOptions = ['Add', 'Edit', 'Delete'];
const priorityData = [
{ priorityName: 'Normal', priorityId: '1' },
{ priorityName: 'High', priorityId: '2' },
{ priorityName: 'Low', priorityId: '3' },
{ priorityName: 'Critical', priorityId: '4' },
{ priorityName: 'Breaker', priorityId: '5' }
];
const priority = {
params: {
actionComplete: () => false,
allowFiltering: true,
dataSource: new DataManager(priorityData),
fields: { text: "priorityName", value: "priorityName" },
query: new Query()
}
};
return (<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' editSettings={editOptions}
toolbar={toolbarOptions} height={265}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 1407


TreeGrid How To

<ColumnDirective field='StartDate' headerText='Start Date'


width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Priority' headerText='Priority' width='90'
editType='dropdownedit' textAlign='Right' edit={priority}/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Page]}/>
</TreeGridComponent>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar, ToolbarItems, EditSettingsModel, Page } from
'@syncfusion/ej2-react-treegrid';
import { IEditCell } from '@syncfusion/ej2-react-grids';
/* tslint:disable */
function App() {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding:
true, allowDeleting: true, mode: 'Row' };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete'];
const priorityData: object[] = [
{ priorityName: 'Normal', priorityId: '1' },
{ priorityName: 'High', priorityId: '2' },
{ priorityName: 'Low', priorityId: '3' },
{ priorityName: 'Critical', priorityId: '4' },
{ priorityName: 'Breaker', priorityId: '5' }
];
const priority: IEditCell = {
params: {
actionComplete: () => false,
allowFiltering: true,
dataSource: new DataManager(priorityData),
fields: { text: "priorityName", value: "priorityName"},
query: new Query()
}
}
return (
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID'
editSettings={editOptions} toolbar={toolbarOptions} height={265}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 1408


TreeGrid How To

<ColumnDirective field='StartDate' headerText='Start Date'


width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Priority' headerText='Priority' width='90'
editType= 'dropdownedit' textAlign='Right' edit={priority} />
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Page]} />
</TreeGridComponent>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1409


TreeGrid How To

{ taskID: 7, taskName: 'Software Specification', startDate: new


Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1410


TreeGrid How To

endDate: new Date('02/19/2017'), duration:


3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1411


TreeGrid How To

{ taskID: 27, taskName: 'Customer review


meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}

Copyright © 2001 -2024 Syncfusion Inc. 1412


TreeGrid How To

]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},

Copyright © 2001 -2024 Syncfusion Inc. 1413


TreeGrid How To

{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new


Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA

Copyright © 2001 -2024 Syncfusion Inc. 1414


TreeGrid How To

AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+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

Copyright © 2001 -2024 Syncfusion Inc. 1415


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1416


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1417


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1418


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1419


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1420


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1421


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1422


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1423


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1424


TreeGrid How To

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
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA

Copyright © 2001 -2024 Syncfusion Inc. 1425


TreeGrid How To

AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5

Copyright © 2001 -2024 Syncfusion Inc. 1426


TreeGrid How To

0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC

Copyright © 2001 -2024 Syncfusion Inc. 1427


TreeGrid How To

hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1428


TreeGrid How To

{ taskID: 5, taskName: 'Planning complete', startDate: new


Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,

Copyright © 2001 -2024 Syncfusion Inc. 1429


TreeGrid How To

subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1430


TreeGrid How To

{ taskID: 23, taskName: 'Development Task 1',


startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1431


TreeGrid How To

endDate: new Date('02/21/2017'), duration: 2,


progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },

Copyright © 2001 -2024 Syncfusion Inc. 1432


TreeGrid How To

{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new


Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA

Copyright © 2001 -2024 Syncfusion Inc. 1433


TreeGrid How To

SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY
yFxYUBwMhFSE1ATY1NCYiBlEqE1SGLzQs/QEr/qEBCSZLX0ACPhA1Qyowhkn+jSorAYc8LzpENAA
AAAEAGv/0AaACvAAYAAATIRUHMzIWFAYjIiYnNxYWMzI2NCYnIxMjSQEfrA9ZfHxZNl4dJhdJK0h
gYEJnx+gCvCj3fLF8MywYIihkil8DAR4AAQAaAAAB0AK8AA0AABMzAzMRMxEzByMRIxEh1S+d8y1
JDzot/sACvP7hAR/+4Sz+jwFxAAEAGv/0AaACvAAXAAATIRUjBzMyFhQGIyImJzcWFjMyNjQmIyN
fAQniGV5ZfHxZNl4dJRZLK0dhYEiPArwt8nyxfDMsGCIoY4pjAAACABr/9AHDArwAGAAiAAABMxU
jIgcGBhUVNjYzMhYUBiImNRE0NzY2AxUUFjI2NCYiBgEOIydLOh0iGFs1WXx9sHwyG2SFYoxjYox
hArwtLhdRNYYvMHyxfHxZAQRTSCUv/hQHR2JijWJdAAABABoAAAGkArwABgAAEyEVASMBIRoBiv6
0MQFJ/qoCvC39cQKPAAAAAwAa//QBwALFAAgAHgAmAAATBgYUFjI2NCYnJiY1NDYyFhUUBgcWFhU
UBiImNTQ2EgYUFhY2NCboRF1gjGBimicvZJJlLyk4RHqyekRZTExqT0sBawJfil9fil8bFVAtSmV
lSi5PFhhpPFh6elg+ZwEvTWxJAUluTAAAAAIAGgAAAcMCxQAWACAAADMjNTMyNjU1BgYjIiY0NjI
WFREUBwYGEzU0JiIGFBYyNs8jJ091GFs1WXx8sXwzGmSFYo1iYoxgLWRmgy8vfLB9fFn+/lNHJi4
B6QdHYmOMYl0AAAACABoAbwBRAaEABwAPAAA2MhYUBiImNBIyFhQGIiY0KhYRERYQEBYRERYQphA

Copyright © 2001 -2024 Syncfusion Inc. 1434


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1435


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1436


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1437


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1438


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1439


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1440


TreeGrid How To

fDgETCzc1FwweAAAAAgA9/0gBNwH+AA4AHAAAEzMHNjMyFwcmIgcGFREjFycmNjYyFhYVFAcnNjY
9LQIxUyIpDB8/IEMtTgcRAQ8MDBJAIBYfAfUoMQkqCwoTL/52ZgIKHw4BEws3NRcMHgAAAwBOAAA
CAQOLAA4AFgAcAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIyc3FzcXB070YF5mZy5kFg7QLS3MjEt
Eux90cB+OArx0Yqkt/vABAgL/AAKR/pu6VFfaIG9vII0AAgBOAAABcAL9AA4AFAAAEzMHNjMyFwc
mIgcGFREjAzcXNxcHTy0CMVMiKQwfPyBDLQEfdHAfjgH1KDEJKgsKEy/+dgLdIG9vII0AAAIAJf/
1AgADbAAiACwAADczFhYyNjU0LgQ1NDYzMhcHJiIGFRQeBBUUBiImEzc2MzIXFhQHByUuBGambT1
aa1o9dG1TPw45mWQ9W2pbPXXnfck0CREYBgEFRLI4WkpRL0MiJyZKNEZmHisdRD8oOx8nKVA3XG1
zAnd5FBQEDAdiAAAAAAIAMf/xAZkCpwAgACoAAAEHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzI
WFyc3NjMyFxYUBwcBWBAmcEhFV1c8WatiAisGT21OOlZWISdPWx84DYk0CREYBQIFRAHkJhoBMio
pKxofQW5QUjwvNTJVMhscHCFjVg8HL3kUEwUMB2IAAAIAJf/1AgADkQAiACgAADczFhYyNjU0LgQ
1NDYzMhcHJiIGFRQeBBUUBiImEzcXBycHJS4EZqZtPVprWj10bVM/DjmZZD1bals9ded9ZJSOIG9
0sjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXMCnI2NIG9vAAIATv/xAbYC0QAFACYAABM3Fwc
nBxcHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWF3SUjiBvdOIQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAwCRI2NIG9vQCYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPBwAAAAABACT/LgGMAgE
ANQAAAQcmJgYVFB4DFAYHBzYyFhQGIic3FjI2NCcmIgcHJzcmJiczFhYyNjQuAicmNDYzMhYXAUs
QJnBIRVdXPFRRHQ47M0paNBQjSi0ZCx8VJA4ySlQCKwZPbU46VlYhJ09bHzgMAeQmGgEyKikrGh9
BbE8DKAglVSkTKxgaNAsFCA8XQAZQNy81MlUyGxwcIWNWDwcAAgAl//UCAAO9ACIAKAAANzMWFjI
2NTQuBDU0NjMyFwcmIgYVFB4EFRQGIiYTNxc3FwclLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11531
zH3RwH46yOFpKUS9DIicmSjRGZh4rHUQ/KDsfJylQN1xtcwM1IG9vII0AAgBO//EBtgL8ACAAJgA
AAQcmJgYVFB4DFAYiJiczFhYyNjQuAicmNDYzMhYXJzcXNxcHAXUQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAzbH3RwH44B5CYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPB/Egb28gjQAAAAIAAP9
IAZICvAAHABUAABEhFSMRIxEjEycmNjYyFhYVFAcnNjYBkrUtsMcHEQEPDAwSQCAWHwK8Kf1tApP
9BwIKHw4BEws3NRcMHgACACz/SADqArwADAAaAAATMxUzByMRFBcHJiY1FycmNjYyFhYVFAcnNjY
6LYMUb0oNODIwBxEBDwwMEkAgFh8CvMcr/rpVGCQQRjvqAgofDgETCzc1FwweAAAAAAIAAAAAAZI
DiwAHAA0AABEhFSMRIxEjNzcXNxcHAZK1LbA2H3RwH44CvCn9bQKT2CBvbyCNAAAAAv/r//MBGAO
LAAwAEgAAEzMVMwcjERQXByYmNQM3FzcXB2gtgxRvSg04Mn0fdHAfjgK8xyv+ulUYJBBGOwLnIG9
vII0AAAAAAgAAAAABkgMUAAcACwAAESEVIxEjESM3MxUjAZK1LbBa2dkCvCn9bQKTgS4AAAAAAQB
O//MBRAK8ABQAABMzETMVMwcjFTMVIxUUFwcmJjU1I05GLYMUb3d3Sg04MkYBZgFWxytkLLZVGCQ
QRju2AAIASv/5Ae8DOwATACUAABMzERQWMjY1ETMRFA4CIi4CNRMiByc2MzIXFjMyNxcGIyImJko
tYohhLSU/RlBHPyWQKiMVLzUYRBcYKB8UKzEULzECvf33RkxMRgIJ/f01TioUFCpONQJTJiA0Hws
iIS8UFgAAAgBO//UBwwJ+ABAAIgAAEzMRFDMyNjURMxEjNwYjIjUTIgcnNjMyFxYzMjcXBiMiJiZ
OLY9ATC0sAzNdvHUqIxUvNRhDGBgoHxQrMRUuMQH1/rOKQ0IBUv4LO0a4AaMmIDQfCyIhLxQWAAA
AAgBK//kB7wMUABMAFwAAEzMRFBYyNjURMxEUDgIiLgI1EzMVI0otYohhLSU/RlBHPyVk2dkCvf3
3RkxMRgIJ/f01TioUFCpONQJaLgAAAAACAE7/9QHDAlQAEAAUAAATMxEUMzI2NREzESM3BiMiNRM
zFSNOLY9ATC0sAzNdvEnZ2QH1/rOKQ0IBUv4LO0a4AacuAAIASv/5Ae8DSgATACMAABMzERQWMjY
1ETMRFA4CIi4CNRMzFRQWMjY1NTMVFAYiJjVKLWKIYS0lP0ZQRz8lYSYrQCsmQ1xDAr3990ZMTEY
CCf39NU4qFBQqTjUCkAUeLi4eBQUvQkIvAAAAAAIATv/1AcMCjQAPACAAABMzFRQWMjY1NTMVFAY
iJjUHMxEUMzI2NREzESM3BiMiNZ0mK0ArJkNcQ08tj0BMLSwDM128Ao0FHi4uHgUFLkNDLpP+s4p
DQgFS/gs7RrgAAAMASv/5Ae8DcwATABsAIwAAEzMRFBYyNjURMxEUDgIiLgI1EhQWMjY0JiIGNDY
yFhQGIkotYohhLSU/RlBHPyWHK0ArK0BRQ1xDQ1wCvf33RkxMRgIJ/f01TioUFCpONQJoQCsrQCt
5XENDXEMAAAADAE7/9QHDAr0AEAAYACAAABMzERQzMjY1ETMRIzcGIyI1EhQWMjY0JiIGNDYyFhQ
GIk4tj0BMLSwDM128dStAKytAUUNcQ0NcAfX+s4pDQgFS/gs7RrgBv0ArK0AreVxDQ1xDAAAAAAM
ASv/5Ae8DaAATAB0AJwAAEzMRFBYyNjURMxEUDgIiLgI1Ezc2MzIXFhQHByM3NjMyFxYUBwdKLWK
IYS0lP0ZQRz8l7zQJERgFAgVElDQJERgFAgVEAr3990ZMTEYCCf39NU4qFBQqTjUCIXkUFAQMB2J
5FBQEDAdiAAADAE7/9QHDAqwAEAAaACQAABMzERQzMjY1ETMRIzcGIyI1Ezc2MzIXFhQHByM3NjM
yFxYUBwdOLY9ATC0sAzNdvNI0CREYBgEFRJQ0CREYBgEFRAH1/rOKQ0IBUv4LO0a4AXJ5FBQEDAd
ieRQUBAwHYgAAAAEASv8rAe8CvQAgAAATMxEUFjI2NREzERQGBwYVFBYzMjcXBiMiJyY1NDcmJjV
KLWKIYS1mTWAaFyoaHyBBGhYsVlFuAr3990ZMTEYCCf39XFwHTi4SGyofMgsVM0A8BVxfAAABACT
/KwHGAfUAIAAAIQYVFBYzMjcXBiMiJyY1NDczNwYjIjURMxEUMzI2NREzAZlnGhcqGh8gQRoWLGA
EAzNdvC2PQEwtUi8SGyofMgsVM0M/O0a4AUj+s4pDQgFSAAABADz/+QH4ArwAGAAAEzMVFBYyNjc
RMxEUByc2NzY1NQYGIyImNTwtYpdeCi5pCzIOBhtiLGp7Arz9TFI7NQEr/d2OEh8TMRkjnCAfaWc
AAAIAHwAAAgYDngAJABMAABMhFQEhFSE1ASE3NzYzMhcWFAcHLAHU/lgBrv4ZAaj+ZeQ0CREYBgE
FRAK8Kf2WKSkCan55FBQEDAdiAAACAE4AAAG9AqcACQATAAATIRUBIRUhNQEhNzc2MzIXFhQHB1c
BUf7dATj+kQEh/uiJNAkRGAYBBUQB9Sn+XSkpAaNOeRQTBQwHYgAAAgAfAAACBgMZAAkAEQAAEyE
VASEVITUBITY0NjIWFAYiLAHU/lgBrv4ZAaj+ZdcRFhAQFgK8Kf2WKSkCamAWEBAWEQACAE4AAAG
9AloACQARAAATIRUBIRUhNQEhNjQ2MhYUBiJXAVH+3QE4/pEBIf7okREWEBAWAfUp/l0pKQGjaBY
QEBYRAAIAHwAAAgYDvQAJAA8AABMhFQEhFSE1ASETNxc3FwcsAdT+WAGu/hkBqP5lbh90cB+OArw

Copyright © 2001 -2024 Syncfusion Inc. 1441


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1442


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1443


TreeGrid How To

+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
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk

Copyright © 2001 -2024 Syncfusion Inc. 1444


TreeGrid How To

DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21

Copyright © 2001 -2024 Syncfusion Inc. 1445


TreeGrid How To

tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH

Copyright © 2001 -2024 Syncfusion Inc. 1446


TreeGrid How To

/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Use wizard like dialog editing in React Treegrid component
Wizard helps you create intuitive step-by-step forms to fill. You can achieve the wizard like editing by
using the dialog template feature. It support your own editing template by defining editSettings.mode
as Dialog and editSetting.template as a REACT Component.
The following example demonstrate the wizard like editing in the treegrid with the obtrusive Validation.
APP.JSX
{% raw %}
import * as React from 'react';
import { projectData } from './datasource';
import { DataUtil } from '@syncfusion/ej2-data';
import { projectData as orderData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar, Page } from '@syncfusion/ej2-react-treegrid';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';

Copyright © 2001 -2024 Syncfusion Inc. 1447


TreeGrid How To

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';


/* tslint:disable */
function App() {
const editOptions = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Dialog', template: dialogTemplate };
const toolbarOptions = ['Add', 'Edit', 'Delete'];
let treegrid;
function dialogTemplate(props) {
const a = [props, treegrid];
return (<DialogFormTemplate {...a}/>);
}
function actionComplete(args) {
// Set initial Focus
if (args.requestType === 'beginEdit') {
args.form.elements.namedItem('TaskName').focus();
}
else if (args.requestType === 'add') {
args.form.elements.namedItem('TaskID').focus();
}
}
return (<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' height={265}
toolbar={toolbarOptions} editSettings={editOptions} ref={g => treegrid = g}
actionComplete={actionComplete}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right'/>
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Page]}/>
</TreeGridComponent>);
}
;
function DialogFormTemplate(props) {
const [currentTab, setCurrentTab] = React.useState(1);
const priorityData = DataUtil.distinct(orderData, 'Priority', true);
let treegrid = props[1];
const [data, setData] = React.useState(props[0]);
const onChange = (args) => {
setData({ [args.target.name]: args.target.value });
};
const next = (args) => {
let valid = true;
[].slice.call(document.getElementById('tab' + currentTab)
.querySelectorAll('[name]')).forEach((element) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true') {

Copyright © 2001 -2024 Syncfusion Inc. 1448


TreeGrid How To

valid = false;
}
});
if (!valid) {
return;
}
if (args.target.innerHTML !== 'SUBMIT') {
setCurrentTab(2);
}
else {
if (treegrid) {
treegrid.endEdit();
}
}
};
const previous = () => {
let valid = true;
[].slice.call(document.getElementById('tab' + currentTab)
.querySelectorAll('[name]')).forEach((element) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true') {
valid = false;
}
});
if (!valid) {
return;
}
setCurrentTab(1);
};
const styTab1 = {
'display': currentTab === 1 ? 'block' : 'none'
};
const styTab2 = {
'display': currentTab === 2 ? 'block' : 'none'
};
return (<div>
<div id='tab1' style={styTab1}>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input id="TaskID" name="TaskID" type="text"
disabled={!data.isAdd} value={data.TaskID} onChange={onChange}/>
<span className="e-float-line"/>
<label className="e-float-text e-label-top"> Task
ID</label>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input value={data.TaskName} id="TaskName"
name="TaskName" type="text" onChange={onChange}/>
<span className="e-float-line"/>
<label className="e-float-text e-label-top">Task
Name</label>
</div>

Copyright © 2001 -2024 Syncfusion Inc. 1449


TreeGrid How To

</div>
</div>
</div>
<div id='tab2' style={styTab2}>
<div className="form-row">
<div className="form-group col-md-6">
<NumericTextBoxComponent id="Duration"
value={data.Duration} placeholder="Duration" floatLabelType='Always'/>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<DropDownListComponent id="Priority" value={data.Priority}
dataSource={priorityData} fields={{ text: 'Priority', value: 'Priority' }}
placeholder="Priority" popupHeight='300px' floatLabelType='Always'/>
</div>
</div>
</div>
<div id='footer'>
<button id="prevBtn" className={currentTab === 1 ? 'e-info e-btn
e-hide' : 'e-info e-btn'} type="button" style={{ float: "left" }}
onClick={previous}>Previous</button>
<button id="nextBtn" className="e-info e-btn" type="button"
style={{ float: "right" }} onClick={next}>{currentTab === 1 ? 'Next' :
'SUBMIT'}</button>
</div>
</div>);
}
;
export default App;
{% endraw %}

APP.TSX
{% raw %}
import * as React from 'react';
import { projectData } from './datasource';
import { DataUtil } from '@syncfusion/ej2-data';
import { projectData as orderData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar, ToolbarItems, EditSettingsModel, Page, TreeGrid }
from '@syncfusion/ej2-react-treegrid';
import { DialogEditEventArgs } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
/* tslint:disable */
function App() {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding:
true, allowDeleting: true, mode: 'Dialog', template: dialogTemplate };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete'];
let treegrid: TreeGridComponent | null;
function dialogTemplate(props: IProjectModel): any {
const a = [props, treegrid]
return (<DialogFormTemplate {...a} />);
}

Copyright © 2001 -2024 Syncfusion Inc. 1450


TreeGrid How To

function actionComplete(args: DialogEditEventArgs): void {


// Set initial Focus
if (args.requestType === 'beginEdit') {
((args.form as HTMLFormElement).elements.namedItem('TaskName') as
HTMLInputElement).focus();
} else if (args.requestType === 'add') {
((args.form as HTMLFormElement).elements.namedItem('TaskID')as
HTMLInputElement).focus();
}
}
return (
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' height={265}
toolbar={toolbarOptions}
editSettings={editOptions}
ref={g => treegrid = g} actionComplete={actionComplete}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' />
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Page]} />
</TreeGridComponent>
);
};
function DialogFormTemplate(props:any) {
const [currentTab, setCurrentTab] = React.useState(1);
const priorityData: any = DataUtil.distinct(orderData, 'Priority', true );
let treegrid = props[1];
const [data, setData] = React.useState(props[0]);
const onChange = (args: React.ChangeEvent) => {
setData({[(args.target as HTMLInputElement).name]: (args.target as
HTMLInputElement).value});
}
const next = (args: any) => {
let valid: boolean = true;
[].slice.call((document.getElementById('tab' + currentTab) as
HTMLElement)
.querySelectorAll('[name]')).forEach((element: any) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true'){
valid = false;
}
});
if (!valid) {
return
}

Copyright © 2001 -2024 Syncfusion Inc. 1451


TreeGrid How To

if (args.target.innerHTML !== 'SUBMIT'){


setCurrentTab(2);
} else {
if (treegrid) {
treegrid.endEdit();
}
}
}

const previous = () => {


let valid: boolean = true;
[].slice.call((document.getElementById('tab' + currentTab) as
HTMLElement)
.querySelectorAll('[name]')).forEach((element: any) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true'){
valid = false;
}
});
if (!valid) {
return
}
setCurrentTab(1);
}
const styTab1: object = {
'display': currentTab === 1 ? 'block' : 'none'
}
const styTab2: object = {
'display': currentTab === 2 ? 'block' : 'none'
}
return (<div>
<div id='tab1' style={styTab1}>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input id="TaskID" name="TaskID" type="text"
disabled={!data.isAdd} value={data.TaskID} onChange={onChange} />
<span className="e-float-line"/>
<label className="e-float-text e-label-top"> Task
ID</label>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper" >
<input value={data.TaskName} id="TaskName"
name="TaskName" type="text" onChange={onChange} />
<span className="e-float-line"/>
<label className="e-float-text e-label-top">Task
Name</label>
</div>
</div>
</div>
</div>
<div id='tab2' style={styTab2}>
<div className="form-row">

Copyright © 2001 -2024 Syncfusion Inc. 1452


TreeGrid How To

<div className="form-group col-md-6">


<NumericTextBoxComponent id="Duration"
value={data.Duration} placeholder="Duration" floatLabelType='Always'/>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<DropDownListComponent id="Priority" value={data.Priority}
dataSource={priorityData}
fields={{text: 'Priority', value: 'Priority' }}
placeholder="Priority"
popupHeight='300px' floatLabelType='Always'/>
</div>
</div>
</div>
<div id='footer'>
<button id="prevBtn" className={currentTab === 1 ? 'e-info e-btn
e-hide' : 'e-info e-btn'} type="button" style={{float: "left"}}
onClick={previous}>Previous</button>
<button id="nextBtn" className="e-info e-btn" type="button"
style={{float: "right"}} onClick={next}>{currentTab === 1 ? 'Next' :
'SUBMIT'}</button>
</div>
</div>);
};
export interface IProjectModel {
TaskID?: number;
TaskName?: string;
StartDate?: Date;
EndDate?: Date;
Duration?: number;
Priority?: string;
isAdd?: boolean;
currentTab?: number;
}
export default App;
{% endraw %}

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1453


TreeGrid How To

{ taskID: 3, taskName: 'Plan budget', startDate: new


Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{

Copyright © 2001 -2024 Syncfusion Inc. 1454


TreeGrid How To

taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',

Copyright © 2001 -2024 Syncfusion Inc. 1455


TreeGrid How To

startDate: new Date('02/17/2017'),


endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 1456


TreeGrid How To

{ taskID: 32, taskName: 'Development Task 2',


startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},

Copyright © 2001 -2024 Syncfusion Inc. 1457


TreeGrid How To

{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new


Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA

Copyright © 2001 -2024 Syncfusion Inc. 1458


TreeGrid How To

AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl

Copyright © 2001 -2024 Syncfusion Inc. 1459


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1460


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1461


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1462


TreeGrid How To

9TFI7NQEr/d2OEh8TMRkjnCAfaWcBFnkUFAQMB2IAAAAAAgBOAAABxwK8AA0AFgAAEzMRNjIWFAY
jIiYnFSMAJiIGBxQWMjZOLTa1YWhSKVQVLQFMVHNWAlF9UQK8/v1EbbNpKirIAYtKSEhRVU8AAAA
BAE7/9QHdAr0AOwAAEyIVESMRNDMyFhUUByMGFxYWFxYXFhUUBwYHBiMiJzcWFxYyNzY3NjU0JyY
nJicmNDcyMzI3NjQnJiMi1FguiTw+LxkSDw8vEDMSRA4VOCQdXDkYHS4VLBgqEAw1GSpJEggRAQE
rDwUNFisBApF0/eMCGaRSLEIcHx4bKwwqEkNIICIzFA0wJxsLBQcOJBsaNjMYIjsoEjYeJQ4mFyY
AAwBO//YBzwKmABoAKQAyAAAFIjU1NDc2MzIXNCYjIiM3MhceAxcWFREGAxUUFhcWMjcRJiciIyI
GExcjJyY1NDMyASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrP3Y1JUMFHhIKs1NjIhE
4OUYkEwsWJBsXIyb+1goBA1cwPgoNCQEPLgY1AV55YwcGHQAAAAADAE7/9gHPAqcAGgApADMAAAU
iNTU0NzYzMhc0JiMiIzcyFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgY3NzYzMhcWFAcHASnbRiQlekt
FXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrP4g0CREYBgEFRAqzU2MiETg5RiQTCxYkGxcjJv7WCgE
DVzA+Cg0JAQ8uBjXmeRQTBQwHYgAAAAADAE7/9gHPAtAAGgApAC8AAAUiNTU0NzYzMhc0JiMiIzc
yFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgYTNxcHJwcBKdtGJCV6S0VcAgMDUScVIBIMAgNo7S8pL20
0U2IFBCs/B5SOIG90CrNTYyIRODlGJBMLFiQbFyMm/tYKAQNXMD4KDQkBDy4GNQEPjY0gb28AAAA
AAwBO//YBzwJ+ABoAKQA7AAAFIjU1NDc2MzIXNCYjIiM3MhceAxcWFREGAxUUFhcWMjcRJiciIyI
GEyIHJzYzMhcWMzI3FwYjIiYmASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrP1gqIxU
vNRhEFxgoHxQrMRQvMQqzU2MiETg5RiQTCxYkGxcjJv7WCgEDVzA+Cg0JAQ8uBjUBHCYgNB8LIiE
vFBYAAAACAE7/9gHPAf0AGgApAAAFIjU1NDc2MzIXNCYjIiM3MhceAxcWFREGAxUUFhcWMjcRJic
iIyIGASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrPwqzU2MiETg5RiQTCxYkGxcjJv7
WCgEDVzA+Cg0JAQ8uBjUAAwBO//YBzwK7AB4ALQA1AAAFIjU1NDc2MzIXNCYjIiMmJjQ2MhYUBx4
CFxYVEQYDFRQWFxYyNxEmJyIjIgYSFBYyNjQmIgEp20YkJXpLRVwCAyw8Ql5CJyUzGQYJaO0vKS9
tNFNiBQQrP0AsPiwsPgqzU2MiETg5RgRBWkNDYSIIIiIdJzv+1goBA1cwPgoNCQEPLgY1ATZAKyt
AKwAAAAMATv/0AwsB/gAkADMAOwAABSI1NTQ3NjMyFzQmIyIjNzIXNjMyFhUVBRUUFjMyNxcGIic
VBgMVFBYXFjI3ESYnIiMiBiUVJTU0JiIGASnbRiQlektFXAIDA5EqLnNTXf7FSi9ITxJNrSlo7S8
pL200U2IFBCs/AVYBDlJtTwqzU2MiETg5RiROT1lPeBFIOTErIy8kGAoBA1cwPgoNCQEPLgY1H1o
OVEM5QAABACT/LgFmAf4ALgAAASYiBgYVFRQzMjcXBiInBzYyFhQGIic3FjI2NCcmIgcHJzcmJyY
mNTU0NzYzMhcBVzpaQy+gMToKPUkQIQ47M0paNBQjSi0ZDB4VJA45Ego7NRwwbkJEAbsaF0s5kYw
OJRABLgglVSkTKxgaNAsFCA8XSQMEFFNLgEcwUyAAAAMATv/0AbYCpgASABoAIwAAJQYjIjU1NDY
yFhUVBRUUFjMyNwEVJTU0JiIGNxcjJyY1NDMyAZ1NVK5lpl3+xUovSE/+8AEOUm1PbTUlQwUeEiM
vks1RWllPeBFIOTErAQ1aDlRDOUD7eWMHBh0AAAADAE7/9AG2AqcAEgAaACQAACUGIyI1NTQ2MhY
VFQUVFBYzMjcBFSU1NCYiBjc3NjMyFxYUBwcBnU1UrmWmXf7FSi9IT/7wAQ5SbU91NAkRGAYBBUQ
jL5LNUVpZT3gRSDkxKwENWg5UQzlAg3kUEwUMB2IAAAMATv/0AbYC0AASABoAIAAAJQYjIjU1NDY
yFhUVBRUUFjMyNwEVJTU0JiIGJzcXBycHAZ1NVK5lpl3+xUovSE/+8AEOUm1PEJSOIG90Iy+SzVF
aWU94EUg5MSsBDVoOVEM5QKyNjSBvbwAAAAIAI//0AYsB/gASABoAACUGIyI1NTQ2MhYVFQUVFBY
zMjcBFSU1NCYiBgFyTVSuZaZd/sVKL0hP/vABDlJtTyMvks1RWllPeBFIOTErAQ1aDlRDOUAAAAA
CAE4AAADDAqYACAAMAAATFyMnJjU0MzIXMxEjhjUlQwUeEhgtLQKSeWMHBh2x/gsAAAAAAgBRAAA
AwQKnAAkADQAAEzc2MzIXFhQPAjMRI1Q0CREYBgEFRCctLQIaeRQTBQwHYiX+CwAAAAAC/8QAAAD
mAtAABQAJAAADNxcHJwcXMxEjPJSOIG90XC0tAkONjSBvby7+CwAAAAAD/98AAAC1AlwAAwALABM
AABMzESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAA
CAE4AAAG/An4AFAAmAAABIgcRIxEzFTYzMhcWFREjETQmJyYnIgcnNjMyFxYzMjcXBiMiJiYBCE4
/LS04VzknVSw9LBFbKiMVLzUYRBcYKB8UKzEULzEB1CL+TgH1GyMTJ2n+pgFYNj8FAnwmIDQfCyI
hLxQWAAADAE7/9gHDAqYACwAXACAAADc1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBhMXIycmNTQzMk5
hsmJcul8tS4hITYBObDUlQwUeEriEX2VpW4RUbm/YjEBTUkGMTkxLAQZ5YwcGHQAAAwBO//YBwwK
nAAsAFwAhAAA3NTQ2MhYVFRQGIiY3FRQWMjY1NTQmIgY3NzYzMhcWFAcHTmGyYly6Xy1LiEhNgE5
0NAkRGAUCBUS4hF9laVuEVG5v2IxAU1JBjE5MS455FBMFDAdiAAADAE7/9gHDAtAACwAXAB0AADc
1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBic3FwcnB05hsmJcul8tS4hITYBOBJSOIG90uIRfZWlbhFR
ub9iMQFNSQYxOTEu3jY0gb28AAAADAE7/9gHDAn4ACwAXACkAADc1NDYyFhUVFAYiJjcVFBYyNjU
1NCYiBjciByc2MzIXFjMyNxcGIyImJk5hsmJcul8tS4hITYBOTCojFS81GEMYGCgfFCsxFS4xuIR
fZWlbhFRub9iMQFNSQYxOTEvEJiA0HwsiIS8UFgAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiI
mNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEhNgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAMATgDpAY0
CFgADAAsAEwAAEyEVIRYyFhQGIiY0EjIWFAYiJjROAT/+wZcWEREWEBAWEREWEAGYLEwQFhERFgE
GEBYRERYAAAMATv+OAc0CgwAVAB4AJwAAATMHFhUVFAYjIicHIzcmNTU0NjMyFwcVFBcTJiMiBgU
0JwMWMzI2NQGhLEg+XF0lIS8vN09hWzAp6DOkIChBTgEbIqEaHURIAoOsNWaEVG4KcoUzcoRfZRO
wjE0pAYsRS09HKP56CFJBAAACAE7/9QHDAqYAEAAZAAATMxEUMzI2NREzESM3BiMiNRMXIycmNTQ
zMk4tj0BMLSwDM128oDUlQwUeEgH1/rOKQ0IBUv4LO0a4AeV5YwcGHQAAAAACAE7/9QHDAqcAEAA
aAAATMxEUMzI2NREzESM3BiMiNRM3NjMyFxYUBwdOLY9ATC0sAzNdvKE0CREYBQIFRAH1/rOKQ0I
BUv4LO0a4AW15FBMFDAdiAAAAAgBO//UBwwLQABAAFgAAEzMRFDMyNjURMxEjNwYjIjUTNxcHJwd
OLY9ATC0sAzNdvCyUjiBvdAH1/rOKQ0IBUv4LO0a4AZaNjSBvbwAAAAABAE7/9QHDAfUAEAAAEzM

Copyright © 2001 -2024 Syncfusion Inc. 1463


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1464


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1465


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1466


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1467


TreeGrid How To

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
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq

Copyright © 2001 -2024 Syncfusion Inc. 1468


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1469


TreeGrid How To

ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB

Copyright © 2001 -2024 Syncfusion Inc. 1470


TreeGrid How To

aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr

Copyright © 2001 -2024 Syncfusion Inc. 1471


TreeGrid How To

/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [

Copyright © 2001 -2024 Syncfusion Inc. 1472


TreeGrid How To

{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1473


TreeGrid How To

endDate: new Date('02/14/2017'), duration: 0, progress: 0,


priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }

Copyright © 2001 -2024 Syncfusion Inc. 1474


TreeGrid How To

]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,

Copyright © 2001 -2024 Syncfusion Inc. 1475


TreeGrid How To

progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },

Copyright © 2001 -2024 Syncfusion Inc. 1476


TreeGrid How To

{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new


Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4

Copyright © 2001 -2024 Syncfusion Inc. 1477


TreeGrid How To

B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+

Copyright © 2001 -2024 Syncfusion Inc. 1478


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1479


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1480


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1481


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1482


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1483


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1484


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1485


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1486


TreeGrid How To

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
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE

Copyright © 2001 -2024 Syncfusion Inc. 1487


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1488


TreeGrid How To

z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ

Copyright © 2001 -2024 Syncfusion Inc. 1489


TreeGrid How To

ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9

Copyright © 2001 -2024 Syncfusion Inc. 1490


TreeGrid How To

0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

Copyright © 2001 -2024 Syncfusion Inc. 1491


TreeGrid How To

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Using tab inside the dialog editing in React Treegrid component
You can use tab component inside dialog edit UI using dialog template feature. The dialog template
feature can be enabled by defining editSettings.mode as Dialog and editSetting.template as a REACT
Component.
The following example demonstrate the usage of tab control inside the dialog template.
APP.JSX
{% raw %}
import * as React from 'react';
import { DataUtil } from '@syncfusion/ej2-data';
import { projectData } from './datasource';
import { projectData as orderData } from './datasource';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar, Page } from '@syncfusion/ej2-react-treegrid';
import { TabComponent, TabItemDirective, TabItemsDirective } from
'@syncfusion/ej2-react-navigations';
/* tslint:disable */
function App() {
const editOptions = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Dialog', template: dialogTemplate };
const toolbarOptions = ['Add', 'Edit', 'Delete'];
let treegrid;
function dialogTemplate(props) {
const a = [props, treegrid];
return (<DialogFormTemplate {...a}/>);
}
return (<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' height={265}
editSettings={editOptions} toolbar={toolbarOptions} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right'/>
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Page]}/>
</TreeGridComponent>);
}
;
function DialogFormTemplate(props) {

Copyright © 2001 -2024 Syncfusion Inc. 1492


TreeGrid How To

const value = props[0];


let treegrid = props[1];
let tab;
function tabOne() {
const tabOneProp = [value, tab, treegrid];
return (<TabOneComponent {...tabOneProp}/>);
}
function tabTwo() {
const tabTwoprop = [value, tab, treegrid];
return (<TabTwoComponent {...tabTwoprop}/>);
}
function next() {
let valid = true;
[].slice.call(document.getElementById('tab1')
.querySelectorAll('[name]')).forEach((element) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true') {
valid = false;
}
});
if (!valid) {
return false;
}
return true;
}
function selecting(e) {
{
if (e.isSwiped) {
e.cancel = true;
}
if (e.selectingIndex === 1) {
e.cancel = !next();
}
}
}
return (<div>
<TabComponent id='defaultTab' ref={(t) => tab = t}
selecting={selecting}>
<TabItemsDirective>
<TabItemDirective header={{ 'text': 'Details' }}
content={tabOne}/>
<TabItemDirective header={{ 'text': 'Verify' }}
content={tabTwo}/>
</TabItemsDirective>
</TabComponent>
</div>);
}
function TabOneComponent(props) {
const [tabdata, setTabData] = React.useState(props[0]);
let tab = props[1];
function onChange(args) {
setTabData({ [args.target.name]: args.target.value });
}
function next() {
let valid = true;

[].slice.call(document.getElementById('tab1').querySelectorAll('[name]'))

Copyright © 2001 -2024 Syncfusion Inc. 1493


TreeGrid How To

.forEach((element) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true') {
valid = false;
}
});
if (!valid) {
return;
}
if (tab) {
tab.select(1);
}
}
const data = tabdata;
return (<div id='tab1'>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input id="TaskID" name="TaskID" type="text"
disabled={!data.isAdd} value={data.TaskID} onChange={onChange}/>
<span className="e-float-line"/>
<label className="e-float-text e-label-top"> Task ID</label>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input value={data.TaskName} id="TaskName" name="TaskName"
type="text" onChange={onChange}/>
<span className="e-float-line"/>
<label className="e-float-text e-label-top">Task Name</label>
</div>
</div>
</div>
<div id='footer'>
<button id="nextBtn" className='e-info e-btn' type="button" style={{
float: "right" }} onClick={next}>Next</button>
</div>
</div>);
}
function TabTwoComponent(props) {
const priorityData = DataUtil.distinct(orderData, 'Priority', true);
const [tabdata, setTabData] = React.useState(props[0]);
let treegrid = props[2];
function onChange(args) {
setTabData({ [args.target.name]: args.target.value });
}
function submit() {
let valid = true;

[].slice.call(document.getElementById('tab1').querySelectorAll('[name]'))
.forEach((element) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true') {
valid = false;
}

Copyright © 2001 -2024 Syncfusion Inc. 1494


TreeGrid How To

});
if (!valid) {
return;
}
if (treegrid) {
treegrid.endEdit();
}
}
const data = tabdata;
return (<div id='tab2'>
<div className="form-row">
<div className="form-group col-md-6">
<NumericTextBoxComponent id="Duration" format='C2'
value={data.Duration} placeholder="Duration" floatLabelType='Always'/>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<DropDownListComponent id="Priority" value={data.Priority}
dataSource={priorityData} fields={{ text: 'Priority', value: 'Priority' }}
placeholder="Priority" popupHeight='300px' floatLabelType='Always'/>
</div>
</div>
<div id='footer'>
<button id="submitBtn" className="e-info e-btn" type="button" style={{
float: "right" }} onClick={submit}>SUBMIT</button>
</div>
</div>);
}
export default App;
{% endraw %}

APP.TSX
{% raw %}
import * as React from 'react';
import { DataUtil } from '@syncfusion/ej2-data';
import { projectData } from './datasource';
import { projectData as orderData } from './datasource';
import { SelectingEventArgs } from '@syncfusion/ej2-navigations';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar, ToolbarItems, EditSettingsModel, Page, TreeGrid }
from '@syncfusion/ej2-react-treegrid';
import { TabComponent, TabItemDirective, TabItemsDirective } from
'@syncfusion/ej2-react-navigations';
/* tslint:disable */
function App() {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding:
true, allowDeleting: true, mode: 'Dialog', template: dialogTemplate };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete'];
let treegrid: TreeGridComponent | null;
function dialogTemplate(props: IProjectModel): any {
const a = [props, treegrid]

Copyright © 2001 -2024 Syncfusion Inc. 1495


TreeGrid How To

return (<DialogFormTemplate {...a} />);


}
return (
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' height={265}
editSettings={editOptions} toolbar={toolbarOptions}
ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' />
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Page]} />
</TreeGridComponent>
);
};
function DialogFormTemplate(props:any) {
const value = props[0];
let treegrid = props[1];
let tab: TabComponent | null;
function tabOne() {
const tabOneProp = [value, tab, treegrid];
return (<TabOneComponent {...tabOneProp} />);
}
function tabTwo() {
const tabTwoprop = [value, tab, treegrid];
return (<TabTwoComponent {...tabTwoprop} />);
}
function next() {
let valid: boolean = true;
[].slice.call((document.getElementById('tab1') as HTMLElement)
.querySelectorAll('[name]')).forEach((element: any) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true'){
valid = false;
}
});
if (!valid) {
return false;
}
return true;
}
function selecting(e: SelectingEventArgs) {
{
if(e.isSwiped) {e.cancel = true;}
if(e.selectingIndex === 1) {e.cancel = !next();}
}

Copyright © 2001 -2024 Syncfusion Inc. 1496


TreeGrid How To

}
return (<div>
<TabComponent id='defaultTab' ref={(t: any) => tab = t}
selecting={selecting}>
<TabItemsDirective>
<TabItemDirective header= { { 'text': 'Details' } }
content={tabOne} />
<TabItemDirective header= { { 'text': 'Verify' } }
content={tabTwo}/>
</TabItemsDirective>
</TabComponent>
</div>);
}
function TabOneComponent(props:any) {
const [tabdata, setTabData] = React.useState(props[0]);
let tab = props[1];
function onChange(args: React.ChangeEvent) {
setTabData({[(args.target as HTMLInputElement).name]: (args.target as
HTMLInputElement).value});
}
function next() {
let valid: boolean = true;
[].slice.call((document.getElementById('tab1') as
HTMLElement).querySelectorAll('[name]'))
.forEach((element: any) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true'){
valid = false;
}
});
if (!valid) {
return
}
if (tab) {
tab.select(1);
}
}
const data: IProjectModel = tabdata;
return (<div id='tab1'>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input id="TaskID" name="TaskID" type="text"
disabled={!data.isAdd} value={data.TaskID} onChange={onChange} />
<span className="e-float-line"/>
<label className="e-float-text e-label-top"> Task ID</label>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper" >
<input value={data.TaskName} id="TaskName" name="TaskName"
type="text" onChange={onChange} />
<span className="e-float-line"/>
<label className="e-float-text e-label-top">Task Name</label>
</div>

Copyright © 2001 -2024 Syncfusion Inc. 1497


TreeGrid How To

</div>
</div>
<div id='footer'>
<button id="nextBtn" className='e-info e-btn' type="button"
style={{float: "right"}} onClick={next}>Next</button>
</div>
</div>);
}
function TabTwoComponent(props:any) {
const priorityData: any = DataUtil.distinct(orderData, 'Priority', true );
const [tabdata, setTabData] = React.useState(props[0]);
let treegrid = props[2]
function onChange(args: React.ChangeEvent) {
setTabData({[(args.target as HTMLInputElement).name]: (args.target as
HTMLInputElement).value});
}
function submit() {
let valid: boolean = true;
[].slice.call((document.getElementById('tab1') as
HTMLElement).querySelectorAll('[name]'))
.forEach((element: any) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true'){
valid = false;
}
});
if (!valid) {
return
}
if (treegrid) {
treegrid.endEdit();
}
}
const data: IProjectModel = tabdata;
return (<div id='tab2'>
<div className="form-row">
<div className="form-group col-md-6">
<NumericTextBoxComponent id="Duration" format='C2'
value={data.Duration} placeholder="Duration" floatLabelType='Always'/>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<DropDownListComponent id="Priority" value={data.Priority}
dataSource={priorityData}
fields={{text: 'Priority', value: 'Priority' }}
placeholder="Priority"
popupHeight='300px' floatLabelType='Always'/>
</div>
</div>
<div id='footer'>
<button id="submitBtn" className="e-info e-btn" type="button"
style={{float: "right"}} onClick={submit}>SUBMIT</button>
</div>
</div>);
}
export interface IProjectModel {

Copyright © 2001 -2024 Syncfusion Inc. 1498


TreeGrid How To

TaskID?: number;
TaskName?: string;
StartDate?: Date;
EndDate?: Date;
Duration?: number;
Priority?: string;
isAdd?: boolean;
currentTab?: number;
}
export default App;
{% endraw %}

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1499


TreeGrid How To

endDate: new Date('02/12/2017'), duration: 3, progress: 60,


priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 1500


TreeGrid How To

{ taskID: 17, taskName: 'Testing', startDate:


new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1501


TreeGrid How To

endDate: new Date('02/28/2017'), duration:


2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}

Copyright © 2001 -2024 Syncfusion Inc. 1502


TreeGrid How To

];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',

Copyright © 2001 -2024 Syncfusion Inc. 1503


TreeGrid How To

'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10


}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc

Copyright © 2001 -2024 Syncfusion Inc. 1504


TreeGrid How To

BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
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

Copyright © 2001 -2024 Syncfusion Inc. 1505


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1506


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1507


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1508


TreeGrid How To

mNTU0NzYzMhcBVzpaQy+gMToKPUkQIQ47M0paNBQjSi0ZDB4VJA45Ego7NRwwbkJEAbsaF0s5kYw
OJRABLgglVSkTKxgaNAsFCA8XSQMEFFNLgEcwUyAAAAMATv/0AbYCpgASABoAIwAAJQYjIjU1NDY
yFhUVBRUUFjMyNwEVJTU0JiIGNxcjJyY1NDMyAZ1NVK5lpl3+xUovSE/+8AEOUm1PbTUlQwUeEiM
vks1RWllPeBFIOTErAQ1aDlRDOUD7eWMHBh0AAAADAE7/9AG2AqcAEgAaACQAACUGIyI1NTQ2MhY
VFQUVFBYzMjcBFSU1NCYiBjc3NjMyFxYUBwcBnU1UrmWmXf7FSi9IT/7wAQ5SbU91NAkRGAYBBUQ
jL5LNUVpZT3gRSDkxKwENWg5UQzlAg3kUEwUMB2IAAAMATv/0AbYC0AASABoAIAAAJQYjIjU1NDY
yFhUVBRUUFjMyNwEVJTU0JiIGJzcXBycHAZ1NVK5lpl3+xUovSE/+8AEOUm1PEJSOIG90Iy+SzVF
aWU94EUg5MSsBDVoOVEM5QKyNjSBvbwAAAAIAI//0AYsB/gASABoAACUGIyI1NTQ2MhYVFQUVFBY
zMjcBFSU1NCYiBgFyTVSuZaZd/sVKL0hP/vABDlJtTyMvks1RWllPeBFIOTErAQ1aDlRDOUAAAAA
CAE4AAADDAqYACAAMAAATFyMnJjU0MzIXMxEjhjUlQwUeEhgtLQKSeWMHBh2x/gsAAAAAAgBRAAA
AwQKnAAkADQAAEzc2MzIXFhQPAjMRI1Q0CREYBgEFRCctLQIaeRQTBQwHYiX+CwAAAAAC/8QAAAD
mAtAABQAJAAADNxcHJwcXMxEjPJSOIG90XC0tAkONjSBvby7+CwAAAAAD/98AAAC1AlwAAwALABM
AABMzESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAA
CAE4AAAG/An4AFAAmAAABIgcRIxEzFTYzMhcWFREjETQmJyYnIgcnNjMyFxYzMjcXBiMiJiYBCE4
/LS04VzknVSw9LBFbKiMVLzUYRBcYKB8UKzEULzEB1CL+TgH1GyMTJ2n+pgFYNj8FAnwmIDQfCyI
hLxQWAAADAE7/9gHDAqYACwAXACAAADc1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBhMXIycmNTQzMk5
hsmJcul8tS4hITYBObDUlQwUeEriEX2VpW4RUbm/YjEBTUkGMTkxLAQZ5YwcGHQAAAwBO//YBwwK
nAAsAFwAhAAA3NTQ2MhYVFRQGIiY3FRQWMjY1NTQmIgY3NzYzMhcWFAcHTmGyYly6Xy1LiEhNgE5
0NAkRGAUCBUS4hF9laVuEVG5v2IxAU1JBjE5MS455FBMFDAdiAAADAE7/9gHDAtAACwAXAB0AADc
1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBic3FwcnB05hsmJcul8tS4hITYBOBJSOIG90uIRfZWlbhFR
ub9iMQFNSQYxOTEu3jY0gb28AAAADAE7/9gHDAn4ACwAXACkAADc1NDYyFhUVFAYiJjcVFBYyNjU
1NCYiBjciByc2MzIXFjMyNxcGIyImJk5hsmJcul8tS4hITYBOTCojFS81GEMYGCgfFCsxFS4xuIR
fZWlbhFRub9iMQFNSQYxOTEvEJiA0HwsiIS8UFgAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiI
mNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEhNgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAMATgDpAY0
CFgADAAsAEwAAEyEVIRYyFhQGIiY0EjIWFAYiJjROAT/+wZcWEREWEBAWEREWEAGYLEwQFhERFgE
GEBYRERYAAAMATv+OAc0CgwAVAB4AJwAAATMHFhUVFAYjIicHIzcmNTU0NjMyFwcVFBcTJiMiBgU
0JwMWMzI2NQGhLEg+XF0lIS8vN09hWzAp6DOkIChBTgEbIqEaHURIAoOsNWaEVG4KcoUzcoRfZRO
wjE0pAYsRS09HKP56CFJBAAACAE7/9QHDAqYAEAAZAAATMxEUMzI2NREzESM3BiMiNRMXIycmNTQ
zMk4tj0BMLSwDM128oDUlQwUeEgH1/rOKQ0IBUv4LO0a4AeV5YwcGHQAAAAACAE7/9QHDAqcAEAA
aAAATMxEUMzI2NREzESM3BiMiNRM3NjMyFxYUBwdOLY9ATC0sAzNdvKE0CREYBQIFRAH1/rOKQ0I
BUv4LO0a4AW15FBMFDAdiAAAAAgBO//UBwwLQABAAFgAAEzMRFDMyNjURMxEjNwYjIjUTNxcHJwd
OLY9ATC0sAzNdvCyUjiBvdAH1/rOKQ0IBUv4LO0a4AZaNjSBvbwAAAAABAE7/9QHDAfUAEAAAEzM
RFDMyNjURMxEjNwYjIjVOLY9ATC0sAzNdvAH1/rOKQ0IBUv4LO0a4AAIATv8uAeUCpwAcACYAABM
zERQWMjY1NTQ3NjcXBhURFAYHJzY1NQYjIiY1Ezc2MzIXFhQHB04rSYVSGg4XDSAwOQxKKG1YX54
0CREYBgEFRAH1/rFCR0dCyGMYDQgfEjr+MD1GEiMaVntIX10BankUEwUMB2IAAAIATgAAAccChAA
NABYAABMzFTYyFhQGIyImJxUjACYiBgcUFjI2Ti02tWFoUilUFS0BTFRzVgJRfVEChMtEbbNpKir
IAYtKSEhRVU8AAAAAAwBO/y4B5QJcABwAJAAsAAATMxEUFjI2NTU0NzY3FwYVERQGByc2NTUGIyI
mNRIyFhQGIiY0NjIWFAYiJjROK0mFUhoOFw0gMDkMSihtWF9nFhERFhGvFhERFhAB9f6xQkdHQsh
jGA0IHxI6/jA9RhIjGlZ7SF9dAawRFhAQFhEQFhERFgAAAAMADAAAAgUDFAAHAAoADgAAEzMTIwM
jAyMTAzMDMxUj8irpMFbwVC/7atbc2dkCvP1EAQD/AAJz/rkB6C4AAAADAE7/9gHPAlQAGgApAC0
AAAUiNTU0NzYzMhc0JiMiIzcyFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgYTMxUjASnbRiQlektFXAI
DA1EnFSASDAIDaO0vKS9tNFNiBQQrPy/Z2QqzU2MiETg5RiQTCxYkGxcjJv7WCgEDVzA+Cg0JAQ8
uBjUBIC4AAwAMAAACBQNQAAcACgAaAAATMxMjAyMDIxMDMwMzFRQWMjY1NTMVFAYiJjXyKukwVvB
UL/tq1tsmKkErJkJeQgK8/UQBAP8AAnP+uQIkBR4uLh4FBS9CQi8AAAADAE7/9gHPApAAGgApADk
AAAUiNTU0NzYzMhc0JiMiIzcyFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgYTMxUUFjI2NTUzFRQGIiY
1ASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrP0omKkErJkJeQgqzU2MiETg5RiQTCxY
kGxcjJv7WCgEDVzA+Cg0JAQ8uBjUBXAUeLi4eBQUvQkIvAAIATv8rAnMCvAAYABsAACEGFRQWMzI
3FwYjIicmNTQ3MwMjAyMTMxMDAzMCRmcaFyoaHyBBGhYsYAFW8FQv5irp/mrWUi8SGyofMgsVM0M
/AQD/AAK8/UQCc/65AAAAAAIAJf8rAdIB/QAtADsAAAUGIi4CNTU0NzYzMhc0JiMiIzcyFx4DFxY
VESMGFRQWMzI3FwYjIicmNTQDFRQWFxY3ESYnIiMiBgFsPEtcOylGJCV6S0VcAgMDUScVIBIMAgM
BZxoXKhofIEEaFizELyhad1NiBQQrPwUGDyRLNlNjIhE4OUYkEwsWJBsXIyb+1lIvEhsqHzILFTN
AATtXMD4KGBQBDy4GNQAAAAACAEL/9gGrA2sAHQAnAAAlBiMiLgI1ETQ2NzYzMhcHJiMiBwYGFRE
UFxYyNwM3NjMyFxYUBwcBq1VNEEFJLSssLT5OQA46OVApERhPH2tZtzQJERgGAQVEFyEGJ1U/AUF
MThsZISAYKBA8KP64ayINHgKheRQTBQwHYgAAAgBO//UBkAKnABcAIQAAASYiBgYVFRQzMjcXBiI
nJjU1NDc2MzIXJzc2MzIXFhQHBwGBOlpDL6AxOgpAaDJoHDBuQkS9NAkRGAUCBUQBuxoXSzmRjA4
lERAijYBHMFMgPHkUEwUMB2IAAAAAAgBC//YBqwORAAUAIwAAEzcXBycHAQYjIi4CNRE0Njc2MzI
XByYjIgcGBhURFBcWMjeDlI4gb3QBCVVNEEFJLSssLT5OQA46OVApERhPH2tZAwSNjSBvb/0zIQY

Copyright © 2001 -2024 Syncfusion Inc. 1509


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1510


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1511


TreeGrid How To

zAnd5FBQEDAdiAAAAAAIAMf/xAZkCpwAgACoAAAEHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzI
WFyc3NjMyFxYUBwcBWBAmcEhFV1c8WatiAisGT21OOlZWISdPWx84DYk0CREYBQIFRAHkJhoBMio
pKxofQW5QUjwvNTJVMhscHCFjVg8HL3kUEwUMB2IAAAIAJf/1AgADkQAiACgAADczFhYyNjU0LgQ
1NDYzMhcHJiIGFRQeBBUUBiImEzcXBycHJS4EZqZtPVprWj10bVM/DjmZZD1bals9ded9ZJSOIG9
0sjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXMCnI2NIG9vAAIATv/xAbYC0QAFACYAABM3Fwc
nBxcHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWF3SUjiBvdOIQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAwCRI2NIG9vQCYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPBwAAAAABACT/LgGMAgE
ANQAAAQcmJgYVFB4DFAYHBzYyFhQGIic3FjI2NCcmIgcHJzcmJiczFhYyNjQuAicmNDYzMhYXAUs
QJnBIRVdXPFRRHQ47M0paNBQjSi0ZCx8VJA4ySlQCKwZPbU46VlYhJ09bHzgMAeQmGgEyKikrGh9
BbE8DKAglVSkTKxgaNAsFCA8XQAZQNy81MlUyGxwcIWNWDwcAAgAl//UCAAO9ACIAKAAANzMWFjI
2NTQuBDU0NjMyFwcmIgYVFB4EFRQGIiYTNxc3FwclLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11531
zH3RwH46yOFpKUS9DIicmSjRGZh4rHUQ/KDsfJylQN1xtcwM1IG9vII0AAgBO//EBtgL8ACAAJgA
AAQcmJgYVFB4DFAYiJiczFhYyNjQuAicmNDYzMhYXJzcXNxcHAXUQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAzbH3RwH44B5CYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPB/Egb28gjQAAAAIAAP9
IAZICvAAHABUAABEhFSMRIxEjEycmNjYyFhYVFAcnNjYBkrUtsMcHEQEPDAwSQCAWHwK8Kf1tApP
9BwIKHw4BEws3NRcMHgACACz/SADqArwADAAaAAATMxUzByMRFBcHJiY1FycmNjYyFhYVFAcnNjY
6LYMUb0oNODIwBxEBDwwMEkAgFh8CvMcr/rpVGCQQRjvqAgofDgETCzc1FwweAAAAAAIAAAAAAZI
DiwAHAA0AABEhFSMRIxEjNzcXNxcHAZK1LbA2H3RwH44CvCn9bQKT2CBvbyCNAAAAAv/r//MBGAO
LAAwAEgAAEzMVMwcjERQXByYmNQM3FzcXB2gtgxRvSg04Mn0fdHAfjgK8xyv+ulUYJBBGOwLnIG9
vII0AAAAAAgAAAAABkgMUAAcACwAAESEVIxEjESM3MxUjAZK1LbBa2dkCvCn9bQKTgS4AAAAAAQB
O//MBRAK8ABQAABMzETMVMwcjFTMVIxUUFwcmJjU1I05GLYMUb3d3Sg04MkYBZgFWxytkLLZVGCQ
QRju2AAIASv/5Ae8DOwATACUAABMzERQWMjY1ETMRFA4CIi4CNRMiByc2MzIXFjMyNxcGIyImJko
tYohhLSU/RlBHPyWQKiMVLzUYRBcYKB8UKzEULzECvf33RkxMRgIJ/f01TioUFCpONQJTJiA0Hws
iIS8UFgAAAgBO//UBwwJ+ABAAIgAAEzMRFDMyNjURMxEjNwYjIjUTIgcnNjMyFxYzMjcXBiMiJiZ
OLY9ATC0sAzNdvHUqIxUvNRhDGBgoHxQrMRUuMQH1/rOKQ0IBUv4LO0a4AaMmIDQfCyIhLxQWAAA
AAgBK//kB7wMUABMAFwAAEzMRFBYyNjURMxEUDgIiLgI1EzMVI0otYohhLSU/RlBHPyVk2dkCvf3
3RkxMRgIJ/f01TioUFCpONQJaLgAAAAACAE7/9QHDAlQAEAAUAAATMxEUMzI2NREzESM3BiMiNRM
zFSNOLY9ATC0sAzNdvEnZ2QH1/rOKQ0IBUv4LO0a4AacuAAIASv/5Ae8DSgATACMAABMzERQWMjY
1ETMRFA4CIi4CNRMzFRQWMjY1NTMVFAYiJjVKLWKIYS0lP0ZQRz8lYSYrQCsmQ1xDAr3990ZMTEY
CCf39NU4qFBQqTjUCkAUeLi4eBQUvQkIvAAAAAAIATv/1AcMCjQAPACAAABMzFRQWMjY1NTMVFAY
iJjUHMxEUMzI2NREzESM3BiMiNZ0mK0ArJkNcQ08tj0BMLSwDM128Ao0FHi4uHgUFLkNDLpP+s4p
DQgFS/gs7RrgAAAMASv/5Ae8DcwATABsAIwAAEzMRFBYyNjURMxEUDgIiLgI1EhQWMjY0JiIGNDY
yFhQGIkotYohhLSU/RlBHPyWHK0ArK0BRQ1xDQ1wCvf33RkxMRgIJ/f01TioUFCpONQJoQCsrQCt
5XENDXEMAAAADAE7/9QHDAr0AEAAYACAAABMzERQzMjY1ETMRIzcGIyI1EhQWMjY0JiIGNDYyFhQ
GIk4tj0BMLSwDM128dStAKytAUUNcQ0NcAfX+s4pDQgFS/gs7RrgBv0ArK0AreVxDQ1xDAAAAAAM
ASv/5Ae8DaAATAB0AJwAAEzMRFBYyNjURMxEUDgIiLgI1Ezc2MzIXFhQHByM3NjMyFxYUBwdKLWK
IYS0lP0ZQRz8l7zQJERgFAgVElDQJERgFAgVEAr3990ZMTEYCCf39NU4qFBQqTjUCIXkUFAQMB2J
5FBQEDAdiAAADAE7/9QHDAqwAEAAaACQAABMzERQzMjY1ETMRIzcGIyI1Ezc2MzIXFhQHByM3NjM
yFxYUBwdOLY9ATC0sAzNdvNI0CREYBgEFRJQ0CREYBgEFRAH1/rOKQ0IBUv4LO0a4AXJ5FBQEDAd
ieRQUBAwHYgAAAAEASv8rAe8CvQAgAAATMxEUFjI2NREzERQGBwYVFBYzMjcXBiMiJyY1NDcmJjV
KLWKIYS1mTWAaFyoaHyBBGhYsVlFuAr3990ZMTEYCCf39XFwHTi4SGyofMgsVM0A8BVxfAAABACT
/KwHGAfUAIAAAIQYVFBYzMjcXBiMiJyY1NDczNwYjIjURMxEUMzI2NREzAZlnGhcqGh8gQRoWLGA
EAzNdvC2PQEwtUi8SGyofMgsVM0M/O0a4AUj+s4pDQgFSAAABADz/+QH4ArwAGAAAEzMVFBYyNjc
RMxEUByc2NzY1NQYGIyImNTwtYpdeCi5pCzIOBhtiLGp7Arz9TFI7NQEr/d2OEh8TMRkjnCAfaWc
AAAIAHwAAAgYDngAJABMAABMhFQEhFSE1ASE3NzYzMhcWFAcHLAHU/lgBrv4ZAaj+ZeQ0CREYBgE
FRAK8Kf2WKSkCan55FBQEDAdiAAACAE4AAAG9AqcACQATAAATIRUBIRUhNQEhNzc2MzIXFhQHB1c
BUf7dATj+kQEh/uiJNAkRGAYBBUQB9Sn+XSkpAaNOeRQTBQwHYgAAAgAfAAACBgMZAAkAEQAAEyE
VASEVITUBITY0NjIWFAYiLAHU/lgBrv4ZAaj+ZdcRFhAQFgK8Kf2WKSkCamAWEBAWEQACAE4AAAG
9AloACQARAAATIRUBIRUhNQEhNjQ2MhYUBiJXAVH+3QE4/pEBIf7okREWEBAWAfUp/l0pKQGjaBY
QEBYRAAIAHwAAAgYDvQAJAA8AABMhFQEhFSE1ASETNxc3FwcsAdT+WAGu/hkBqP5lbh90cB+OArw
p/ZYpKQJqAQogb28gjQAAAgBOAAABvQL8AAkADwAAEyEVASEVITUBIRM3FzcXB1cBUf7dATj+kQE
h/uggH3RwH44B9Sn+XSkpAaMBECBvbyCNAAACACX/SAIAAsYAIgAwAAA3MxYWMjY1NC4ENTQ2MzI
XByYiBhUUHgQVFAYiJhcnJjY2MhYWFRQHJzY2JS4EZqZtPVprWj10bVM/DjmZZD1bals9ded96gc
RAQ8MDBJAIBYfsjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXPOAgofDgETCzc1FwweAAIAJP9
IAYwCAQAgAC4AAAEHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWFwMnJjY2MhYWFRQHJzY2AUs
QJnBIRVdXPFmrYgIrBk9tTjpWViEnT1sfOAxoBxEBDwwMEkAgFh8B5CYaATIqKSsaH0FuUFI8LzU
yVTIbHBwhY1YPB/2vAgofDgETCzc1FwweAAEALgJWAVADAwAFAAATNxcHJwculI4gb3QCdo2NIG9

Copyright © 2001 -2024 Syncfusion Inc. 1512


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1513


TreeGrid How To

EAE7/9gHKAvYACwAUABwAJAAAEzMRFCA1ETMRFCA1Ezc2MzIXFgcHJjIWFAYiJjQ2MhYUBiImNE4
tASIt/oSsNAkRGAYDB0RqFhERFhCvFhERFhAB9f6whoYBUP63trYBvXkUFA0KYhEQFhERFhAQFhE
RFgAAAAACAE7//AHWAfsAFgAiAAATMhc3FwYVERYXByImBiInJjU1NDY3NhcmIyIGFRUUFzIyN99
ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBRwH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAA
DAE7/XwHAAr0AEAAeACoAABI2MhYUBxYWFRUUIyInFSMRFyIHERYyNjY1NTQmJyYnFTY3Njc2NCc
mIyJORYBDKEFR2jI5LbxRPTpZUzI/Lg+cKFMjCgMOFSpeAmZXS2MgCFlEuKUKmAK6UyD+egsROi+
4OkAEAVRLFRcKJQwkFiEAAAABABX/OgHjAf8AGwAAEzMTFhYXEzY2NxcGBgcDBhQXByY1NDc3LgI
nFS5qDSIdahAoKR8jIhJ9FgwfHAoWHBgnDgH1/pcuMQkBYDQ6DRsRJDf+XkIuEhobKBgdSQ8ROS0
AAAAAAgBO//YBwwLBABsAKAAAEyY1NDYzMwcjIgcGFRQXFhcWFRUUIyImNTU0NgcVFBYzMjU1NCY
nBgbcLDs7LBIhIxIMMnQeIblfXUseUD+MRkZCTQH5JjgnQykaEBA3HkkuND9nwmdbflBltYVLR5J
8KmAhBlAAAAAAAQBO//YBpwH/ACQAABM0NzYyFxUmIgYHBhQWMzMHIyIGFBYzMjY3NxcGIicmNTQ
3JiZjNCpoOCxDMxcXJyl/D2YxP0ZAJE0UFA1OqS40URwgAYJBIRsPKg8HFBRDNiw4az4QCAkpIig
uS2QeCkAAAAEATv8vAa8CvAAXAAATIRcGBwYVFBYyNxUHNQYiJyY1NDc2NyOSARANO0quUYBKLTF
lLFokSrLcArwoL1XGkkhGFPoV2gwXMG1US5uqAAAAAQBO/y0BvwH9ABQAAAEiBxEjETMVNjMyFxY
VEScRNCYnJgEITj8tLThXOSdVLD0sEQHUIv5OAfUbIxMnaf3TFAIXNj8FAgAAAwA+//oBugLGABA
AHQAqAAA3NTY3JjU0NjMWFhURFAYmJjcVFBYyNjURJiIOAjc2MzIXNCYjIgcGFRQ+AjQiXUtfYWO
3Yi1SfVMMKFBeQDFYfA8OUUEtHi+/j0IlQjpBVAJsX/7GWWwBa+iSR1BRQwEVAQodN1kxAVNOEx1
AMAABADYAAABjAfUAAwAAEzMRIzYtLQH1/gsAAAAAAQBO//8BwAIAABAAABMXFTczBxcWMxcmJic
nBxUjTi3jPL1/OSkCLEAmcEMtAgAL+PjOs00oATY0m0XAAAAAAAEATv/2Ah0CvAAjAAATNTIzMhY
XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq
5X10tTUKNIRsGMyeAr7MwQw8ZBAUDByENOQwmcYfCZwELt0pIko4vSRoBCwAAAAABAE7/8wF7AfQ
ADQAAEyEVIxEUFhcHJiY1ESNOAS2CICQNNy1+AfQr/rswMgwjEEU8AUUAAQBC//YBvgH1AAsAABM
zERQgNREzERQgNUItASIt/oQB9f6whoYBUP63trYAAAAAAgBO/ykCXQH7AB0AKAAAExcGFRUUFjM
zETY2MzIWFRUUBiMjFSc1IyImNTU0BREzMjY1NTQmIyLCGF9PQDICNi9XY11fNy4yX10BHDdDTFY
wQAH3JBiAiEdJAW8wOW1bdltn0gvHZ1t9mEj+mUtHiEtJAAABAE7/LAIVAfUAFQAAEzMTEzMDFx4
EMwciIyInJwMnE1IykZoys3oPJhoZAwIXAQFLMmqdKq4B9f7VASv+o/sgIwkDASFj2f7NEQFTAAA
AAAEATv8lAl0B+gAjAAATMxEUFjMzETMRMzI2NTU0JyYnNx4CFRUUBiMjFSc1IyImNU4tUD8yLjd
ATxYIESQbGgNdXzcuMl9dAfT+wktHAdD+MEdMskseCw8OETsqKp1bZ9YLy2dbAAAAAQBC//QCVgH
0ACQAABMXBgYVFRQWMzI3NTMVFjMyNjU1NCYnNxYVFRQjIicGIyI1NTStGigwQy5SAy4BVC5DMCk
ba6FHIiJHoQH0JAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAD/98AAAC1AlwAAwALABMAABM
zESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAADAE7
/9gHKAlwACwATABsAABMzERQgNREzERQgNRIyFhQGIiY0NjIWFAYiJjROLQEiLf6EZhYRERYRrxY
RERYQAfX+sIaGAVD+t7a2AbARFhAQFhEQFhERFgAAAAMATv/2AcMCpwAIABQAIAAAEzc2MzIXFgc
HAzU0NjIWFRUUBiImNxUUFjI2NTU0JiIG7zQJERgFBAdExWGyYly6Xy1LiEhNgE4CGnkUEw4KYv6
ehF9laVuEVG5v2IxAU1JBjE5MSwAAAgBO//YBygKnAAgAFAAAEzc2MzIXFg8CMxEUIDURMxEUIDX
5NAkRGAUEB0TPLQEiLf6EAhp5FBMOCmIl/rCGhgFQ/re2tgAAAgBO//QCYgKnAAgALQAAATc2MzI
XFg8CFwYGFRUUFjMyNzUzFRYzMjY1NTQmJzcWFRUUIyInBiMiNTU0AUM0CREYBQQHRK4aKDBDLlI
DLgFULkMwKRtroUciIkehAhp5FBMOCmImJAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAAAf/
+Aj0AXgLIAA0AABMXFgYGIiYmNTQ3FwYGIAcRAQ8MDBJAIBYfAnYCCh8OARMLNzUXDB4AAAAB//4
CMABeArsADQAAEycmNjYyFhYVFAcnNjY8BxEBDwwMEkAgFh8CggIKHw4BEws3NRcMHgAAAAEAEf+
sAHEANwANAAAXJyY2NjIWFhUUByc2Nk8HEQEPDAwSQCAWHwICCh8OARMLNzUXDB4AAAAAAv/+AkE
A9QLMAA0AGwAAExcWBgYiJiY1NDcXBgYXFxYGBiImJjU0NxcGBiAHEQEPDAwSQCAWH44HEQEPDAw
SQCAWHwJ6AgofDgETCzc1FwweEQIKHw4BEws3NRcMHgAAAv/+AjAA9QK7AA0AGwAAEycmNjYyFhY
VFAcnNjY3JyY2NjIWFhUUByc2NjwHEQEPDAwSQCAWH6AHEQEPDAwSQCAWHwKCAgofDgETCzc1Fww
eEQIKHw4BEws3NRcMHgAAAgAR/64BCAA5AA0AGwAAMycmNjYyFhYVFAcnNjY3JyY2NjIWFhUUByc

Copyright © 2001 -2024 Syncfusion Inc. 1514


TreeGrid How To

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
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA

Copyright © 2001 -2024 Syncfusion Inc. 1515


TreeGrid How To

BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd

Copyright © 2001 -2024 Syncfusion Inc. 1516


TreeGrid How To

hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC

Copyright © 2001 -2024 Syncfusion Inc. 1517


TreeGrid How To

c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1518


TreeGrid How To

endDate: new Date('02/07/2017'), duration: 0, progress: 0,


priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,

Copyright © 2001 -2024 Syncfusion Inc. 1519


TreeGrid How To

taskName: 'Implementation Module 1',


startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1520


TreeGrid How To

endDate: new Date('02/20/2017'), duration: 4,


progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 1521


TreeGrid How To

{ taskID: 34, taskName: 'Bug fix', startDate: new


Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',

Copyright © 2001 -2024 Syncfusion Inc. 1522


TreeGrid How To

'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },


{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB

Copyright © 2001 -2024 Syncfusion Inc. 1523


TreeGrid How To

LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY
yFxYUBwMhFSE1ATY1NCYiBlEqE1SGLzQs/QEr/qEBCSZLX0ACPhA1Qyowhkn+jSorAYc8LzpENAA
AAAEAGv/0AaACvAAYAAATIRUHMzIWFAYjIiYnNxYWMzI2NCYnIxMjSQEfrA9ZfHxZNl4dJhdJK0h
gYEJnx+gCvCj3fLF8MywYIihkil8DAR4AAQAaAAAB0AK8AA0AABMzAzMRMxEzByMRIxEh1S+d8y1
JDzot/sACvP7hAR/+4Sz+jwFxAAEAGv/0AaACvAAXAAATIRUjBzMyFhQGIyImJzcWFjMyNjQmIyN
fAQniGV5ZfHxZNl4dJRZLK0dhYEiPArwt8nyxfDMsGCIoY4pjAAACABr/9AHDArwAGAAiAAABMxU
jIgcGBhUVNjYzMhYUBiImNRE0NzY2AxUUFjI2NCYiBgEOIydLOh0iGFs1WXx9sHwyG2SFYoxjYox
hArwtLhdRNYYvMHyxfHxZAQRTSCUv/hQHR2JijWJdAAABABoAAAGkArwABgAAEyEVASMBIRoBiv6
0MQFJ/qoCvC39cQKPAAAAAwAa//QBwALFAAgAHgAmAAATBgYUFjI2NCYnJiY1NDYyFhUUBgcWFhU
UBiImNTQ2EgYUFhY2NCboRF1gjGBimicvZJJlLyk4RHqyekRZTExqT0sBawJfil9fil8bFVAtSmV
lSi5PFhhpPFh6elg+ZwEvTWxJAUluTAAAAAIAGgAAAcMCxQAWACAAADMjNTMyNjU1BgYjIiY0NjI
WFREUBwYGEzU0JiIGFBYyNs8jJ091GFs1WXx8sXwzGmSFYo1iYoxgLWRmgy8vfLB9fFn+/lNHJi4
B6QdHYmOMYl0AAAACABoAbwBRAaEABwAPAAA2MhYUBiImNBIyFhQGIiY0KhYRERYQEBYRERYQphA
WEREWAQsQFhERFgAAAAACABr/rQB6ASwABwAVAAASMhYUBiImNBMnJjY2MhYWFRQHJzY2URYRERY
QFwcRAQ8MDBJAIBYfASwQFhERFv7jAgofDgETCzc1FwweAAAAAAEAGgBQAU8CfQAGAAABFwcXBwE

Copyright © 2001 -2024 Syncfusion Inc. 1524


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1525


TreeGrid How To

+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

Copyright © 2001 -2024 Syncfusion Inc. 1526


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1527


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1528


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1529


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1530


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1531


TreeGrid How To

XByYiBhUUHgQVFAYiJhcnJjY2MhYWFRQHJzY2JS4EZqZtPVprWj10bVM/DjmZZD1bals9ded96gc
RAQ8MDBJAIBYfsjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXPOAgofDgETCzc1FwweAAIAJP9
IAYwCAQAgAC4AAAEHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWFwMnJjY2MhYWFRQHJzY2AUs
QJnBIRVdXPFmrYgIrBk9tTjpWViEnT1sfOAxoBxEBDwwMEkAgFh8B5CYaATIqKSsaH0FuUFI8LzU
yVTIbHBwhY1YPB/2vAgofDgETCzc1FwweAAEALgJWAVADAwAFAAATNxcHJwculI4gb3QCdo2NIG9
vAAAAAAEALgJPAVAC/AAFAAATNxc3FwcuH3RwH44C3CBvbyCNAAAAAAEALgJGARACvAAPAAATMxU
UFjI2NTUzFRQGIiY1LiYqQSsmQl5CArwFHi4uHgUFL0JCLwABAAQCjwA7AsYABwAAEjQ2MhYUBiI
EERYQEBYCoBYQEBYRAAAC//4CJQDgAwcABwAPAAASFBYyNjQmIgY0NjIWFAYiJCw+LCw+UkJeQkJ
eArZAKytAK3lcQ0NcQwAAAAABAEz/LgEJAAMAEAAANwYVFBYzMjcXBiMiJyY1NDfcZxoXKhofIEE
aFixgA1IvEhsqHzILFTNDPwAAAAABAE4CZwGYAr8AEQAAEyIHJzYzMhcWMzI3FwYjIiYmsCojFS8
1GEQXGCgfFCsxFC8xApEmIDQfCyIhLxQWAAAAAv/+AjgA2wLFAAkAEwAAEzc2MzIXFhQHByM3NjM
yFxYUBwduNAkRGAYBBUSUNAkRGAYBBUQCOHkUEwUMB2J5FBMFDAdiAAAAAwBOAqIBJANoAAgAEAA
YAAATNzYzMhcWBwcGMhYUBiImNDYyFhQGIiY0ojQJERgGAwdEaBYRERYQrxYRERYQAtt5FBQNCmI
CEBYRERYQEBYRERYAAwBOAAACRwLFAAcACgAUAAABMxMjAyMDIxMDMwE3NjMyFxYUBwcBNCrpMFb
wVC/7atb+qDQJERgFAgVEArz9RAEA/wACc/65AQx5FBMFDAdiAAAAAgBOAAACQwLFAAgAFAAAEzc
2MzIXFgcHNyEVIRUzByMRIRUhTjQJERgGAwdEgwFO/t/KD7sBH/60Ajh5FBMOCmKEKvUs/rgpAAA
AAAIATgAAAqUCxQAIABQAABM3NjMyFxYHBzczESERMxEjESERI040CREYBgMHRIUtAVQtLf6sLQI
4eRQTDgpihP7hAR/9RAFx/o8AAAACAE4AAAFfAsUABQAPAAATMxEjEScHNzYzMhcWFAcH6nUtSJw
0CREYBgEFRAK8/UQCkgJceRQTBQwHYgADAE7/9QJnAswACwAXACEAADcRNDYyFhURFAYiJhMRFBY
yNjURNCYiBgc3NjMyFxYUBwfDccZte6x9LV+OXlmaWKI0CREYBgEFRLkBQmdqcGL+v2VfXwGu/rd
MTUtPAUhNUlIXeRQTBQwHYgACAE7/+QKtAsUACAAhAAATNzYzMhcWBwc3MxUUFjI2NxEzERQHJzY
3NjU1BgYjIiY1TjQJERgGAwdEfy1il14KLmkLMg0HG2IsansCOHkUEw4KYoT9TFI7NQEr/d2OEh8
TMRkjnCAfaWcAAAACAE4AAAKuAsUAJgAwAAABMzIWFREUBgczFyM1Njc2NRE0JiMjIgYVERQXFhc
VIzczJjURNDYHNzYzMhcWFAcHAXVwXl4tK1YP5D0xPU9BcEBPPC5A5A5UVV7JNAkRGAYBBUQCw3B
c/s07RhkqKggaIVcBOkxQUUv+xlchGggqKi5sATNccIt5FBMFDAdiAAAEAA8AAADkAvUAAwAMABQ
AHAAAEzMRIxM3NjMyFxYHByYyFhQGIiY0NjIWFAYiJjRfLS0BNAkRGAYDB0RlFhERFhCuFhERFhA
B9f4LAmh5FBMOCmISEBYRERYQEBYRERYAAAAAAgAMAAACBQK8AAcACgAAEzMTIwMjAyMTAzPyKuk
wVvBUL/tq1gK8/UQBAP8AAnP+uQAAAAMATgAAAf8CvAARABkAIQAAEzMyFhQHBhUVFhYVFAcGBiM
jExUzMjY0JiMDETMyNTQmI07dUl5IAS8+KRVTOuYtuTVESkCot51SPgK8VLArAQEBFFtKUDsgJgK
R9D57O/7g/rqqSFQAAQBOAAABnAK8AAUAABMhFSERI04BTv7fLQK8K/1vAAACAAwAAAIFArwAAwA
GAAATMxMhEwMh8Svp/gf6vgGAArz9RAJ3/bIAAQBOAAABnAK8AAsAABMhFSEVMwcjESEVIU4BTv7
fyg+7AR/+tAK8KvUs/rgpAAAAAQBOAAACNQK8AAkAABMhFQEhFSE1ASFbAdT+WAGu/hkBqP5lArw
p/ZYpKQJqAAAAAQBQAAAB/gK8AAsAABMzESERMxEjESERI1AtAVQtLf6sLQK8/uEBH/1EAXH+jwA
AAwBO//UB8gLMAAsAEwAbAAA3ETQ2MhYVERQGIiYTFSE1NCYiBhAWMjY1NSEVTnHGbXusfS0BS1m
aWF+OXv61uQFCZ2pwYv6/ZV9fAa6ZmU1SUv4eTUtPgoMAAAABAFAAAADFArwABQAAEzMRIxEnUHU
tSAK8/UQCkgIAAAEATgAAAdsCvQALAAATMxETMwMBIwMHESNOLfg00QEFNew/LQK9/qABYP7X/mw
Balr+8AABAAwAAAIFArwABgAAEzMTIwMDI/Er6TDPyy8CvP1EAnb9igABAFAAAAJoArwADAAAEzM
TEzMRIxEDIwMRI1At3uAtLcgwxi0CvP2JAnf9RAI5/ccCOf3HAAAAAAEAUAAAAjwCvAAJAAATMwE
RMxEjAREjUC0Bkyws/m0tArz9lgJq/UQCa/2VAAAAAAMATgAAAksCvAADAAwAFQAAEyEVIRMhByE
iByc2NgMhMjcXBgYjIc0BCP74EgFFEf7MVBojEEYeATRTGiQQRjv+uwGdLAFLKkwNODH9bk0NODI
AAAIAPv/1AeICzAALABcAADcRNDYyFhURFAYiJhMRFBYyNjURNCYiBj5xxm17rH0tX45eWZpYuQF
CZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUgAAAQBQAAAB/gK8AAcAABMhESMRIREjUAGuLf6sLQK8/UQ
Cj/1xAAAAAAIATgAAAgACvAALABgAABMRMzI2Njc2NTQmIyczMhYVFAcGBiMjESN7yig4HAgKSET
59l9dLRNJMsotApH+mx0lHSQ3U1grdGJ6NhYg/wAAAQBOAAACIgK8AA4AABMhByETAzMyNxcGBiM
hE14BrA/+tbbN8FwZJBBGO/694gK8Kv7w/qhNDTgyAYAAAQBOAAAB4AK8AAcAABMhFSMRIxEjTgG
StS2wArwp/W0CkwAAAQA8//kB+AK8ABgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjU8LWKXXgo
uaQsyDgYbYixqewK8/UxSOzUBK/3djhIfEzEZI5wgH2lnAAACAE7/3gJdAscAHQAoAAATFwYVERQ
WMzMRNjYzMhYVERQGIyMVJzUjIiY1ETQhIhURMzI2NRE0JsIXXk1CMgI4L1VjXV83LjJfXQFfQzl
CS1QCwiQaf/7SR0kCFjI4bVv+4ltoQAs1aFsBJJhJ/fRKRQEySkoAAAABAE4AAAJJArwACwAAEzM
TEzMDEwcDAyMTYTK5uTTS4jfGxjjjArz+0wEt/qj+nQEBNv7KAWQAAAEALAAAAjsCxQAjAAATMxE
UFjMzETMRMzI2NTU0JiYnNx4CFRUUBiMjFSM1IyImNSwtTkEyLjdDTBEMEyUbGgNdXzcuMl9dArz
+00pIAb/+QUtHpSs4DhMNETsqKo9bZ9TUZ1sAAAAAAwAjAAAA+QMcAAUADQAVAAATMxEjESc2MhY
UBiImNDYyFhQGIiY0L3UtSAUWEREWEa8WEREWEAK8/UQCkgKIERYQEBYREBYRERYAAAMAAAAAAdg
DGgAIABAAGAAAETMTEzMDESMRAjIWFAYiJjQ2MhYUBiImNDO4ujPWLUkWEREWEa8WEREWEAK8/s0
BM/6a/qoBVQHFERYQEBYREBYRERYAAAADAE7//AHWAqcAFgAiACwAABMyFzcXBhURFhcHIiYGIic
mNTU0Njc2FyYjIgYVFRQXMjI3Azc2MzIXFhQHB99ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBR6E
0CREYBQIFRAH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAHueRQTBQwHYgAAAAIATv/2Aac

Copyright © 2001 -2024 Syncfusion Inc. 1532


TreeGrid How To

CpwAIAC0AABM3NjMyFxYPAjQ3NjIXFSYiBgcGFBYzMwcjIgYUFjMyNjc3FwYiJyY1NDcmJuE0CRE
YBQQHRKI0Kmg4LEMzFxcnKX8PZjE/RkAkTRQUDU6pLjRRHCACGnkUEw4KYphBIRsPKg8HFBRDNiw
4az4QCAkpIiguS2QeCkAAAAAAAgBO/y0BvwKnAAgAHQAAEzc2MzIXFg8CIgcRIxEzFTYzMhcWFRE
nETQmJyb5NAkRGAUEB0QVTj8tLThXOSdVLD0sEQIaeRQTDgpiRiL+TgH1GyMTJ2n90xQCFzY/BQI
AAgBRAAAAwgKnAAkADQAAEzc2MzIXFhQPAjMRI1U0CREYBQIFRCgtLQIaeRQTBQwHYiX+CwAAAAA
EAE7/9gHKAvYACwAUABwAJAAAEzMRFCA1ETMRFCA1Ezc2MzIXFgcHJjIWFAYiJjQ2MhYUBiImNE4
tASIt/oSsNAkRGAYDB0RqFhERFhCvFhERFhAB9f6whoYBUP63trYBvXkUFA0KYhEQFhERFhAQFhE
RFgAAAAACAE7//AHWAfsAFgAiAAATMhc3FwYVERYXByImBiInJjU1NDY3NhcmIyIGFRUUFzIyN99
ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBRwH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAA
DAE7/XwHAAr0AEAAeACoAABI2MhYUBxYWFRUUIyInFSMRFyIHERYyNjY1NTQmJyYnFTY3Njc2NCc
mIyJORYBDKEFR2jI5LbxRPTpZUzI/Lg+cKFMjCgMOFSpeAmZXS2MgCFlEuKUKmAK6UyD+egsROi+
4OkAEAVRLFRcKJQwkFiEAAAABABX/OgHjAf8AGwAAEzMTFhYXEzY2NxcGBgcDBhQXByY1NDc3LgI
nFS5qDSIdahAoKR8jIhJ9FgwfHAoWHBgnDgH1/pcuMQkBYDQ6DRsRJDf+XkIuEhobKBgdSQ8ROS0
AAAAAAgBO//YBwwLBABsAKAAAEyY1NDYzMwcjIgcGFRQXFhcWFRUUIyImNTU0NgcVFBYzMjU1NCY
nBgbcLDs7LBIhIxIMMnQeIblfXUseUD+MRkZCTQH5JjgnQykaEBA3HkkuND9nwmdbflBltYVLR5J
8KmAhBlAAAAAAAQBO//YBpwH/ACQAABM0NzYyFxUmIgYHBhQWMzMHIyIGFBYzMjY3NxcGIicmNTQ
3JiZjNCpoOCxDMxcXJyl/D2YxP0ZAJE0UFA1OqS40URwgAYJBIRsPKg8HFBRDNiw4az4QCAkpIig
uS2QeCkAAAAEATv8vAa8CvAAXAAATIRcGBwYVFBYyNxUHNQYiJyY1NDc2NyOSARANO0quUYBKLTF
lLFokSrLcArwoL1XGkkhGFPoV2gwXMG1US5uqAAAAAQBO/y0BvwH9ABQAAAEiBxEjETMVNjMyFxY
VEScRNCYnJgEITj8tLThXOSdVLD0sEQHUIv5OAfUbIxMnaf3TFAIXNj8FAgAAAwA+//oBugLGABA
AHQAqAAA3NTY3JjU0NjMWFhURFAYmJjcVFBYyNjURJiIOAjc2MzIXNCYjIgcGFRQ+AjQiXUtfYWO
3Yi1SfVMMKFBeQDFYfA8OUUEtHi+/j0IlQjpBVAJsX/7GWWwBa+iSR1BRQwEVAQodN1kxAVNOEx1
AMAABADYAAABjAfUAAwAAEzMRIzYtLQH1/gsAAAAAAQBO//8BwAIAABAAABMXFTczBxcWMxcmJic
nBxUjTi3jPL1/OSkCLEAmcEMtAgAL+PjOs00oATY0m0XAAAAAAAEATv/2Ah0CvAAjAAATNTIzMhY
XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq
5X10tTUKNIRsGMyeAr7MwQw8ZBAUDByENOQwmcYfCZwELt0pIko4vSRoBCwAAAAABAE7/8wF7AfQ
ADQAAEyEVIxEUFhcHJiY1ESNOAS2CICQNNy1+AfQr/rswMgwjEEU8AUUAAQBC//YBvgH1AAsAABM
zERQgNREzERQgNUItASIt/oQB9f6whoYBUP63trYAAAAAAgBO/ykCXQH7AB0AKAAAExcGFRUUFjM
zETY2MzIWFRUUBiMjFSc1IyImNTU0BREzMjY1NTQmIyLCGF9PQDICNi9XY11fNy4yX10BHDdDTFY
wQAH3JBiAiEdJAW8wOW1bdltn0gvHZ1t9mEj+mUtHiEtJAAABAE7/LAIVAfUAFQAAEzMTEzMDFx4
EMwciIyInJwMnE1IykZoys3oPJhoZAwIXAQFLMmqdKq4B9f7VASv+o/sgIwkDASFj2f7NEQFTAAA
AAAEATv8lAl0B+gAjAAATMxEUFjMzETMRMzI2NTU0JyYnNx4CFRUUBiMjFSc1IyImNU4tUD8yLjd
ATxYIESQbGgNdXzcuMl9dAfT+wktHAdD+MEdMskseCw8OETsqKp1bZ9YLy2dbAAAAAQBC//QCVgH
0ACQAABMXBgYVFRQWMzI3NTMVFjMyNjU1NCYnNxYVFRQjIicGIyI1NTStGigwQy5SAy4BVC5DMCk
ba6FHIiJHoQH0JAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAD/98AAAC1AlwAAwALABMAABM
zESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAADAE7
/9gHKAlwACwATABsAABMzERQgNREzERQgNRIyFhQGIiY0NjIWFAYiJjROLQEiLf6EZhYRERYRrxY
RERYQAfX+sIaGAVD+t7a2AbARFhAQFhEQFhERFgAAAAMATv/2AcMCpwAIABQAIAAAEzc2MzIXFgc
HAzU0NjIWFRUUBiImNxUUFjI2NTU0JiIG7zQJERgFBAdExWGyYly6Xy1LiEhNgE4CGnkUEw4KYv6
ehF9laVuEVG5v2IxAU1JBjE5MSwAAAgBO//YBygKnAAgAFAAAEzc2MzIXFg8CMxEUIDURMxEUIDX
5NAkRGAUEB0TPLQEiLf6EAhp5FBMOCmIl/rCGhgFQ/re2tgAAAgBO//QCYgKnAAgALQAAATc2MzI
XFg8CFwYGFRUUFjMyNzUzFRYzMjY1NTQmJzcWFRUUIyInBiMiNTU0AUM0CREYBQQHRK4aKDBDLlI
DLgFULkMwKRtroUciIkehAhp5FBMOCmImJAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAAAf/
+Aj0AXgLIAA0AABMXFgYGIiYmNTQ3FwYGIAcRAQ8MDBJAIBYfAnYCCh8OARMLNzUXDB4AAAAB//4
CMABeArsADQAAEycmNjYyFhYVFAcnNjY8BxEBDwwMEkAgFh8CggIKHw4BEws3NRcMHgAAAAEAEf+

Copyright © 2001 -2024 Syncfusion Inc. 1533


TreeGrid How To

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
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc

Copyright © 2001 -2024 Syncfusion Inc. 1534


TreeGrid How To

NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5

Copyright © 2001 -2024 Syncfusion Inc. 1535


TreeGrid How To

0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g

Copyright © 2001 -2024 Syncfusion Inc. 1536


TreeGrid How To

AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Disable editing for particular row cell in React Treegrid component
You can disable the editing for a particular row by using the actionBegin event of Grid based on
requestType as beginEdit.
In the below demo, the rows which are having the value for Priority column as Breaker is prevented
from editing.
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { getValue } from '@syncfusion/ej2-base';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar, Page } from '@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const editOptions = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Row' };
const toolbarOptions = ['Add', 'Edit', 'Delete'];

Copyright © 2001 -2024 Syncfusion Inc. 1537


TreeGrid How To

const actionBegin = (args) => {


if (args.requestType === 'beginEdit') {
if (getValue('Priority', args.rowData) === "Breaker") {
args.cancel = true;
}
}
};
return (<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' height={265}
editSettings={editOptions} actionBegin={actionBegin}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Page]}/>
</TreeGridComponent>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { getValue } from '@syncfusion/ej2-base';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar, ToolbarItems, EditSettingsModel, Page } from
'@syncfusion/ej2-react-treegrid';
import { DialogEditEventArgs } from '@syncfusion/ej2-react-grids';
/* tslint:disable */
function App() {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding:
true, allowDeleting: true, mode: 'Row' };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete'];
const actionBegin = (args: DialogEditEventArgs): void => {
if (args.requestType === 'beginEdit') {
if (getValue('Priority', args.rowData as object) === "Breaker") {
args.cancel = true;
}
}
}
return (
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' height={265}

Copyright © 2001 -2024 Syncfusion Inc. 1538


TreeGrid How To

editSettings={editOptions} actionBegin={actionBegin}
toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Page]} />
</TreeGridComponent>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1539


TreeGrid How To

endDate: new Date('02/14/2017'),


duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1540


TreeGrid How To

{ taskID: 15, taskName: 'Development Task 1',


startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1541


TreeGrid How To

endDate: new Date('02/24/2017'), duration:


2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 1542


TreeGrid How To

{ taskID: 36, taskName: 'Phase 3 complete',


startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},

Copyright © 2001 -2024 Syncfusion Inc. 1543


TreeGrid How To

{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new


Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let stackedData = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.00',
price: 65.95,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', shipMentCategory:
'Frozen seafood', units: '35',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.56', price: 43.96 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', shipMentCategory:
'Frozen seafood', units: '324',
orderDate: new Date('05/03/2017'), shippedDate: new
Date('05/10/2017'), unitPrice: '28.26', price: 91.24 },
{ orderID: '1.3', orderName: 'Herrings', shipMentCategory:
'Frozen seafood', units: '48',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.35', price: 54.48 },
{ orderID: '1.4', orderName: 'Preserved Olives',
shipMentCategory: 'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '29.23', price: 36.75 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen',
shipMentCategory: 'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2017'), unitPrice: '47.17', price: 10.91 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 26.78,
shipMentCategory: 'Seafood',
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1544


TreeGrid How To

{ orderID: '2.1', orderName: 'Tilapias', shipMentCategory:


'Frozen Seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.25', price: 42.45 },
{ orderID: '2.2', orderName: 'White Shrimp', shipMentCategory:
'Frozen seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '72.45', price: 36.25 },
{ orderID: '2.3', orderName: 'Fresh Cheese', shipMentCategory:
'Dairy', units: '323', unitPrice: 12.45,
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 40.35 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese',
shipMentCategory: 'Dairy', units: '370', unitPrice: 15.36,
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 56.82 },
{ orderID: '2.5', orderName: 'Butter', shipMentCategory:
'Dairy', units: '413', unitPrice: '19.35',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 79.55 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.34',
price: 37.48,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', shipMentCategory:
'Solid crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '46.45', price: 25.79 },
{ orderID: '3.2', orderName: 'Pharmaceutical', shipMentCategory:
'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.56', price: 37.44 },
{ orderID: '3.3', orderName: 'Glass beads', shipMentCategory:
'Solid crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.25', price: 41.25 }
]
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA

Copyright © 2001 -2024 Syncfusion Inc. 1545


TreeGrid How To

BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo

Copyright © 2001 -2024 Syncfusion Inc. 1546


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1547


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1548


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1549


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1550


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1551


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1552


TreeGrid How To

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
0sjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXMCnI2NIG9vAAIATv/xAbYC0QAFACYAABM3Fwc
nBxcHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWF3SUjiBvdOIQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAwCRI2NIG9vQCYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPBwAAAAABACT/LgGMAgE
ANQAAAQcmJgYVFB4DFAYHBzYyFhQGIic3FjI2NCcmIgcHJzcmJiczFhYyNjQuAicmNDYzMhYXAUs
QJnBIRVdXPFRRHQ47M0paNBQjSi0ZCx8VJA4ySlQCKwZPbU46VlYhJ09bHzgMAeQmGgEyKikrGh9
BbE8DKAglVSkTKxgaNAsFCA8XQAZQNy81MlUyGxwcIWNWDwcAAgAl//UCAAO9ACIAKAAANzMWFjI
2NTQuBDU0NjMyFwcmIgYVFB4EFRQGIiYTNxc3FwclLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11531
zH3RwH46yOFpKUS9DIicmSjRGZh4rHUQ/KDsfJylQN1xtcwM1IG9vII0AAgBO//EBtgL8ACAAJgA
AAQcmJgYVFB4DFAYiJiczFhYyNjQuAicmNDYzMhYXJzcXNxcHAXUQJnBIRVdXPFmrYgIrBk9tTjp

Copyright © 2001 -2024 Syncfusion Inc. 1553


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1554


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1555


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1556


TreeGrid How To

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
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA

Copyright © 2001 -2024 Syncfusion Inc. 1557


TreeGrid How To

AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN

Copyright © 2001 -2024 Syncfusion Inc. 1558


TreeGrid How To

pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0

Copyright © 2001 -2024 Syncfusion Inc. 1559


TreeGrid How To

ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1560


TreeGrid How To

{ taskID: 7, taskName: 'Software Specification', startDate: new


Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1561


TreeGrid How To

endDate: new Date('02/19/2017'), duration: 3,


progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1562


TreeGrid How To

{ taskID: 27, taskName: 'Customer review meeting',


startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}

Copyright © 2001 -2024 Syncfusion Inc. 1563


TreeGrid How To

]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let stackedData: Object[] = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',

Copyright © 2001 -2024 Syncfusion Inc. 1564


TreeGrid How To

unitPrice: '47.00',
price: 65.95,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', shipMentCategory:
'Frozen seafood', units: '35',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.56', price: 43.96},
{ orderID: '1.2', orderName: 'Yellowfin Tuna', shipMentCategory:
'Frozen seafood', units: '324',
orderDate: new Date('05/03/2017'), shippedDate: new
Date('05/10/2017'), unitPrice: '28.26', price: 91.24 },
{ orderID: '1.3', orderName: 'Herrings', shipMentCategory:
'Frozen seafood', units: '48',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.35', price: 54.48 },
{ orderID: '1.4', orderName: 'Preserved Olives',
shipMentCategory: 'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '29.23', price: 36.75},
{ orderID: '1.5', orderName: 'Sweet corn Frozen',
shipMentCategory: 'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2017'), unitPrice: '47.17', price: 10.91 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 26.78,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', shipMentCategory:
'Frozen Seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.25', price: 42.45 },
{ orderID: '2.2', orderName: 'White Shrimp', shipMentCategory:
'Frozen seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '72.45', price: 36.25 },
{ orderID: '2.3', orderName: 'Fresh Cheese', shipMentCategory:
'Dairy', units: '323', unitPrice: 12.45,
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 40.35 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese',
shipMentCategory: 'Dairy', units: '370', unitPrice: 15.36,
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 56.82 },
{ orderID: '2.5', orderName: 'Butter', shipMentCategory:
'Dairy', units: '413', unitPrice: '19.35',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 79.55}
]

Copyright © 2001 -2024 Syncfusion Inc. 1565


TreeGrid How To

},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.34',
price: 37.48,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', shipMentCategory:
'Solid crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '46.45', price: 25.79 },
{ orderID: '3.2', orderName: 'Pharmaceutical', shipMentCategory:
'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.56', price: 37.44 },
{ orderID: '3.3', orderName: 'Glass beads', shipMentCategory:
'Solid crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.25', price: 41.25 }
]
}
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG

Copyright © 2001 -2024 Syncfusion Inc. 1566


TreeGrid How To

7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA

Copyright © 2001 -2024 Syncfusion Inc. 1567


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1568


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1569


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1570


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1571


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1572


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1573


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1574


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1575


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1576


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1577


TreeGrid How To

WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB

Copyright © 2001 -2024 Syncfusion Inc. 1578


TreeGrid How To

oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH

Copyright © 2001 -2024 Syncfusion Inc. 1579


TreeGrid How To

/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.

Copyright © 2001 -2024 Syncfusion Inc. 1580


TreeGrid How To

Display null values at bottom in React Treegrid component


By default the null values are displayed at bottom of the TreeGrid row while perform sorting in
ascending order. As well as this values are displayed at top of the TreeGrid row while perform sorting
with descending order. But you can customize this default order to display the null values at always
bottom row of the TreeGrid by using column.sortComparer method.
In the below demo we have displayed the null date values at bottom of the Grid row while sorting the
StartDate column in both ways.
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject, Sort
} from '@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const [action, setAction] = React.useState('');
const sortComparer = (reference, comparer) => {
const sortAsc = action === "Ascending" ? true : false;
if (sortAsc && reference === null) {
return -1;
}
else if (sortAsc && comparer === null) {
return 1;
}
else if (!sortAsc && reference === null) {
return -1;
}
else if (!sortAsc && comparer === null) {
return 1;
}
else {
return reference - comparer;
}
};
const actionBegin = (args) => {
if (args.requestType === "sorting") {
setAction(args.direction);
}
};
return (<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' allowSorting={true}
actionBegin={actionBegin}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='70'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='70' sortComparer={sortComparer} format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='70'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right'/>

Copyright © 2001 -2024 Syncfusion Inc. 1581


TreeGrid How To

<ColumnDirective field='Priority' headerText='Priority' width='90'


textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject, Sort
} from '@syncfusion/ej2-react-treegrid';
import { SortEventArgs } from '@syncfusion/ej2-react-grids';
/* tslint:disable */
function App() {
const [action, setAction] = React.useState('');
const sortComparer = (reference: any, comparer: any) => {
const sortAsc = action === "Ascending" ? true : false;
if (sortAsc && reference === null) {
return -1;
} else if (sortAsc && comparer === null) {
return 1;
} else if (!sortAsc && reference === null) {
return -1;
} else if (!sortAsc && comparer === null) {
return 1;
} else {
return reference - comparer;
}
};
const actionBegin = (args: any): void => {
if (args.requestType === "sorting") {
setAction(args.direction);
}
}
return (
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID'
allowSorting={true} actionBegin={actionBegin}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='70'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='70' sortComparer={sortComparer} format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='70'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' />
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right' />

Copyright © 2001 -2024 Syncfusion Inc. 1582


TreeGrid How To

</ColumnsDirective>
<Inject services={[Sort]} />
</TreeGridComponent>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1583


TreeGrid How To

{ taskID: 9, taskName: 'Get approval from customer', startDate:


new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1584


TreeGrid How To

endDate: new Date('02/25/2017'), duration:


2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]

Copyright © 2001 -2024 Syncfusion Inc. 1585


TreeGrid How To

}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',

Copyright © 2001 -2024 Syncfusion Inc. 1586


TreeGrid How To

'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1


},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': null,
'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA

Copyright © 2001 -2024 Syncfusion Inc. 1587


TreeGrid How To

ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy

Copyright © 2001 -2024 Syncfusion Inc. 1588


TreeGrid How To

UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
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
MbRYRERYRAhRLZhszXj42GzkhSDQ9VS5KJzgSNDA3SkX94hAWEREWAAACABr/vgKtAkMANwBCAAA
lIic1NDc2MzIXJicmIyIGFRUUFjMyMzI2NTU0NzY3FwYVFxQGBwYiJjU1NDc2MzIXFhUXFScRBhM
mIyIGFRUWMzI3AUKiC1ghJk1lBCwsTGqNjW0CAnugDRIhDSIBPTJk9KtZTXyENiAlJYhbX10uPgG
MQ1g2lmVvIQwwPSAgXWeYaWtjVb9PFBsMHw832z9gGjR/fZt7PjVHK0MQKRD+9iUBPi85PGFvHwA
AAAIADAAAAgUCvAAHAAoAABMzEyMDIwMjEwMz8irpMFbwVC/7atYCvP1EAQD/AAJz/rkAAAADAE4
AAAH/ArwAEQAZACEAABMzMhYUBwYVFRYWFRQHBgYjIxMVMzI2NCYjAxEzMjU0JiNO3VJeSAEvPik
VUzrmLbk1REpAqLedUj4CvFSwKwEBARRbSlA7ICYCkfQ+ezv+4P66qkhUAAEAQv/2AasCxgAdAAA
lBiMiLgI1ETQ2NzYzMhcHJiMiBwYGFREUFxYyNwGrVU0QQUktKywtPk5ADjo5UCkRGE8fa1kXIQY
nVT8BQUxOGxkhIBgoEDwo/rhrIg0eAAAAAAIATgAAAfICvQAIABMAABMzMhYVERQjIxMRMzI3NjU

Copyright © 2001 -2024 Syncfusion Inc. 1589


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1590


TreeGrid How To

1/j8Bwf4/AcH+CwGk/lwAAQA6AAABpwH1AAsAABMzFzczBxcjJwcjNzwzgoQynJs0gYI1nQH109P
8+dDQ+gAAAQAl/y4BvAH+ABwAABMzERQWMjY1NTQ3NjcXBhURFAYHJzY1NQYjIiY1JStJhVIaDhc
NIDA5DEoobVhfAfX+sUJHR0LIYxgNCB8SOv4wPUYSIxpWe0hfXQAAAAABAE4AAAG9AfUACQAAEyE
VASEVITUBIVcBUf7dATj+kQEh/ugB9Sn+XSkpAaMAAAABAE7/jAERAzYAHQAAARcOAhUVFAcWFRU
UFhcHJiY1NTQmJic2NjU1NDYBAA8XHBk8PiYmD0IoIBUVGDApAzYfERw/KrkpPD4ouTtFGR8mXHJ
3EzEUExM+G3luWwAAAAABAE7/jgB7AzEAAwAAEzMRI04tLQMx/F0AAAAAAQBO/4wBEQM2AB0AABM
3FhYVFRQWFw4CFRUUBgcnNjY1NTQ3JjU1NCYmUA9BKTAYFRUgKEIPJiY+PBkcAxcfJltueRs+ExM
UMRN3clwmHxlFO7koPjwpuSo/HAABAE4BIQHfAXgAEwAAAQYjIicnJiMHBgcnNjMyFxYzMjcB3yt
AGB9GGhsZJx4WL0UcXR0dNR8BVjEJFAgCBSIgNx0JJAAAAAACAE4AAACGAsYABQANAAATExQiNRM
2IiY0NjIWFH4INwkdFhERFhACTv3RHx8CL0EQFhERFgAAAAIATv+OAZACbwAYAB8AABMzFRYXByY
nETI3FwYjFSM1JicmNTU0NjcHFQYXEQYG8yw2OQ00LjE2Cjs2LGMoGltKeAF5N0ECb3MEGiMWA/5
JDiUQaGoJPylLgFxnBsOReBIBtAhMAAAAAQBOAAABtgLFAB8AABMzJjU0NjIXByYiBhUUFzMVIxY
UBgchFSE1NjY1NicjZTsjbZkoDyt1UyfVxxAxJwEg/pgzPwESSgFmazJXaxkoGFdEJHcsN1xiGC0
nGmI4ID8AAgBOAJQBrQHzABcAHwAAEzcXNjIXNxcHFhQHFwcnBiInByc3JjQ3NgYUFjI2NCZUHB4
xfi4fHB8mJyEbIS6ALiAbHyUlU05Obk1NAdAbHycmHx0fMHoxIRshJiYiGyIwezAYTm1MS25OAAA
AAQA1AAACDQK8ABkAABMzNScjNTMDMxMzEzMDMxUjBxUzFSMRIxEjgogHgWe0M7UFuDO1aoUGi4s
tiAEwJQwsAS/+0QEv/tEsCyYs/vwBBAACAE7/OwIpAsgAKgA4AAAXMxYWMjY1NC4DJyY0NyY1NDY
zMhcHJiIGFRQXHgQUBxYVFAYiJhMGFRQeAhc2NTQmJyZOLgRopW08WmlbHyAfIHRtUz8OOZhmUSR
YV0ktFxh35X1SE1NngiQKTzGgCDtXTk0wRSMoJiQlZicoN0ZmHiodQ0FEJxIfIitHYislMVxvcwH
xHh4vQB41ICUPNEgRNQAAAAIABAKiANoC2QAHAA8AABIyFhQGIiY0NjIWFAYiJjQVFhERFhGvFhE
RFhAC2REWEBAWERAWEREWAAAAAAMAGf+BAwYCbQAHAA8AJwAAFiYQNiAWEAYABhAWIDYQJhcjJiY
jIgYUFjMyNjczBgYjIiY0NjMyFvXc2gE72Nr+3MDBAQ7BwD4yCU45UlJUUThQBzMQbEZjc3JiSW5
/2AE+1tb+wtgCwLr+4bu8ARm//itBa5ltQy5IV4LFh1YAAgBOAXwBWwLFABIAHgAAAQYiLgI1NDc
2MzIXNCc3MhYVBxQzMjc1JiciIyIGAVtFPj0uH0AQFDZJfwNiROZwISs7PgMEGSMBhwsGHDwtUxY
GLVgBI0tPKmAJdikGJAAAAgAqAFAB3wHHAAYADQAAExcHFwcnNSUXBxcHJzXlHp2cHbsBlx6dnB2
7AccfnZ4duwG7H52eHbsBAAAAAQAtAXEBbQGdAAMAABMhFSEtAUD+wAGdLAAAAAQAGf+BAwYCbQA
MABYAHgAmAAABMzIWFAYHFyMnIxUjExUzMjc2NTQmIwImEDYgFhAGAAYQFiA2ECYBCKRHTj8zfDZ
4aC0tY1oXC0Qsr9zaATvY2v7bv8ABEr7AAdxEbTwGwr6+AYyjJRIbLCX9ztgBPtbW/sLYAsC6/uG
7vAEavgAAAAEATgJ3ASsCpQADAAATMxUjTt3dAqUuAAIATgGlAW4CxQAHAA8AABIyFhQGIiY0FhQ
WMjY0JiKieFRUeFQpOF44OVwCxVR4VFR4E1I+PlI+AAAAAAEATgDtAZICIQAPAAATMzUzFTMVIxU
zFSE1MzUjUossiYmF/sCPiwGdhIQsWCwsWAAAAAABAC4CTACbAtkACQAAEzc2MzIXFhQHBy40CRE
YBgEFRAJMeRQTBQwHYgAAAAEAJf8wAbsB/gAbAAATMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxU
nJS4ZLzIvKSEtLgIYFggaBylTPy0zDi4B9f5wHBUWEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBO/zk
CfALuABQAAAEhESMRJxEjESMiJy4DJyY1NDYBCAF0LU8t1EMjEhsPCgIDXALu/EsDigH8dgG8Gg4
dMCQeLTJkfgAAAQBM/y4BJAAAABQAADMzBzYyFhQGIic3FjI2NCcmIgcHJ60jKA47M0paNBQjSi0
ZCx8VJA43CCVVKRMrGBo0CwUIDxcAAAAAAgAEAFABuQHHAAYADQAAEzcXFQcnNyU3FxUHJzfgHru
7HZz+hx67ux2cAagfuwG7HZ6dH7sBux2eAAAAAgBPAAABsQLFAB0AJQAAJTMUBiMiJyY1NDc+AzU
1MxUUDgIHBhUUFjI2AiImNDYyFhQBhC1dVTQqUiUTOB8ZKRwjNQ0hTG5MbRYRERYRsUtmGjRePjY
bOSFIND1VLkonOBI0MDdKRQIeEBYRERYAAAMADAAAAgUDZwAHAAoAEwAAEzMTIwMjAyMTAzMDFyM
nJjU0MzLyKukwVvBUL/tq1pM1JUMFHhICvP1EAQD/AAJz/rkCJ3ljBwYdAAADAAwAAAIFA2gABwA
KABQAABMzEyMDIwMjEwMzAzc2MzIXFhQHB/Iq6TBW8FQv+2rWgTQJERgGAQVEArz9RAEA/wACc/6
5Aa95FBQEDAdiAAMADAAAAgUDkQAHAAoAEAAAEzMTIwMjAyMTAzMDNxcHJwfyKukwVvBUL/tq1v2
UjiBvdAK8/UQBAP8AAnP+uQHYjY0gb28AAAMADAAAAgUDOgAHAAoAHAAAEzMTIwMjAyMTAzMDIgc
nNjMyFxYzMjcXBiMiJibyKukwVvBUL/tq1rEqIxUvNRhEFxgoHxQrMRQvMQK8/UQBAP8AAnP+uQH
gJiA0HwsiIS8UFgACAAwAAAIFArwABwAKAAATMxMjAyMDIxMDM/Iq6TBW8FQv+2rWArz9RAEA/wA
Cc/65AAAAAwAMAAACBQN1AA8AEgAaAAASJjQ2MhYUBgcTIwMjAyMTFwMzAhQWMjY0JiLELEFbQSw
i3jBW8FQv2yBq1rYrPioqPgKmO1NBQVM7C/1lAQD/AAKbKP65Afk+Kio+KgAAAgBOAAADCwK8AA8
AEgAAASEVIRUzByMRIRUhEyMDIwEDMwG8AU/+38oPuwEf/rMBuYYwAW+jowK8KvUs/rgpAQD/AAJ
k/sgAAQBC/y4BqwLGAC8AABMRFBcWMjcXBiMHNjIWFAYiJzcWMjY0JyYiBwcnNyYmNRE0Njc2MzI
XByYjIgcGBm9PH2tZClVTIA47M0paNBQjSi0ZDB4VJA42SFcrLC0+TkAOOjlQKREYAgH+uGsiDR4
mIS0IJVUpEysYGjQLBQgPF0YIXFsBQUxOGxkhIBgoEDwAAgBOAAABnANmAAsAFAAAEyEVIRUzByM
RIRUhExcjJyY1NDMyTgFO/t/KD7sBH/60jDUlQwUeEgK8KvUs/rgpA1J5YwcGHQAAAgBOAAABnAN
nAAsAFQAAEyEVIRUzByMRIRUhEzc2MzIXFhQHB04BTv7fyg+7AR/+tJ80CREYBQIFRAK8KvUs/rg
pAtp5FBMFDAdiAAIATgAAAZwDkQALABEAABMhFSEVMwcjESEVIRM3FwcnB04BTv7fyg+7AR/+tA+
UjiBvdAK8KvUs/rgpAwSNjSBvbwAAAQBOAAABnAK8AAsAABMhFSEVMwcjESEVIU4BTv7fyg+7AR/
+tAK8KvUs/rgpAAAAAgBTAAAAyANmAAUADgAAEzMRIxEnNxcjJyY1NDMyU3UtSDg1JUMFHhICvP1
EApICvnljBwYdAAACAE4AAAEJA2cABQAPAAATMxEjESc3NzYzMhcWFAcHTnUtSE40CREYBgEFRAK

Copyright © 2001 -2024 Syncfusion Inc. 1591


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1592


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1593


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1594


TreeGrid How To

dNgIJAgAAAAIAT/9IAdwCvQALABkAABMzERMzAwEjAwcRIxcnJjY2MhYWFRQHJzY2Ty34NNEBBTX
sPy2zBxEBDwwMEkAgFh8Cvf6gAWD+1/5sAWpa/vBmAgofDgETCzc1FwweAAAAAAIAQ/9IAbICvAA
MABoAABMzETcXBxYXIwMHESMXJyY2NjIWFhUUByc2NkMt0yCRRZs2ykItpwcRAQ8MDBJAIBYfArz
+icMfgXP1AUw7/u9mAgofDgETCzc1FwweAAAAAAEATv//AcACAAAQAAATFxU3MwcXFjMXJiYnJwc
VI04t4zy9fzkpAixAJnBDLQIAC/j4zrNNKAE2NJtFwAAAAAACAE4AAAG3A2cABQAPAAATMxEhFSE
TNzYzMhcWFAcHTi0BPP6XAzQJERgFAgVEArz9bSkC2nkUEwUMB2IAAAAAAgBRAAAAxANrAAMADQA
AEzMRIxM3NjMyFxYUBwdRLS0GNAkRGAUCBUQCvP1EAt55FBMFDAdiAAACAE7/SAG3ArwABQATAAA
TMxEhFSEXJyY2NjIWFhUUByc2Nk4tATz+l78HEQEPDAwSQCAWHwK8/W0pZgIKHw4BEws3NRcMHgA
CAE7/SACuArwAAwARAAATMxEjFycmNjYyFhYVFAcnNjZ3LS0VBxEBDwwMEkAgFh8CvP1EZgIKHw4
BEws3NRcMHgAAAAL/3gAAAb4DiwAFAAsAABMzESEVIQM3FzcXB1UtATz+l3cfdHAfjgK8/W0pA2s
gb28gjQAC/9oAAAD8A4sAAwAJAAATMxEjAzcXNxcHVC0teh90cB+OArz9RANrIG9vII0AAAABAE4
AAAIyArwADQAAEzMRNxcHESEVIREHJzfJLXsSjQE8/pdqEXsCvP71OChA/qgpAW0vKDcAAAEATgA
AAYMCvAANAAATMxE3FwcRIxEHJzc1J4p1chKELXMRhEgCvP75NCg8/nsBcTMoO/ECAAAAAgBOAAA
COgNnAAkAEwAAEzMBETMRIwERIxM3NjMyFxYUBwdOLQGTLCz+bS3INAkRGAYBBUQCvP2WAmr9RAJ
r/ZUC2nkUEwUMB2IAAAIATgAAAb8CpwAUAB4AAAEiBxEjETMVNjMyFxYVESMRNCYnJic3NjMyFxY
UBwcBCE4/LS04VzknVSw9LBEyNAkRGAUCBUQB1CL+TgH1GyMTJ2n+pgFYNj8FAkZ5FBMFDAdiAAA
CAE7/SAI6ArwACQAXAAATMwERMxEjAREjBScmNjYyFhYVFAcnNjZOLQGTLCz+bS0BCAcRAQ8MDBJ
AIBYfArz9lgJq/UQCa/2VZgIKHw4BEws3NRcMHgAAAgBA/0gBsQH9ABQAIgAAEyIHESMRMxU2MzI
XFhURIxE0JicmAycmNjYyFhYVFAcnNjb6Tj8tLThXOSdVLD0sERUHEQEPDAwSQCAWHwHUIv5OAfU
bIxMnaf6mAVg2PwUC/cYCCh8OARMLNzUXDB4AAAIATgAAAjoDiwAJAA8AABMzAREzESMBESMTNxc
3FwdOLQGTLCz+bS1qH3RwH44CvP2WAmr9RAJr/ZUDayBvbyCNAAAAAgBOAAABvwL9ABQAGgAAASI
HESMRMxU2MzIXFhURIxE0JicmAzcXNxcHAQhOPy0tOFc5J1UsPSwRlh90cB+OAdQi/k4B9RsjEyd
p/qYBWDY/BQIBCSBvbyCNAAABAE7/2wI7ArwAFQAAATMRFAcmJzY3JgMRIxEzFgAXNjURJwHFdng
EBywVgP4tLRkBKE8CSAK8/buWBg4RBCHEAYj9lQK8Jv44eA4jAgsCAAEAQP8vAbIB/QAdAAATIgc
RIxEzFTYzMhcWFzcRBgYHJzI+AjURNCYnJvpOPy0tOFc5J1QBAQI9NwYIIRURPSwRAdQi/k4B9Rs
jEyZ1Af5jNksDIxEWLR0BlTY/BQIAAAMAP//1AeMDFAALABcAGwAANxE0NjIWFREUBiImExEUFjI
2NRE0JiIGNzMVIz9xxm17rH0tX45eWZpYNNnZuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUsUuAAA
AAwBO//YBwwJUAAsAFwAbAAA3NTQ2MhYVFRQGIiY3FRQWMjY1NTQmIgY3MxUjTmGyYly6Xy1LiEh
NgE4h2Ni4hF9laVuEVG5v2IxAU1JBjE5MS8guAAAAAAQAP//1AeMDaAALABcAIQArAAA3ETQ2MhY
VERQGIiYTERQWMjY1ETQmIgY3NzYzMhcWFAcHIzc2MzIXFhQHBz9xxm17rH0tX45eWZpYwTQJERg
FAgVElDQJERgFAgVEuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUox5FBQEDAdieRQUBAwHYgAEAE7
/9gHDAqwACwAXACEAKwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGNzc2MzIXFhQHByM3NjMyFxY
UBwdOYbJiXLpfLUuISE2ATqU0CREYBgEFRJQ0CREYBgEFRLiEX2VpW4RUbm/YjEBTUkGMTkxLk3k
UFAQMB2J5FBQEDAdiAAACAE7/9QMTAswAFgAiAAABIRUhFTMHIxEhFSE1BiMiJjURNDYyFwURFBY
yNjcRJiYiBgHFAU7+38oPuwEf/rQ4bFZ9cc83/rZfiVwGB1eUWAK8KvUs/rgpND9fZQFCZ2pCiP6
3TE1BRAFzQkdSAAAAAwBO//QC9AIAABsAJwAvAAAlBiInBiImNTU0NjMyFhc2MzIWFRUFFRQWMzI
3JRUUFjI2NTU0JiIGBRUlNTQmIgYC203KJTHDXWBaN1EVL3JSXP7KSS1GT/2yTX9JS35MAUMBCVF
rTSMvUU9vU4RfZTErWllPeBFHOjEr9o5CTUw+mEtLSzpYDFdCOEQAAAAAAwBOAAACAQNnAA4AFgA
gAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIyc3NjMyFxYUBwdO9GBeZmcuZBYO0C0tzIxLRGE0CRE
YBQIFRAK8dGKpLf7wAQIC/wACkf6bulRXSXkUEwUMB2IAAAAAAgBOAAABSAKnAA4AGAAAEzMHNjM
yFwcmIgcGFREjEzc2MzIXFhQHB04tAjFTIikMHj8hQy08NAkRGAYBBUQB9SgxCSoLChMv/nYCGnk
UEwUMB2IAAwBO/0gCAQK8AA4AFgAkAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIwMnJjY2MhYWFRQ
HJzY2TvRgXmZnLmQWDtAtLcyMS0QtBxEBDwwMEkAgFh8CvHRiqS3+8AECAv8AApH+m7pUV/0JAgo
fDgETCzc1FwweAAAAAgA9/0gBNwH+AA4AHAAAEzMHNjMyFwcmIgcGFREjFycmNjYyFhYVFAcnNjY
9LQIxUyIpDB8/IEMtTgcRAQ8MDBJAIBYfAfUoMQkqCwoTL/52ZgIKHw4BEws3NRcMHgAAAwBOAAA
CAQOLAA4AFgAcAAATMzIWFRQHEyMDBiMjESMTETMyNTQmIyc3FzcXB070YF5mZy5kFg7QLS3MjEt
Eux90cB+OArx0Yqkt/vABAgL/AAKR/pu6VFfaIG9vII0AAgBOAAABcAL9AA4AFAAAEzMHNjMyFwc
mIgcGFREjAzcXNxcHTy0CMVMiKQwfPyBDLQEfdHAfjgH1KDEJKgsKEy/+dgLdIG9vII0AAAIAJf/
1AgADbAAiACwAADczFhYyNjU0LgQ1NDYzMhcHJiIGFRQeBBUUBiImEzc2MzIXFhQHByUuBGambT1
aa1o9dG1TPw45mWQ9W2pbPXXnfck0CREYBgEFRLI4WkpRL0MiJyZKNEZmHisdRD8oOx8nKVA3XG1
zAnd5FBQEDAdiAAAAAAIAMf/xAZkCpwAgACoAAAEHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzI
WFyc3NjMyFxYUBwcBWBAmcEhFV1c8WatiAisGT21OOlZWISdPWx84DYk0CREYBQIFRAHkJhoBMio
pKxofQW5QUjwvNTJVMhscHCFjVg8HL3kUEwUMB2IAAAIAJf/1AgADkQAiACgAADczFhYyNjU0LgQ
1NDYzMhcHJiIGFRQeBBUUBiImEzcXBycHJS4EZqZtPVprWj10bVM/DjmZZD1bals9ded9ZJSOIG9
0sjhaSlEvQyInJko0RmYeKx1EPyg7HycpUDdcbXMCnI2NIG9vAAIATv/xAbYC0QAFACYAABM3Fwc
nBxcHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWF3SUjiBvdOIQJnBIRVdXPFmrYgIrBk9tTjp
WViEnT1sfOAwCRI2NIG9vQCYaATIqKSsaH0FuUFI8LzUyVTIbHBwhY1YPBwAAAAABACT/LgGMAgE

Copyright © 2001 -2024 Syncfusion Inc. 1595


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1596


TreeGrid How To

YAAATNzYzMhcWBwcGMhYUBiImNDYyFhQGIiY0ojQJERgGAwdEaBYRERYQrxYRERYQAtt5FBQNCmI
CEBYRERYQEBYRERYAAwBOAAACRwLFAAcACgAUAAABMxMjAyMDIxMDMwE3NjMyFxYUBwcBNCrpMFb
wVC/7atb+qDQJERgFAgVEArz9RAEA/wACc/65AQx5FBMFDAdiAAAAAgBOAAACQwLFAAgAFAAAEzc
2MzIXFgcHNyEVIRUzByMRIRUhTjQJERgGAwdEgwFO/t/KD7sBH/60Ajh5FBMOCmKEKvUs/rgpAAA
AAAIATgAAAqUCxQAIABQAABM3NjMyFxYHBzczESERMxEjESERI040CREYBgMHRIUtAVQtLf6sLQI
4eRQTDgpihP7hAR/9RAFx/o8AAAACAE4AAAFfAsUABQAPAAATMxEjEScHNzYzMhcWFAcH6nUtSJw
0CREYBgEFRAK8/UQCkgJceRQTBQwHYgADAE7/9QJnAswACwAXACEAADcRNDYyFhURFAYiJhMRFBY
yNjURNCYiBgc3NjMyFxYUBwfDccZte6x9LV+OXlmaWKI0CREYBgEFRLkBQmdqcGL+v2VfXwGu/rd
MTUtPAUhNUlIXeRQTBQwHYgACAE7/+QKtAsUACAAhAAATNzYzMhcWBwc3MxUUFjI2NxEzERQHJzY
3NjU1BgYjIiY1TjQJERgGAwdEfy1il14KLmkLMg0HG2IsansCOHkUEw4KYoT9TFI7NQEr/d2OEh8
TMRkjnCAfaWcAAAACAE4AAAKuAsUAJgAwAAABMzIWFREUBgczFyM1Njc2NRE0JiMjIgYVERQXFhc
VIzczJjURNDYHNzYzMhcWFAcHAXVwXl4tK1YP5D0xPU9BcEBPPC5A5A5UVV7JNAkRGAYBBUQCw3B
c/s07RhkqKggaIVcBOkxQUUv+xlchGggqKi5sATNccIt5FBMFDAdiAAAEAA8AAADkAvUAAwAMABQ
AHAAAEzMRIxM3NjMyFxYHByYyFhQGIiY0NjIWFAYiJjRfLS0BNAkRGAYDB0RlFhERFhCuFhERFhA
B9f4LAmh5FBMOCmISEBYRERYQEBYRERYAAAAAAgAMAAACBQK8AAcACgAAEzMTIwMjAyMTAzPyKuk
wVvBUL/tq1gK8/UQBAP8AAnP+uQAAAAMATgAAAf8CvAARABkAIQAAEzMyFhQHBhUVFhYVFAcGBiM
jExUzMjY0JiMDETMyNTQmI07dUl5IAS8+KRVTOuYtuTVESkCot51SPgK8VLArAQEBFFtKUDsgJgK
R9D57O/7g/rqqSFQAAQBOAAABnAK8AAUAABMhFSERI04BTv7fLQK8K/1vAAACAAwAAAIFArwAAwA
GAAATMxMhEwMh8Svp/gf6vgGAArz9RAJ3/bIAAQBOAAABnAK8AAsAABMhFSEVMwcjESEVIU4BTv7
fyg+7AR/+tAK8KvUs/rgpAAAAAQBOAAACNQK8AAkAABMhFQEhFSE1ASFbAdT+WAGu/hkBqP5lArw
p/ZYpKQJqAAAAAQBQAAAB/gK8AAsAABMzESERMxEjESERI1AtAVQtLf6sLQK8/uEBH/1EAXH+jwA
AAwBO//UB8gLMAAsAEwAbAAA3ETQ2MhYVERQGIiYTFSE1NCYiBhAWMjY1NSEVTnHGbXusfS0BS1m
aWF+OXv61uQFCZ2pwYv6/ZV9fAa6ZmU1SUv4eTUtPgoMAAAABAFAAAADFArwABQAAEzMRIxEnUHU
tSAK8/UQCkgIAAAEATgAAAdsCvQALAAATMxETMwMBIwMHESNOLfg00QEFNew/LQK9/qABYP7X/mw
Balr+8AABAAwAAAIFArwABgAAEzMTIwMDI/Er6TDPyy8CvP1EAnb9igABAFAAAAJoArwADAAAEzM
TEzMRIxEDIwMRI1At3uAtLcgwxi0CvP2JAnf9RAI5/ccCOf3HAAAAAAEAUAAAAjwCvAAJAAATMwE
RMxEjAREjUC0Bkyws/m0tArz9lgJq/UQCa/2VAAAAAAMATgAAAksCvAADAAwAFQAAEyEVIRMhByE
iByc2NgMhMjcXBgYjIc0BCP74EgFFEf7MVBojEEYeATRTGiQQRjv+uwGdLAFLKkwNODH9bk0NODI
AAAIAPv/1AeICzAALABcAADcRNDYyFhURFAYiJhMRFBYyNjURNCYiBj5xxm17rH0tX45eWZpYuQF
CZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUgAAAQBQAAAB/gK8AAcAABMhESMRIREjUAGuLf6sLQK8/UQ
Cj/1xAAAAAAIATgAAAgACvAALABgAABMRMzI2Njc2NTQmIyczMhYVFAcGBiMjESN7yig4HAgKSET
59l9dLRNJMsotApH+mx0lHSQ3U1grdGJ6NhYg/wAAAQBOAAACIgK8AA4AABMhByETAzMyNxcGBiM
hE14BrA/+tbbN8FwZJBBGO/694gK8Kv7w/qhNDTgyAYAAAQBOAAAB4AK8AAcAABMhFSMRIxEjTgG
StS2wArwp/W0CkwAAAQA8//kB+AK8ABgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjU8LWKXXgo
uaQsyDgYbYixqewK8/UxSOzUBK/3djhIfEzEZI5wgH2lnAAACAE7/3gJdAscAHQAoAAATFwYVERQ
WMzMRNjYzMhYVERQGIyMVJzUjIiY1ETQhIhURMzI2NRE0JsIXXk1CMgI4L1VjXV83LjJfXQFfQzl
CS1QCwiQaf/7SR0kCFjI4bVv+4ltoQAs1aFsBJJhJ/fRKRQEySkoAAAABAE4AAAJJArwACwAAEzM
TEzMDEwcDAyMTYTK5uTTS4jfGxjjjArz+0wEt/qj+nQEBNv7KAWQAAAEALAAAAjsCxQAjAAATMxE
UFjMzETMRMzI2NTU0JiYnNx4CFRUUBiMjFSM1IyImNSwtTkEyLjdDTBEMEyUbGgNdXzcuMl9dArz
+00pIAb/+QUtHpSs4DhMNETsqKo9bZ9TUZ1sAAAAAAwAjAAAA+QMcAAUADQAVAAATMxEjESc2MhY
UBiImNDYyFhQGIiY0L3UtSAUWEREWEa8WEREWEAK8/UQCkgKIERYQEBYREBYRERYAAAMAAAAAAdg
DGgAIABAAGAAAETMTEzMDESMRAjIWFAYiJjQ2MhYUBiImNDO4ujPWLUkWEREWEa8WEREWEAK8/s0
BM/6a/qoBVQHFERYQEBYREBYRERYAAAADAE7//AHWAqcAFgAiACwAABMyFzcXBhURFhcHIiYGIic
mNTU0Njc2FyYjIgYVFRQXMjI3Azc2MzIXFhQHB99ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBR6E
0CREYBQIFRAH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAHueRQTBQwHYgAAAAIATv/2Aac
CpwAIAC0AABM3NjMyFxYPAjQ3NjIXFSYiBgcGFBYzMwcjIgYUFjMyNjc3FwYiJyY1NDcmJuE0CRE
YBQQHRKI0Kmg4LEMzFxcnKX8PZjE/RkAkTRQUDU6pLjRRHCACGnkUEw4KYphBIRsPKg8HFBRDNiw
4az4QCAkpIiguS2QeCkAAAAAAAgBO/y0BvwKnAAgAHQAAEzc2MzIXFg8CIgcRIxEzFTYzMhcWFRE
nETQmJyb5NAkRGAUEB0QVTj8tLThXOSdVLD0sEQIaeRQTDgpiRiL+TgH1GyMTJ2n90xQCFzY/BQI
AAgBRAAAAwgKnAAkADQAAEzc2MzIXFhQPAjMRI1U0CREYBQIFRCgtLQIaeRQTBQwHYiX+CwAAAAA
EAE7/9gHKAvYACwAUABwAJAAAEzMRFCA1ETMRFCA1Ezc2MzIXFgcHJjIWFAYiJjQ2MhYUBiImNE4
tASIt/oSsNAkRGAYDB0RqFhERFhCvFhERFhAB9f6whoYBUP63trYBvXkUFA0KYhEQFhERFhAQFhE
RFgAAAAACAE7//AHWAfsAFgAiAAATMhc3FwYVERYXByImBiInJjU1NDY3NhcmIyIGFRUUFzIyN99
ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBRwH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAA
DAE7/XwHAAr0AEAAeACoAABI2MhYUBxYWFRUUIyInFSMRFyIHERYyNjY1NTQmJyYnFTY3Njc2NCc
mIyJORYBDKEFR2jI5LbxRPTpZUzI/Lg+cKFMjCgMOFSpeAmZXS2MgCFlEuKUKmAK6UyD+egsROi+
4OkAEAVRLFRcKJQwkFiEAAAABABX/OgHjAf8AGwAAEzMTFhYXEzY2NxcGBgcDBhQXByY1NDc3LgI

Copyright © 2001 -2024 Syncfusion Inc. 1597


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1598


TreeGrid How To

dnAGoH7sBux2eAAABAE7/jgHAAzEAAwAAATMBIwGSLv6/MQMx/F0AAQBO//YB7gLGAC0AACUGIyI
uAjU1IzUzNSM1MzU0Njc2MzIXByYjIgcGBhUVMxUjFTMVIxUUFxYyNwHuVU0QQUktNzc3NyssLT5
OQA46OVAqEBjc3NzcTyBqWRchBidVP1EsPSxbTE4bGSEgGCgQPChkLD0sT2siDR4AAAEAcwIAAec
CvAASAAATMxc3MxUjNQcjJxUjNSMVIzUjc90xMDYmMhwyJzwoQwK8fn68hoaGhpaWlgAAAAEATgA
AAlACwwAmAAABMzIWFREUBgczFyM1Njc2NRE0JiMjIgYVERQXFhcVIzczJjURNDYBF3BeXi0rVg/
kPTE9T0FwQE88LkDkDlRVXgLDcFz+zTtGGSoqCBohVwE6TFBRS/7GVyEaCCoqLmwBM1xwAAAAAgB
OAAACRwK8AAMABgAAATMTIRMDIQEzK+n+B/q+AYACvP1EAnf9sgAAAAABAE4AAAIAAsIAJAAAATY
zMhcHJiIHBhUVMwcjESMRNDcmIyIHBhUVMwcjESMRNDc2MgFfKDsmGBAaMRYrfRRpLRArLBgYRX0
UaS0aKpICmCQRJwwNGkEzK/42AjEnHR4JGkgzK/42AjExJDwAAAAAAgBOAAABZQLFAAMAFQAAATM
RIwMVMwcjESMRNDYzMhcHJiMiBgE5LCy+fRNqLVY7QzUdMCosOQH1/gsCJzIr/jYCMURQMR4ePgA
AAAEATgAAAWQCwgASAAATNDYyFxEjESYiBwYVFTMHIxEjTleCPSwtQBU7fRNqLQIxRE0x/W8Cdh0
JGkY1K/42AAABAE4AAAJKAsIAIwAAATYyFxEjESYiBwYVFTMHIxEjETQ3JiMHBhUVMwcjESMRNDY
yAV0nijwsLUAVO30Tai0QKyoxQ30UaS1UeAKZKTH9bwJ2HQkaRjUr/jYCMSceHQkbRzMr/jYCMUF
QAAADAE7/+QIKAxoAGAAgACgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjUSMhYUBiImNDYyFhQ
GIiY0Ti1il14KLmkLMg4GG2IsanuBFhERFhGvFhERFhACvP1MUjs1ASv93Y4SHxMxGSOcIB9pZwF
VERYQEBYREBYRERYAAgBOAAACRwK8AAMABgAAATMTIRMDIQEzK+n+B/q+AYACvP1EAnf9sgAAAAA
BABIAAAdeAfUAJAAAEzMTEzMTEzMTEzMTEzMTEzMTEzMDIwMDIwMDIwMDIwMDIwMDIxIvi3grdow
vi3grdowvi3grdowvnzpucDmHhzpucDmHhzpucDkB9f4/AcH+PwHB/j8Bwf4/AcH+PwHB/j8Bwf4
LAaT+XAGq/lYBpP5cAar+VgGk/lwAAQBO//MB4QLDABsAABM0NjIXFTMHIxEUFwcmJjURJiIHBhU
VMwcjESNOVoQ8fRNqSg04Mi4/Fjl9FGktAjFDTzKcK/66VRkjEEY7AfIdChtGMyv+NgAAAAEALP/
zAcYCvAAZAAABMxUzByMRFBcHJiY1ESMRFBcHJiY1ETMVMwEWLYMUb0oNODK9Sg04Mi29ArzHK/6
6VRgkEEY7AUb+ulUYJBBGOwI4xwAAAAEAMQAAAgkCvAAIAAATMxMTMwMRIxExM7i6M9YtArz+zQE
z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN

Copyright © 2001 -2024 Syncfusion Inc. 1599


TreeGrid How To

BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l

Copyright © 2001 -2024 Syncfusion Inc. 1600


TreeGrid How To

sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv

Copyright © 2001 -2024 Syncfusion Inc. 1601


TreeGrid How To

/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1602


TreeGrid How To

endDate: new Date('02/14/2017'),


duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1603


TreeGrid How To

{ taskID: 15, taskName: 'Development Task 1',


startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1604


TreeGrid How To

endDate: new Date('02/24/2017'), duration: 2,


progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 1605


TreeGrid How To

{ taskID: 36, taskName: 'Phase 3 complete',


startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': null,
'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];

Copyright © 2001 -2024 Syncfusion Inc. 1606


TreeGrid How To

export let adventProFont: string =


'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak

Copyright © 2001 -2024 Syncfusion Inc. 1607


TreeGrid How To

WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
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

Copyright © 2001 -2024 Syncfusion Inc. 1608


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1609


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1610


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1611


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1612


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1613


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1614


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1615


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1616


TreeGrid How To

ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBRwH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAA
DAE7/XwHAAr0AEAAeACoAABI2MhYUBxYWFRUUIyInFSMRFyIHERYyNjY1NTQmJyYnFTY3Njc2NCc
mIyJORYBDKEFR2jI5LbxRPTpZUzI/Lg+cKFMjCgMOFSpeAmZXS2MgCFlEuKUKmAK6UyD+egsROi+
4OkAEAVRLFRcKJQwkFiEAAAABABX/OgHjAf8AGwAAEzMTFhYXEzY2NxcGBgcDBhQXByY1NDc3LgI
nFS5qDSIdahAoKR8jIhJ9FgwfHAoWHBgnDgH1/pcuMQkBYDQ6DRsRJDf+XkIuEhobKBgdSQ8ROS0
AAAAAAgBO//YBwwLBABsAKAAAEyY1NDYzMwcjIgcGFRQXFhcWFRUUIyImNTU0NgcVFBYzMjU1NCY
nBgbcLDs7LBIhIxIMMnQeIblfXUseUD+MRkZCTQH5JjgnQykaEBA3HkkuND9nwmdbflBltYVLR5J
8KmAhBlAAAAAAAQBO//YBpwH/ACQAABM0NzYyFxUmIgYHBhQWMzMHIyIGFBYzMjY3NxcGIicmNTQ
3JiZjNCpoOCxDMxcXJyl/D2YxP0ZAJE0UFA1OqS40URwgAYJBIRsPKg8HFBRDNiw4az4QCAkpIig
uS2QeCkAAAAEATv8vAa8CvAAXAAATIRcGBwYVFBYyNxUHNQYiJyY1NDc2NyOSARANO0quUYBKLTF
lLFokSrLcArwoL1XGkkhGFPoV2gwXMG1US5uqAAAAAQBO/y0BvwH9ABQAAAEiBxEjETMVNjMyFxY
VEScRNCYnJgEITj8tLThXOSdVLD0sEQHUIv5OAfUbIxMnaf3TFAIXNj8FAgAAAwA+//oBugLGABA
AHQAqAAA3NTY3JjU0NjMWFhURFAYmJjcVFBYyNjURJiIOAjc2MzIXNCYjIgcGFRQ+AjQiXUtfYWO
3Yi1SfVMMKFBeQDFYfA8OUUEtHi+/j0IlQjpBVAJsX/7GWWwBa+iSR1BRQwEVAQodN1kxAVNOEx1
AMAABADYAAABjAfUAAwAAEzMRIzYtLQH1/gsAAAAAAQBO//8BwAIAABAAABMXFTczBxcWMxcmJic
nBxUjTi3jPL1/OSkCLEAmcEMtAgAL+PjOs00oATY0m0XAAAAAAAEATv/2Ah0CvAAjAAATNTIzMhY
XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq
5X10tTUKNIRsGMyeAr7MwQw8ZBAUDByENOQwmcYfCZwELt0pIko4vSRoBCwAAAAABAE7/8wF7AfQ
ADQAAEyEVIxEUFhcHJiY1ESNOAS2CICQNNy1+AfQr/rswMgwjEEU8AUUAAQBC//YBvgH1AAsAABM
zERQgNREzERQgNUItASIt/oQB9f6whoYBUP63trYAAAAAAgBO/ykCXQH7AB0AKAAAExcGFRUUFjM
zETY2MzIWFRUUBiMjFSc1IyImNTU0BREzMjY1NTQmIyLCGF9PQDICNi9XY11fNy4yX10BHDdDTFY
wQAH3JBiAiEdJAW8wOW1bdltn0gvHZ1t9mEj+mUtHiEtJAAABAE7/LAIVAfUAFQAAEzMTEzMDFx4
EMwciIyInJwMnE1IykZoys3oPJhoZAwIXAQFLMmqdKq4B9f7VASv+o/sgIwkDASFj2f7NEQFTAAA
AAAEATv8lAl0B+gAjAAATMxEUFjMzETMRMzI2NTU0JyYnNx4CFRUUBiMjFSc1IyImNU4tUD8yLjd
ATxYIESQbGgNdXzcuMl9dAfT+wktHAdD+MEdMskseCw8OETsqKp1bZ9YLy2dbAAAAAQBC//QCVgH
0ACQAABMXBgYVFRQWMzI3NTMVFjMyNjU1NCYnNxYVFRQjIicGIyI1NTStGigwQy5SAy4BVC5DMCk
ba6FHIiJHoQH0JAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAD/98AAAC1AlwAAwALABMAABM
zESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAADAE7
/9gHKAlwACwATABsAABMzERQgNREzERQgNRIyFhQGIiY0NjIWFAYiJjROLQEiLf6EZhYRERYRrxY
RERYQAfX+sIaGAVD+t7a2AbARFhAQFhEQFhERFgAAAAMATv/2AcMCpwAIABQAIAAAEzc2MzIXFgc
HAzU0NjIWFRUUBiImNxUUFjI2NTU0JiIG7zQJERgFBAdExWGyYly6Xy1LiEhNgE4CGnkUEw4KYv6
ehF9laVuEVG5v2IxAU1JBjE5MSwAAAgBO//YBygKnAAgAFAAAEzc2MzIXFg8CMxEUIDURMxEUIDX
5NAkRGAUEB0TPLQEiLf6EAhp5FBMOCmIl/rCGhgFQ/re2tgAAAgBO//QCYgKnAAgALQAAATc2MzI
XFg8CFwYGFRUUFjMyNzUzFRYzMjY1NTQmJzcWFRUUIyInBiMiNTU0AUM0CREYBQQHRK4aKDBDLlI
DLgFULkMwKRtroUciIkehAhp5FBMOCmImJAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAAAf/
+Aj0AXgLIAA0AABMXFgYGIiYmNTQ3FwYGIAcRAQ8MDBJAIBYfAnYCCh8OARMLNzUXDB4AAAAB//4
CMABeArsADQAAEycmNjYyFhYVFAcnNjY8BxEBDwwMEkAgFh8CggIKHw4BEws3NRcMHgAAAAEAEf+
sAHEANwANAAAXJyY2NjIWFhUUByc2Nk8HEQEPDAwSQCAWHwICCh8OARMLNzUXDB4AAAAAAv/+AkE
A9QLMAA0AGwAAExcWBgYiJiY1NDcXBgYXFxYGBiImJjU0NxcGBiAHEQEPDAwSQCAWH44HEQEPDAw
SQCAWHwJ6AgofDgETCzc1FwweEQIKHw4BEws3NRcMHgAAAv/+AjAA9QK7AA0AGwAAEycmNjYyFhY
VFAcnNjY3JyY2NjIWFhUUByc2NjwHEQEPDAwSQCAWH6AHEQEPDAwSQCAWHwKCAgofDgETCzc1Fww
eEQIKHw4BEws3NRcMHgAAAgAR/64BCAA5AA0AGwAAMycmNjYyFhYVFAcnNjY3JyY2NjIWFhUUByc
2Nk8HEQEPDAwSQCAWH6AHEQEPDAwSQCAWHwIKHw4BEws3NRcMHhECCh8OARMLNzUXDB4AAAAAAQB
OAJ4BswIDAAcAABIyFhQGIiY0tpRpaZRoAgNolGlplAAAAwARAAABrQA3AAcADwAXAAA2MhYUBiI
mNDYyFhQGIiY0NjIWFAYiJjQhFhERFhDBFhERFhDEFhERFhA3EBYRERYQEBYRERYQEBYRERYAAAA

Copyright © 2001 -2024 Syncfusion Inc. 1617


TreeGrid How To

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
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE

Copyright © 2001 -2024 Syncfusion Inc. 1618


TreeGrid How To

ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9

Copyright © 2001 -2024 Syncfusion Inc. 1619


TreeGrid How To

tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7

Copyright © 2001 -2024 Syncfusion Inc. 1620


TreeGrid How To

//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Restrict decimal points while treegrid editing in React Treegrid component
By default, the number of decimal places will be restricted to two in the NumericTextBox while editing
the numeric column. We can restrict to type the decimal points in a NumericTextBox by using the
validateDecimalOnType and decimals properties of NumericTextBox.
In the below demo, while editing the row we have restricted to type the decimal point value in the
NumericTextBox of Progress column.
APP.JSX
import * as React from 'react';
import { stackedData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar, Page } from '@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const editOptions = { allowEditing: true, allowAdding: true,
allowDeleting: true, mode: 'Row' };
const toolbarOptions = ['Add', 'Edit', 'Delete'];
let treegrid;
const numericParams = {
params: {
decimals: 0,
format: "N",
validateDecimalOnType: true
}
};

Copyright © 2001 -2024 Syncfusion Inc. 1621


TreeGrid How To

return (<TreeGridComponent dataSource={stackedData} treeColumnIndex={1}


childMapping='subtasks' editSettings={editOptions} toolbar={toolbarOptions}
height={265} ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='orderID' headerText='Order ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='orderName' headerText='Order Name'
width='100'></ColumnDirective>
<ColumnDirective field='orderDate' headerText='Order Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='price' headerText='price'
edit={numericParams} editType='numericedit' width='90' format='c2'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Page]}/>
</TreeGridComponent>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { stackedData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar, ToolbarItems, EditSettingsModel, Page, TreeGrid }
from '@syncfusion/ej2-react-treegrid';
import { IEditCell } from '@syncfusion/ej2-react-grids';
/* tslint:disable */
function App() {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding:
true, allowDeleting: true, mode: 'Row' };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete'];
let treegrid: TreeGrid | null;
const numericParams: IEditCell = {
params: {
decimals: 0,
format: "N",
validateDecimalOnType: true
}
};
return (
<TreeGridComponent dataSource={stackedData} treeColumnIndex={1}
childMapping='subtasks'
editSettings={editOptions} toolbar={toolbarOptions} height={265}
ref={g => treegrid = g}>
<ColumnsDirective>
<ColumnDirective field='orderID' headerText='Order ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='orderName' headerText='Order Name'
width='100'></ColumnDirective>
<ColumnDirective field='orderDate' headerText='Order Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>

Copyright © 2001 -2024 Syncfusion Inc. 1622


TreeGrid How To

<ColumnDirective field='price' headerText='price' edit=


{numericParams} editType= 'numericedit' width='90' format='c2'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Page]} />
</TreeGridComponent>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1623


TreeGrid How To

{ taskID: 8, taskName: 'Develop prototype', startDate: new


Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1624


TreeGrid How To

endDate: new Date('02/21/2017'), duration:


2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 1625


TreeGrid How To

{ taskID: 28, taskName: 'Phase 2 complete',


startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [

Copyright © 2001 -2024 Syncfusion Inc. 1626


TreeGrid How To

{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new


Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}

Copyright © 2001 -2024 Syncfusion Inc. 1627


TreeGrid How To

];
export let stackedData = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.00',
price: 65.95,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', shipMentCategory:
'Frozen seafood', units: '35',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.56', price: 43.96 },
{ orderID: '1.2', orderName: 'Yellowfin Tuna', shipMentCategory:
'Frozen seafood', units: '324',
orderDate: new Date('05/03/2017'), shippedDate: new
Date('05/10/2017'), unitPrice: '28.26', price: 91.24 },
{ orderID: '1.3', orderName: 'Herrings', shipMentCategory:
'Frozen seafood', units: '48',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.35', price: 54.48 },
{ orderID: '1.4', orderName: 'Preserved Olives',
shipMentCategory: 'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '29.23', price: 36.75 },
{ orderID: '1.5', orderName: 'Sweet corn Frozen',
shipMentCategory: 'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2017'), unitPrice: '47.17', price: 10.91 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 26.78,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', shipMentCategory:
'Frozen Seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.25', price: 42.45 },
{ orderID: '2.2', orderName: 'White Shrimp', shipMentCategory:
'Frozen seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '72.45', price: 36.25 },
{ orderID: '2.3', orderName: 'Fresh Cheese', shipMentCategory:
'Dairy', units: '323', unitPrice: 12.45,
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 40.35 },

Copyright © 2001 -2024 Syncfusion Inc. 1628


TreeGrid How To

{ orderID: '2.4', orderName: 'Blue Veined Cheese',


shipMentCategory: 'Dairy', units: '370', unitPrice: 15.36,
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 56.82 },
{ orderID: '2.5', orderName: 'Butter', shipMentCategory:
'Dairy', units: '413', unitPrice: '19.35',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 79.55 }
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.34',
price: 37.48,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '3.1', orderName: 'Lead glassware', shipMentCategory:
'Solid crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '46.45', price: 25.79 },
{ orderID: '3.2', orderName: 'Pharmaceutical', shipMentCategory:
'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.56', price: 37.44 },
{ orderID: '3.3', orderName: 'Glass beads', shipMentCategory:
'Solid crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.25', price: 41.25 }
]
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4

Copyright © 2001 -2024 Syncfusion Inc. 1629


TreeGrid How To

BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I

Copyright © 2001 -2024 Syncfusion Inc. 1630


TreeGrid How To

+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY
yFxYUBwMhFSE1ATY1NCYiBlEqE1SGLzQs/QEr/qEBCSZLX0ACPhA1Qyowhkn+jSorAYc8LzpENAA
AAAEAGv/0AaACvAAYAAATIRUHMzIWFAYjIiYnNxYWMzI2NCYnIxMjSQEfrA9ZfHxZNl4dJhdJK0h
gYEJnx+gCvCj3fLF8MywYIihkil8DAR4AAQAaAAAB0AK8AA0AABMzAzMRMxEzByMRIxEh1S+d8y1
JDzot/sACvP7hAR/+4Sz+jwFxAAEAGv/0AaACvAAXAAATIRUjBzMyFhQGIyImJzcWFjMyNjQmIyN
fAQniGV5ZfHxZNl4dJRZLK0dhYEiPArwt8nyxfDMsGCIoY4pjAAACABr/9AHDArwAGAAiAAABMxU
jIgcGBhUVNjYzMhYUBiImNRE0NzY2AxUUFjI2NCYiBgEOIydLOh0iGFs1WXx9sHwyG2SFYoxjYox
hArwtLhdRNYYvMHyxfHxZAQRTSCUv/hQHR2JijWJdAAABABoAAAGkArwABgAAEyEVASMBIRoBiv6
0MQFJ/qoCvC39cQKPAAAAAwAa//QBwALFAAgAHgAmAAATBgYUFjI2NCYnJiY1NDYyFhUUBgcWFhU
UBiImNTQ2EgYUFhY2NCboRF1gjGBimicvZJJlLyk4RHqyekRZTExqT0sBawJfil9fil8bFVAtSmV
lSi5PFhhpPFh6elg+ZwEvTWxJAUluTAAAAAIAGgAAAcMCxQAWACAAADMjNTMyNjU1BgYjIiY0NjI
WFREUBwYGEzU0JiIGFBYyNs8jJ091GFs1WXx8sXwzGmSFYo1iYoxgLWRmgy8vfLB9fFn+/lNHJi4
B6QdHYmOMYl0AAAACABoAbwBRAaEABwAPAAA2MhYUBiImNBIyFhQGIiY0KhYRERYQEBYRERYQphA
WEREWAQsQFhERFgAAAAACABr/rQB6ASwABwAVAAASMhYUBiImNBMnJjY2MhYWFRQHJzY2URYRERY
QFwcRAQ8MDBJAIBYfASwQFhERFv7jAgofDgETCzc1FwweAAAAAAEAGgBQAU8CfQAGAAABFwcXBwE
1ATAf+fkf/uoCfR/49x8BFgEAAAACABoBCAFaAZ0AAwAHAAATIRUhFSEVIRoBQP7AAUD+wAGdLD0
sAAAAAQAaAFABTwJ9AAYAABM3ARUBJzcaHwEW/uof+QJeH/7qAf7qH/cAAAIAGgAAAXwCxQAdACU
AABMjNDYzMhcWFRQHDgMVFSM1ND4CNzY1NCYiBhIyFhQGIiY0Ry1dVTQqUiUTOB8ZKRwjNQ0hTG5
MbRYRERYRAhRLZhszXj42GzkhSDQ9VS5KJzgSNDA3SkX94hAWEREWAAACABr/vgKtAkMANwBCAAA
lIic1NDc2MzIXJicmIyIGFRUUFjMyMzI2NTU0NzY3FwYVFxQGBwYiJjU1NDc2MzIXFhUXFScRBhM
mIyIGFRUWMzI3AUKiC1ghJk1lBCwsTGqNjW0CAnugDRIhDSIBPTJk9KtZTXyENiAlJYhbX10uPgG
MQ1g2lmVvIQwwPSAgXWeYaWtjVb9PFBsMHw832z9gGjR/fZt7PjVHK0MQKRD+9iUBPi85PGFvHwA
AAAIADAAAAgUCvAAHAAoAABMzEyMDIwMjEwMz8irpMFbwVC/7atYCvP1EAQD/AAJz/rkAAAADAE4
AAAH/ArwAEQAZACEAABMzMhYUBwYVFRYWFRQHBgYjIxMVMzI2NCYjAxEzMjU0JiNO3VJeSAEvPik
VUzrmLbk1REpAqLedUj4CvFSwKwEBARRbSlA7ICYCkfQ+ezv+4P66qkhUAAEAQv/2AasCxgAdAAA
lBiMiLgI1ETQ2NzYzMhcHJiMiBwYGFREUFxYyNwGrVU0QQUktKywtPk5ADjo5UCkRGE8fa1kXIQY
nVT8BQUxOGxkhIBgoEDwo/rhrIg0eAAAAAAIATgAAAfICvQAIABMAABMzMhYVERQjIxMRMzI3NjU
RNCYjTrxxd9TQLZVCM0BpSAK9fGf+7sgCk/2WGB5mARpbWQAAAQBOAAABnAK8AAsAABMhFSEVMwc
jESEVIU4BTv7fyg+7AR/+tAK8KvUs/rgpAAAAAQBOAAABnAK8AAkAABMhFSEVMwcjESNOAU7+37Y
Toy0CvCv0LP6PAAEAQf/2AdwCxQAdAAATERQWMjY1NSMnMxEjJwYjIiY1ETQ3NjMyFwcmJyJuXJZ
RTxCKIgoxa1h7Vy0+TUENOTanAfv+wEdTVkJHLP7UN0FkYwE6gDUZISAYAQAAAQBOAAAB/AK8AAs
AABMzESERMxEjESERI04tAVQtLf6sLQK8/uEBH/1EAXH+jwAAAQAdAAAAkgK8AAUAABMzESMRJx1
1LUgCvP1EApICAAAB//7/2wCAArwACgAAEzMRFAcnNjY1EScLdXcLIzJIArz9u5YGHwI4PwIfAgA
AAAABAE8AAAHcAr0ACwAAEzMREzMDASMDBxEjTy34NNEBBTXsPy0Cvf6gAWD+1/5sAWpa/vAAAQB
OAAABtwK8AAUAABMzESEVIU4tATz+lwK8/W0pAAABAE4AAAJmArwADAAAEzMTEzMRIxEDIwMRI04
t3uAtLcgwxi0CvP2JAnf9RAI5/ccCOf3HAAAAAAEATgAAAjoCvAAJAAATMwERMxEjAREjTi0Bkyw
s/m0tArz9lgJq/UQCa/2VAAAAAAIAP//1AeMCzAALABcAADcRNDYyFhURFAYiJhMRFBYyNjURNCY
iBj9xxm17rH0tX45eWZpYuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUgAAAgBOAAACAAK8AAsAGAA
AExEzMjY2NzY1NCYjJzMyFhUUBwYGIyMRI3vKKDgcCApIRPn2X10tE0kyyi0Ckf6bHSUdJDdTWCt
0Yno2FiD/AAACAD//ogHjAswAEQAlAAA3ETQ2MhYVERQGBxYzFSInJiYTERQWFyY1NTMVFBc2NjU
RNCYiBj9xxm1dSxlYeSZWeC1WPgQtBD9KW5NcuQFCZ2pwYv6/V18LKytTAl8Brv61SE0EGCdPTig
XBlBEAUlOT04AAAIATgAAAgECvAAOABYAABMzMhYVFAcTIwMGIyMRIxMRMzI1NCYjTvRgXmZnLmQ
WDtAtLcyMS0QCvHRiqS3+8AECAv8AApH+m7pUVwABACX/9QIAAsYAIgAANzMWFjI2NTQuBDU0NjM
yFwcmIgYVFB4EFRQGIiYlLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11532yOFpKUS9DIicmSjRGZh4
rHUQ/KDsfJylQN1xtcwAAAQAAAAABkgK8AAcAABEhFSMRIxEjAZK1LbACvCn9bQKTAAAAAQBK//k

Copyright © 2001 -2024 Syncfusion Inc. 1631


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1632


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1633


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1634


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1635


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1636


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1637


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1638


TreeGrid How To

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
3Yi1SfVMMKFBeQDFYfA8OUUEtHi+/j0IlQjpBVAJsX/7GWWwBa+iSR1BRQwEVAQodN1kxAVNOEx1
AMAABADYAAABjAfUAAwAAEzMRIzYtLQH1/gsAAAAAAQBO//8BwAIAABAAABMXFTczBxcWMxcmJic
nBxUjTi3jPL1/OSkCLEAmcEMtAgAL+PjOs00oATY0m0XAAAAAAAEATv/2Ah0CvAAjAAATNTIzMhY
XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd

Copyright © 2001 -2024 Syncfusion Inc. 1639


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1640


TreeGrid How To

LAaT+XAGq/lYBpP5cAar+VgGk/lwAAQBO//MB4QLDABsAABM0NjIXFTMHIxEUFwcmJjURJiIHBhU
VMwcjESNOVoQ8fRNqSg04Mi4/Fjl9FGktAjFDTzKcK/66VRkjEEY7AfIdChtGMyv+NgAAAAEALP/
zAcYCvAAZAAABMxUzByMRFBcHJiY1ESMRFBcHJiY1ETMVMwEWLYMUb0oNODK9Sg04Mi29ArzHK/6
6VRgkEEY7AUb+ulUYJBBGOwI4xwAAAAEAMQAAAgkCvAAIAAATMxMTMwMRIxExM7i6M9YtArz+zQE
z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg

Copyright © 2001 -2024 Syncfusion Inc. 1641


TreeGrid How To

AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA

Copyright © 2001 -2024 Syncfusion Inc. 1642


TreeGrid How To

BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I

Copyright © 2001 -2024 Syncfusion Inc. 1643


TreeGrid How To

AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },

Copyright © 2001 -2024 Syncfusion Inc. 1644


TreeGrid How To

{ taskID: 10, taskName: 'Design Documentation', startDate: new


Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1645


TreeGrid How To

endDate: new Date('02/27/2017'), duration: 2,


progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,

Copyright © 2001 -2024 Syncfusion Inc. 1646


TreeGrid How To

taskName: 'Phase 3',


startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },

Copyright © 2001 -2024 Syncfusion Inc. 1647


TreeGrid How To

{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new


Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let stackedData: Object[] = [
{
orderID: '1',
orderName: 'Order 1',
orderDate: new Date('02/03/2017'),
shippedDate: new Date('02/09/2017'),
units: '1395',
unitPrice: '47.00',
price: 65.95,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '1.1', orderName: 'Mackerel', shipMentCategory:
'Frozen seafood', units: '35',
orderDate: new Date('03/03/2017'), shippedDate: new
Date('03/10/2017'), unitPrice: '12.56', price: 43.96},
{ orderID: '1.2', orderName: 'Yellowfin Tuna', shipMentCategory:
'Frozen seafood', units: '324',
orderDate: new Date('05/03/2017'), shippedDate: new
Date('05/10/2017'), unitPrice: '28.26', price: 91.24 },

Copyright © 2001 -2024 Syncfusion Inc. 1648


TreeGrid How To

{ orderID: '1.3', orderName: 'Herrings', shipMentCategory:


'Frozen seafood', units: '48',
orderDate: new Date('05/08/2017'), shippedDate: new
Date('05/15/2017'), unitPrice: '11.35', price: 54.48 },
{ orderID: '1.4', orderName: 'Preserved Olives',
shipMentCategory: 'Edible', units: '125',
orderDate: new Date('06/10/2017'), shippedDate: new
Date('06/17/2017'), unitPrice: '29.23', price: 36.75},
{ orderID: '1.5', orderName: 'Sweet corn Frozen',
shipMentCategory: 'Edible', units: '223',
orderDate: new Date('07/12/2017'), shippedDate: new
Date('07/19/2017'), unitPrice: '47.17', price: 10.91 }
]
},
{
orderID: '2',
orderName: 'Order 2',
orderDate: new Date('01/10/2018'),
shippedDate: new Date('01/16/2018'),
units: '1944',
unitPrice: '58.45',
price: 26.78,
shipMentCategory: 'Seafood',
subtasks: [
{ orderID: '2.1', orderName: 'Tilapias', shipMentCategory:
'Frozen Seafood',
orderDate: new Date('02/05/2018'), shippedDate: new
Date('02/12/2018'), units: '278', unitPrice: '15.25', price: 42.45 },
{ orderID: '2.2', orderName: 'White Shrimp', shipMentCategory:
'Frozen seafood', units: '560',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('05/29/2018'), unitPrice: '72.45', price: 36.25 },
{ orderID: '2.3', orderName: 'Fresh Cheese', shipMentCategory:
'Dairy', units: '323', unitPrice: 12.45,
orderDate: new Date('06/08/2018'), shippedDate: new
Date('06/15/2018'), price: 40.35 },
{ orderID: '2.4', orderName: 'Blue Veined Cheese',
shipMentCategory: 'Dairy', units: '370', unitPrice: 15.36,
orderDate: new Date('07/10/2018'), shippedDate: new
Date('07/17/2018'), price: 56.82 },
{ orderID: '2.5', orderName: 'Butter', shipMentCategory:
'Dairy', units: '413', unitPrice: '19.35',
orderDate: new Date('09/18/2018'), shippedDate: new
Date('09/25/2018'), price: 79.55}
]
},
{
orderID: '3',
orderName: 'Order 3',
orderDate: new Date('09/10/2018'),
shippedDate: new Date('09/20/2018'),
units: '1120',
unitPrice: '33.34',
price: 37.48,
shipMentCategory: 'Seafood',
subtasks: [

Copyright © 2001 -2024 Syncfusion Inc. 1649


TreeGrid How To

{ orderID: '3.1', orderName: 'Lead glassware', shipMentCategory:


'Solid crystals',
orderDate: new Date('02/07/2018'), shippedDate: new
Date('02/14/2018'), units: '542', unitPrice: '46.45', price: 25.79 },
{ orderID: '3.2', orderName: 'Pharmaceutical', shipMentCategory:
'Solid crystals',
orderDate: new Date('04/19/2018'), shippedDate: new
Date('04/26/2018'), units: '324', unitPrice: '11.56', price: 37.44 },
{ orderID: '3.3', orderName: 'Glass beads', shipMentCategory:
'Solid crystals', units: '254',
orderDate: new Date('05/22/2018'), shippedDate: new
Date('03/22/2018'), unitPrice: '16.25', price: 41.25 }
]
}
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY

Copyright © 2001 -2024 Syncfusion Inc. 1650


TreeGrid How To

gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB
MRwMxawIcKxoD/uwuKhI7I1dsBWhoB3BFNFcGAUUQGRUpjWII/pP+yQVKi0MBVENnORkBAwAABQA
m//UCfQLkAAMACwATABsAIwAAARcBJyQyFhQGIiY0FhQWMjY0JiIAMhYUBiImNBYUFjI2NCYiAlc
h/cscAYp4VFR4VCk4Xjg5XP67eFRUeFQpOVw5OVwC5CH9PiHzVHhUVHgTUj4+Uj4B61R4VFR4E1I
+PlI+AAAAAAIAI//1AgMCxwAuADkAAAEHJiIHBhUUFxYXFjI3NzUzFTcXBxEUFwcmJicGIyInJjU
0PgI3JicmNTQ3NjITNQYHBgcGFBYyNgF9GRk8HikBCCkdLQ8vLkkKUz8NJy0FQHRaLykvRTgoIhs
fQCtTKZhLHhcbRZBeArslCBcfLwgINxYPAwqHfRArEv7QWhUjDDklaj83SD9bNx8RBR8lOksqG/4
P1yE5FyUrdFhwAAAAAQAuAk0AZgLgAAgAABMHIyc0NjMXFmYMIAwVBw4OAsBzcxMNBAgAAAEATv+
JAMYDMQAPAAATFwYGFREUFhcHJiY1ETQ2tw8jKCkiDzkwMAMxHxhCPP3DPUIYHyFPTgIsTk8AAAE
ATv+JAMYDMQAPAAATNxYWFREUBgcnNjY1ETQmTg85MDA5DyIpKAMSHyFPTv3UTk8hHxhCPQI9PEI
AAAEAGgGmAUYCvAAOAAATFyczFTcXBxcHJwcnNycocQEschB0RyFJRSREcAJvK3h4KygoYBlkZBl
gKAAAAAEAIgDqAWICIQALAAATMxUzFSMVIzUjNTOsLYmJLYqKAiGELIeHLAABABH/rABxADcADQA
AFycmNjYyFhYVFAcnNjZPBxEBDwwMEkAgFh8CAgofDgETCzc1FwweAAAAAAEALQFxAW0BnQADAAA
TIRUhLQFA/sABnSwAAAABABEAAABIADcABwAANjIWFAYiJjQhFhERFhA3EBYRERYAAAABABr/jgG
MAzEAAwAAATMBIwFeLv6+MAMx/F0AAgA///UB4wLMAAsAFwAANxE0NjIWFREUBiImExEUFjI2NRE
0JiIGP3HGbXusfS1fjl5Zmli5AUJnanBi/r9lX18Brv63TE1LTwFITVJSAAABABoAAAC4ArwADAA
AEzMRIxEGBgcHJz4Ciy0tEjQREAoIGTwCvP1EAoITGgQEKgEFIwAAAQAaAAABeQLGABQAABMnNjY
yFxYUBwMhFSE1ATY1NCYiBlEqE1SGLzQs/QEr/qEBCSZLX0ACPhA1Qyowhkn+jSorAYc8LzpENAA
AAAEAGv/0AaACvAAYAAATIRUHMzIWFAYjIiYnNxYWMzI2NCYnIxMjSQEfrA9ZfHxZNl4dJhdJK0h
gYEJnx+gCvCj3fLF8MywYIihkil8DAR4AAQAaAAAB0AK8AA0AABMzAzMRMxEzByMRIxEh1S+d8y1
JDzot/sACvP7hAR/+4Sz+jwFxAAEAGv/0AaACvAAXAAATIRUjBzMyFhQGIyImJzcWFjMyNjQmIyN
fAQniGV5ZfHxZNl4dJRZLK0dhYEiPArwt8nyxfDMsGCIoY4pjAAACABr/9AHDArwAGAAiAAABMxU
jIgcGBhUVNjYzMhYUBiImNRE0NzY2AxUUFjI2NCYiBgEOIydLOh0iGFs1WXx9sHwyG2SFYoxjYox
hArwtLhdRNYYvMHyxfHxZAQRTSCUv/hQHR2JijWJdAAABABoAAAGkArwABgAAEyEVASMBIRoBiv6

Copyright © 2001 -2024 Syncfusion Inc. 1651


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1652


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1653


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1654


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1655


TreeGrid How To

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
HLP7UN0FkYwE6gDUZISAYAbEFHi4uHgUFL0JCLwAAAAMATv8uAccCigAPACIALgAAEzMVFBYyNjU
1MxUUBiImNRcnMxEUBgcnNjU1BiImNTU0NjIHFRQWMjY1NSYmIgapJipBKyZDXEP0Ay0yOQxKL7t
iaLn0S3xYBlJwVwKKBR4uLh4FBS9CQi/MPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAACAEr
/+QHvAxwAEwAbAAATMxEUFjI2NREzERQOAiIuAjUSNDYyFhQGIkotYohhLSU/RlBHPyW+ERYQEBY
Cvf33RkxMRgIJ/f01TioUFCpONQI8FhAQFhEAAwBO/y4BxwJcAAcAGgAmAAASNDYyFhQGIhcnMxE
UBgcnNjU1BiImNTU0NjIHFRQWMjY1NSYmIgb7ERYQEBaRAy0yOQxKL7tiaLn0S3xYBlJwVwI2FhA
QFhFsPP3LPEQSIxxUgE1gXJVYYb6ZQkdHRLk7OEUAAAAAAgBB/0gB3ALFAB0AKwAAExEUFjI2NTU
jJzMRIycGIyImNRE0NzYzMhcHJiciEycmNjYyFhYVFAcnNjZuXJZRTxCKIgoxa1h7Vy0+TUENOTa
nnwcRAQ8MDBJAIBYfAfv+wEdTVkJHLP7UN0FkYwE6gDUZISAYAfz9AgofDgETCzc1FwweAAAAAAM

Copyright © 2001 -2024 Syncfusion Inc. 1656


TreeGrid How To

ATv8uAccCswASAB4ALAAAASczERQGByc2NTUGIiY1NTQ2MgcVFBYyNjU1JiYiBjcXFgYGIiYmNTQ
3FwYGAZ0DLTI5DEovu2JoufRLfFgGUnBXjgcRAQ8MDBJAIBYfAbk8/cs8RBIjHFSATWBclVhhvpl
CR0dEuTs4RdECCh8OARMLNzUXDB4AAAAAAgBOAAAB/AORAAsAEQAAEzMRIREzESMRIREjEzcXByc
HTi0BVC0t/qwtR5SOIG90Arz+4QEf/UQBcf6PAwSNjSBvbwACAB8AAAIHA5QABQAYAAATNxcHJwc
TESMRMxU2MzIXFhURIxE0JyYiH5SOIG90hS0tOFc5J1UsHiSWAweNjSBvb/7L/k4CvOIjEydp/qY
BWDcfJwACAE4AAAJdArwAEwAXAAATMzUzFSE1MxUzFSMRIxEhESMRIxchNSFOMS0BVC0wMC3+rC0
xXgFU/qwCGqKioqIs/hIBcf6PAe5RUQAAAQBOAAAB/QK8ABoAABMRIxEjNTM1MxUzFSMVNjMyFxY
VESMRNCcmIrktPj4tf384VzknVSweJJYBsv5OAj0sU1MsYyMTJ2n+pgFYNx8nAAACAE4AAAGYAzs
ABQAXAAATMxEjESc3IgcnNjMyFxYzMjcXBiMiJiajdS1IDSojFS81GEQXGCgfFCsxFC8xArz9RAK
SAnkmIDQfCyIhLxQWAAIATgAAAZgCdAARABUAABMiByc2MzIXFjMyNxcGIyImJhczESOwKiMVLzU
YRBcYKB8UKzEULzERLS0CRiYgNB8LIiEvFBZR/gsAAAACAE4AAAEmAxQABQAJAAATMxEjEScnMxU
jenUtSCzY2AK8/UQCkgKALgAAAAIATgAAAScCVAADAAcAABMzFSMXMxEjTtnZWi0tAlQuMf4LAAE
ATv8rAQsCvAAWAAAzBhUUFjMyNxcGIyInJjU0NzMRJzUzEd5nGhcqGh8gQRoWLGACSHVSLxIbKh8
yCxUzQz8CkgIo/UQAAAL/+v8rALcCxgAUABwAADMGFRQWMzI3FwYjIicmNTQ3MxEzEQI0NjIWFAY
iimcaFyoaHyBBGhYsYAItMhEWEBAWUi8SGyofMgsVM0M/AfX+CwKgFhAQFhEAAAAAAgBOAAAAyAM
dAAUADQAAEzMRIxEnNjQ2MhYUBiJOdS1IQxEWEBAWArz9RAKSAmMWEBAWEQAAAAABACkAAABWAfU
AAwAAEzMRIyktLQH1/gsAAAAAAv/+/9sA4ANOAAoAGgAAEzMRFAcnNjY1EScnMxUUFjI2NTUzFRQ
GIiY1FXV3CyMySBcmKkErJkJeQgK8/buWBh8COD8CHwK6BR4uLh4FBS9CQi8AAgBO/y8BcALRAAU
AEwAAEzcXBycHFzMRBgYHJzI2NzY1ESdOlI4gb3QRdgI9NwYIIgocNgJEjY0gb28v/b42SwMjEAs
dNgIJAgAAAAIAT/9IAdwCvQALABkAABMzERMzAwEjAwcRIxcnJjY2MhYWFRQHJzY2Ty34NNEBBTX
sPy2zBxEBDwwMEkAgFh8Cvf6gAWD+1/5sAWpa/vBmAgofDgETCzc1FwweAAAAAAIAQ/9IAbICvAA
MABoAABMzETcXBxYXIwMHESMXJyY2NjIWFhUUByc2NkMt0yCRRZs2ykItpwcRAQ8MDBJAIBYfArz
+icMfgXP1AUw7/u9mAgofDgETCzc1FwweAAAAAAEATv//AcACAAAQAAATFxU3MwcXFjMXJiYnJwc
VI04t4zy9fzkpAixAJnBDLQIAC/j4zrNNKAE2NJtFwAAAAAACAE4AAAG3A2cABQAPAAATMxEhFSE
TNzYzMhcWFAcHTi0BPP6XAzQJERgFAgVEArz9bSkC2nkUEwUMB2IAAAAAAgBRAAAAxANrAAMADQA
AEzMRIxM3NjMyFxYUBwdRLS0GNAkRGAUCBUQCvP1EAt55FBMFDAdiAAACAE7/SAG3ArwABQATAAA
TMxEhFSEXJyY2NjIWFhUUByc2Nk4tATz+l78HEQEPDAwSQCAWHwK8/W0pZgIKHw4BEws3NRcMHgA
CAE7/SACuArwAAwARAAATMxEjFycmNjYyFhYVFAcnNjZ3LS0VBxEBDwwMEkAgFh8CvP1EZgIKHw4
BEws3NRcMHgAAAAL/3gAAAb4DiwAFAAsAABMzESEVIQM3FzcXB1UtATz+l3cfdHAfjgK8/W0pA2s
gb28gjQAC/9oAAAD8A4sAAwAJAAATMxEjAzcXNxcHVC0teh90cB+OArz9RANrIG9vII0AAAABAE4
AAAIyArwADQAAEzMRNxcHESEVIREHJzfJLXsSjQE8/pdqEXsCvP71OChA/qgpAW0vKDcAAAEATgA
AAYMCvAANAAATMxE3FwcRIxEHJzc1J4p1chKELXMRhEgCvP75NCg8/nsBcTMoO/ECAAAAAgBOAAA
COgNnAAkAEwAAEzMBETMRIwERIxM3NjMyFxYUBwdOLQGTLCz+bS3INAkRGAYBBUQCvP2WAmr9RAJ
r/ZUC2nkUEwUMB2IAAAIATgAAAb8CpwAUAB4AAAEiBxEjETMVNjMyFxYVESMRNCYnJic3NjMyFxY
UBwcBCE4/LS04VzknVSw9LBEyNAkRGAUCBUQB1CL+TgH1GyMTJ2n+pgFYNj8FAkZ5FBMFDAdiAAA
CAE7/SAI6ArwACQAXAAATMwERMxEjAREjBScmNjYyFhYVFAcnNjZOLQGTLCz+bS0BCAcRAQ8MDBJ
AIBYfArz9lgJq/UQCa/2VZgIKHw4BEws3NRcMHgAAAgBA/0gBsQH9ABQAIgAAEyIHESMRMxU2MzI
XFhURIxE0JicmAycmNjYyFhYVFAcnNjb6Tj8tLThXOSdVLD0sERUHEQEPDAwSQCAWHwHUIv5OAfU
bIxMnaf6mAVg2PwUC/cYCCh8OARMLNzUXDB4AAAIATgAAAjoDiwAJAA8AABMzAREzESMBESMTNxc
3FwdOLQGTLCz+bS1qH3RwH44CvP2WAmr9RAJr/ZUDayBvbyCNAAAAAgBOAAABvwL9ABQAGgAAASI
HESMRMxU2MzIXFhURIxE0JicmAzcXNxcHAQhOPy0tOFc5J1UsPSwRlh90cB+OAdQi/k4B9RsjEyd
p/qYBWDY/BQIBCSBvbyCNAAABAE7/2wI7ArwAFQAAATMRFAcmJzY3JgMRIxEzFgAXNjURJwHFdng
EBywVgP4tLRkBKE8CSAK8/buWBg4RBCHEAYj9lQK8Jv44eA4jAgsCAAEAQP8vAbIB/QAdAAATIgc
RIxEzFTYzMhcWFzcRBgYHJzI+AjURNCYnJvpOPy0tOFc5J1QBAQI9NwYIIRURPSwRAdQi/k4B9Rs
jEyZ1Af5jNksDIxEWLR0BlTY/BQIAAAMAP//1AeMDFAALABcAGwAANxE0NjIWFREUBiImExEUFjI
2NRE0JiIGNzMVIz9xxm17rH0tX45eWZpYNNnZuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUsUuAAA
AAwBO//YBwwJUAAsAFwAbAAA3NTQ2MhYVFRQGIiY3FRQWMjY1NTQmIgY3MxUjTmGyYly6Xy1LiEh
NgE4h2Ni4hF9laVuEVG5v2IxAU1JBjE5MS8guAAAAAAQAP//1AeMDaAALABcAIQArAAA3ETQ2MhY
VERQGIiYTERQWMjY1ETQmIgY3NzYzMhcWFAcHIzc2MzIXFhQHBz9xxm17rH0tX45eWZpYwTQJERg
FAgVElDQJERgFAgVEuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUox5FBQEDAdieRQUBAwHYgAEAE7
/9gHDAqwACwAXACEAKwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGNzc2MzIXFhQHByM3NjMyFxY
UBwdOYbJiXLpfLUuISE2ATqU0CREYBgEFRJQ0CREYBgEFRLiEX2VpW4RUbm/YjEBTUkGMTkxLk3k
UFAQMB2J5FBQEDAdiAAACAE7/9QMTAswAFgAiAAABIRUhFTMHIxEhFSE1BiMiJjURNDYyFwURFBY
yNjcRJiYiBgHFAU7+38oPuwEf/rQ4bFZ9cc83/rZfiVwGB1eUWAK8KvUs/rgpND9fZQFCZ2pCiP6
3TE1BRAFzQkdSAAAAAwBO//QC9AIAABsAJwAvAAAlBiInBiImNTU0NjMyFhc2MzIWFRUFFRQWMzI
3JRUUFjI2NTU0JiIGBRUlNTQmIgYC203KJTHDXWBaN1EVL3JSXP7KSS1GT/2yTX9JS35MAUMBCVF
rTSMvUU9vU4RfZTErWllPeBFHOjEr9o5CTUw+mEtLSzpYDFdCOEQAAAAAAwBOAAACAQNnAA4AFgA

Copyright © 2001 -2024 Syncfusion Inc. 1657


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1658


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1659


TreeGrid How To

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
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq
5X10tTUKNIRsGMyeAr7MwQw8ZBAUDByENOQwmcYfCZwELt0pIko4vSRoBCwAAAAABAE7/8wF7AfQ
ADQAAEyEVIxEUFhcHJiY1ESNOAS2CICQNNy1+AfQr/rswMgwjEEU8AUUAAQBC//YBvgH1AAsAABM
zERQgNREzERQgNUItASIt/oQB9f6whoYBUP63trYAAAAAAgBO/ykCXQH7AB0AKAAAExcGFRUUFjM
zETY2MzIWFRUUBiMjFSc1IyImNTU0BREzMjY1NTQmIyLCGF9PQDICNi9XY11fNy4yX10BHDdDTFY
wQAH3JBiAiEdJAW8wOW1bdltn0gvHZ1t9mEj+mUtHiEtJAAABAE7/LAIVAfUAFQAAEzMTEzMDFx4
EMwciIyInJwMnE1IykZoys3oPJhoZAwIXAQFLMmqdKq4B9f7VASv+o/sgIwkDASFj2f7NEQFTAAA
AAAEATv8lAl0B+gAjAAATMxEUFjMzETMRMzI2NTU0JyYnNx4CFRUUBiMjFSc1IyImNU4tUD8yLjd
ATxYIESQbGgNdXzcuMl9dAfT+wktHAdD+MEdMskseCw8OETsqKp1bZ9YLy2dbAAAAAQBC//QCVgH
0ACQAABMXBgYVFRQWMzI3NTMVFjMyNjU1NCYnNxYVFRQjIicGIyI1NTStGigwQy5SAy4BVC5DMCk
ba6FHIiJHoQH0JAtJOJFPRXGbm3FEUJE4SQolKI+ByDg4yIGPAAAD/98AAAC1AlwAAwALABMAABM
zESMCMhYUBiImNDYyFhQGIiY0My0tQxYRERYRrxYRERYQAfX+CwJcERYQEBYREBYRERYAAAADAE7
/9gHKAlwACwATABsAABMzERQgNREzERQgNRIyFhQGIiY0NjIWFAYiJjROLQEiLf6EZhYRERYRrxY
RERYQAfX+sIaGAVD+t7a2AbARFhAQFhEQFhERFgAAAAMATv/2AcMCpwAIABQAIAAAEzc2MzIXFgc

Copyright © 2001 -2024 Syncfusion Inc. 1660


TreeGrid How To

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
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg

Copyright © 2001 -2024 Syncfusion Inc. 1661


TreeGrid How To

MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V

Copyright © 2001 -2024 Syncfusion Inc. 1662


TreeGrid How To

udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+

Copyright © 2001 -2024 Syncfusion Inc. 1663


TreeGrid How To

pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Exporting filtered data in React Treegrid component
You can export the filtered data by defining the resulted data in PdfExportProperties.dataSource before
export.
In the below Pdf exporting demo, We have gotten the filtered data from the filteredResult of TreeGrid
filterModule and then defines the resulted data in PdfExportProperties.dataSource and pass it to
pdfExport method.
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';

Copyright © 2001 -2024 Syncfusion Inc. 1664


TreeGrid How To

import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from


'@syncfusion/ej2-react-treegrid';
import { Filter, Toolbar, Page, PdfExport } from '@syncfusion/ej2-react-
treegrid';
/* tslint:disable */
function App() {
const toolbarOptions = ['PdfExport'];
let treegrid;
const pageOptions = { pageSize: 5, pageCount: 5 };
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'PDF Export') {
// get all filtered records
let pdfdata = [];
pdfdata = treegrid.filterModule.filteredResult;
const exportProperties = {
dataSource: pdfdata,
};
if (treegrid) {
treegrid.pdfExport(exportProperties);
}
}
};
return (<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' pageSettings={pageOptions}
toolbarClick={toolbarClick} toolbar={toolbarOptions} allowPaging={true}
ref={g => treegrid = g} allowFiltering={true} allowPdfExport={true}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right'/>
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter, Toolbar, Page, PdfExport]}/>
</TreeGridComponent>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { PdfExportProperties } from '@syncfusion/ej2-react-grids';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';

Copyright © 2001 -2024 Syncfusion Inc. 1665


TreeGrid How To

import { Filter, Toolbar, ToolbarItems, Page, TreeGrid, PdfExport,


PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport'];
let treegrid: TreeGridComponent | null;
const pageOptions: PageSettingsModel = {pageSize:5, pageCount:5};
const toolbarClick = (args: ClickEventArgs) => {
if (treegrid && args.item.text === 'PDF Export') {
// get all filtered records
let pdfdata: object[] = [];
pdfdata = (treegrid as
TreeGridComponent).filterModule.filteredResult;
const exportProperties: PdfExportProperties = {
dataSource: pdfdata,
};
if (treegrid) {
(treegrid as TreeGridComponent).pdfExport(exportProperties);
}
}
}
return (
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' pageSettings={pageOptions}
toolbarClick={toolbarClick} toolbar={toolbarOptions}
allowPaging={true}
ref={g => treegrid = g} allowFiltering={true} allowPdfExport={true}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' />
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter, Toolbar, Page, PdfExport]} />
</TreeGridComponent>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1666


TreeGrid How To

progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,

Copyright © 2001 -2024 Syncfusion Inc. 1667


TreeGrid How To

taskName: 'Implementation Phase',


startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',

Copyright © 2001 -2024 Syncfusion Inc. 1668


TreeGrid How To

startDate: new Date('02/17/2017'),


endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1669


TreeGrid How To

priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',

Copyright © 2001 -2024 Syncfusion Inc. 1670


TreeGrid How To

'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5


},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM
ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH

Copyright © 2001 -2024 Syncfusion Inc. 1671


TreeGrid How To

RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc
zFSMHMxUjByM3IwcjNyM1MzcjNTMXBzM3ARIsOIw5LDmIkii6xC8sLowvLC97hSituCEojSgCvPL
y8i2oLcjIyMgtqC0tqKgAAAMAIv+OAf0DMQAiACgALgAAEzMVFhcHJicRFhcWFhUUBgcVIzUmJic
zFhYXESYmJyY0NjcTETY2NCYCBhQWFxH2LUg8DjNDgyoSG2tvLWJwAi4DWUotOR89Y18tS19huVB

Copyright © 2001 -2024 Syncfusion Inc. 1672


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1673


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1674


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1675


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1676


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1677


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1678


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1679


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1680


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1681


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1682


TreeGrid How To

VERYQEBYREBYRERYAAgBOAAACRwK8AAMABgAAATMTIRMDIQEzK+n+B/q+AYACvP1EAnf9sgAAAAA
BABIAAAdeAfUAJAAAEzMTEzMTEzMTEzMTEzMTEzMTEzMDIwMDIwMDIwMDIwMDIwMDIxIvi3grdow
vi3grdowvi3grdowvnzpucDmHhzpucDmHhzpucDkB9f4/AcH+PwHB/j8Bwf4/AcH+PwHB/j8Bwf4
LAaT+XAGq/lYBpP5cAar+VgGk/lwAAQBO//MB4QLDABsAABM0NjIXFTMHIxEUFwcmJjURJiIHBhU
VMwcjESNOVoQ8fRNqSg04Mi4/Fjl9FGktAjFDTzKcK/66VRkjEEY7AfIdChtGMyv+NgAAAAEALP/
zAcYCvAAZAAABMxUzByMRFBcHJiY1ESMRFBcHJiY1ETMVMwEWLYMUb0oNODK9Sg04Mi29ArzHK/6
6VRgkEEY7AUb+ulUYJBBGOwI4xwAAAAEAMQAAAgkCvAAIAAATMxMTMwMRIxExM7i6M9YtArz+zQE
z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY
AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB

Copyright © 2001 -2024 Syncfusion Inc. 1683


TreeGrid How To

pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu
2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE

Copyright © 2001 -2024 Syncfusion Inc. 1684


TreeGrid How To

AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58
AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA

Copyright © 2001 -2024 Syncfusion Inc. 1685


TreeGrid How To

R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

DATASOURCE.TSX
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1686


TreeGrid How To

{ taskID: 9, taskName: 'Get approval from customer', startDate:


new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1687


TreeGrid How To

endDate: new Date('02/25/2017'), duration: 2,


progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration: 4,
progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new
Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new
Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration: 2,
progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration: 0,
progress: '50', priority: 'Normal', approved: false }
]

Copyright © 2001 -2024 Syncfusion Inc. 1688


TreeGrid How To

}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration: 3,
progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new
Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration: 2,
progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new
Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration: 2,
progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration: 2,
progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration: 0,
progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData: object[] = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low',

Copyright © 2001 -2024 Syncfusion Inc. 1689


TreeGrid How To

'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },


{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 },
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 },
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 },
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }
];
export let adventProFont: string =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAA
ANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QB
RAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAc
AAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAA
BAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAE
AAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxA
AIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAA
BTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQG
aAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQ
AGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAA
dALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4
CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwE
oAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPM

Copyright © 2001 -2024 Syncfusion Inc. 1690


TreeGrid How To

ALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0AB
OAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4
BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgH
RAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjY
ASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwA
kAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4
BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH
2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcI
AIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gB
OAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4
B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH
0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVs
APQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgA
AAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADw
CJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG
7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhE
ADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQAoEAUAJuAE4CCQA+AkwAUAIjAE4CRQB
OAgMATgIrADwCgABOAmwATgJ2ACwA2wAjAfoAAAH5AE4BygBOAeIATgDkAFEB7QBOAfkATgHjAE4
CBAAVAeYATgHKAE4B0gBOAeIATgHhAD4AjQA2AeIATgJAAE4CBwBOAfIATgGfAE4B5gBOAhQAQgH
mAE4BmQBOAg4ATgGeAE4CAwBCAoAATgI4AE4CgQBOAqQAQgCV/98B7QBOAeYATgHtAE4ChQBOAUn
//gFJ//4ApQARAeD//gHg//4BPAARAdYATgHgABEEFwBSARcAKgEnAAQB4gBOAhEATgJcAHMCcwB
OAmoATgIjAE4BiABOAYcATgJtAE4BygAAAiwATgJqAE4HfAASAgQATgHmACwCLAAxAfsABAIHAAw
B/gADAf4ABwH9AAYCBgALAKEAAgPXAE4DNwBOA9sATgN9ABUDkwBOAs8ATgAAAAMAAAADAAAAHAA
BAAAAAAFsAAMAAQAAABwABAFQAAAAUABAAAUAEAB+AKUAqwCxALYAuAC7AO8BEwErATEBPgFIAU0
BXQFzAX4CGQLHAt0DhgOKA4wDoQOoA84gGiAeICIgJiAwIDogRCCsISIhJiIG+wL7BP//AAAAIAC
hAKcArQC0ALgAuwC/APEBFgEuATQBQQFKAVABXwF4AhgCxgLYA4UDiAOMA44DowOqIBggHCAiICY
gMCA5IEQgrCEiISYiBvsA+wT////j/8H/wP+//73/vP+6/7f/tv+0/7L/sP+u/63/q/+q/6b/Df5
h/lH9qv2p/aj9p/2m/aXhXOFb4VjhVeFM4UThO+DU4F/gXN99BoQGgwABAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAABgIKAAAAAAEAAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQA
SABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4
ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgB
LAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAB7AHwAfgCAAIg
AjQCTAJgAlwCZAJsAmgCcAJ4AoACfAKEAogCkAKMApQCmAKcAqQCoAKoArACrALAArwCxALIAAAB
vAGMAZABnAXoAcwCWAG0AaQGBAHEAaAAAAH0AjwAAAHAAAAAAAGYAcgAAAAAAAAFlAAAAagAAAAA
AnQCuAHYAYgAAAAAAAAAAAYMAawB1AXsAAAB3AHoAjAD9AP4AAAAAAXcBeAF0AXUArQAAALUBHgF
/AYABfQF+AYUBhgAAAAABdgF5AXwAeQCBAHgAggB/AIQAhQCGAIMAigCLAAAAiQCRAJIAkADjASc
BLQBuASkBKgErAHQBLgEsASgAALgB/4WwBI0AAAAAKAAoACgAKABEAGYAlgDiASABeAGMAaoByAH
mAfoCFgIkAjYCRAJsAoYCrALUAu4DFANKA14DnAPOA+wEFAQoBDwEUASIBOYFAAU0BWQFhgWeBbI
F4AX4BggGIAY6BkoGZgZ+BqYGzgcIBy4HYAdyB5QHpgfCB94IBggeCDAIPghQCGIIbgiCCMAI8Ak
WCUQJcAmSCcIJ4gn6CiAKOgpICnoKngrECvQLIgs+C3ILigumC7gL1AvsDBoMMgxiDHAMngzCDN4
NEg1CDXgNoA3yDhAOUA6ADp4OrA7uDvoPGA8yD0gPdg+aD74P3BAUEDoQYhCGELgQ0hECESYRbhG
SEbgR2hHyEg4SLBJGElYSjBK8EvATJhNYE5gTwBPaFBoUSBR4FKQUxhT+FSYVfBXIFhYWYBa4FvY
XRhecF+IYGhhUGIoYthjQGOwZBBkoGWQZlhnKGfoaOBpeGoIawBrqGxYbPhtaG5YbvhwCHCIcZhy
UHOYdFh1sHaod4B4aHkwehh64HvIfJB9QH5QfvB/8IBogTCBwIKYg0iEUITYhbCGkId4iICJkIpA
izCMQI1YjeCOiI8gj8CQYJD4kVCRmJIokuCTUJOIlDCUyJWIlkiWyJdIl7iYSJjQmTiZmJoImnib
EJvYnIidaJ3wnqifSKAIoMChcKKAo4ikaKWIpmCnCKf4qLipeKoQqxisIK0QrgivSLA4sTCxyLKA
svCzgLPgtGC1SLYgtsC3SLgguOC5wLqQu4i8cL04vfi+mL8wv8jAUMDYwWDB6MMAxCDEaMSwxRjF
YMXYxlDG0MdgyAjIsMlIyeDKWMswzAjNKM3wzljPKM9oz7jQGNB40NjRkNHQ0jjSgNLw01DT+NSY
1OjViNYA1kjW6NfY2EjZGNmw2mDbeNyQ3VDdwN6w34jgkOFY4kjjKOPI5FjlWOWQ5hDnAOe46ADo
8OmI6gjqqOt47GDsyO0o7hDusO+A8FDw4PGY8mjy+PQA9HD04PVQ9hD20PeQ99j4ePnI+hD6WPqQ
+4j8APzo/UD+IP64/zkAEQARAQkBYQJxAyEDyQQhBHEEyQVRBeEGkQbpB1kJAQpJC+kNsQ75D4gA
AAAMAAAAAAfQCvAADAAcAEwAAESERIRMRIREFNxc3FwcXBycHJzcB9P4MMgGQ/ocoiYgnkZEniIk
okwK8/UQCiv2oAlhPHc3MINnZIMzNHd0AAgBOAAAAhgLGAAUADQAAEwMjAzQyAjIWFAYiJjSGCCY
JNycWEBAWEQKn/dECLx/9cRAWEREWAAACAHMCAAE0AuAACAARAAABByMnNDYzFxYHByMnNDYzFxY
BNAshDBUHDg6JCyEMFQcODgLBwcETDAQIE8HBEwwECAAAAAIAIgAAAkYCvAAbAB8AAAEzBzM3Mwc

Copyright © 2001 -2024 Syncfusion Inc. 1691


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1692


TreeGrid How To

0Yno2FiD/AAACAD//ogHjAswAEQAlAAA3ETQ2MhYVERQGBxYzFSInJiYTERQWFyY1NTMVFBc2NjU
RNCYiBj9xxm1dSxlYeSZWeC1WPgQtBD9KW5NcuQFCZ2pwYv6/V18LKytTAl8Brv61SE0EGCdPTig
XBlBEAUlOT04AAAIATgAAAgECvAAOABYAABMzMhYVFAcTIwMGIyMRIxMRMzI1NCYjTvRgXmZnLmQ
WDtAtLcyMS0QCvHRiqS3+8AECAv8AApH+m7pUVwABACX/9QIAAsYAIgAANzMWFjI2NTQuBDU0NjM
yFwcmIgYVFB4EFRQGIiYlLgRmpm09WmtaPXRtUz8OOZlkPVtqWz11532yOFpKUS9DIicmSjRGZh4
rHUQ/KDsfJylQN1xtcwAAAQAAAAABkgK8AAcAABEhFSMRIxEjAZK1LbACvCn9bQKTAAAAAQBK//k
B7wK9ABMAABMzERQWMjY1ETMRFA4CIi4CNUotYohhLSU/RlBHPyUCvf33RkxMRgIJ/f01TioUFCp
ONQAAAAABAE4AAAIsArwABgAAEzMTEzMDI04wv78w0D0CvP18AoT9RAABAE4AAAMGArwADAAAEzM
TEzMTEzMDIwMDI04wmHc8d5UxqEJxcUICvP1/AoH9fwKB/UQCZ/2ZAAEALQAAAigCvAALAAATMxM
TMwMTBwMDIxNAMrm5NNLiN8bGOOMCvP7TAS3+qP6dAQE2/soBZAAAAQA8//kB+AK8ABgAABMzFRQ
WMjY3ETMRFAcnNjc2NTUGBiMiJjU8LWKXXgouaQsyDgYbYixqewK8/UxSOzUBK/3djhIfEzEZI5w
gH2lnAAABAB8AAAIGArwACQAAEyEVASEVITUBISwB1P5YAa7+GQGo/mUCvCn9likpAmoAAAABAE7
/jgDvAzEABwAAEzMVBxEXFSNOoXR0oQMxJQf8tQclAAABAE7/jgHAAzEAAwAAEzMBI04uAUQwAzH
8XQAAAQBO/44A7wMxAAcAABMzESM1NxEnTqGhdHQDMfxdJQcDSwcAAQBOAtYBcAODAAUAABM3Fwc
nB06Ujh9wdAL2jY0gb28AAAAAAQBM/9QBjAAAAAMAADMhFSFMAUD+wCwAAQAuAksAmwLYAAgAABM
XIycmNTQzMmY1JUMFHhICxHljBwYdAAAAAAIAJf/2AaYB/QAaACgAAAUiNTU0NzYzMhc0JiMiIzc
yFx4DFxYVEQYDFRQWFxY3ESYnIiMiBgEA20YkJXpLRVwCAwNRJxUgEgwCA2jtLyhad1NiBQQrPwq
zU2MiETg5RiQTCxYkGxcjJv7WCgEDVzA+ChgUAQ8uBjUAAAACAE7/9AG/ArwADgAdAAATNjMyFxY
VFRQHBiInETMXIgcRFjIzNjY1NTQmJyZ7NVc5KlVOO5JWLY9SPUM+Az5WPi0PAdsiEydpvWMoHgw
CvOgh/nUKAUA9uzhABAEAAAABACT/9QFmAf4AFwAAASYiBgYVFRQzMjcXBiInJjU1NDc2MzIXAVc
6WkMvoDE6CkBoMmgcMG5CRAG7GhdLOZGMDiURECKNgEcwUyAAAgBH//QBuAK8AA4AHAAAEzIXNTM
RBiInJjU1NDc2FyYjIgcGBhUVFBcWMjf/VjYtVpI7TlUqxT1SDw8tPissfkMB/SLh/UQMHihjvWk
nE0ohAQRAOLs9ICEKAAACACP/9AGLAf4AEgAaAAAlBiMiNTU0NjIWFRUFFRQWMzI3ARUlNTQmIgY
Bck1UrmWmXf7FSi9IT/7wAQ5SbU8jL5LNUVpZT3gRSDkxKwENWg5UQzlAAAAAAQBOAAABBQLHABM
AAAEHJiMiBhUVMwcjESMRNDY3NjMyAQUHDQwsPn0Tai0iGistEgLDJwI2QzAr/jYCJTJIDxkAAAA
CACX/LgGeAf4AEgAeAAABJzMRFAYHJzY1NQYiJjU1NDYyBxUUFjI2NTUmJiIGAXQDLTI5DEovu2J
oufRLfFgGUnBXAbk8/cs8RBIjHFSATWBclVhhvplCR0dEuTs4RQABAEAAAAGxArwAEgAAExEjETM
VNjMyFxYVESMRNCcmIm0tLThXOSdVLB4klgGy/k4CvOIjEydp/qYBWDcfJwAAAgBOAAAAhQLGAAM
ACwAAEzMRIwI0NjIWFAYiUy0tBREWEBAWAfX+CwKgFhAQFhEAAv/6/y8AfALGAA0AFQAAETMRBgY
HJzI2NzY1ESc2NDYyFhQGInYCPTcGCCELGzYyERYQEBYB9f2+NksDIxALHTYCCQLVFhAQFhEAAAE
AQwAAAbICvAAMAAATMxE3FwcWFyMDBxEjQy3TIJFFmzbKQi0CvP6Jwx+Bc/UBTDv+7wABAE4AAAB
7ArwAAwAAEzMRI04tLQK8/UQAAAAAAQBOAAACvgH9ACAAABMRIxEzBzYyFzYzMhYVESMRNCcmIyI
HBxYVESMRNCcmInstLQRHlyxYTEdSLBQgRi0sKg8sHCCEAbL+TgH1HiUxMlxH/qYBVzAfMBUVHTn
+qgFhNB0iAAEAQAAAAbEB/QAUAAATIgcRIxEzFTYzMhcWFREjETQmJyb6Tj8tLThXOSdVLD0sEQH
UIv5OAfUbIxMnaf6mAVg2PwUCAAAAAAIAL//2AaQCAAALABcAADc1NDYyFhUVFAYiJjcVFBYyNjU
1NCYiBi9hsmJcul8tS4hITYBOuIRfZWlbhFRub9iMQFNSQYxOTEsAAAACAE7/LgHHAf0ADwAcAAA
TMwc2NjMyFhUVFAYiJxEnATU0JiYiBgcVFBYyNk4tBBtOJV9jZ7YvLQFMMD1YUwdPfFQB9TcfIG1
WilthQP76EQFnmDdHGDpAt0NDRQAAAAACACX/LgGeAf0ADwAbAAABMxEnNQYiJjU1NDYzMhYXBRU
UFjI2NTUmJiIGAXEtLS+2Z2NfJU4b/t1UfE8HVGxYAfX9ORH1QGFbilZtIB+AmERFQ0O3QDpHAAA
AAAEAPQAAATcB/gAOAAATMwc2MzIXByYiBwYVESM9LQIxUyIpDB8/IEMtAfUoMQkqCwoTL/52AAA
AAQAk//EBjAIBACAAAAEHJiYGFRQeAxQGIiYnMxYWMjY0LgInJjQ2MzIWFwFLECZwSEVXVzxZq2I
CKwZPbU46VlYhJ09bHzgMAeQmGgEyKikrGh9BblBSPC81MlUyGxwcIWNWDwcAAAABACz/8wDcArw
ADAAAEzMVMwcjERQXByYmNSwtgxRvSg04MgK8xyv+ulUYJBBGOwABACT/9QGZAfUAEAAAEzMRFDM
yNjURMxEjNwYjIjUkLY9ATC0sAzNdvAH1/rOKQ0IBUv4LO0a4AAEAEgAAAZMB9QAGAAATMxMTMwM
jEi+Rki+kOgH1/j8Bwf4LAAEAEgAAAqAB9QAMAAATMxMTMxMTMwMjAwMjEi+LeCt2jC+fOm5wOQH
1/j8Bwf4/AcH+CwGk/lwAAQA6AAABpwH1AAsAABMzFzczBxcjJwcjNzwzgoQynJs0gYI1nQH109P
8+dDQ+gAAAQAl/y4BvAH+ABwAABMzERQWMjY1NTQ3NjcXBhURFAYHJzY1NQYjIiY1JStJhVIaDhc
NIDA5DEoobVhfAfX+sUJHR0LIYxgNCB8SOv4wPUYSIxpWe0hfXQAAAAABAE4AAAG9AfUACQAAEyE
VASEVITUBIVcBUf7dATj+kQEh/ugB9Sn+XSkpAaMAAAABAE7/jAERAzYAHQAAARcOAhUVFAcWFRU
UFhcHJiY1NTQmJic2NjU1NDYBAA8XHBk8PiYmD0IoIBUVGDApAzYfERw/KrkpPD4ouTtFGR8mXHJ
3EzEUExM+G3luWwAAAAABAE7/jgB7AzEAAwAAEzMRI04tLQMx/F0AAAAAAQBO/4wBEQM2AB0AABM
3FhYVFRQWFw4CFRUUBgcnNjY1NTQ3JjU1NCYmUA9BKTAYFRUgKEIPJiY+PBkcAxcfJltueRs+ExM
UMRN3clwmHxlFO7koPjwpuSo/HAABAE4BIQHfAXgAEwAAAQYjIicnJiMHBgcnNjMyFxYzMjcB3yt
AGB9GGhsZJx4WL0UcXR0dNR8BVjEJFAgCBSIgNx0JJAAAAAACAE4AAACGAsYABQANAAATExQiNRM
2IiY0NjIWFH4INwkdFhERFhACTv3RHx8CL0EQFhERFgAAAAIATv+OAZACbwAYAB8AABMzFRYXByY
nETI3FwYjFSM1JicmNTU0NjcHFQYXEQYG8yw2OQ00LjE2Cjs2LGMoGltKeAF5N0ECb3MEGiMWA/5
JDiUQaGoJPylLgFxnBsOReBIBtAhMAAAAAQBOAAABtgLFAB8AABMzJjU0NjIXByYiBhUUFzMVIxY

Copyright © 2001 -2024 Syncfusion Inc. 1693


TreeGrid How To

UBgchFSE1NjY1NicjZTsjbZkoDyt1UyfVxxAxJwEg/pgzPwESSgFmazJXaxkoGFdEJHcsN1xiGC0
nGmI4ID8AAgBOAJQBrQHzABcAHwAAEzcXNjIXNxcHFhQHFwcnBiInByc3JjQ3NgYUFjI2NCZUHB4
xfi4fHB8mJyEbIS6ALiAbHyUlU05Obk1NAdAbHycmHx0fMHoxIRshJiYiGyIwezAYTm1MS25OAAA
AAQA1AAACDQK8ABkAABMzNScjNTMDMxMzEzMDMxUjBxUzFSMRIxEjgogHgWe0M7UFuDO1aoUGi4s
tiAEwJQwsAS/+0QEv/tEsCyYs/vwBBAACAE7/OwIpAsgAKgA4AAAXMxYWMjY1NC4DJyY0NyY1NDY
zMhcHJiIGFRQXHgQUBxYVFAYiJhMGFRQeAhc2NTQmJyZOLgRopW08WmlbHyAfIHRtUz8OOZhmUSR
YV0ktFxh35X1SE1NngiQKTzGgCDtXTk0wRSMoJiQlZicoN0ZmHiodQ0FEJxIfIitHYislMVxvcwH
xHh4vQB41ICUPNEgRNQAAAAIABAKiANoC2QAHAA8AABIyFhQGIiY0NjIWFAYiJjQVFhERFhGvFhE
RFhAC2REWEBAWERAWEREWAAAAAAMAGf+BAwYCbQAHAA8AJwAAFiYQNiAWEAYABhAWIDYQJhcjJiY
jIgYUFjMyNjczBgYjIiY0NjMyFvXc2gE72Nr+3MDBAQ7BwD4yCU45UlJUUThQBzMQbEZjc3JiSW5
/2AE+1tb+wtgCwLr+4bu8ARm//itBa5ltQy5IV4LFh1YAAgBOAXwBWwLFABIAHgAAAQYiLgI1NDc
2MzIXNCc3MhYVBxQzMjc1JiciIyIGAVtFPj0uH0AQFDZJfwNiROZwISs7PgMEGSMBhwsGHDwtUxY
GLVgBI0tPKmAJdikGJAAAAgAqAFAB3wHHAAYADQAAExcHFwcnNSUXBxcHJzXlHp2cHbsBlx6dnB2
7AccfnZ4duwG7H52eHbsBAAAAAQAtAXEBbQGdAAMAABMhFSEtAUD+wAGdLAAAAAQAGf+BAwYCbQA
MABYAHgAmAAABMzIWFAYHFyMnIxUjExUzMjc2NTQmIwImEDYgFhAGAAYQFiA2ECYBCKRHTj8zfDZ
4aC0tY1oXC0Qsr9zaATvY2v7bv8ABEr7AAdxEbTwGwr6+AYyjJRIbLCX9ztgBPtbW/sLYAsC6/uG
7vAEavgAAAAEATgJ3ASsCpQADAAATMxUjTt3dAqUuAAIATgGlAW4CxQAHAA8AABIyFhQGIiY0FhQ
WMjY0JiKieFRUeFQpOF44OVwCxVR4VFR4E1I+PlI+AAAAAAEATgDtAZICIQAPAAATMzUzFTMVIxU
zFSE1MzUjUossiYmF/sCPiwGdhIQsWCwsWAAAAAABAC4CTACbAtkACQAAEzc2MzIXFhQHBy40CRE
YBgEFRAJMeRQTBQwHYgAAAAEAJf8wAbsB/gAbAAATMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxU
nJS4ZLzIvKSEtLgIYFggaBylTPy0zDi4B9f5wHBUWEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBO/zk
CfALuABQAAAEhESMRJxEjESMiJy4DJyY1NDYBCAF0LU8t1EMjEhsPCgIDXALu/EsDigH8dgG8Gg4
dMCQeLTJkfgAAAQBM/y4BJAAAABQAADMzBzYyFhQGIic3FjI2NCcmIgcHJ60jKA47M0paNBQjSi0
ZCx8VJA43CCVVKRMrGBo0CwUIDxcAAAAAAgAEAFABuQHHAAYADQAAEzcXFQcnNyU3FxUHJzfgHru
7HZz+hx67ux2cAagfuwG7HZ6dH7sBux2eAAAAAgBPAAABsQLFAB0AJQAAJTMUBiMiJyY1NDc+AzU
1MxUUDgIHBhUUFjI2AiImNDYyFhQBhC1dVTQqUiUTOB8ZKRwjNQ0hTG5MbRYRERYRsUtmGjRePjY
bOSFIND1VLkonOBI0MDdKRQIeEBYRERYAAAMADAAAAgUDZwAHAAoAEwAAEzMTIwMjAyMTAzMDFyM
nJjU0MzLyKukwVvBUL/tq1pM1JUMFHhICvP1EAQD/AAJz/rkCJ3ljBwYdAAADAAwAAAIFA2gABwA
KABQAABMzEyMDIwMjEwMzAzc2MzIXFhQHB/Iq6TBW8FQv+2rWgTQJERgGAQVEArz9RAEA/wACc/6
5Aa95FBQEDAdiAAMADAAAAgUDkQAHAAoAEAAAEzMTIwMjAyMTAzMDNxcHJwfyKukwVvBUL/tq1v2
UjiBvdAK8/UQBAP8AAnP+uQHYjY0gb28AAAMADAAAAgUDOgAHAAoAHAAAEzMTIwMjAyMTAzMDIgc
nNjMyFxYzMjcXBiMiJibyKukwVvBUL/tq1rEqIxUvNRhEFxgoHxQrMRQvMQK8/UQBAP8AAnP+uQH
gJiA0HwsiIS8UFgACAAwAAAIFArwABwAKAAATMxMjAyMDIxMDM/Iq6TBW8FQv+2rWArz9RAEA/wA
Cc/65AAAAAwAMAAACBQN1AA8AEgAaAAASJjQ2MhYUBgcTIwMjAyMTFwMzAhQWMjY0JiLELEFbQSw
i3jBW8FQv2yBq1rYrPioqPgKmO1NBQVM7C/1lAQD/AAKbKP65Afk+Kio+KgAAAgBOAAADCwK8AA8
AEgAAASEVIRUzByMRIRUhEyMDIwEDMwG8AU/+38oPuwEf/rMBuYYwAW+jowK8KvUs/rgpAQD/AAJ
k/sgAAQBC/y4BqwLGAC8AABMRFBcWMjcXBiMHNjIWFAYiJzcWMjY0JyYiBwcnNyYmNRE0Njc2MzI
XByYjIgcGBm9PH2tZClVTIA47M0paNBQjSi0ZDB4VJA42SFcrLC0+TkAOOjlQKREYAgH+uGsiDR4
mIS0IJVUpEysYGjQLBQgPF0YIXFsBQUxOGxkhIBgoEDwAAgBOAAABnANmAAsAFAAAEyEVIRUzByM
RIRUhExcjJyY1NDMyTgFO/t/KD7sBH/60jDUlQwUeEgK8KvUs/rgpA1J5YwcGHQAAAgBOAAABnAN
nAAsAFQAAEyEVIRUzByMRIRUhEzc2MzIXFhQHB04BTv7fyg+7AR/+tJ80CREYBQIFRAK8KvUs/rg
pAtp5FBMFDAdiAAIATgAAAZwDkQALABEAABMhFSEVMwcjESEVIRM3FwcnB04BTv7fyg+7AR/+tA+
UjiBvdAK8KvUs/rgpAwSNjSBvbwAAAQBOAAABnAK8AAsAABMhFSEVMwcjESEVIU4BTv7fyg+7AR/
+tAK8KvUs/rgpAAAAAgBTAAAAyANmAAUADgAAEzMRIxEnNxcjJyY1NDMyU3UtSDg1JUMFHhICvP1
EApICvnljBwYdAAACAE4AAAEJA2cABQAPAAATMxEjESc3NzYzMhcWFAcHTnUtSE40CREYBgEFRAK
8/UQCkgJGeRQTBQwHYgACAE4AAAFwA5EABQALAAATMxEjEScnNxcHJweGdS1IOJSOIG90Arz9RAK
SAnCNjSBvbwAAAQBOAAAAwwK8AAUAABMzESMRJ051LUgCvP1EApICAAADAE4AAAJdAr0AEQAbACE
AABMzNTMyFhczFSMWFREUIyMRIwU0JyERMzI3NjUBFSEmJiNOMbxdcxFBOwHU0DEBqAH+t5VCM0D
+tgFCEF86AhqjWEssBw3+7sgB7g8KBf47GB5mAc55PTwAAAACAE4AAAI6AzoACQAbAAATMwERMxE
jAREjEyIHJzYzMhcWMzI3FwYjIiYmTi0Bkyws/m0tsiojFS81GEQXGCgfFCsxFC8xArz9lgJq/UQ
Ca/2VAwwmIDQfCyIhLxQWAAADAD//9QHjA2YACwAXACAAADcRNDYyFhURFAYiJhMRFBYyNjURNCY
iBhMXIycmNTQzMj9xxm17rH0tX45eWZpYhDUlQwUeErkBQmdqcGL+v2VfXwGu/rdMTUtPAUhNUlI
BA3ljBwYdAAMAP//1AeMDZwALABcAIQAANxE0NjIWFREUBiImExEUFjI2NRE0JiIGNzc2MzIXFhQ
HBz9xxm17rH0tX45eWZpYlTQJERgFAgVEuQFCZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUot5FBMFDAd
iAAMAP//1AeMDkQALABcAHQAANxE0NjIWFREUBiImExEUFjI2NRE0JiIGNzcXBycHP3HGbXusfS1
fjl5ZmlgSlI4gb3S5AUJnanBi/r9lX18Brv63TE1LTwFITVJStY2NIG9vAAADAD//9QHjAzoACwA
XACkAADcRNDYyFhURFAYiJhMRFBYyNjURNCYiBjciByc2MzIXFjMyNxcGIyImJj9xxm17rH0tX45

Copyright © 2001 -2024 Syncfusion Inc. 1694


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1695


TreeGrid How To

1NDYyFhUVFAYiJjcVFBYyNjU1NCYiBic3FwcnB05hsmJcul8tS4hITYBOBJSOIG90uIRfZWlbhFR
ub9iMQFNSQYxOTEu3jY0gb28AAAADAE7/9gHDAn4ACwAXACkAADc1NDYyFhUVFAYiJjcVFBYyNjU
1NCYiBjciByc2MzIXFjMyNxcGIyImJk5hsmJcul8tS4hITYBOTCojFS81GEMYGCgfFCsxFS4xuIR
fZWlbhFRub9iMQFNSQYxOTEvEJiA0HwsiIS8UFgAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiI
mNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEhNgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAMATgDpAY0
CFgADAAsAEwAAEyEVIRYyFhQGIiY0EjIWFAYiJjROAT/+wZcWEREWEBAWEREWEAGYLEwQFhERFgE
GEBYRERYAAAMATv+OAc0CgwAVAB4AJwAAATMHFhUVFAYjIicHIzcmNTU0NjMyFwcVFBcTJiMiBgU
0JwMWMzI2NQGhLEg+XF0lIS8vN09hWzAp6DOkIChBTgEbIqEaHURIAoOsNWaEVG4KcoUzcoRfZRO
wjE0pAYsRS09HKP56CFJBAAACAE7/9QHDAqYAEAAZAAATMxEUMzI2NREzESM3BiMiNRMXIycmNTQ
zMk4tj0BMLSwDM128oDUlQwUeEgH1/rOKQ0IBUv4LO0a4AeV5YwcGHQAAAAACAE7/9QHDAqcAEAA
aAAATMxEUMzI2NREzESM3BiMiNRM3NjMyFxYUBwdOLY9ATC0sAzNdvKE0CREYBQIFRAH1/rOKQ0I
BUv4LO0a4AW15FBMFDAdiAAAAAgBO//UBwwLQABAAFgAAEzMRFDMyNjURMxEjNwYjIjUTNxcHJwd
OLY9ATC0sAzNdvCyUjiBvdAH1/rOKQ0IBUv4LO0a4AZaNjSBvbwAAAAABAE7/9QHDAfUAEAAAEzM
RFDMyNjURMxEjNwYjIjVOLY9ATC0sAzNdvAH1/rOKQ0IBUv4LO0a4AAIATv8uAeUCpwAcACYAABM
zERQWMjY1NTQ3NjcXBhURFAYHJzY1NQYjIiY1Ezc2MzIXFhQHB04rSYVSGg4XDSAwOQxKKG1YX54
0CREYBgEFRAH1/rFCR0dCyGMYDQgfEjr+MD1GEiMaVntIX10BankUEwUMB2IAAAIATgAAAccChAA
NABYAABMzFTYyFhQGIyImJxUjACYiBgcUFjI2Ti02tWFoUilUFS0BTFRzVgJRfVEChMtEbbNpKir
IAYtKSEhRVU8AAAAAAwBO/y4B5QJcABwAJAAsAAATMxEUFjI2NTU0NzY3FwYVERQGByc2NTUGIyI
mNRIyFhQGIiY0NjIWFAYiJjROK0mFUhoOFw0gMDkMSihtWF9nFhERFhGvFhERFhAB9f6xQkdHQsh
jGA0IHxI6/jA9RhIjGlZ7SF9dAawRFhAQFhEQFhERFgAAAAMADAAAAgUDFAAHAAoADgAAEzMTIwM
jAyMTAzMDMxUj8irpMFbwVC/7atbc2dkCvP1EAQD/AAJz/rkB6C4AAAADAE7/9gHPAlQAGgApAC0
AAAUiNTU0NzYzMhc0JiMiIzcyFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgYTMxUjASnbRiQlektFXAI
DA1EnFSASDAIDaO0vKS9tNFNiBQQrPy/Z2QqzU2MiETg5RiQTCxYkGxcjJv7WCgEDVzA+Cg0JAQ8
uBjUBIC4AAwAMAAACBQNQAAcACgAaAAATMxMjAyMDIxMDMwMzFRQWMjY1NTMVFAYiJjXyKukwVvB
UL/tq1tsmKkErJkJeQgK8/UQBAP8AAnP+uQIkBR4uLh4FBS9CQi8AAAADAE7/9gHPApAAGgApADk
AAAUiNTU0NzYzMhc0JiMiIzcyFx4DFxYVEQYDFRQWFxYyNxEmJyIjIgYTMxUUFjI2NTUzFRQGIiY
1ASnbRiQlektFXAIDA1EnFSASDAIDaO0vKS9tNFNiBQQrP0omKkErJkJeQgqzU2MiETg5RiQTCxY
kGxcjJv7WCgEDVzA+Cg0JAQ8uBjUBXAUeLi4eBQUvQkIvAAIATv8rAnMCvAAYABsAACEGFRQWMzI
3FwYjIicmNTQ3MwMjAyMTMxMDAzMCRmcaFyoaHyBBGhYsYAFW8FQv5irp/mrWUi8SGyofMgsVM0M
/AQD/AAK8/UQCc/65AAAAAAIAJf8rAdIB/QAtADsAAAUGIi4CNTU0NzYzMhc0JiMiIzcyFx4DFxY
VESMGFRQWMzI3FwYjIicmNTQDFRQWFxY3ESYnIiMiBgFsPEtcOylGJCV6S0VcAgMDUScVIBIMAgM
BZxoXKhofIEEaFizELyhad1NiBQQrPwUGDyRLNlNjIhE4OUYkEwsWJBsXIyb+1lIvEhsqHzILFTN
AATtXMD4KGBQBDy4GNQAAAAACAEL/9gGrA2sAHQAnAAAlBiMiLgI1ETQ2NzYzMhcHJiMiBwYGFRE
UFxYyNwM3NjMyFxYUBwcBq1VNEEFJLSssLT5OQA46OVApERhPH2tZtzQJERgGAQVEFyEGJ1U/AUF
MThsZISAYKBA8KP64ayINHgKheRQTBQwHYgAAAgBO//UBkAKnABcAIQAAASYiBgYVFRQzMjcXBiI
nJjU1NDc2MzIXJzc2MzIXFhQHBwGBOlpDL6AxOgpAaDJoHDBuQkS9NAkRGAUCBUQBuxoXSzmRjA4
lERAijYBHMFMgPHkUEwUMB2IAAAAAAgBC//YBqwORAAUAIwAAEzcXBycHAQYjIi4CNRE0Njc2MzI
XByYjIgcGBhURFBcWMjeDlI4gb3QBCVVNEEFJLSssLT5OQA46OVApERhPH2tZAwSNjSBvb/0zIQY
nVT8BQUxOGxkhIBgoEDwo/rhrIg0eAAACAE7/9QGYAtEAFwAdAAABJiIGBhUVFDMyNxcGIicmNTU
0NzYzMhclNxcHJwcBgTpaQy+gMToKQGgyaBwwbkJE/uiUjiBvdAG7GhdLOZGMDiURECKNgEcwUyB
mjY0gb28AAAAAAgBC//YBqwMdAB0AJQAAJQYjIi4CNRE0Njc2MzIXByYjIgcGBhURFBcWMjcCNDY
yFhQGIgGrVU0QQUktKywtPk5ADjo5UCkRGE8fa1m0ERYQEBYXIQYnVT8BQUxOGxkhIBgoEDwo/rh
rIg0eAroWEBAWEQACAE7/9QGQAl0AFwAfAAABJiIGBhUVFDMyNxcGIicmNTU0NzYzMhcmNDYyFhQ
GIgGBOlpDL6AxOgpAaDJoHDBuQkSiERYQEBYBuxoXSzmRjA4lERAijYBHMFMgWRYQEBYRAAAAAgB
C//YBqwOKAB0AIwAAJQYjIi4CNRE0Njc2MzIXByYjIgcGBhURFBcWMjcBNxc3FwcBq1VNEEFJLSs
sLT5OQA46OVApERhPH2tZ/ssfdHAfjhchBidVPwFBTE4bGSEgGCgQPCj+uGsiDR4DLSBvbyCNAAA
CAE7/9QGRAswAFwAdAAABJiIGBhUVFDMyNxcGIicmNTU0NzYzMhclNxc3FwcBgTpaQy+gMToKQGg
yaBwwbkJE/uEfdHAfjgG7GhdLOZGMDiURECKNgEcwUyDOIG9vII0AAAAAAwBOAAAB8gOLAAgAEwA
ZAAATMzIWFREUIyMTETMyNzY1ETQmIyc3FzcXB068cXfU0C2VQjNAaUiWH3RwH44CvXxn/u7IApP
9lhgeZgEaW1nYIG9vII0AAAMATv/0Aj0CvAAOABwAKgAAATIXNTMRBiInJjU1NDc2FyYjIgcGBhU
VFBcWMjcTJyY2NjIWFhUUByc2NgEGVjYtVpI7TlUqxT1SDw4uPissfkOJBxEBDwwMEkAgFh8B/SL
h/UQMHihjvWknE0ohAQRAOLs9ICEKAloCCh8OARMLNzUXDB4AAAADAE4AAAHyAxQACAATABcAABM
zMhYVERQjIxMRMzI3NjURNCYjJzMVI068cXfU0C2VQjNAaUhl2dkCvXxn/u7IApP9lhgeZgEaW1m
BLgAAAAUATv/0AfwCvAAOABwAIAAkACgAAAEyFzUzEQYiJyY1NTQ3NhcmIyIHBgYVFRQXFjI3AzM
VIzczFSMXIzUzAQZWNi1WkjtOVSrFPVIPDi4+Kyx+Q4CAgIAtLWo9PQH9ImL9wwweKGO9aScTSiE
BBEA4uz0gIQoCQSx/UywsAAAAAgBOAAABnAMUAAsADwAAEyEVIRUzByMRIRUhEzMVI04BTv7fyg+
7AR/+tDnZ2QK8KvUs/rgpAxQuAAAAAwAj//QBiwJUABIAGgAeAAAlBiMiNTU0NjIWFRUFFRQWMzI

Copyright © 2001 -2024 Syncfusion Inc. 1696


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1697


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1698


TreeGrid How To

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

Copyright © 2001 -2024 Syncfusion Inc. 1699


TreeGrid How To

c/s07RhkqKggaIVcBOkxQUUv+xlchGggqKi5sATNccIt5FBMFDAdiAAAEAA8AAADkAvUAAwAMABQ
AHAAAEzMRIxM3NjMyFxYHByYyFhQGIiY0NjIWFAYiJjRfLS0BNAkRGAYDB0RlFhERFhCuFhERFhA
B9f4LAmh5FBMOCmISEBYRERYQEBYRERYAAAAAAgAMAAACBQK8AAcACgAAEzMTIwMjAyMTAzPyKuk
wVvBUL/tq1gK8/UQBAP8AAnP+uQAAAAMATgAAAf8CvAARABkAIQAAEzMyFhQHBhUVFhYVFAcGBiM
jExUzMjY0JiMDETMyNTQmI07dUl5IAS8+KRVTOuYtuTVESkCot51SPgK8VLArAQEBFFtKUDsgJgK
R9D57O/7g/rqqSFQAAQBOAAABnAK8AAUAABMhFSERI04BTv7fLQK8K/1vAAACAAwAAAIFArwAAwA
GAAATMxMhEwMh8Svp/gf6vgGAArz9RAJ3/bIAAQBOAAABnAK8AAsAABMhFSEVMwcjESEVIU4BTv7
fyg+7AR/+tAK8KvUs/rgpAAAAAQBOAAACNQK8AAkAABMhFQEhFSE1ASFbAdT+WAGu/hkBqP5lArw
p/ZYpKQJqAAAAAQBQAAAB/gK8AAsAABMzESERMxEjESERI1AtAVQtLf6sLQK8/uEBH/1EAXH+jwA
AAwBO//UB8gLMAAsAEwAbAAA3ETQ2MhYVERQGIiYTFSE1NCYiBhAWMjY1NSEVTnHGbXusfS0BS1m
aWF+OXv61uQFCZ2pwYv6/ZV9fAa6ZmU1SUv4eTUtPgoMAAAABAFAAAADFArwABQAAEzMRIxEnUHU
tSAK8/UQCkgIAAAEATgAAAdsCvQALAAATMxETMwMBIwMHESNOLfg00QEFNew/LQK9/qABYP7X/mw
Balr+8AABAAwAAAIFArwABgAAEzMTIwMDI/Er6TDPyy8CvP1EAnb9igABAFAAAAJoArwADAAAEzM
TEzMRIxEDIwMRI1At3uAtLcgwxi0CvP2JAnf9RAI5/ccCOf3HAAAAAAEAUAAAAjwCvAAJAAATMwE
RMxEjAREjUC0Bkyws/m0tArz9lgJq/UQCa/2VAAAAAAMATgAAAksCvAADAAwAFQAAEyEVIRMhByE
iByc2NgMhMjcXBgYjIc0BCP74EgFFEf7MVBojEEYeATRTGiQQRjv+uwGdLAFLKkwNODH9bk0NODI
AAAIAPv/1AeICzAALABcAADcRNDYyFhURFAYiJhMRFBYyNjURNCYiBj5xxm17rH0tX45eWZpYuQF
CZ2pwYv6/ZV9fAa7+t0xNS08BSE1SUgAAAQBQAAAB/gK8AAcAABMhESMRIREjUAGuLf6sLQK8/UQ
Cj/1xAAAAAAIATgAAAgACvAALABgAABMRMzI2Njc2NTQmIyczMhYVFAcGBiMjESN7yig4HAgKSET
59l9dLRNJMsotApH+mx0lHSQ3U1grdGJ6NhYg/wAAAQBOAAACIgK8AA4AABMhByETAzMyNxcGBiM
hE14BrA/+tbbN8FwZJBBGO/694gK8Kv7w/qhNDTgyAYAAAQBOAAAB4AK8AAcAABMhFSMRIxEjTgG
StS2wArwp/W0CkwAAAQA8//kB+AK8ABgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjU8LWKXXgo
uaQsyDgYbYixqewK8/UxSOzUBK/3djhIfEzEZI5wgH2lnAAACAE7/3gJdAscAHQAoAAATFwYVERQ
WMzMRNjYzMhYVERQGIyMVJzUjIiY1ETQhIhURMzI2NRE0JsIXXk1CMgI4L1VjXV83LjJfXQFfQzl
CS1QCwiQaf/7SR0kCFjI4bVv+4ltoQAs1aFsBJJhJ/fRKRQEySkoAAAABAE4AAAJJArwACwAAEzM
TEzMDEwcDAyMTYTK5uTTS4jfGxjjjArz+0wEt/qj+nQEBNv7KAWQAAAEALAAAAjsCxQAjAAATMxE
UFjMzETMRMzI2NTU0JiYnNx4CFRUUBiMjFSM1IyImNSwtTkEyLjdDTBEMEyUbGgNdXzcuMl9dArz
+00pIAb/+QUtHpSs4DhMNETsqKo9bZ9TUZ1sAAAAAAwAjAAAA+QMcAAUADQAVAAATMxEjESc2MhY
UBiImNDYyFhQGIiY0L3UtSAUWEREWEa8WEREWEAK8/UQCkgKIERYQEBYREBYRERYAAAMAAAAAAdg
DGgAIABAAGAAAETMTEzMDESMRAjIWFAYiJjQ2MhYUBiImNDO4ujPWLUkWEREWEa8WEREWEAK8/s0
BM/6a/qoBVQHFERYQEBYREBYRERYAAAADAE7//AHWAqcAFgAiACwAABMyFzcXBhURFhcHIiYGIic
mNTU0Njc2FyYjIgYVFRQXMjI3Azc2MzIXFhQHB99ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBR6E
0CREYBQIFRAH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAHueRQTBQwHYgAAAAIATv/2Aac
CpwAIAC0AABM3NjMyFxYPAjQ3NjIXFSYiBgcGFBYzMwcjIgYUFjMyNjc3FwYiJyY1NDcmJuE0CRE
YBQQHRKI0Kmg4LEMzFxcnKX8PZjE/RkAkTRQUDU6pLjRRHCACGnkUEw4KYphBIRsPKg8HFBRDNiw
4az4QCAkpIiguS2QeCkAAAAAAAgBO/y0BvwKnAAgAHQAAEzc2MzIXFg8CIgcRIxEzFTYzMhcWFRE
nETQmJyb5NAkRGAUEB0QVTj8tLThXOSdVLD0sEQIaeRQTDgpiRiL+TgH1GyMTJ2n90xQCFzY/BQI
AAgBRAAAAwgKnAAkADQAAEzc2MzIXFhQPAjMRI1U0CREYBQIFRCgtLQIaeRQTBQwHYiX+CwAAAAA
EAE7/9gHKAvYACwAUABwAJAAAEzMRFCA1ETMRFCA1Ezc2MzIXFgcHJjIWFAYiJjQ2MhYUBiImNE4
tASIt/oSsNAkRGAYDB0RqFhERFhCvFhERFhAB9f6whoYBUP63trYBvXkUFA0KYhEQFhERFhAQFhE
RFgAAAAACAE7//AHWAfsAFgAiAAATMhc3FwYVERYXByImBiInJjU1NDY3NhcmIyIGFRUUFzIyN99
ZVhAkBwYVFQMaWGMbgEEzDr5jUis0ggpBRwH7LCgRNyD+rhUMGgMJBhiPuUZNBQFWLTo5vXoECAA
DAE7/XwHAAr0AEAAeACoAABI2MhYUBxYWFRUUIyInFSMRFyIHERYyNjY1NTQmJyYnFTY3Njc2NCc
mIyJORYBDKEFR2jI5LbxRPTpZUzI/Lg+cKFMjCgMOFSpeAmZXS2MgCFlEuKUKmAK6UyD+egsROi+
4OkAEAVRLFRcKJQwkFiEAAAABABX/OgHjAf8AGwAAEzMTFhYXEzY2NxcGBgcDBhQXByY1NDc3LgI
nFS5qDSIdahAoKR8jIhJ9FgwfHAoWHBgnDgH1/pcuMQkBYDQ6DRsRJDf+XkIuEhobKBgdSQ8ROS0
AAAAAAgBO//YBwwLBABsAKAAAEyY1NDYzMwcjIgcGFRQXFhcWFRUUIyImNTU0NgcVFBYzMjU1NCY
nBgbcLDs7LBIhIxIMMnQeIblfXUseUD+MRkZCTQH5JjgnQykaEBA3HkkuND9nwmdbflBltYVLR5J
8KmAhBlAAAAAAAQBO//YBpwH/ACQAABM0NzYyFxUmIgYHBhQWMzMHIyIGFBYzMjY3NxcGIicmNTQ
3JiZjNCpoOCxDMxcXJyl/D2YxP0ZAJE0UFA1OqS40URwgAYJBIRsPKg8HFBRDNiw4az4QCAkpIig
uS2QeCkAAAAEATv8vAa8CvAAXAAATIRcGBwYVFBYyNxUHNQYiJyY1NDc2NyOSARANO0quUYBKLTF
lLFokSrLcArwoL1XGkkhGFPoV2gwXMG1US5uqAAAAAQBO/y0BvwH9ABQAAAEiBxEjETMVNjMyFxY
VEScRNCYnJgEITj8tLThXOSdVLD0sEQHUIv5OAfUbIxMnaf3TFAIXNj8FAgAAAwA+//oBugLGABA
AHQAqAAA3NTY3JjU0NjMWFhURFAYmJjcVFBYyNjURJiIOAjc2MzIXNCYjIgcGFRQ+AjQiXUtfYWO
3Yi1SfVMMKFBeQDFYfA8OUUEtHi+/j0IlQjpBVAJsX/7GWWwBa+iSR1BRQwEVAQodN1kxAVNOEx1
AMAABADYAAABjAfUAAwAAEzMRIzYtLQH1/gsAAAAAAQBO//8BwAIAABAAABMXFTczBxcWMxcmJic
nBxUjTi3jPL1/OSkCLEAmcEMtAgAL+PjOs00oATY0m0XAAAAAAAEATv/2Ah0CvAAjAAATNTIzMhY

Copyright © 2001 -2024 Syncfusion Inc. 1700


TreeGrid How To

XExYXHgQXByYmJwMGBgcDIxM+Azc2NycmpAIDOUEUjhURBgYPBBECHisnEWoiHwtqLmwMGAoWBAg
ZFhsCmCQwO/4rOhEGBwgDCAEaDTo1AWASLyj+lwF0JyMPEwMHEUdTAAAAAAEATv8wAeQB/gAbAAA
TMxEWFxYzMjc2NRE3ERYXByImJwYjIicmJxUnTi4ZLzIvKSIsLgIYFggaBylTPy4yDi4B9f5wHBU
WEhlLAWAK/kUgDBwVEy8VFw7+BwAAAQBOAAABzwH1AAYAABMzExMzAyNOL5GSL6Q6AfX+PwHB/gs
AAQBO/yYBfALEACgAABMmNTQ2MzMHIyIHBhUUFxYXByYiBgYVFRQWFjI3FQc1BiMiJyY1NTQ24So
5PSwSIiURCjcVNQ0pSkAsL0NTPSwlIUMxSFcCAiI3JUQpHRAROhoJEiUPEz0vui46DxH+Fd0GGSd
nuEdZAAAAAgBO//YBwwIAAAsAFwAANzU0NjIWFRUUBiImNxUUFjI2NTU0JiIGTmGyYly6Xy1LiEh
NgE64hF9laVuEVG5v2IxAU1JBjE5MSwAAAAEAQv/9AdgB9QAPAAATIREWFwcuAicmNRMhESNCAXs
DGBYCBxIHEQH+3y0B9f5SHw8cAQMMCRYjAX/+MgAAAAACAE7/LQHDAfsADAAYAAABFRQGIicVBxE
0NjMyBRUUFjI2NTU0IyIGAcNfuzArYVe9/rhPfU+RO08BMoZZXUH9DQIOWWfBlENFQEmPm0cAAAE
ATv9tAXYB+QAiAAA3NTQ2MzIWFxcHJiIGFRUUFhcWFRQHJzY1NCcuBScmTlNZIDgMDBAib05La0U
RIwosCTsUMBIgBhLjjDVVDQcHJRgyMH9CVUEqSR4aFg4PNhwGJQ0iFCQQKQAAAgBO/+0B6wIfABY
AJQAANzU0Njc2MxcWMjc2NxcGBxYVFRQjIiYTFRQWMzI1NTQmJicmIyJOJR4xNiYhLxEnJCEhQTq
5X10tTUKNIRsGMyeAr7MwQw8ZBAUDByENOQwmcYfCZwELt0pIko4vSRoBCwAAAAABAE7/8wF7AfQ
ADQAAEyEVIxEUFhcHJiY1ESNOAS2CICQNNy1+AfQr/rswMgwjEEU8AUUAAQBC//YBvgH1AAsAABM
zERQgNREzERQgNUItASIt/oQB9f6whoYBUP63trYAAAAAAgBO/ykCXQH7AB0AKAAAExcGFRUUFjM
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

Copyright © 2001 -2024 Syncfusion Inc. 1701


TreeGrid How To

yAV0nijwsLUAVO30Tai0QKyoxQ30UaS1UeAKZKTH9bwJ2HQkaRjUr/jYCMSceHQkbRzMr/jYCMUF
QAAADAE7/+QIKAxoAGAAgACgAABMzFRQWMjY3ETMRFAcnNjc2NTUGBiMiJjUSMhYUBiImNDYyFhQ
GIiY0Ti1il14KLmkLMg4GG2IsanuBFhERFhGvFhERFhACvP1MUjs1ASv93Y4SHxMxGSOcIB9pZwF
VERYQEBYREBYRERYAAgBOAAACRwK8AAMABgAAATMTIRMDIQEzK+n+B/q+AYACvP1EAnf9sgAAAAA
BABIAAAdeAfUAJAAAEzMTEzMTEzMTEzMTEzMTEzMTEzMDIwMDIwMDIwMDIwMDIwMDIxIvi3grdow
vi3grdowvi3grdowvnzpucDmHhzpucDmHhzpucDkB9f4/AcH+PwHB/j8Bwf4/AcH+PwHB/j8Bwf4
LAaT+XAGq/lYBpP5cAar+VgGk/lwAAQBO//MB4QLDABsAABM0NjIXFTMHIxEUFwcmJjURJiIHBhU
VMwcjESNOVoQ8fRNqSg04Mi4/Fjl9FGktAjFDTzKcK/66VRkjEEY7AfIdChtGMyv+NgAAAAEALP/
zAcYCvAAZAAABMxUzByMRFBcHJiY1ESMRFBcHJiY1ETMVMwEWLYMUb0oNODK9Sg04Mi29ArzHK/6
6VRgkEEY7AUb+ulUYJBBGOwI4xwAAAAEAMQAAAgkCvAAIAAATMxMTMwMRIxExM7i6M9YtArz+zQE
z/pr+qgFVAAAAAQAE/zoB2AH1AAcAABMzExMzASM3BDK4uDL+0TBdAfX+VQGr/UXaAAEADAAAAeQ
CvAAIAAATMxMTMwMRIxEMM7i6M9YtArz+zQEz/pr+qgFVAAAAAgADAAAB2wNoAAgAEQAAEzc2MzI
XFg8CMxMTMwMRIxHZNAkRGAUEB0T6M7i6M9YtAtt5FBQNCmIf/s0BM/6a/qoBVQACAAf/OgHbAqw
ABwARAAATMxMTMwEjNwM3NjMyFxYUBwcHMri4Mv7RMF0INAkRGAUCBUQB9f5VAav9RdoCC3kUFAQ
MB2IAAAADAAb/OgHaAlwABwAPABcAABMzExMzASM3AjIWFAYiJjQ2MhYUBiImNAYyuLgy/tEwXUU
WEREWEa8WEREWEAH1/lUBq/1F2gJIERYQEBYREBYRERYAAAAAAQALAAAB4wK8AAgAABMzExMzAxE
jEQszuLoz1i0CvP7NATP+mv6qAVUAAAABAAL/LwB+AfUADQAAEzMRBgYHJzI2NzY1EScIdgI9NwY
IIgocNgH1/b42SwMjEAsdNgIJAgAAAAMATv8sA7UCHwAfADYARQAAARcGFBcXEzMDFxYXHgIXFjM
HIiMiJicnAycTJyY1NAE1NDY3NjMXFjI3NjcXBgcWFRUUIyImExUUFjMyNTU0JiYnJiMiAlgeGBs
8mDOzehkYCAgSAwwMFwIBKjoYa5wqrU8f/iElHjE2JiEvESckISFBOrlfXS1NQo0hGwYzJ4ACDhw
fVTh8ASv+o/syDAQFBAEEITQu2v7NEQFTpDwvNv7RszBDDxkEBQMHIQ05DCZxh8JnAQu3SkiSji9
JGgELAAAAAgBO/+0DFAIfACcAOAAAJQcmJjURIyInBgcWFRUUIyImNTU0Njc2MxcWMjc2NxYWFzM
VIxEUFgEVFBcWFjMyNTU0JiYnJiMiAtYNNy1QJh0bLjq5X10lHjE2JiEvESckCDEc9YIg/ckCBEw
9jSEbBjMngBYjEEU8AUUjGAcmcYfCZ1uzMEMPGQQFAwchEBoBK/67MDIBPZcUID8/ko4vSRoBCwA
BAE7/9QO5ArwARwAAMxM2NzY3JicmJzUyMzIWFxMWFz4HNzcuBCcmIzUyMzIWFxIXHgQXFhcHLgM
nBgcDBy4DJwYHBgdObBMfFCQfDhs4AgM5QRSaDBYQQhYNEQoXBw0RDQoPChIJHRgCAzlBFI4UBQg
MBg4DCgsgJyshRxI3FWIpIychSBE1FihDAXQ7HxQYXRUpAyQwO/4OJRQ34EoeGQ8SBwkLJyAjDhY
EDCQwO/4eIQoODAcIAQYFGQs9bew6Gk7+pxsKPW7tOhxKh+QAAQAV/zoDcwH+AE0AABcmNTQ3NyY
mJwMzHgcXFhc+AzcXHgIXFhc+AzcWFhcOBQcHBgYDBgYVFBcHJjQ3NyYmJyYmJwYGAgcGBhUUF+U
ZCBYmLhVsLjkoAwoGCgkMBhANEUggJCQeRBsKDBYlEkciKCkGEwYCEwQRBg4ECgYPdBQCDB8aChU
pKxUPQQ8UJ1QVFAINxhkuGBpIEzU+AXTNewwfDRoNEwUNBTrubDQME+hlHhoxDDrtbzkMBQ8FAQk
DCwgQCRYOMP5+OR4DGBAaGkEeSBQzPzbZNhd8/uhFOh4CGBAAAQBO/zoDcQH/ADMAAAUHJjU0Njc
uAicDMxYXFhYXEz4CNxYXFxU2NzMGBxYXFjMXJiYnJwYHFSMRBgYCBwYUAT4fHBAQHBgnDmwuQyc
NIh1qChMsHQYOFgbdPH4/VCs4KgIsQCZwFi0tIy9WDxasGhopGC44DxE5LQF034ouMQkBYB0nLQo
BBAX4B/GKRHg7TSgBNjSbGC3AAdYVmP7fMkIuAAACAE4AAAK+AsUACAARAAATNzYzMhcWBwc3MxM
TMwMRIxFONAkRGAYDB0R0M7i6M9YtAjh5FBMOCmKE/s0BM/6a/qoBVQAAAAAAABwBVgABAAAAAAA
AAGMAAAABAAAAAAABAAoAYwABAAAAAAACAAUAbQABAAAAAAADACkAcgABAAAAAAAEABAAmwABAAA
AAAAFAA0AqwABAAAAAAAGAA8AuAABAAAAAAAHADoAxwABAAAAAAAIABIBAQABAAAAAAAJABIBAQA
BAAAAAAALABMBEwABAAAAAAAMABMBEwABAAAAAAANAJABJgABAAAAAAAOABoBtgADAAEECQAAAMY
B0AADAAEECQABABQClgADAAEECQACAAoCqgADAAEECQADAFICtAADAAEECQAEACADBgADAAEECQA
FABoDJgADAAEECQAGAB4DQAADAAEECQAHAHQDXgADAAEECQAIACQD0gADAAEECQAJACQD0gADAAE
ECQALACYD9gADAAEECQAMACYD9gADAAEECQANASAEHAADAAEECQAOADQFPENvcHlyaWdodCAoYyk
gMjAwOCBBbmRyZWFzIEthbHBha2lkaXMgKGhlbGxvQGluZGVyZXN0aW5nLmNvbSksIHdpdGggUmV
zZXJ2ZWQgRm9udCBOYW1lICJBZHZlbnQgUHJvIkFkdmVudCBQcm9MaWdodEFuZHJlYXNLYWxwYWt
pZGlzOiBBZHZlbnQgUHJvIExpZ2h0OiAyMDA4QWR2ZW50IFBybyBMaWdodFZlcnNpb24gMi4wMDN
BZHZlbnRQcm8tTGlnaHRBZHZlbnQgUHJvIFRoaW4gaXMgYSB0cmFkZW1hcmsgb2YgSU5ERSBBbmR
yZWFzIEthbHBha2lkaXMuQW5kcmVhcyBLYWxwYWtpZGlzd3d3LmluZGVyZXN0aW5nLmNvbVRoaXM
gRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnN
lLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiB
odHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwB
wAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA4ACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHA
AYQBrAGkAZABpAHMAIAAoAGgAZQBsAGwAbwBAAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwB
tACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACI
AQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgB
kAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEw
AaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQB
yAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHY

Copyright © 2001 -2024 Syncfusion Inc. 1702


TreeGrid How To

AZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIAB
vAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4
AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdAB
pAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACA
AbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIAB
GAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGg
AaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAA
gAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGw
ALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwB
yAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQ
ABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAA
hACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0
APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQB
aAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKI
ArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QB
oAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8
AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwE
UARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASw
BLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAF
FAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0
BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwF
wAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYw
BjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC
0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbU
BtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9
nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2V
udAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWN
jZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV
4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1
mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3Jvbgd
Jb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21
tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWN
jZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW5
0Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHV
uZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24
GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW5
0DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWN
yb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmd
hcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2N
lbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXB
zaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9
tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2l
sb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQN
SaG8FU2lnbWEDVGF1B1Vwc2lsb24DUGhpA0NoaQNQc2kMSW90YWRpZXJlc2lzE1Vwc2lsb25kaWV
yZXNpc19hbHQKYWxwaGF0b25vcwxlcHNpbG9udG9ub3MIZXRhdG9ub3MJaW90YXRvbm9zFHVwc2l
sb25kaWVyZXNpc3Rvbm9zBWFscGhhBGJldGEFZ2FtbWEFZGVsdGEHZXBzaWxvbgR6ZXRhA2V0YQV
0aGV0YQRpb3RhBWthcHBhBmxhbWJkYQd1bmkwM0JDAm51AnhpB29taWNyb24DcmhvBnNpZ21hMQV
zaWdtYQN0YXUHdXBzaWxvbgNwaGkDY2hpA3BzaQVvbWVnYQxpb3RhZGllcmVzaXMPdXBzaWxvbmR
pZXJlc2lzDG9taWNyb250b25vcwx1cHNpbG9udG9ub3MKb21lZ2F0b25vcwRFdXJvA2ZfZgNmX2k
DZl9sBWZfZl9sAkNSD1Vwc2lsb25kaWVyZXNpcwRfMTk2BXdfd193A2ZfdAN0X3QFWV9hbHQFeV9
hbHQNWWRpZXJlc2lzX2FsdApZYWN1dGVfYWx0CnlhY3V0ZV9hbHQNeWRpZXJlc2lzX2FsdAtVcHN
pbG9uX2FsdAhkb3RsZXNzaglzaWdtYV9jaGkJc2lnbWFfdGF1DWxhbWJkYV9sYW1iZGELZ2FtbWF
fZ2FtbWELZ2FtbWFfa2FwcGEQVXBzaWxvbnRvbm9zX2FsdAAAAAABAAH//wAPAAAAAQAAAADJiW8
xAAAAAMr4L8QAAAAAyvii3gABAAAADAAAABYAHgACAAEAAQGbAAEABAAAAAEAAAACAAEAAAAAAAA
AAQAAAAoAJAAyAAJERkxUAA5sYXRuAA4ABAAAAAD//wABAAAAAWtlcm4ACAAAAAEAAAABAAQAAgA
AAAEACAABAMoABAAAAGABfAGaAbABtgG8AcIByAHOAdQMUAHaAgQCPgLYAuYDdAPSA/QD+gQoBGo
E6AT6BSQFMgXsBhIG2AeeB6gNQggeCEAIXg2sCHgJGg3sCZwJtgn4CiIKMApWCnwKjgtgC24LdAu

Copyright © 2001 -2024 Syncfusion Inc. 1703


TreeGrid How To

2DAAMGgxEDEoMUAxQDFAMUAxQDFANHg0kDSoNMA02DTwNQg1CDUINQg1CDUINaA2SDawNrA2sDaw
N7A3sDewN7A38DfwN/A38DfwN/A3GDewN9g38Dh4OmA6eDqQAAgAdAAUABQAAAAoACgABABUAFwA
CABkAHAAFACQAJQAJACcAJwALACkAKgAMAC0APAAOAEQASgAeAEwAUwAlAFUAVwAtAFkAXAAwAHE
AcQA0AHMAcwA1AHcAfAA2AIEAgQA8AIQAhQA9AIsAiwA/AI0AjQBAAJIAkgBBAJcApgBCAKgArAB
SAK4ArgBXALUAtQBYAOMA4wBZAP0A/gBaAR4BHgBcASsBKwBdAXQBdQBeAAcAJP9HAHf/RwB4/0c
Aef9HAHr/RwB7/0cAfP9HAAUABf9lAAr/awBH/tMAT/+TAFf/pwABABb/9wABABf/6gABABj/8wA
BABr/8wABABv/7QABABz/9gABABMADQAKAA//rQAR/50AJP+/ACb/+wB3/78AeP+/AHn/vwB6/78
Ae/+/AHz/vwAOAA//owAR/5IAJP+0ACj/8gA5/7gAOv+zADz/sAB3/7QAeP+0AHn/tAB6/7QAe/+
0AHz/tAEe/7AAJgAP/wYAEf76ACT/XQAq//IARP9SAEj/dABM/8AAUv9vAFX/agB3/10AeP9dAHn
/XQB6/10Ae/9dAHz/XQCX/1IAmP9SAJn/UgCa/1IAm/9SAJz/UgCd/1IAn/90AKD/dACh/3QAov9
0AKP/wACk/8AApf/AAKb/wACo/28Aqf9vAKr/bwCr/28ArP9vAK7/bwDj/8AA/v9vAAMAD//aABH
/zAAr//gAIwAP/8kAEf+8ACT/0QBE/9EASP/dAFL/3ABY/90Ad//RAHj/0QB5/9EAev/RAHv/0QB
8/9EAl//RAJj/0QCZ/9EAmv/RAJv/0QCc/9EAnf/RAJ//3QCg/90Aof/dAKL/3QCo/9wAqf/cAKr
/3ACr/9wArP/cAK7/3ACv/90AsP/dALH/3QCy/90A/v/cABcAJv/NAC//+wAy/+kASP/vAFL/6wB
Y/+0AXP/dAJ//7wCg/+8Aof/vAKL/7wCo/+sAqf/rAKr/6wCr/+sArP/rAK7/6wCv/+0AsP/tALH
/7QCy/+0Atf/dAP7/6wAIAAX+/gAK/vQAN/+6ADn/rAA6/7kAPP9OAR7/TgF1/7QAAQAx//UACwA
P/8gAEf+6ACT/2gAq//cAMv/zAHf/2gB4/9oAef/aAHr/2gB7/9oAfP/aABAAD//PABH/vQAk/94
AMv/9ADP/9QA5/+YAOv/iADv/9wA8/9gAd//eAHj/3gB5/94Aev/eAHv/3gB8/94BHv/YAB8AD/7
WABH+xwAk/50AL//6AET/xQBI/9sAUv/XAHf/nQB4/50Aef+dAHr/nQB7/50AfP+dAJf/xQCY/8U
Amf/FAJr/xQCb/8UAnP/FAJ3/xQCf/9sAoP/bAKH/2wCi/9sAqP/XAKn/1wCq/9cAq//XAKz/1wC
u/9cA/v/XAAQAD/8lABH/CQA1//YAOP8RAAoAMv/cADb/+AA3/90AOP/FADn/3gA6/9gAPP/gAFz
/2wC1/9sBHv/gAAMAD//BABH/sAA3//QALgAP/5MAEP+wABH/hQAd/7IAHv+sACT/pgBE/6oARv+
jAEj/sgBL//YAUv+xAFX/oQBW/5EAWP+5AFr/twBc/7YAd/+mAHj/pgB5/6YAev+mAHv/pgB8/6Y
Al/+qAJj/qgCZ/6oAmv+qAJv/qgCc/6oAnf+qAJ7/owCf/7IAoP+yAKH/sgCi/7IAqP+xAKn/sQC
q/7EAq/+xAKz/sQCu/7EAr/+5ALD/uQCx/7kAsv+5ALX/tgD+/7EACQAP/60AEf+bACT/vAB3/7w
AeP+8AHn/vAB6/7wAe/+8AHz/vAAxAA//gQAQ/7oAEf90AB3/uwAe/6sAJP+OACr/yAAy/98ARP+
pAEj/uwBM//MAUv+4AFX/2wBY/98AXP/kAHf/jgB4/44Aef+OAHr/jgB7/44AfP+OAJf/qQCY/6k
Amf+pAJr/qQCb/6kAnP+pAJ3/qQCf/7sAoP+7AKH/uwCi/7sAo//zAKT/8wCl//MApv/zAKj/uAC
p/7gAqv+4AKv/uACs/7gArv+4AK//3wCw/98Asf/fALL/3wC1/+QA4//zAP7/uAAxAA//mwAQ/8c
AEf+PAB3/yAAe/74AJP+oADL/5gBE/7sASP/RAEv/6ABM//AAUv/GAFX/7gBY/+AAXP/SAHf/qAB
4/6gAef+oAHr/qAB7/6gAfP+oAJf/uwCY/7sAmf+7AJr/uwCb/7sAnP+7AJ3/uwCf/9EAoP/RAKH
/0QCi/9EAo//wAKT/8ACl//AApv/wAKj/xgCp/8YAqv/GAKv/xgCs/8YArv/GAK//4ACw/+AAsf/
gALL/4AC1/9IA4//wAP7/xgACADz/6gEe/+oAHQAP/8sAEP/SABH/vAAd/9cAHv/eACT/2AAy/9g
AUv/lAFP/xgB3/9gAeP/YAHn/2AB6/9gAe//YAHz/2ACX/+IAmP/iAJn/4gCa/+IAm//iAJz/4gC
d/+IAqP/lAKn/5QCq/+UAq//lAKz/5QCu/+UA/v/lAAgAD//FABH/tABF/8wAT//LAFH//QBZ/9Q
AXP/XALX/1wAHABH/6QBH//AAS//eAE7/3wBP/98AXP/oALX/6AAGAEf/+QBIAAYAnwAGAKAABgC
hAAYAogAGACgABf+/AAr/xgAP/7AAEf+kAET/rgBF//cARv/qAEf/6gBI/80ASf/tAEr/7QBL//Q
ATP/wAE//6wBQ//QAUf/3AFL/xQBT/+oAVP/tAFX/9ABd/+oAl/++AJj/vgCZ/74Amv++AJv/vgC
c/74Anf++AJ//1wCg/9cAof/XAKL/1wCo/8UAqf/FAKr/xQCr/8UArP/FAK7/xQD+/8UBdf/6ACA
AEf/mAET/+wBI//8ASv/+AEz/6wBS//8AVf/qAFz/8QCX//sAmP/7AJn/+wCa//sAm//7AJz/+wC
d//sAn///AKD//wCh//8Aov//AKP/6wCk/+sApf/rAKb/6wCo//8Aqf//AKr//wCr//8ArP//AK7
//wC1//EA4//rAP7//wAGAE7/8ABY//AAr//wALD/8ACx//AAsv/wABAASP/pAE//9gBS/90AXP/
PAJ//6QCg/+kAof/pAKL/6QCo/90Aqf/dAKr/3QCr/90ArP/dAK7/3QC1/88A/v/dAAoARP/wAFD
/8ABa/+gAl//wAJj/8ACZ//AAmv/wAJv/8ACc//AAnf/wAAMAUf/9AFz/2QC1/9kACQBS/+0AWP/
OAFn/wwBc/8AAr//OALD/zgCx/84Asv/OALX/wAAJAA//1wAR/8YASv/8AFP/9wBZ/+YAWv/iAFv
/5wBc//IAtf/yAAQAD/+9ABH/rABc/9YAtf/WADQAD/9rABD/tgAR/14AHf+3AB7/nQBE/5sARv/
LAEf/1ABI/9EASv/PAEz/5QBO/9kAT//bAFD/2wBR/9sAUv/CAFP/2QBU/80AVf/fAFb/ywBX/+8
AWP/5AFz/6QCX/5sAmP+bAJn/mwCa/5sAm/+bAJz/mwCd/5sAnv/LAJ//0QCg/9EAof/RAKL/0QC
j/+UApP/lAKX/5QCm/+UAqP/CAKn/wgCq/8IAq//CAKz/wgCu/8IAr//5ALD/+QCx//kAsv/5ALX
/6QDj/+UA/v/CAAMAD//kABH/1ABa/8oAAQBL//MAEAAP/5cAEf+KAET/xwBF//oASP/cAJf/xwC
Y/8cAmf/HAJr/xwCb/8cAnP/HAJ3/xwCf/9wAoP/cAKH/3ACi/9wAEgAP/5oAEf+OAET/zABH//0
ASP/kAEv/5gBb/+0Al//MAJj/zACZ/8wAmv/MAJv/zACc/8wAnf/MAJ//5ACg/+QAof/kAKL/5AA
GAEj/6ACf/+gAoP/oAKH/6ACi/+gAtf/tAAoAEf/WAET/4wBd//cAl//jAJj/4wCZ/+MAmv/jAJv
/4wCc/+MAnf/jAAEAm//wAAEBfAAcADMABf9DAAr/OAAl//YAJv/GACr/xgAy/9oANP/XADf/rAA
4/74AOf+YADr/qAA8/5UARP/mAEb/5gBH/+gASP/wAFL/5ABT/+oAVP/mAFb/7ABX/+oAWP/nAFn
/swBa/7MAXP/YAJf/5gCY/+YAmf/mAJr/5gCb/+YAnP/mAJ3/5gCe/+YAn//wAKD/8ACh//AAov/
wAKj/5ACp/+QAqv/kAKv/5ACs/+QArv/kAK//5wCw/+cAsf/nALL/5wC1/9gA/v/kAR7/lQF1/58

Copyright © 2001 -2024 Syncfusion Inc. 1704


TreeGrid How To

AAQCC//0AAQCFABcAAQCGAA8AAQCNAAEAAQCJAAEAAQCT//cACQBF/9sASQAGAEr/+QBT/+QAV//
0AFn/4QBa/+IAXP/wALX/8AAKAEX/2wBJAAYASv/5AFP/5ABX//QAWf/hAFr/4gBc//AAl//6ALX
/8AAGABH/6QBL/94ATv/fAE//3wBc/+gAtf/oAAYAD//WABH/ygBF/9kAU//WAFn/3gBb/+IACQA
R/9YARP/jAJf/4wCY/+MAmf/jAJr/4wCb/+MAnP/jAJ3/4wACAEb//QCe//0AAQCK/+0ACAAP/9c
AEf/GAEr//ABZ/+YAWv/iAFv/5wBc//IAtf/yAB4AD//LABD/0gAR/7wAHf/XAB7/3gAk/9gAMv/
YAET/4gBS/+UAU//GAHf/2AB4/9gAef/YAHr/2AB7/9gAfP/YAJf/4gCY/+IAmf/iAJr/4gCb/+I
AnP/iAJ3/4gCo/+UAqf/lAKr/5QCr/+UArP/lAK7/5QD+/+UAAQEuABYAAQF0/6EAAwBW/7YAV//
uAXX/oQABAAAACgAiACIAAkRGTFQADmxhdG4ADgAE';

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations.
You can also explore our React Tree Grid example to knows how to present and manipulate data.
Exporting selected data in React Treegrid component
You can export the selected records data by passing it to PdfExportProperties.dataSource or
ExcelExportProperties.dataSource property in the toolbarClick event.
In the below exporting demo, we can get the selected records using getSelectedRecords method and
pass the selected data to pdfExport or excelExport methods using respective export properties..
APP.JSX
import * as React from 'react';
import { projectData } from './datasource';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from
'@syncfusion/ej2-react-treegrid';
import { Toolbar, Page, PdfExport, ExcelExport } from '@syncfusion/ej2-
react-treegrid';
/* tslint:disable */
function App() {
const toolbarOptions = ['PdfExport', 'ExcelExport'];
let treegrid;
const pageOptions = { pageSize: 5, pageCount: 5 };
const selectionOptions = { type: 'Multiple' };
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'PDF Export') {
const selectedRecords = treegrid.getSelectedRecords();
const exportProperties = {
dataSource: selectedRecords,
};
treegrid.current.pdfExport(exportProperties);
}
else if (treegrid && args.item.text === 'Excel Export') {
const selectedRecords = treegrid.getSelectedRecords();
const exportProperties = {
dataSource: selectedRecords,
};
treegrid.excelExport(exportProperties);
}
};
return (<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping='TaskID' parentIdMapping='parentID' pageSettings={pageOptions}
toolbarClick={toolbarClick} toolbar={toolbarOptions} allowPaging={true}
ref={g => treegrid = g} allowPdfExport={true} allowExcelExport={true}
selectionSettings={selectionOptions}>
<ColumnsDirective>

Copyright © 2001 -2024 Syncfusion Inc. 1705


TreeGrid How To

<ColumnDirective field='TaskID' headerText='Task ID' width='70'


textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right'/>
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Toolbar, Page, PdfExport, ExcelExport]}/>
</TreeGridComponent>);
}
;
export default App;

APP.TSX
import * as React from 'react';
import { projectData } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { PdfExportProperties, ExcelExportProperties } from '@syncfusion/ej2-
react-grids';
import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject,
SelectionSettingsModel } from '@syncfusion/ej2-react-treegrid';
import { Toolbar, ToolbarItems, Page, TreeGrid, PdfExport, ExcelExport,
PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
/* tslint:disable */
function App() {
const toolbarOptions: ToolbarItems[] = ['PdfExport', 'ExcelExport'];
let treegrid: TreeGridComponent | null;
const pageOptions: PageSettingsModel = {pageSize:5, pageCount:5};
const selectionOptions: SelectionSettingsModel = {type: 'Multiple'};
const toolbarClick = (args: ClickEventArgs) => {
if (treegrid && args.item.text === 'PDF Export') {
const selectedRecords = treegrid.getSelectedRecords();
const exportProperties: PdfExportProperties = {
dataSource: selectedRecords,
};
(treegrid.current as any).pdfExport(exportProperties);
} else if (treegrid && args.item.text === 'Excel Export') {
const selectedRecords = treegrid.getSelectedRecords();
const exportProperties: ExcelExportProperties = {
dataSource: selectedRecords,
};
treegrid.excelExport(exportProperties);
}
}
return (
<TreeGridComponent dataSource={projectData} treeColumnIndex={1}
idMapping= 'TaskID' parentIdMapping='parentID' pageSettings={pageOptions}

Copyright © 2001 -2024 Syncfusion Inc. 1706


TreeGrid How To

toolbarClick={toolbarClick} toolbar={toolbarOptions}
allowPaging={true}
ref={g => treegrid = g} allowPdfExport={true} allowExcelExport={true}
selectionSettings={selectionOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' width='70'
textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'
width='100'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date'
width='100' format='yMd' textAlign='Right'
editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='EndDate' headerText='End Date' width='100'
format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='90'
textAlign='Right' />
<ColumnDirective field='Priority' headerText='Priority' width='90'
textAlign='Right' />
</ColumnsDirective>
<Inject services={[Toolbar, Page, PdfExport, ExcelExport]} />
</TreeGridComponent>
);
};
export default App;

DATASOURCE.JSX
export let sampleData = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Low', approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new
Date('02/03/2017'),
endDate: new Date('02/07/2017'), duration: 5, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new
Date('02/07/2017'),
endDate: new Date('02/07/2017'), duration: 0, progress: 0,
priority: 'Low', approved: true }
]
},

Copyright © 2001 -2024 Syncfusion Inc. 1707


TreeGrid How To

{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 60,
priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new
Date('02/10/2017'),
endDate: new Date('02/12/2017'), duration: 3, progress: 100,
priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate:
new Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'Low', approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new
Date('02/13/2017'),
endDate: new Date('02/14/2017'), duration: 2, progress: 100,
priority: 'High', approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new
Date('02/14/2017'),
endDate: new Date('02/14/2017'), duration: 0, progress: 0,
priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',

Copyright © 2001 -2024 Syncfusion Inc. 1708


TreeGrid How To

duration: 11,
progress: 10,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review
meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'), duration:
4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),

Copyright © 2001 -2024 Syncfusion Inc. 1709


TreeGrid How To

endDate: new Date('02/20/2017'), duration:


4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate:
new Date('02/21/2017'),
endDate: new Date('02/24/2017'), duration:
2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate:
new Date('02/25/2017'),
endDate: new Date('02/26/2017'), duration:
2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review
meeting', startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'), duration:
0, progress: '50', priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'), duration:
3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate:
new Date('02/20/2017'),
endDate: new Date('02/21/2017'), duration:
2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate:
new Date('02/24/2017'),
endDate: new Date('02/25/2017'), duration:
2, progress: '0', priority: 'High', approved: false },

Copyright © 2001 -2024 Syncfusion Inc. 1710


TreeGrid How To

{ taskID: 35, taskName: 'Customer review


meeting', startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'), duration:
2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'), duration:
0, progress: '50', priority: 'Critical', approved: false },
]
}]
}
]
}
];
export let projectData = [
{ 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40' },
{ 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new
Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new
Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low',
'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1
},
{ 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new
Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal',
'EndDate': new Date('03/18/2017'), 'Progress': '40' },
{ 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/02/2017'), 'Duration': 11, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new
Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/02/2017'), 'Duration': 15, 'Priority': 'High',
'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5
},
{ 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new
Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40' },
{ 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new
Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},

Copyright © 2001 -2024 Syncfusion Inc. 1711


TreeGrid How To

{ 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new


Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new
Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new
Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
},
{ 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new
Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical',
'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10
}
];
export let adventProFont =
'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4A
AAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/
iHw8AAAh

You might also like