TreeGridComponent

10 Oct 202524 minutes to read

ejs-treegrid represents the Angular TreeTreeGrid Component.

<ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'></ejs-treegrid>

Properties

aggregates AggregateRowModel[]

Configures the TreeGrid aggregate rows.

Check the Aggregates for its configuration.

Defaults to []

allowExcelExport boolean

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

Check the ExcelExport documentation for more details.

Defaults to false

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.

Defaults to false

allowMultiSorting boolean

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

allowSorting should be true.

Defaults to true

allowPaging boolean

If allowPaging is set to true, pager renders.

Defaults to false

allowPdfExport boolean

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

Check the PdfExport documentation for more details.

Defaults to false

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.

Defaults to false

allowResizing boolean

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

Defaults to false

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.

Defaults to false

allowSelection boolean

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

Defaults to true

allowSorting boolean

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

Defaults to false

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.

Defaults to false

autoCheckHierarchy boolean

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

Defaults to false

childMapping string

Specifies the mapping property path for child records in data source

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

Defaults to null

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.

Defaults to Syncfusion.EJ2.Grids.ClipMode.Ellipsis

clipboardModule TreeClipboard

clipboardModule is used to handle TreeGrid copy action.

columnChooserSettings ColumnChooserSettingsModel

Configures the column chooser in the Grid.

Defaults to { columnChooserOperator: ‘startsWith’ }

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.

Defaults to null

columnMenuModule ColumnMenu

The columnMenuModule is used to manipulate column menu items and its action in TreeGrid.

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.

Defaults to All

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>

Defaults to []

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.

Defaults to null

contextMenuModule ContextMenu

The contextMenuModule is used to handle context menu items and its action in the TreeGrid.

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.

Defaults to Parent

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;
    }
}

Defaults to []

detailTemplate any

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.

editModule Edit

The editModule is used to handle TreeGrid content manipulation.

editSettings EditSettingsModel

Configures the edit settings.

Defaults to { allowAdding: false, allowEditing: false, allowDeleting: false, mode:’Normal’,allowEditOnDblClick: true, showConfirmDialog: true, showDeleteConfirmDialog: false }

emptyRecordTemplate any

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.

Defaults to null

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>

Defaults to false

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.

Defaults to true

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.

Defaults to false

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.

Defaults to false

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.

Defaults to false

enableHover boolean

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

Defaults to false

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.

Defaults to false

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.

Defaults to false

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.

Defaults to false

enablePersistence boolean

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

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableStickyHeader boolean

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

Defaults to false

enableVirtualMaskRow boolean

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

Defaults to true

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.

Defaults to false

expandStateMapping string

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

Defaults to null

filterSettings FilterSettingsModel

Configures the filter settings of the TreeGrid.

Defaults to {columns: [], type: ‘FilterBar’, mode: ‘Immediate’, showFilterBarStatus: true, immediateModeDelay: 1500 , operators: {}}

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.

Defaults to 0

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.

Defaults to 0

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.

Defaults to Syncfusion.EJ2.Grids.GridLine.Default

hasChildMapping string

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

Defaults to null

height string|number

Defines the scrollable height of the TreeGrid content.

Defaults to ‘auto’

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>

Defaults to null

infiniteScrollSettings InfiniteScrollSettingsModel

Configures settings for infinite scrolling.

Defaults to { enableCache: false, maxBlocks: 5, initialBlocks: 5 }

keyboardModule KeyboardEvents

The keyboardModule is used to manipulate keyboard interactions in TreeGrid.

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.

Defaults to true

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.

Defaults to {indicatorType: ‘Spinner’}

locale string

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

Defaults to ’’

pageSettings PageSettingsModel

Configures the pager in the TreeGrid.

Defaults to {currentPage: 1, pageSize: 12, pageCount: 8, enableQueryString: false, pageSizes: false, template: null}

pagerModule Page

The pagerModule is used to manipulate paging in the TreeGrid.

pagerTemplate any

It used to render pager template

Defaults to null

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>

Defaults to null

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.

Defaults to Syncfusion.EJ2.Grids.PrintMode.AllPages

printModule Print

