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 of the header filter by column id |
| 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 cols/rows span |
| scroll() | scrolls a grid according to 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 |
| 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 | defines whether the width of columns is automatically adjusted to the width of their content |
| autoEmptyRow | adds an empty row after the last filled row in the TreeGrid |
| autoHeight | makes long text to split into multiple lines based on the width of the column |
| autoWidth | makes treegrid's columns to fit the size of a treegrid |
| columns | specifies the configuration of grid columns |
| css | adds style classes to TreeGrid |
| data | specifies an array of data objects to set into the grid |
| dragCopy | defines that a row is copied to a target during drag-n-drop |
| dragItem | enables the possibility to reorder treegrid columns by drag and drop |
| dragMode | enables drag-n-drop in Treegrid |
| editable | enables editing in TreeGrid columns |
| eventHandlers | adds event handlers to HTML elements of a custom template of a TreeGrid cell or to the HTML elements defined in the data set of TreeGrid |
| footerRowHeight | sets the height of rows in the footer |
| groupTitleTemplate | sets a template to the title of a group |
| headerRowHeight | sets the height of rows in the header |
| height | sets the height of a grid |
| htmlEnable | specifies the HTML content (inner HTML) of TreeGrid columns |
| leftSplit | sets the number of frozen columns |
| resizable | defines whether columns can be resized |
| rootParent | defines the id of the root parent |
| rowCss | sets style for a row |
| rowHeight | defines the height of a row in a grid |
| selection | enables selection in a grid |
| sortable | defines whether sorting on clicking headers of columns is enabled |
| spans | describes the configuration of cols/rows spans |
| tooltip | enables a tooltip on hovering over the content of a column |
| width | 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 |