Search results

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

If allowExcelExport set to true, then it will allow the user to export treegrid to Excel file.

Check the ExcelExport to configure exporting document.

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

If allowPdfExport set to true, then it will allow the user to export treegrid to Pdf file.

Check the Pdfexport to configure the exporting document.

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, you can drag and drop treegrid rows at another treegrid.

Defaults to false

allowSelection

boolean

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

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 mode of clip. The available modes are,

* Clip :- Truncates the cell content when it overflows its area.
* Ellipsis :- Displays ellipsis when the cell content overflows its area.
* EllipsisWithTooltip :- Displays ellipsis when the cell content overflows its area,

also it will display the tooltip while hover on ellipsis is applied.

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

columnQueryModeprovides options to retrieves data from the data source.Their types are

  • All: It retrieves whole data source.
  • Schema: retrieves data for all the defined columns in TreeGrid from the data source.
  • ExcludeHidden: retrieves data only for visible columns of TreeGrid from the data Source.

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 the rows in collapsed state when the TreeGrid is rendered for the first time.

Defaults to false

enableColumnVirtualization

boolean

If enableColumnVirtualization set to true, then the Tree Grid will render only the columns visible within the view-port and load subsequent columns on horizontal scrolling. This helps to load large dataset of columns in Tree Grid.

Defaults to false

enableHover

boolean

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

Defaults to false

enableHtmlSanitizer

boolean

Specifies whether to display or remove the untrusted HTML values in the TreeGrid component. If enableHtmlSanitizer is set to true, then it will sanitize any suspected untrusted strings and scripts before rendering them.

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

If enableInfiniteScrolling set to true, then the data will be loaded in TreeGrid when the scrollbar reaches the end. This helps to load large dataset in TreeGrid.

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

Gets or sets the number of frozen columns.

Defaults to 0

frozenRows

number

Gets or sets the number of frozen rows.

Defaults to 0

gridLines

GridLine

Defines the mode of TreeGrid lines. The available modes are,

* Both :- Displays both horizontal and vertical TreeGrid lines.
* None :- No TreeGrid lines are displayed.
* Horizontal :- Displays the horizontal TreeGrid lines only.
* Vertical :- Displays the vertical TreeGrid lines only.
* Default :- Displays TreeGrid lines 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 the infinite scroll settings.

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 print modes. The available print modes are

* AllPages :- Prints all pages of the TreeGrid.
* CurrentPage :- Prints 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.

searchSettings

SearchSettingsModel

Configures the search settings of the TreeGrid.

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

selectedRowIndex

number

The selectedRowIndex allows you to select a row at initial rendering. You can also get the currently selected row index.

Defaults to -1

selectionSettings

SelectionSettingsModel

Configures the selection settings.

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.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

addRecord

Adds a new record to the TreeGrid. Without passing parameters, it adds empty rows.

editSettings.allowEditing should be true.

Parameter Type Description
data (optional) Object Defines the new add record data.
index (optional) number Defines the row index to be added.
position (optional) RowPosition Defines the new row position to be added.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

autoFitColumns

Changes the column width to automatically fit its content to ensure that the width shows the content without wrapping/hiding.

  • This method ignores the hidden columns.
  • Uses the autoFitColumns method in the dataBound event to resize at initial rendering.
Parameter Type Description
fieldNames (optional) string | string[] Defines the column names.

Returns void

clearFiltering

Clears all the filtered rows of the TreeGrid.

Returns void

clearSelection

Deselects the current selected rows and cells.

Returns void

clearSorting

Clears all the sorted columns of the TreeGrid.

Returns void

closeEdit

Cancels edited state.

Returns void

collapseAll

Collapses All the rows

Returns void

collapseAtLevel

Collapses the records at specific hierarchical level

Parameter Type Description
level number Define the parent row level which needs to be collapsed

Returns void

collapseByKey

Collapses the records by given primary key value

Parameter Type Description
key Object Collapses the parent rows with given primary key value

Returns void

collapseRow

Collapses child rows

Parameter Type Description
row HTMLTableRowElement Collapse the given row
record (optional) Object Collapse the given record
key (optional) Object Primary key value

Returns void

copy

Copy the selected rows or cells data into clipboard.

Parameter Type Description
withHeader (optional) boolean Specifies whether the column header text needs to be copied along with rows or cells.