The printModule is used to handle the printing feature of the TreeGrid.

query Query

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

Defaults to null

reorderModule Reorder

The reorderModule is used to manipulate reordering in TreeGrid.

rowDragAndDropModule RowDD

The rowDragandDrop is used to manipulate Row Reordering in TreeGrid.

rowDropSettings RowDropSettingsModel

Configures the row drop settings of the TreeGrid.

rowHeight number

Defines the height of TreeGrid rows.

Defaults to null

rowTemplate any

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

searchSettings SearchSettingsModel

Configures the search settings of the TreeGrid.

Defaults to {search: [] , operators: {}}

selectedRowIndex number

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

Defaults to -1

selectionSettings SelectionSettingsModel

Configures the selection behavior.

Defaults to {mode: ‘Row’, cellSelectionMode: ‘Flow’, type: ‘Single’}

showColumnChooser boolean

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

Defaults to false

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.

Defaults to false

sortModule Sort

The sortModule is used to manipulate sorting in TreeGrid.

sortSettings SortSettingsModel

Configures the sort settings of the TreeGrid.

Defaults to {columns:[]}

textWrapSettings TextWrapSettingsModel

Configures the text wrap in the TreeGrid.

Defaults to {wrapMode:”Both”}

toolbar []

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.

Defaults to null

toolbarModule Toolbar

The toolbarModule is used to manipulate ToolBar items and its action in the TreeGrid.

treeColumnIndex number

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

Defaults to 0

width string|number

Defines the TreeGrid width.

Defaults to ‘auto’

Methods

addRecord

Adds a new record to the TreeGrid at the specified position or default location.

Parameter Type Description
data (optional) Object Object containing the data for the new record. If omitted, an empty row is added.
index (optional) number The index at which the new row should be added.
position (optional) RowPosition Specifies the position of the new row (e.g., before, after or child).

> Requires editSettings.allowAdding to be true.

Returns void

autoFitColumns

Adjusts column widths to fit their content, ensuring content is displayed without wrapping or truncation.

  • Hidden columns are ignored by this method.
  • Use the autoFitColumns method during the dataBound event for initial rendering.
Parameter Type Description
fieldNames (optional) string | string[] The name(s) of the column(s) to be auto-fitted.

Returns void

clearFiltering

Clears all filters applied to the TreeGrid, restoring the view to show all records.
This method is useful for resetting the grid to its unfiltered state.

Returns void

clearSelection

Deselects all selected rows and cells within the TreeGrid.
Resets the selection state of the grid, which is useful after bulk operations.

Returns void

clearSorting

Clears all the sorted columns in the TreeGrid.

Returns void

closeEdit

Cancels the current edit operation on the TreeGrid.
This method discards changes made to the row and exits the edit mode without saving.

Returns void

collapseAll

Collapses all rows in the TreeGrid, hiding all child rows and leaving only parent nodes visible.
This method can be used to quickly minimize the view to only top-level data,
which is helpful for summarizing or performing broad overviews of the dataset.

Returns void

collapseAtLevel

Collapses all the records at the specified hierarchical level within the TreeGrid.
This function helps in hiding child rows for all parent nodes at a given level,
effectively reducing the visible depth of the hierarchical structure.

Parameter Type Description
level number The hierarchical level at which parent rows should be collapsed.

Returns void

collapseByKey

Collapses a specific record identified by the provided primary key value.
This method is useful for collapsing particular node in the TreeGrid when
the parent rows need to be targeted individually by their unique key.

Parameter Type Description
key Object The primary key value of the record to be collapsed.

Returns void

collapseRow

Collapses the specified parent row in the TreeGrid.
This method collapses the row associated with the provided HTMLTableRowElement,
hiding any of its displayed child rows. It is typically used to manage the
visibility of hierarchical data within a tree structure.

Parameter Type Description
row HTMLTableRowElement The HTMLTableRowElement representing the parent row
whose child rows are to be collapsed.
record (optional) Object (Optional) The data record associated with the row being collapsed.
This can be used to access or manipulate the underlying data
when collapsing the row.
key (optional) Object (Optional) The primary key value of the record. It can be used to identify
the target record uniquely when collapsing the row, especially in cases
where the row or record data needs to be referenced or logged.

