Triggers when data in the TreeGrid is added, deleted, or updated.
Invoke the done method from the argument to start rendering after an edit operation.

dataStateChange EmitType<DataStateChangeEventArgs>

Triggers when TreeGrid actions such as sorting, paging, etc., are completed.
The current view data and total record count should be assigned to the dataSource based on the action performed.

detailDataBound EmitType<DetailDataBoundEventArgs>

Triggers after a detail row expands. This event triggers initially during the first expand.

excelAggregateQueryCellInfo EmitType<AggregateQueryCellInfoEventArgs>

Triggers before exporting aggregate cell to Excel document.

excelExportComplete EmitType<ExcelExportCompleteArgs>

Triggers after TreeGrid data is exported to an Excel file.

excelHeaderQueryCellInfo EmitType<ExcelHeaderQueryCellInfoEventArgs>

Triggers before each header cell is exported to an Excel file, allowing customization of cells.

excelQueryCellInfo EmitType<ExcelQueryCellInfoEventArgs>

Triggers before each cell is exported to an Excel file, allowing customization of cells.

expanded EmitType<RowExpandedEventArgs>

Triggers after a TreeGrid record is expanded.

expanding EmitType<RowExpandingEventArgs>

Triggers while a TreeGrid record is expanding.

headerCellInfo EmitType<HeaderCellInfoEventArgs>

Triggered for accessing header information.

load EmitType<Object>

Allows customization of TreeGrid properties before rendering.

pdfAggregateQueryCellInfo EmitType<AggregateQueryCellInfoEventArgs>

Triggers before exporting aggregate cell to PDF document. You can also customize the PDF cells.

pdfExportComplete EmitType<PdfExportCompleteArgs>

Triggers after TreeGrid data is exported to a PDF document.

pdfHeaderQueryCellInfo EmitType<PdfHeaderQueryCellInfoEventArgs>

Triggers before each header cell is exported to a PDF document, allowing customization of cells.

pdfQueryCellInfo EmitType<PdfQueryCellInfoEventArgs>

Triggers before each cell is exported to a PDF document, allowing customization of cells.

printComplete EmitType<PrintEventArgs>

Triggers after the print action has been completed.

queryCellInfo EmitType<QueryCellInfoEventArgs>

Triggered every time a request is made to access cell information, element, or data.
This event is triggered before the cell element is appended to the TreeGrid element.

recordDoubleClick EmitType<RecordDoubleClickEventArgs>

Triggers when a record is double-clicked.

resizeStart EmitType<ResizeArgs>

Triggers when column resizing starts.

resizeStop EmitType<ResizeArgs>

Triggers when column resizing ends.

resizing EmitType<ResizeArgs>

Triggers during column resizing.

rowDataBound EmitType<RowDataBoundEventArgs>

Triggered every time a request is made to access row information, element, or data.
This event is triggered before the row element is appended to the TreeGrid element.

rowDeselected EmitType<RowDeselectEventArgs>

Triggers when a selected row is deselected.

rowDeselecting EmitType<RowDeselectEventArgs>

Triggers before the selected row is deselected.

rowDrag EmitType<RowDragEventArgs>

Triggers continuously while row elements are being dragged.

rowDragStart EmitType<RowDragEventArgs>

Triggers when row element dragging starts.

rowDragStartHelper EmitType<RowDragEventArgs>

Triggers just before the row element dragging begins.

rowDrop EmitType<RowDragEventArgs>

Triggers when a row element is dropped onto the target row.

rowSelected EmitType<RowSelectEventArgs>

Triggers after a row is selected.

rowSelecting EmitType<RowSelectingEventArgs>

Triggers before row selection occurs.

toolbarClick EmitType<ClickEventArgs>

Triggers when a toolbar item is clicked.

aggregates AggregateRowModel[]

Configures the TreeGrid aggregate rows.

Check the Aggregates for its configuration.

allowExcelExport boolean

Enables exporting the TreeGrid to an Excel file if set to true.

Check the ExcelExport documentation for more details.

allowFiltering boolean

If allowFiltering is set to true the filter bar will be displayed.
If set to false the filter bar will not be displayed.
Filter bar allows the user to filter tree grid records with required criteria.

allowMultiSorting boolean

If allowMultiSorting set to true, then it will allow the user to sort multiple column in the treegrid.

allowSorting should be true.

allowPaging boolean

If allowPaging is set to true, pager renders.

allowPdfExport boolean

Enables exporting the TreeGrid to a PDF file if set to true.

Check the PdfExport documentation for more details.

allowReordering boolean

If allowReordering is set to true, TreeGrid columns can be reordered.
Reordering can be done by drag and drop of a particular column from one index to another index.

If TreeGrid is rendered with stacked headers, reordering is allowed only at the same level as the column headers.

allowResizing boolean

If allowResizing is set to true, TreeGrid columns can be resized.

allowRowDragAndDrop boolean

If allowRowDragAndDrop is set to true, row reordering functionality is enabled, allowing rows to be dragged
and dropped within the TreeGrid or across TreeGrids.
This feature enables users to reorganize data dynamically via drag-and-drop operations.

allowSelection boolean