Returns void

csvExport

Export TreeGrid data to CSV file.

Parameter Type Description
excelExportProperties (optional) ExcelExportProperties Defines the export properties of the TreeGrid.
isMultipleExport (optional) boolean Define to enable multiple export.
workbook (optional) any Defines the Workbook if multiple export is enabled.
isBlob (optional) boolean If ‘isBlob’ set to true, then it will be returned as blob data.

Returns Promise

deleteRecord

Delete a record with Given options. If fieldName and data is not given then TreeGrid will delete the selected record.

editSettings.allowDeleting should be true.

Parameter Type Description
fieldName (optional) string Defines the primary key field, ‘Name of the column’.
data (optional) Object Defines the JSON data of the record to be deleted.

Returns void

deleteRow

Delete any visible row by TR element.

Parameter Type Description
tr HTMLTableRowElement Defines the table row element.

Returns void

destroy

Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

editCell

To edit any particular cell using row index and cell index.

Parameter Type Description
rowIndex (optional) number Defines row index to edit a particular cell.
field (optional) string Defines the field name of the column to perform cell edit.

Returns void

enableToolbarItems

Enables or disables ToolBar items.

Parameter Type Description
items string[] Defines the collection of itemID of ToolBar items.
isEnable boolean Defines the items to be enabled or disabled.

Returns void

endEdit

If TreeGrid is in editable state, you can save a record by invoking endEdit.

Returns void

excelExport

Export TreeGrid data to Excel file(.xlsx).

Parameter Type Description
excelExportProperties (optional) ExcelExportProperties | TreeGridExcelExportProperties Defines the export properties of the Tree Grid.
isMultipleExport (optional) boolean Define to enable multiple export.
workbook (optional) any Defines the Workbook if multiple export is enabled.
isBlob (optional) boolean If ‘isBlob’ set to true, then it will be returned as blob data.

Returns Promise

expandAll

Expands All the rows

Returns void

expandAtLevel

Expands the records at specific hierarchical level

Parameter Type Description
level number Expands the parent rows at given level

Returns void

expandByKey

Expands the records by given primary key value

Parameter Type Description
key Object Expands the parent rows with given primary key value

Returns void

expandRow

Expands child rows

Parameter Type Description
row HTMLTableRowElement Expands the given row
record (optional) Object Expands the given record
key (optional) Object Primary key value
level (optional) number Specifies the hierarchical level of the record

Returns void

filterByColumn

Filters TreeGrid row by column name with the given options.

Parameter Type Description
fieldName string Defines the field name of the column.
filterOperator string Defines the operator to filter records.
filterValue string | number | Date | boolean | number[] | string[] | Date[] | boolean[] Defines the value used to filter records.
predicate (optional) string Defines the relationship between one filter query and another by using AND or OR predicate.
matchCase (optional) boolean If match case is set to true, the TreeGrid filters the records with exact match. if false, it filters
case insensitive records (uppercase and lowercase letters are treated the same).
ignoreAccent (optional) boolean If ignoreAccent is set to true,
then filter ignores diacritic characters or accents while filtering.
actualFilterValue (optional) string Defines the actual filter value for filter column.
actualOperator (optional) string Defines the actual filter operator for filter column.

Returns void

getBatchChanges

Gets the added, edited,and deleted data before bulk save to the DataSource in batch mode.

Returns Object

getCellFromIndex

Gets a cell by row and column index.

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

Returns Element

getCheckedRecords

Get the records of checked rows.

Returns Object[]

getCheckedRowIndexes

Get the indexes of checked rows.

Returns number[]

getColumnByField

Gets a Column by column name.

Parameter Type Description
field string Specifies the column name.

Returns Column

getColumnByUid

Gets a column by UID.

Parameter Type Description
uid string Specifies the column UID.

Returns Column

getColumnFieldNames

Gets the collection of column fields.

Returns string[]

getColumnHeaderByField

Gets a column header by column name.

Parameter Type Description
field string Specifies the column name.

Returns Element

getColumnHeaderByIndex

Gets a column header by column index.

Parameter Type Description
index number Specifies the column index.

Returns Element

getColumnHeaderByUid

Gets a column header by UID.

Parameter Type Description
uid string Specifies the column uid.

Returns Element

getColumnIndexByField