Returns void

copy

Copies the data of selected rows or cells to the clipboard.
This method supports including headers for better context when pasting elsewhere.

Parameter Type Description
withHeader (optional) boolean (Optional) If true, includes column headers in the copied data.

Returns void

csvExport

Exports the TreeGrid data to a CSV file.

Parameter Type Description
excelExportProperties (optional) ExcelExportProperties The properties used to configure the CSV export.
isMultipleExport (optional) boolean Indicates whether multiple exporting is enabled.
workbook (optional) any The workbook instance used for multiple exports.
isBlob (optional) boolean If set to true, the result will be returned as blob data.

Returns Promise

deleteRecord

Deletes a record based on specified criteria or the selected record if none specified.

Parameter Type Description
fieldName (optional) string The name of the primary key field.
data (optional) Object The data object representing the record to delete.

Returns void

deleteRow

Deletes a visible row from the TreeGrid using its HTML element.
Apply this method when handling row deletions through DOM manipulations.

Parameter Type Description
tr HTMLTableRowElement The table row element to remove.

Returns void

destroy

Destroys the TreeGrid component by detaching event handlers,
removing attributes and classes, and clearing the component’s DOM elements.
This method ensures that all resources used by the TreeGrid are properly released
and the component is cleaned up from the DOM to prevent memory leaks.

Returns void

editCell

Begins editing of a specific cell using row and field indices.
Customers can programmatically specify which cell to edit without user input.

Parameter Type Description
rowIndex (optional) number The index of the row containing the cell.
field (optional) string The field name of the cell to edit.

Returns void

enableToolbarItems

Enables or disables specified ToolBar items within the TreeGrid.
This facilitates dynamic control of toolbar actions based on application logic.

Parameter Type Description
items string[] Array of ToolBar item IDs to enable or disable.
isEnable boolean Boolean flag to determine whether to enable (true) or disable (false) items.

Returns void

endEdit

Commits the edits made to a record in edit mode, updating the data source.
Use this method to finalize changes for rows in edit mode, ensuring persistence.

Returns void

excelExport

Exports the TreeGrid data to an Excel file (.xlsx).

Parameter Type Description
excelExportProperties (optional) ExcelExportProperties | TreeGridExcelExportProperties The properties used to configure the Excel export.
isMultipleExport (optional) boolean Indicates whether multiple exporting is enabled.
workbook (optional) any The workbook instance used for multiple exports.
isBlob (optional) boolean If set to true, the result will be returned as blob data.

Returns Promise

expandAll

Expands all rows in the TreeGrid, making the full hierarchy visible.
This method should be used with caution on large datasets, as it makes
all nodes and their child rows visible, which might affect performance.

Returns void

expandAtLevel

Expands all the records at the specified hierarchical level within the TreeGrid.
This method is useful for visually expanding data at a certain depth, making
all parent rows visible at the given level and their child rows accessible.

Parameter Type Description
level number The hierarchical level at which parent rows should be expanded.

Returns void

expandByKey

Expands a specific record identified by the provided primary key value.
This method is useful for expanding particular node in the TreeGrid when
the parent rows need to be targeted individually by their unique key.

Parameter Type Description
key Object The primary key value of the record to be expanded.

Returns void

expandRow

Expands the specified parent row within the TreeGrid to reveal its nested data.
This method is useful for programmatically expanding rows to display their
hierarchical children, providing detailed views for nested data structures.

Parameter Type Description
row HTMLTableRowElement The table row element that should be expanded.
record (optional) Object Optional. Represents the data record associated with the row to be expanded.
key (optional) Object Optional. The primary key value that uniquely identifies the record.
level (optional) number Optional. Indicates the hierarchical level of the record within the TreeGrid.

Returns void

filterByColumn

Filters the TreeGrid rows based on a specified column and filter criteria.
This method allows for dynamic filtering against column data using various
operators and values, supporting case-sensitive filtering and accent sensitivity.