If allowSelection is set to true, selection of (highlight row) TreeGrid records by clicking is allowed.

allowSorting boolean

If allowSorting is set to true, it allows sorting of treegrid records when column header is clicked.

allowTextWrap boolean

If allowTextWrap set to true,
then text content will wrap to the next line when its text content exceeds the width of the Column Cells.

autoCheckHierarchy boolean

If autoCheckHierarchy is set to true, hierarchy checkbox selection is enabled in TreeGrid.

childMapping string

Specifies the mapping property path for child records in data source

<ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='1'></ejs-treegrid>

clipMode ClipMode

Defines the options for printing the TreeGrid.
The available print modes are:

AllPages: Prints all pages of the TreeGrid.
CurrentPage: Prints only the current page of the TreeGrid.

columnChooserSettings ColumnChooserSettingsModel

Configures the column chooser in the Grid.

columnMenuItems ColumnMenuItem[]|ColumnMenuItemModel[]

columnMenuItems defines both built-in and custom column menu items.

The available built-in items are,

AutoFitAll - Auto fit the size of all columns.
AutoFit - Auto fit the current column.
SortAscending - Sort the current column in ascending order.
SortDescending - Sort the current column in descending order.
Filter - Filter options will show based on filterSettings property like filterbar, menu filter.

columnQueryMode ColumnQueryModeType

Specifies how data is retrieved from the data source for the TreeGrid.
The available modes are:

All: Retrieve the entire data source.
Schema: Retrieve data only for defined columns.
ExcludeHidden: Retrieve data only for visible columns in the TreeGrid.

columns ColumnModel[]|string[]|Column[]

Defines the schema of dataSource.
If the columns declaration is empty or undefined then the columns are automatically generated from data source.

    <ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='1'>
        <e-columns>
            <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
            <e-column field='taskName' headerText='Task Name' width='200'></e-column>
            <e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
            <e-column field='progress' headerText='Progress' width='80' textAlign='Right'></e-column>
        </e-columns>
    </ejs-treegrid>

contextMenuItems ContextMenuItem[]|ContextMenuItemModel[]

contextMenuItems defines both built-in and custom context menu items.

The available built-in items are,

AutoFitAll - Auto fit the size of all columns.
AutoFit - Auto fit the current column.
Edit - Edit the current record.
Delete - Delete the current record.
Save - Save the edited record.
Cancel - Cancel the edited state.
PdfExport - Export the grid as Pdf format.
ExcelExport - Export the grid as Excel format.
CsvExport - Export the grid as CSV format.
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.

copyHierarchyMode CopyHierarchyType

copyHierarchyMode Defines the copy clipboard types.

The available built-in items are,

Parent - Copy the selected data with parent record.
Child - Copy the selected data with child record.
Both - Copy the selected data with both parent and child record.
None - Copy only the selected record.

dataSource Object|DataManager

It is used to render TreeGrid table rows.

<ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='1'></ejs-treegrid>

import { Component, OnInit } from '@angular/core';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { sampleData } from './jsontreegriddata';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    constructor() {}
    public data: Object[] = [];

    ngOnInit(): void {
        this.data = sampleData;
    }
}

detailTemplate string|Function

The detail template allows you to show or hide additional information about a particular row.

It accepts either the template string
or the HTML element ID.

editSettings EditSettingsModel

Configures the edit settings.

emptyRecordTemplate string|Function

The empty record template that renders customized element or text or image instead of displaying the empty record message in the TreeGrid.

It accepts either the template string or the HTML element ID.

enableAdaptiveUI boolean

If enableAdaptiveUI is set to true, the pop-up UI will become adaptive to small screens,
and be used for filtering and other features.

<div id='treegrid'></div>
<script>
 var treegridObj = new TreeGrid({ enableAdaptiveUI: true });
 treegridObj.appendTo('#treegrid');
</script>

enableAltRow boolean

If enableAltRow is set to true, the TreeGrid will render with e-altrow CSS class to the alternative tr elements.

Check the AltRow to customize the styles of alternative rows.

enableAutoFill boolean

If enableAutoFill is set to true, then the auto fill icon will displayed on cell selection for copy cells.
It requires the selection mode to be Cell and cellSelectionMode to be Box.

enableCollapseAll boolean

Specifies whether to load all rows in a collapsed state when the TreeGrid is initially rendered.
This setting is particularly useful when dealing with large datasets, as it helps enhance loading performance by
reducing initial data rendering.

enableColumnVirtualization boolean

Enables column virtualization in the TreeGrid. When set to true, only columns visible within the viewport are rendered.
Additional columns are loaded as you horizontally scroll. This is beneficial for rendering large datasets efficiently.

enableHover boolean

If enableHover is set to true, the row hover is enabled in the TreeGrid.

enableHtmlSanitizer boolean

Determines whether to sanitize untrusted HTML content in the TreeGrid. If true, potentially harmful HTML strings
and scripts are sanitized before rendering to protect against XSS attacks.

enableImmutableMode boolean

If enableImmutableMode is set to true, the TreeGrid will reuse old rows if it exists in the new result instead of
full refresh while performing the TreeGrid actions.

