TreeGrid API overview
TreeGrid methods
| Name | Description |
|---|---|
| addCellCss() | adds a style to a cell |
| addRowCss() | adds a style to a row |
| addSpan() | adds a rows/cols span |
| adjustColumnWidth() | adjusts the width of a column to make all its content visible |
| collapse() | collapses a tree node by id |
| collapseAll() | collapses all expanded Tree nodes |
| destructor() | removes a Grid instance and releases occupied resources |
| editCell() | enables editing of a TreeGrid cell |
| editEnd() | finishes editing in a cell |
| expand() | expands a tree node by id |
| expandAll() | expands all collapsed tree nodes |
| getCellRect() | returns the parameters of a cell |
| getColumn() | returns an object with attributes of a column |
| getHeaderFilter() | returns an object with a set of methods for the header filter of the specified column |
| getScrollState() | returns the coordinates of a position a grid has been scrolled to |
| getSortingState() | returns the current state of sorting data in TreeGrid |
| getSpan() | returns an object with spans |
| groupBy() | groups grid content either by values of the specified column or by the result of calculation |
| hideColumn() | hides a column of Grid |
| hideRow() | hides a row of TreeGrid |
| isColumnHidden() | checks whether a column is hidden |
| isRowHidden() | checks whether a row is hidden |
| paint() | repaints a grid on a page |
| removeCellCss() | removes a style from a cell |
| removeRowCss() | removes a style from a row |
| removeSpan() | removes a columns/rows span |
| scroll() | scrolls a grid according to the specified coordinates |
| scrollTo() | scrolls a grid to a specified cell |
| setColumns() | sets configuration for TreeGrid columns |
| showColumn() | makes a specified column visible on a page |
| showRow() | makes a specified row visible on a page |
| ungroup() | ungroups the grid to return it into the plain view |
important
- Use the methods of TreeCollection to work with data of TreeGrid.
- Apply the methods of Selection to manage the selection of TreeGrid cells.
TreeGrid events
Collapse and expand
| Name | Description |
|---|---|
| afterCollapse | fires after collapsing a treegrid |
| afterExpand | fires after expanding a treegrid |
| beforeCollapse | fires before collapsing a treegrid |
| beforeExpand | fires before expanding a treegrid |
| expand | fires on expanding a treegrid |
Editing
| Name | Description |
|---|---|
| afterEditEnd | fires after editing of a cell is ended |
| afterEditStart | fires after editing of a cell has started |
| beforeEditEnd | fires before editing of a cell is ended |
| beforeEditStart | fires before editing of a cell has started |
Mouse
| Name | Description |
|---|---|
| cellClick | fires on click on a grid cell |
| cellDblClick | fires on double-click on a grid cell |
| cellMouseDown | fires before releasing the left mouse button when clicking on a grid cell |
| cellMouseOver | fires on moving the mouse pointer over a grid cell |
| cellRightClick | fires on right click on a grid cell |
| footerCellClick | fires on click on a grid footer cell |
| footerCellDblClick | fires on double-click on a grid footer cell |
| footerCellMouseDown | fires on moving the mouse pointer over a grid footer cell |
| footerCellMouseOver | fires on moving the mouse pointer over a grid footer cell |
| footerCellRightClick | fires on right click on a grid footer cell |
| headerCellClick | fires on click on a grid header cell |
| headerCellDblClick | fires on double-click on a grid footer cell |
| headerCellMouseDown | fires on moving the mouse pointer over a grid header cell |
| headerCellMouseOver | fires on moving the mouse pointer over a grid header cell |
| headerCellRightClick | fires on right click on a grid header cell |
Scroll
| Name | Description |
|---|---|
| scroll | fires on scrolling a grid |
Sort and filter
| Name | Description |
|---|---|
| afterSort | fires after a column is sorted by clicking on its header |
| beforeFilter | fires before the filterChange event is called |
| beforeSort | fires before a column is sorted by clicking on its header |
| filterChange | fires on typing text in an input of a column's header |
Column drag and drop
| Name | Description |
|---|---|
| afterColumnDrag | fires after dragging of a column is finished |
| afterColumnDrop | fires before the user has finished dragging a column but after the mouse button is released |
| beforeColumnDrag | fires before dragging of a column has started |
| beforeColumnDrop | fires before the user has finished dragging and released the mouse button over a target column |
| cancelColumnDrop | fires on moving a mouse pointer out of borders of a column while dragging the column |
| canColumnDrop | fires when a dragged column is placed over a target column |
| dragColumnIn | fires when a column is dragged to another potential target |
| dragColumnOut | fires when a column is dragged out of a potential target |
| dragColumnStart | fires when dragging of a column has started |
Column hide and show
| Name | Description |
|---|---|
| afterColumnHide | fires after a column is hidden |
| afterColumnShow | fires after a column is shown |
| beforeColumnHide | fires before a column is hidden |
| beforeColumnShow | fires before a column is shown on a page |
Column resize
| Name | Description |
|---|---|
| afterResizeEnd | fires after resizing of a column is ended |
| beforeResizeStart | fires before resizing of a column has started |
| resize | fires on resizing a column |
Row drag and drop
| Name | Description |
|---|---|
| afterRowDrag | fires after dragging of a row is finished |
| afterRowDrop | fires before the user has finished dragging a row but after the mouse button is released |
| beforeRowDrag | fires before dragging of a row has started |
| beforeRowDrop | fires before the user has finished dragging and released the mouse button over a target row |
| cancelRowDrop | fires on moving a mouse pointer out of borders of a row while dragging the row |
| canRowDrop | fires when a dragged row is placed over a target row |
| dragRowIn | fires when a row is dragged to another potential target |
| dragRowOut | fires when a row is dragged out of a potential target |
| dragRowStart | fires when dragging of a row has started |
Row hide and show
| Name | Description |
|---|---|
| afterRowHide | fires after a row is hidden |
| afterRowShow | fires after a row is shown on a page |
| beforeRowHide | fires before a row is hidden |
| beforeRowShow | fires before a row is shown on a page |
Row resize
| Name | Description |
|---|---|
| afterRowResize | fires after the height of a row is changed |
| beforeRowResize | fires before the height of a row is changed |
important
- Use the events of TreeCollection to work with data of TreeGrid.
- Apply the events of Selection to control the selection of TreeGrid cells.
TreeGrid properties
| Name | Description |
|---|---|
| adjust | Optional. Defines whether the width of columns is automatically adjusted to the width of their content |
| autoEmptyRow | Optional. Adds an empty row after the last filled row in the TreeGrid |
| autoHeight | Optional. Makes long text split into multiple lines based on the width of the column, controls the automatic height adjustment for the header/footer and cells with data |
| autoWidth | Optional. Makes treegrid's columns to fit the size of a treegrid |
| bottomSplit | Optional. Sets the number of frozen rows from the bottom |
| collapsed | Optional. Defines that a treegrid is initialized in the collapsed state |
| columns | Required. Specifies the configuration of grid columns |
| css | Optional. Adds style classes to TreeGrid |
| data | Optional. Specifies an array of data objects to set into the grid |
| dragCopy | Optional. Defines that a row is copied to a target during drag-n-drop |
| dragExpand | Optional. Defines whether the collapsed rows should expand when you hover them over during drag-n-drop |
| dragItem | Optional. Enables the possibility to reorder treegrid columns by drag and drop |
| dragMode | Optional. Enables drag-n-drop in Treegrid |
| editable | Optional. Enables editing in TreeGrid columns |
| eventHandlers | Optional. Adds event handlers to the HTML elements of a custom template in a cell, or to the HTML elements defined in the data set, or to the header/footer cell |
| exportStyles | Optional. Defines the styles that will be sent to the export service when exporting TreeGrid to PDF/PNG |
| footerAutoHeight | Optional. Allows adjusting the height of the footer for the content to fit in |
| footerRowHeight | Optional. Sets the height of rows in the footer |
| footerTooltip | Optional. Controls the footer tooltips |
| groupTitleTemplate | Optional. Sets a template to the title of a group |
| headerAutoHeight | Optional. Allows adjusting the height of the header for the content to fit in |
| headerRowHeight | Optional. Sets the height of rows in the header |
| headerTooltip | Optional. Controls the header tooltips |
| height | Optional. Sets the height of a grid or adjusts it automatically to the content |
| htmlEnable | Optional. Specifies the HTML content (inner HTML) of TreeGrid columns |
| leftSplit | Optional. Sets the number of frozen columns from the left |
| multiselection | Optional. Enables multi-row/multi-cell selection in TreeGrid (only CTRL) |
| resizable | Optional. Defines whether columns can be resized |
| rightSplit | Optional. Sets the number of frozen columns from the right |
| rootParent | Optional. Defines the id of the root parent |
| rowCss | Optional. Sets style for a row |
| rowHeight | Optional. Defines the height of a row in a grid |
| selection | Optional. Enables selection in a grid |
| sortable | Optional. Defines whether sorting on clicking headers of columns is enabled |
| spans | Optional. Describes the configuration of cols/rows spans |
| tooltip | Optional. Enables/disables all the tooltips of a column |
| topSplit | Optional. Sets the number of frozen rows from the top |
| width | Optional. Sets the width of a grid |
Column properties
You will find the list of all the available configuration properties of a TreeGrid column here.
Selection API
Selection methods
| Name | Description |
|---|---|
| disable() | disables selection of cells in Grid |
| enable() | enables selection of cells in Grid |
| getCell() | returns the object of a selected cell |
| removeCell() | unselects previously selected cells |
| setCell() | sets selection to a specified cell |
Selection events
| Name | Description |
|---|---|
| afterSelect | fires after selecting a cell |
| afterUnSelect | fires after unselecting a cell |
| beforeSelect | fires before selecting a cell |
| beforeUnSelect | fires before unselecting a cell |
Export methods
| Name | Description |
|---|---|
| csv() | Exports data from a treegrid into a CSV file |
| pdf() | Exports data from a treegrid to a PDF file |
| png() | Exports data from a treegrid to a PNG file |
| xlsx() | Exports data from a treegrid to an Excel file |