Parameter Type Description
fieldName string The name of the column to apply the filter on.
filterOperator string The operator used to perform the filter (e.g., ‘equals’, ‘startswith’).
filterValue string | number | Date | boolean | number[] | string[] | Date[] | boolean[] The value to filter against.
predicate (optional) string The logical operator (‘AND’/’OR’) to combine this filter with others.
matchCase (optional) boolean If true, the filter performs a case-sensitive match.
ignoreAccent (optional) boolean If true, the filter ignores diacritical marks.
actualFilterValue (optional) string The original value used for filtering, useful for distinguishing displayed and actual values.
actualOperator (optional) string The actual operator that is applied when different from the displayed operator.

Returns void

getBatchChanges

Collects data changes (added, edited, and deleted) that have not been saved in batch mode.
This allows you to view pending changes awaiting a commit to the data source.

Returns Object

getCellFromIndex

Retrieves a cell element based on its row and column indices in the TreeGrid.
This method is helpful for accessing cell-level elements for custom
operations or styling.

Parameter Type Description
rowIndex number The index of the row containing the cell.
columnIndex number The index of the column containing the cell.

Returns Element

getCheckedRecords

Retrieves the records associated with rows that have their checkboxes checked.
Facilitates operations that require information about specifically selected or
interacted rows within the grid.

Returns Object[]

getCheckedRowIndexes

Retrieves the indices of rows that have their checkboxes checked.
This can assist in programatically assessing which rows have been selected
by checkbox interaction for further processing.

Returns number[]

getColumnByField

Retrieves a column object by the column’s field name.
This is typically used for obtaining the details of a column for
configuration or data manipulation purposes.

Parameter Type Description
field string The field name of the column.

Returns Column

getColumnByUid

Fetches a column object using the column’s unique identifier (UID).
Useful in scenarios where columns do not have unique field names but
are uniquely identifiable via UID.

Parameter Type Description
uid string The unique identifier for the column.

Returns Column

getColumnFieldNames

Retrieves the names of all column fields in the TreeGrid.
This method provides a list of field names useful for dynamic operations
or configuration where fields need to be enumerated or manipulated.

Returns string[]

getColumnHeaderByField

Retrieves a column header element based on the field name of the column.
This method helps to directly manipulate headers, such as applying custom styles.

Parameter Type Description
field string The field name of the desired column.

Returns Element

getColumnHeaderByIndex

Acquires the column header element using the column’s index.
Suitable for situations where direct column index is available
and header access is needed for operations.

Parameter Type Description
index number The index of the column.

Returns Element

getColumnHeaderByUid

Retrieves a column header element utilizing the column’s UID.
Useful for precision access to header elements when UIDs are used
uniquely to manage column identities.

Parameter Type Description
uid string The UID of the column.

Returns Element

getColumnIndexByField

Determines the column index by the specified field name.
Helpful in converting field names to indices for operations that require
numeric input for array or collection indexing.

Parameter Type Description
field string The field name of the column.

Returns number

getColumnIndexByUid

Determines the column index based on the unique identifier (UID).
This can be crucial in scenarios that involve dynamic column management
where UID provides an accurate reference.

Parameter Type Description
uid string The UID of the column.

Returns number

getColumns

Fetches a collection of columns from the TreeGrid optionally refreshing the column model.
Use this method to retrieve and optionally refresh the list of columns
to ensure up-to-date configurations and settings.

Parameter Type Description
isRefresh (optional) boolean Determines whether to refresh the grid’s column model.

Returns Column[]

getContent

Retrieves the main content area of the TreeGrid.
This method allows access to the main content DIV, which can
be used for layout adjustments or adding custom elements.

Returns Element

getContentTable

Retrieves the content table element of the TreeGrid.
This table contains the main data display area, allowing for
interaction and data manipulation directly within the TreeGrid.

Returns Element

getCurrentViewRecords

Retrieves the current set of records that are visible in the TreeGrid view.
This method excludes any summary rows to focus on the main data set
currently being viewed by the user.

Returns Object[]

getDataModule

Obtains the data handling modules used by the TreeGrid.
This includes both the base data module for standard grid operations and the tree module
for handling hierarchical data, giving complete access to data management capabilities.