enableInfiniteScrolling boolean

Enables infinite scrolling in the TreeGrid. When set to true, additional data is loaded as the scrollbar
reaches the end. Useful for handling large datasets.

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

enableRtl boolean

Enable or disable rendering component in right to left direction.

enableStickyHeader boolean

Enables the sticky header feature, which keeps the column headers visible while scrolling the Tree Grid content or the entire document.

enableVirtualMaskRow boolean

Specifies whether to display shimmer effect during scrolling action in virtual scrolling feature.
If disabled, spinner is shown instead of shimmer effect.

enableVirtualization boolean

If enableVirtualization set to true, then the TreeGrid will render only the rows visible within the view-port
and load subsequent rows on vertical scrolling. This helps to load large dataset in TreeGrid.

expandStateMapping string

Specifies the mapping property path for the expand status of a record in data source.

filterSettings FilterSettingsModel

Configures the filter settings of the TreeGrid.

frozenColumns number

Specifies the number of columns that should remain visible and fixed on the left side of the TreeGrid during horizontal scrolling.
This feature ensures key columns, such as identifiers, stay visible while users scroll through data.

frozenRows number

Specifies the number of rows that should remain visible and fixed at the top of the TreeGrid during scrolling.
This feature helps improve readability in data-heavy grids by keeping the header rows or key rows visible.

gridLines GridLine

Defines how TreeGrid content lines are displayed, determining the visibility of vertical and horizontal lines.

Both: Displays both horizontal and vertical grid lines.
None: Hides both horizontal and vertical grid lines.
Horizontal: Displays only horizontal grid lines.
Vertical: Displays only vertical grid lines.
Default: Adjusts line visibility based on the theme.

hasChildMapping string

Specifies whether record is parent or not for the remote data binding

height string|number

Defines the scrollable height of the TreeGrid content.

idMapping string

Specifies the name of the field in the dataSource, which contains the id of that row.

<ejs-treegrid #treegrid [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1'></ejs-treegrid>

infiniteScrollSettings InfiniteScrollSettingsModel

Configures settings for infinite scrolling.

loadChildOnDemand boolean

When enabled, only parent records would be rendered during the initial render and child records will be loaded only when expanding a parent record.
This property is only applicable for remote data binding.
Loading child records on demand can improve the performance of data-bound controls with a large number of records.
Child records are only loaded when they are requested, rather than loading all child records at once.

loadingIndicator LoadingIndicatorModel

Configures the loading indicator of the Tree Grid. Specifies whether to display spinner or shimmer effect
during the waiting time on any actions (paging, sorting, filtering, CRUD operations) performed in Tree Grid.

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

pageSettings PageSettingsModel

Configures the pager in the TreeGrid.

pagerTemplate string|Function

It used to render pager template

parentIdMapping string

Specifies the name of the field in the dataSource, which contains the parent’s id

<ejs-treegrid #treegrid [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1'></ejs-treegrid>

printMode PrintMode

Defines the options for printing the TreeGrid.
The available print modes are:

AllPages: Prints all pages of the TreeGrid.
CurrentPage: Prints only the current page of the TreeGrid.

query Query

Defines the external Query
that will be executed along with data processing.

rowDropSettings RowDropSettingsModel

Configures the row drop settings of the TreeGrid.

rowHeight number

Defines the height of TreeGrid rows.

rowTemplate string|Function

The row template that renders customized rows from the given template.
By default, TreeGrid renders a table row for every data source item.

It accepts either template string
or HTML element ID.

The row template must be a table row.
Check the Row Template customization.

searchSettings SearchSettingsModel

Configures the search settings of the TreeGrid.

selectedRowIndex number

Specifies the index of the row to be selected upon initial rendering.
Also retrieves the index of the currently selected row.

selectionSettings SelectionSettingsModel

Configures the selection behavior.

showColumnChooser boolean

If showColumnChooser is set to true, it allows you to dynamically show or hide columns.

showColumnMenu boolean

If showColumnMenu set to true, then it will enable the column menu options in each columns.

Check the Column menu for its configuration.

sortSettings SortSettingsModel

Configures the sort settings of the TreeGrid.

textWrapSettings TextWrapSettingsModel

Configures the text wrap in the TreeGrid.

toolbar defines the ToolBar items of the TreeGrid.
It contains built-in and custom toolbar items.
If a string value is assigned to the toolbar option, it is considered as the template for the whole TreeGrid ToolBar.
If an array value is assigned, it is considered as the list of built-in and custom toolbar items in the TreeGrid’s Toolbar.

The available built-in ToolBar items are:

Search: Searches records by the given key.
ExpandAll: Expands all the rows in TreeGrid
CollapseAll: Collapses all the rows in TreeGrid
ExcelExport - Export the TreeGrid to Excel(excelExport() method manually to make export.)
PdfExport - Export the TreeGrid to PDF(pdfExport() method manually to make export.)
CsvExport - Export the TreeGrid to CSV(csvExport() method manually to make export.)

The following code example implements the custom toolbar items.

treeColumnIndex number

Specifies the index of the column that needs to have the expander button.

width string|number

Defines the TreeGrid width.