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 |