Returns Object

getDataRows

Obtains all data row elements from the TreeGrid, excluding summary rows.
Provides a way to access the visual representation of data for purposes
like custom formatting or event binding.

Returns Element[]

getFooterContent

Retrieves the footer content element of the TreeGrid, usually for styling or custom manipulation.
This can be used to access the footer for adding custom functionality
or styling purposes to enhance user interaction at the bottom of the grid.

Returns Element

getFooterContentTable

Acquires the footer table element of the TreeGrid for layout management.
Useful for manipulating the table’s structure or style beneath the grid content.

Returns Element

getFrozenLeftColumnHeaderByIndex

Gets a frozen left column header by column index.

Parameter Type Description
index number Specifies the column index.

Returns Element

getFrozenRightCellFromIndex

Gets a frozen right table cell by row and column index.

Parameter Type Description
rowIndex number Specifies the row index.
columnIndex number Specifies the column index.

Returns Element

getFrozenRightColumnHeaderByIndex

Gets a frozen right column header by column index.

Parameter Type Description
index number Specifies the column index.

Returns Element

getFrozenRightDataRows

Gets all the Tree Grid’s frozen right table data rows.

Returns Element[]

getFrozenRightRowByIndex

Gets a frozen right tables row element by index.

Parameter Type Description
index number Specifies the row index.

Returns Element

getFrozenRightRows

Gets the Tree Grid’s frozen right content rows from frozen Tree Grid.

Returns Element[]

getHeaderContent

Retrieves the header content element of the TreeGrid.
Mainly used for interacting with the header section, which includes
column headers and any applied header styling or events.

Returns Element

getHeaderTable

Retrieves the header table element of the TreeGrid.
This method is useful for direct access to the table structure
where column headers are defined.

Returns Element

getMovableCellFromIndex

Gets a movable table cell by row and column index.

Parameter Type Description
rowIndex number Specifies the row index.
columnIndex number Specifies the column index.

Returns Element

getMovableColumnHeaderByIndex

Gets a movable column header by column index.

Parameter Type Description
index number Specifies the column index.

Returns Element

getMovableDataRows

Gets all the TreeGrid’s movable table data rows.

Returns Element[]

getMovableRowByIndex

Gets a movable tables row by index.

Parameter Type Description
index number Specifies the row index.

Returns Element

getMovableRows

Gets the TreeGrid’s movable content rows from frozen treegrid.

Returns Element[]

getPager

Obtains the pager element of the TreeGrid.
The pager enables navigation between pages when the TreeGrid displays paginated data.

Returns Element

getPrimaryKeyFieldNames

Retrieves the primary key field names used in the TreeGrid.
This information is crucial for identifying and manipulating unique rows.

Returns string[]

getRowByIndex

Fetches a specific row element based on its index in the TreeGrid.
This provides a way to directly access and manipulate a row using its index.

Parameter Type Description
index number The index of the desired row.

Returns Element

getRowInfo

Provides detailed information about a row based on a specified target element.
Integral for retrieving metadata such as row index or data object
when working with events or complex tree structures.

Parameter Type Description
target Element | EventTarget The target element or event triggering the request.

Returns RowInfo

getRows

Retrieves all the TreeGrid row elements.
This method is useful for accessing the HTML representation of the rows for further manipulation or inspection.

Returns HTMLTableRowElement[]

getSelectedRecords

Retrieves the data records corresponding to the currently selected rows.
This method provides the full record data for the selected rows,
which is useful for data manipulation or extraction operations.

Returns Object[]

getSelectedRowCellIndexes

Retrieves the indexes of the selected cells within the selected rows.
This can be useful for handling cell-specific operations, such as
applying styles or editing values programmatically.

Returns ISelectedCell[]

getSelectedRowIndexes

Retrieves the indexes of the currently selected rows in the TreeGrid.
This method is useful when you need to perform actions based on the selected rows,
such as retrieving data or changing the selection.

Returns number[]

getSelectedRows

Retrieves the currently selected rows.
Useful for obtaining the selected data elements for downstream processing.

Returns Element[]