Gets a column index by column name.

Parameter Type Description
field string Specifies the column name.

Returns number

getColumnIndexByUid

Gets a column index by UID.

Parameter Type Description
uid string Specifies the column UID.

Returns number

getColumns

Gets the columns from the TreeGrid.

Parameter Type Description
isRefresh (optional) boolean Defined whether to update DOM

Returns Column[]

getContent

Gets the content div of the TreeGrid.

Returns Element

getContentTable

Gets the content table of the TreeGrid.

Returns Element

getCurrentViewRecords

Get current visible data of TreeGrid.

Returns Object[]

getDataModule

Gets the data module.

Returns Object

getDataRows

Gets all the TreeGrid’s data rows.

Returns Element[]

getFooterContent

Gets the footer div of the TreeGrid.

Returns Element

getFooterContentTable

Gets the footer table element of the TreeGrid.

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

Gets the header div of the TreeGrid.

Returns Element

getHeaderTable

Gets the header table element of the TreeGrid.

Returns Element

getLocalData

Returns the persistence data for component

Returns any

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

Gets the pager of the TreeGrid.

Returns Element

getPrimaryKeyFieldNames

Get the names of the primary key columns of the TreeGrid.

Returns string[]

getRootElement

Returns the route element of the component

Returns HTMLElement

getRowByIndex

Gets a row by index.

Parameter Type Description
index number Specifies the row index.

Returns Element

getRowInfo

Get a row information based on cell

Parameter Type Description
target Element | EventTarget Target row element

Returns RowInfo

getRows

Returns TreeGrid rows

Returns HTMLTableRowElement[]

getSelectedRecords

Gets the collection of selected records.

Returns Object[]

getSelectedRowCellIndexes

Gets the collection of selected row and cell indexes.

Returns ISelectedCell[]

getSelectedRowIndexes

Gets the collection of selected row indexes.

Returns number[]

getSelectedRows

Gets the collection of selected rows.

Returns Element[]

getUidByColumnField

Gets UID by column name.

Parameter Type Description
field string Specifies the column name.

Returns string

getVisibleColumns

Gets the visible columns from the TreeGrid.

Returns Column[]

getVisibleRecords

Get the visible records corresponding to rows visually displayed.

Returns Object[]

goToPage

Navigates to the specified target page.

Parameter Type Description
pageNo number Defines the page number to navigate.

Returns void

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hideColumns

Hides a column by column name.

Parameter Type Description
keys string | string[] Defines a single or collection of column names.
hideBy (optional) string Defines the column key either as field name or header text.

Returns void

hideSpinner

Manually shown spinner needs to hide by hideSpinnner.

Returns void

indent

Indents the record to one level of hierarchy. Moves the selected row as the last child of its previous row.

Parameter Type Description
record (optional) Object – specifies the record to do indented

Returns void

openColumnChooser

Column chooser can be displayed on screen by given position(X and Y axis).

Parameter Type Description
x (optional) number Defines the X axis.
y (optional) number Defines the Y axis.

Returns void

outdent

Outdent the record to one level of hierarchy. Moves the selected row as sibling to its parent row.

Parameter Type Description
record (optional) Object – specifies the record to do outdented

Returns void

paste

Paste data from clipboard to selected cells.

Parameter Type Description
data string Specifies the date for paste.
rowIndex number Specifies the row index.
colIndex number Specifies the column index.

Returns void

pdfExport

Export TreeGrid data to PDF document.

Parameter Type Description
pdfExportProperties (optional) PdfExportProperties | TreeGridPdfExportProperties Defines the export properties of the Tree Grid.
isMultipleExport (optional) boolean Define to enable multiple export.
pdfDoc (optional) Object Defined the Pdf Document if multiple export is enabled.
isBlob (optional) boolean If ‘isBlob’ set to true, then it will be returned as blob data.

Returns Promise

print

By default, prints all the pages of the TreeGrid and hides the pager.

You can customize print options using the printMode.

Returns void

refresh

Refreshes the TreeGrid header and content.

Returns void

refreshColumns

Refreshes the TreeGrid column changes.

Parameter Type Description
refreshUI (optional) boolean Defined whether to refresh the DOM

Returns void

refreshHeader

Refreshes the TreeGrid header.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

reorderColumns

Changes the TreeGrid column positions by field names.

