TreeGrid

Represents the TreeGrid component.

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

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

  <div id="TreeGrid"></div>

import { TreeGrid } from '@syncfusion/ej2-treegrid';
let treegrid: TreeGrid = new TreeGrid(
        {
            dataSource: summaryRowData,
            childMapping: 'children',
        });
treegrid.appendTo('#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.

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.

  <div id="TreeGrid"></div>

import { TreeGrid } from '@syncfusion/ej2-treegrid';
let treegrid: TreeGrid = new TreeGrid(
        {
            dataSource: summaryRowData,
            childMapping: 'children',
            treeColumnIndex: 0,
            columns: [
                { field: 'taskID', headerText: 'Task ID', width: 130 },
                { field: 'taskName', width: 200, headerText: 'Task Name', width: 130 },
                { field: 'duration', headerText: 'Duration', width: 140 },
                { field: 'progress', headerText: 'Progress', width: 140 }
            ]
        });
treegrid.appendTo('#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.

  <div id="TreeGrid"></div>

import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { summaryRowData } from './data-source';

let treegrid: TreeGrid = new TreeGrid(
        {
            dataSource: summaryRowData,
            childMapping: 'children',
        });
treegrid.appendTo('#TreeGrid');

Defaults to []

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.

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 }

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

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.

  <div id="TreeGrid"></div>

import { TreeGrid } from '@syncfusion/ej2-treegrid';
    let treegrid: TreeGrid = new TreeGrid(
        {
            dataSource: projectData,
            idMapping: 'TaskID',
            parentIdMapping: 'parentID',
        });
    treegrid.appendTo('#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.

parentIdMapping

string

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

  <div id="TreeGrid"></div>

import { TreeGrid } from '@syncfusion/ej2-treegrid';
    let treegrid: TreeGrid = new TreeGrid(
        {
            dataSource: projectData,
            idMapping: 'TaskID',
            parentIdMapping: 'parentID',
        });
    treegrid.appendTo('#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

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.

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

addEventListener

Adds the handler to the given event listener.

Returns void

addRecord

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

Returns void

appendTo

Appends the control within the given HTML element

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence 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.

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.

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.

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.

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.

Returns void

csvExport

Exports the TreeGrid data to a CSV file.

Returns Promise

deleteRecord

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

Returns void

deleteRow

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

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

detachUnloadEvent

Removing unload event to persist data when enable persistence true

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.

Returns void

enableToolbarItems

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

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).

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Returns Element

getFrozenRightCellFromIndex

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

Returns Element

getFrozenRightColumnHeaderByIndex

Gets a frozen right column header by 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.

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

getLocalData

Returns the persistence data for component

Returns any

getMovableCellFromIndex

Gets a movable table cell by row and column index.

Returns Element

getMovableColumnHeaderByIndex

Gets a movable column header by column index.

Returns Element

getMovableDataRows

Gets all the TreeGrid’s movable table data rows.

Returns Element[]

getMovableRowByIndex

Gets a movable tables row by 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[]

getRootElement

Returns the route element of the component

Returns HTMLElement

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.

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.

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.

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.

Returns void

handleUnload

Handling unload event to persist data when enable persistence true

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.

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.

Returns void

openColumnChooser

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

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.

Returns void

paste

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

Returns void

pdfExport

Exports the TreeGrid data to a PDF document.

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.

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

removeEventListener

Removes the handler from the given event listener.

Returns void

reorderColumns

Reorders TreeGrid columns by specifying their field names.

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.

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

search

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

Returns void

selectCell

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

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.

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.

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.

Returns void

serverCsvExport

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

Returns void

serverExcelExport

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

Returns void

serverPdfExport

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

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.

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.

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.

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.

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.

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.

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.

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.

Returns void

Inject

Dynamically injects the required modules to the component.

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.

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.

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.