getUidByColumnField

Finds the unique identifier (UID) for a column based on its field name.
UIDs are essential for precise identification and manipulation within complex grids.

Parameter Type Description
field string The field name of the column.

Returns string

getVisibleColumns

Retrieves all the columns that are currently set to be visible within the TreeGrid.
Helps in understanding the user’s current view and can be used to dynamically
adjust the visible columns.

Returns Column[]

getVisibleRecords

Retrieves currently visible records according to the TreeGrid’s visual state.
It considers row expansion and collapse states to return only those records
that a user can currently interact with.

Returns Object[]

goToPage

Navigates to a specified page number within the TreeGrid pagination.
This can be used to programmatically change the page being viewed,
allowing for scripted navigation through data.

Parameter Type Description
pageNo number The page number to navigate to. Must be within valid page range.

Returns void

hideColumns

Hides one or more columns based on the specified column names.
Utilized to dynamically reduce the visibility of columns based on
user roles or preferences.

Parameter Type Description
keys string | string[] A single column name or an array of column names to hide.
hideBy (optional) string Key to evaluate columns either as field name or header text.

Returns void

hideSpinner

Hides a manually shown loading spinner overlay from the TreeGrid.
Ensures that any long-running process indication is removed after completion
to manage user interface aesthetics.

Returns void

indent

Indents a specified record, promoting it to one level deeper in the hierarchy.
This function moves the selected row to become the last child of its preceding row,
altering the visual and hierarchical data structure.

Parameter Type Description
record (optional) Object (Optional) The record to be indented. If omitted, the currently selected row is used.

Returns void

openColumnChooser

Displays the column chooser at a specified screen position.
Useful for customizing the visibility of columns interactively via the UI.

Parameter Type Description
x (optional) number The X-axis position of the column chooser.
y (optional) number The Y-axis position of the column chooser.

Returns void

outdent

Outdents a specified record, moving it one level up in the hierarchy.
This method repositions the selected row to be a sibling of its parent, impacting
its display and the hierarchical relationships within the TreeGrid.

Parameter Type Description
record (optional) Object (Optional) The record to be outdented. If omitted, the currently selected row is used.

Returns void

paste

Pastes data into the selected cells from the clipboard.
Automatically places the pasted data starting from the specified indices.

Parameter Type Description
data string The clipboard data to paste.
rowIndex number The starting row index for pasting.
colIndex number The starting column index for pasting.

Returns void

pdfExport

Exports the TreeGrid data to a PDF document.

Parameter Type Description
pdfExportProperties (optional) PdfExportProperties | TreeGridPdfExportProperties The properties used to configure the PDF export.
isMultipleExport (optional) boolean Indicates whether multiple exporting is enabled.
pdfDoc (optional) Object The PDF document instance used for multiple exports.
isBlob (optional) boolean If set to true, the result will be returned as blob data.

Returns Promise

print

Prints all the pages of the TreeGrid and hides the pager by default.
Customize print options using the printMode.

Returns void

refresh

Refreshes the visual appearance and data of the TreeGrid, updating header and content.
This is crucial for synchronizing the displayed data with the underlying data source,
ensuring the view reflects current data.

Returns void

refreshColumns

Updates and refreshes the TreeGrid’s column definitions and layout.
Ensures that the latest column settings are displayed, either refreshing the UI
or adjusting internal configurations to match current data or configuration updates.

Parameter Type Description
refreshUI (optional) boolean A flag indicating whether the DOM should be updated.

Returns void

refreshHeader

Refreshes the header section of the TreeGrid to reflect any structural or data changes.
This method is useful when there are dynamic updates or layout adjustments
needed in the header portion to ensure it aligns with current grid data or settings.

Returns void

reorderColumns

Reorders TreeGrid columns by specifying their field names.

Parameter Type Description
fromFName string | string[] The field name(s) of the column(s) to be moved.
toFName string The destination field name to place the moved columns.

Returns void

reorderRows

Reorders rows in the TreeGrid based on specified source indexes and a target position.
This functionality allows for dynamic rearrangement of rows, such as moving selected
rows to a new position as siblings or children.