Parameter Type Description
fromFName string | string[] Defines the origin field name.
toFName string Defines the destination field name.

Returns void

reorderRows

Reorder the rows based on given indexes and position

Parameter Type Description
fromIndexes number[] Source indexes of rows
toIndex number Destination index of row
position string Defines drop position as above or below or child

Returns void

saveCell

Saves the cell that is currently edited. It does not save the value to the DataSource.

Returns void

Searches TreeGrid records using the given key. You can customize the default search option by using the searchSettings.

Parameter Type Description
searchString string Defines the key.

Returns void

selectCell

Selects a cell by the given index.

Parameter Type Description
cellIndex IIndex Defines the row and column indexes.
isToggle (optional) boolean If set to true, then it toggles the selection.

Returns void

selectCheckboxes

Checked the checkboxes using rowIndexes.

Parameter Type Description
indexes number[] row indexes

Returns void

selectRow

Selects a row by given index.

Parameter Type Description
index number Defines the row index.
isToggle (optional) boolean If set to true, then it toggles the selection.

Returns void

selectRows

Selects a collection of rows by indexes.

Parameter Type Description
rowIndexes number[] Specifies the row indexes.

Returns void

serverCsvExport

Sends a Post request to export Tree Grid to CSV file in server side.

Parameter Type Description
url string Pass URL for server-side csv export action.

Returns void

serverExcelExport

Sends a post request to export tree grid to excel file in server side.

Parameter Type Description
url string Pass URL for server side excel export action.

Returns void

serverPdfExport

Sends a post request to export tree grid to pdf file in server side.

Parameter Type Description
url string Pass URL for server-side pdf export action.

Returns void

setCellValue

Updates particular cell value based on the given primary key value.

Primary key column must be specified using columns.isPrimaryKey property.

Parameter Type Description
key string | number Specifies the PrimaryKey value of dataSource.
field string Specifies the field name which you want to update.
value string | number | boolean | Date To update new value for the particular cell.

Returns void

setRowData

Updates and refresh the particular row values based on the given primary key value.

Primary key column must be specified using columns.isPrimaryKey property.

Parameter Type Description
key string | number Specifies the PrimaryKey value of dataSource.
rowData (optional) ITreeData To update new data for the particular row.

Returns void

showColumns

Shows a column by its column name.

Parameter Type Description
keys string | string[] Defines a single or collection of column names.
showBy (optional) string Defines the column key either as field name or header text.

Returns void

showSpinner

By default, TreeGrid shows the spinner for all its actions. You can use this method to show spinner at your needed time.

Returns void

sortByColumn

Sorts a column with the given options.

Parameter Type Description
columnName string Defines the column name to be sorted.
direction SortDirection Defines the direction of sorting field.
isMultiSort (optional) boolean Specifies whether the previous sorted columns are to be maintained.

Returns void

startEdit

To edit any particular row by TR element.

Parameter Type Description
row (optional) HTMLTableRowElement Defines the table row to be edited.

Returns void

updateCell

To update the specified cell by given value without changing into edited state.

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

Defines the text of external message.

Parameter Type Description
message string Defines the message to update.

Returns void

updateRow

To update the specified row by given values without changing into edited state.

Parameter Type Description
index number Defines the row index.
data Object Defines the data object to be updated.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

actionBegin

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

Triggers when TreeGrid actions such as sorting, filtering, paging etc., starts.

actionComplete

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

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

actionFailure

EmitType<FailureEventArgs>

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

batchAdd

EmitType<BatchAddArgs>

Triggers when records are added in batch mode.

batchCancel

EmitType<BatchCancelArgs>

Triggers before records are added 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 TreeGrid copy action.

beforeDataBound

EmitType<BeforeDataBoundArgs>

Triggers before data is bound to Tree Grid.

beforeExcelExport

EmitType<Object>

Triggers before TreeGrid data is exported to Excel file.

beforePaste

EmitType<BeforePasteEventArgs>

Triggers before TreeGrid paste action.

beforePdfExport

EmitType<Object>

Triggers before TreeGrid data is exported to PDF document.

beforePrint

EmitType<PrintEventArgs>

Triggers before the print action starts.

beginEdit

EmitType<BeginEditArgs>

Triggers before the record is to be edit.

cellDeselected