Parameter Type Description
fromIndexes number[] An array indicating the source indexes of the rows to be moved.
toIndex number The target index where the rows should be moved.
position string The position relative to the target index (‘above’, ‘below’, ‘child’).

Returns void

saveCell

Saves the current cell value changes without committing to the data source.
This operation persists the changes in the UI but not in the underlying data model.

Returns void

Searches for TreeGrid records using a specified search string.
Customize the search behavior through the searchSettings.

Parameter Type Description
searchString string The string used as the search key.

Returns void

selectCell

Selects a cell by its index position in the TreeGrid.
Useful for navigating or highlighting specific data cells within the grid.

Parameter Type Description
cellIndex IIndex An object specifying the row and column indexes.
isToggle (optional) boolean (Optional) If true, toggles the selection state of the cell.

Returns void

selectCheckboxes

Selects rows in the TreeGrid using row indices, checking their associated checkboxes.
This method provides automation for selecting or highlighting specific rows,
useful in scenarios needing pre-selection or default selections.

Parameter Type Description
indexes number[] An array of row indices to be marked as selected.

Returns void

selectRow

Selects a row in the TreeGrid by its index.
Use this method to highlight a specific row; useful for programmatically navigating data.

Parameter Type Description
index number Index of the row to select.
isToggle (optional) boolean If true, toggles the selection state of the row.

Returns void

selectRows

Selects multiple rows in the TreeGrid given an array of row indexes.
Useful for batch operations where multiple row selections are necessary.

Parameter Type Description
rowIndexes number[] Array of row index numbers to select.

Returns void

serverCsvExport

Sends a POST request to export the TreeGrid to a CSV file on the server side.

Parameter Type Description
url string The URL for the server-side CSV export action.

Returns void

serverExcelExport

Sends a POST request to export the TreeGrid to an Excel file on the server side.

Parameter Type Description
url string The URL for the server-side Excel export action.

Returns void

serverPdfExport

Sends a POST request to export the TreeGrid to a PDF document on the server side.

Parameter Type Description
url string The URL for the server-side PDF export action.

Returns void

setCellValue

Updates the value of a specific cell using its primary key for identification.
Useful for targeted updates that leverage unique identifiers to ensure accuracy.

Parameter Type Description
key string | number The primary key value of the row containing the cell.
field string The field name of the cell to update.
value string | number | boolean | Date The new value to assign to the specified cell.

Returns void

setRowData

Updates the data for a specific row identified by its primary key and refreshes the display.
Important for keeping the displayed data consistent with the source database or dataset.

Parameter Type Description
key string | number The primary key value of the row to update.
rowData (optional) ITreeData The new data to apply to the row.

Returns void

showColumns

Shows one or more columns based on the specified column names.
This is useful for dynamically adjusting the visibility of columns
based on user actions or application logic.

Parameter Type Description
keys string | string[] A single column name or an array of column names to show.
showBy (optional) string Key to determine visibility either as field name or header text.

Returns void

showSpinner

Displays a loading spinner overlay across the TreeGrid for any data action or long-running process.
This can be manually invoked to indicate processing, enhancing user experience by providing feedback.

Returns void

sortByColumn

Sorts a column with the specified options.

Parameter Type Description
columnName string The name of the column to be sorted.
direction SortDirection The direction of the sorting operation.
isMultiSort (optional) boolean Specifies whether previous sorted columns should be maintained during sorting.

Returns void

startEdit

Initiates editing for a specific row using its HTML element.
This allows for manual control of which row enters edit mode through the UI.

Parameter Type Description
row (optional) HTMLTableRowElement The table row element to enter into edit mode.

Returns void

updateCell

Updates the value of a specific cell directly, bypassing the edit mode.
This method provides a quick way to update the UI and data without user interaction.

Parameter Type Description
rowIndex number Defines the row index.
field string Defines the column field.
value string | number | boolean | Date Defines the value to be changed.

Returns void

updateExternalMessage

Updates the external message displayed within the pager component.
This is useful for showing custom messages or additional information
related to the data set or pagination status.

Parameter Type Description
message string The custom message to display in the pager.

Returns void

updateRow

Updates a specific row with given values directly, skipping the edit state.
This method allows for bulk updates of row data programmatically.

Parameter Type Description
index number The index of the row to update.
data Object The data object containing updated field values.

Returns void

Events

actionBegin EmitType< PageEventArgs|FilterEventArgs|SortEventArgs|SearchEventArgs|AddEventArgs|SaveEventArgs|EditEventArgs|DeleteEventArgs>

Triggers when TreeGrid actions like sorting, filtering, paging, etc., start.

actionComplete EmitType< PageEventArgs|FilterEventArgs|SortEventArgs|SearchEventArgs|AddEventArgs|SaveEventArgs|EditEventArgs|DeleteEventArgs>

Triggers when TreeGrid actions like sorting, filtering, paging, etc., are completed.

actionFailure EmitType<FailureEventArgs>

Triggers when any TreeGrid action fails to achieve the desired results.

batchAdd EmitType<BatchAddArgs>

Triggers when records are added in batch mode.

batchCancel EmitType<BatchCancelArgs>

Triggers before records are cancelled in batch mode.

batchDelete EmitType<BatchDeleteArgs>

Triggers when records are deleted in batch mode.

beforeBatchAdd EmitType<BeforeBatchAddArgs>

Triggers before records are added in batch mode.

beforeBatchDelete EmitType<BeforeBatchDeleteArgs>

Triggers before records are deleted in batch mode.

beforeBatchSave EmitType<BeforeBatchSaveArgs>

Triggers before records are saved in batch mode.

beforeCopy EmitType<BeforeCopyEventArgs>

Triggers before the TreeGrid copy action is initiated.

beforeDataBound EmitType<BeforeDataBoundArgs>

Triggers before data is bound to the TreeGrid.

beforeExcelExport EmitType<Object>

Triggers before TreeGrid data is exported to an Excel file.

beforePaste EmitType<BeforePasteEventArgs>

Triggers before the TreeGrid paste action is initiated.

beforePdfExport EmitType<Object>

Triggers before TreeGrid data is exported to a PDF document.

beforePrint EmitType<PrintEventArgs>

Triggers before the print action begins.

beginEdit EmitType<BeginEditArgs>

Triggers before a record is edited.

cellDeselected EmitType<CellDeselectEventArgs>

Triggers when a selected cell is deselected.

cellDeselecting EmitType<CellDeselectEventArgs>

Triggers before a selected cell is deselected.

cellEdit EmitType<CellEditArgs>

Triggers when a cell is being edited.

cellSave EmitType<CellSaveArgs>

Triggers when a cell is being saved.

cellSaved EmitType<CellSaveArgs>

Triggers after a cell is saved.

cellSelected EmitType<CellSelectEventArgs>

Triggers after a cell is selected.

cellSelecting EmitType<CellSelectingEventArgs>

Triggers before any cell selection occurs.

checkboxChange EmitType<CheckBoxChangeEventArgs>

Triggers when the state of a checkbox changes in a checkbox column.

collapsed EmitType<RowCollapsedEventArgs>

Triggers after a TreeGrid record is collapsed.

collapsing EmitType<RowCollapsingEventArgs>

Triggers while a TreeGrid record is collapsing.

columnDrag EmitType<ColumnDragEventArgs>

Triggers continuously while the column header is being dragged.

columnDragStart EmitType<ColumnDragEventArgs>

Triggers when column header dragging begins.

columnDrop EmitType<ColumnDragEventArgs>

Triggers when a column header is dropped onto the target column.

columnMenuClick EmitType<MenuEventArgs>

Triggers when there is a click on the column menu.

columnMenuOpen EmitType<ColumnMenuOpenEventArgs>

Triggers before the column menu opens.

contextMenuClick EmitType<MenuEventArgs>

Triggers when an item in the context menu is clicked.

contextMenuOpen EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before the context menu opens.

created EmitType<Object>

Triggers when the component is created.

dataBound EmitType<Object>

Triggers when the data source is populated in the TreeGrid.

dataSourceChanged EmitType<DataSourceChangedEventArgs>

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.