EmitType<CellDeselectEventArgs>

Triggers when a particular selected cell is deselected.

cellDeselecting

EmitType<CellDeselectEventArgs>

Triggers before the selected cell is deselecting.

cellEdit

EmitType<CellEditArgs>

Triggers when the cell is being edited.

cellSave

EmitType<CellSaveArgs>

Triggers when cell is saved.

cellSaved

EmitType<CellSaveArgs>

Triggers when 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 check box state change in checkbox column.

collapsed

EmitType<RowCollapsedEventArgs>

Triggers after the record is collapsed.

collapsing

EmitType<RowCollapsingEventArgs>

Triggers while collapsing the TreeGrid record

columnDrag

EmitType<ColumnDragEventArgs>

Triggers when column header element is dragged (moved) continuously.

columnDragStart

EmitType<ColumnDragEventArgs>

Triggers when column header element drag (move) starts.

columnDrop

EmitType<ColumnDragEventArgs>

Triggers when a column header element is dropped on the target column.

columnMenuClick

EmitType<MenuEventArgs>

Triggers when click on column menu.

columnMenuOpen

EmitType<ColumnMenuOpenEventArgs>

Triggers before column menu opens.

contextMenuClick

EmitType<MenuEventArgs>

Triggers when click on context menu.

contextMenuOpen

EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before context menu opens.

created

EmitType<Object>

Triggers when the component is created.

dataBound

EmitType<Object>

Triggers when data source is populated in the TreeGrid.

dataSourceChanged

EmitType<DataSourceChangedEventArgs>

Triggers when the TreeGrid data is added, deleted and updated. Invoke the done method from the argument to start render after edit operation.

dataStateChange

EmitType<DataStateChangeEventArgs>

Triggers when the TreeGrid actions such as Sorting, Paging etc., are done. In this event,the current view data and total record count should be assigned to the dataSource based on the action performed.

detailDataBound

EmitType<DetailDataBoundEventArgs>

Triggers after detail row expands.

This event triggers at initial expand.

excelExportComplete

EmitType<ExcelExportCompleteArgs>

Triggers after TreeGrid data is exported to Excel file.

excelHeaderQueryCellInfo

EmitType<ExcelHeaderQueryCellInfoEventArgs>

Triggers before exporting each header cell to Excel file. You can also customize the Excel cells.

excelQueryCellInfo

EmitType<ExcelQueryCellInfoEventArgs>

Triggers before exporting each cell to Excel file. You can also customize the Excel cells.

expanded

EmitType<RowExpandedEventArgs>

Triggers after the record is expanded

expanding

EmitType<RowExpandingEventArgs>

Triggers while expanding the TreeGrid record

headerCellInfo

EmitType<HeaderCellInfoEventArgs>

Triggered for stacked header.

load

EmitType<Object>

This event allows customization of TreeGrid properties before rendering.

pdfExportComplete

EmitType<PdfExportCompleteArgs>

Triggers after TreeGrid data is exported to PDF document.

pdfHeaderQueryCellInfo

EmitType<PdfHeaderQueryCellInfoEventArgs>

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

pdfQueryCellInfo

EmitType<PdfQueryCellInfoEventArgs>

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

printComplete

EmitType<PrintEventArgs>

Triggers after print action is completed.

queryCellInfo

EmitType<QueryCellInfoEventArgs>

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

recordDoubleClick

EmitType<RecordDoubleClickEventArgs>

Triggers when record is double clicked.

resizeStart

EmitType<ResizeArgs>

Triggers when column resize starts.

resizeStop

EmitType<ResizeArgs>

Triggers when column resize ends.

resizing

EmitType<ResizeArgs>

Triggers on column resizing.

rowDataBound

EmitType<RowDataBoundEventArgs>

Triggered every time a request is made to access row information, element, or data. This will be 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 deselecting the selected row.

rowDrag

EmitType<RowDragEventArgs>

Triggers when row elements are dragged (moved) continuously.

rowDragStart

EmitType<RowDragEventArgs>

Triggers when row element’s drag(move) starts.

rowDragStartHelper

EmitType<RowDragEventArgs>

Triggers when row element’s before drag(move).

rowDrop

EmitType<RowDragEventArgs>

Triggers when row elements are dropped on 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 toolbar item is clicked.

Contents
Contents