Skip to main content

TreeGrid API overview

TreeGrid methods

NameDescription
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 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

TreeGrid events

Collapse and expand

NameDescription
afterCollapsefires after collapsing a treegrid
afterExpandfires after expanding a treegrid
beforeCollapsefires before collapsing a treegrid
beforeExpandfires before expanding a treegrid
expandfires on expanding a treegrid

Editing

NameDescription
afterEditEndfires after editing of a cell is ended
afterEditStartfires after editing of a cell has started
beforeEditEndfires before editing of a cell is ended
beforeEditStartfires before editing of a cell has started

Mouse

NameDescription
cellClickfires on click on a grid cell
cellDblClickfires on double-click on a grid cell
cellMouseDownfires before releasing the left mouse button when clicking on a grid cell
cellMouseOverfires on moving the mouse pointer over a grid cell
cellRightClickfires on right click on a grid cell
footerCellClickfires on click on a grid footer cell
footerCellDblClickfires on double-click on a grid footer cell
footerCellMouseDownfires on moving the mouse pointer over a grid footer cell
footerCellMouseOverfires on moving the mouse pointer over a grid footer cell
footerCellRightClickfires on right click on a grid footer cell
headerCellClickfires on click on a grid header cell
headerCellDblClickfires on double-click on a grid footer cell
headerCellMouseDownfires on moving the mouse pointer over a grid header cell
headerCellMouseOverfires on moving the mouse pointer over a grid header cell
headerCellRightClickfires on right click on a grid header cell

Scroll

NameDescription
scrollfires on scrolling a grid

Sort and filter

NameDescription
afterSortfires after a column is sorted by clicking on its header
beforeFilterfires before the filterChange event is called
beforeSortfires before a column is sorted by clicking on its header
filterChangefires on typing text in an input of a column's header

Column drag and drop

NameDescription
afterColumnDragfires after dragging of a column is finished
afterColumnDropfires before the user has finished dragging a column but after the mouse button is released
beforeColumnDragfires before dragging of a column has started
beforeColumnDropfires before the user has finished dragging and released the mouse button over a target column
cancelColumnDropfires on moving a mouse pointer out of borders of a column while dragging the column
canColumnDropfires when a dragged column is placed over a target column
dragColumnInfires when a column is dragged to another potential target
dragColumnOutfires when a column is dragged out of a potential target
dragColumnStartfires when dragging of a column has started

Column hide and show

NameDescription
afterColumnHidefires after a column is hidden
afterColumnShowfires after a column is shown
beforeColumnHidefires before a column is hidden
beforeColumnShowfires before a column is shown on a page

Column resize

NameDescription
afterResizeEndfires after resizing of a column is ended
beforeResizeStartfires before resizing of a column has started
resizefires on resizing a column

Row drag and drop

NameDescription
afterRowDragfires after dragging of a row is finished
afterRowDropfires before the user has finished dragging a row but after the mouse button is released
beforeRowDragfires before dragging of a row has started
beforeRowDropfires before the user has finished dragging and released the mouse button over a target row
cancelRowDropfires on moving a mouse pointer out of borders of a row while dragging the row
canRowDropfires when a dragged row is placed over a target row
dragRowInfires when a row is dragged to another potential target
dragRowOutfires when a row is dragged out of a potential target
dragRowStartfires when dragging of a row has started

Row hide and show

NameDescription
afterRowHidefires after a row is hidden
afterRowShowfires after a row is shown on a page
beforeRowHidefires before a row is hidden
beforeRowShowfires before a row is shown on a page

Row resize

NameDescription
afterRowResizefires after the height of a row is changed
beforeRowResizefires before the height of a row is changed
important

TreeGrid properties

NameDescription
adjustOptional. Defines whether the width of columns is automatically adjusted to the width of their content
autoEmptyRowOptional. Adds an empty row after the last filled row in the TreeGrid
autoHeightOptional. 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
autoWidthOptional. Makes treegrid's columns to fit the size of a treegrid
bottomSplitOptional. Sets the number of frozen rows from the bottom
collapsedOptional. Defines that a treegrid is initialized in the collapsed state
columnsRequired. Specifies the configuration of grid columns
cssOptional. Adds style classes to TreeGrid
dataOptional. Specifies an array of data objects to set into the grid
dragCopyOptional. Defines that a row is copied to a target during drag-n-drop
dragExpandOptional. Defines whether the collapsed rows should expand when you hover them over during drag-n-drop
dragItemOptional. Enables the possibility to reorder treegrid columns by drag and drop
dragModeOptional. Enables drag-n-drop in Treegrid
editableOptional. Enables editing in TreeGrid columns
eventHandlersOptional. 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
exportStylesOptional. Defines the styles that will be sent to the export service when exporting TreeGrid to PDF/PNG
footerAutoHeightOptional. Allows adjusting the height of the footer for the content to fit in
footerRowHeightOptional. Sets the height of rows in the footer
footerTooltipOptional. Controls the footer tooltips
groupTitleTemplateOptional. Sets a template to the title of a group
headerAutoHeightOptional. Allows adjusting the height of the header for the content to fit in
headerRowHeightOptional. Sets the height of rows in the header
headerTooltipOptional. Controls the header tooltips
heightOptional. Sets the height of a grid or adjusts it automatically to the content
htmlEnableOptional. Specifies the HTML content (inner HTML) of TreeGrid columns
leftSplitOptional. Sets the number of frozen columns from the left
multiselectionOptional. Enables multi-row/multi-cell selection in TreeGrid (only CTRL)
resizableOptional. Defines whether columns can be resized
rightSplitOptional. Sets the number of frozen columns from the right
rootParentOptional. Defines the id of the root parent
rowCssOptional. Sets style for a row
rowHeightOptional. Defines the height of a row in a grid
selectionOptional. Enables selection in a grid
sortableOptional. Defines whether sorting on clicking headers of columns is enabled
spansOptional. Describes the configuration of cols/rows spans
tooltipOptional. Enables/disables all the tooltips of a column
topSplitOptional. Sets the number of frozen rows from the top
widthOptional. 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

NameDescription
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

NameDescription
afterSelectfires after selecting a cell
afterUnSelectfires after unselecting a cell
beforeSelectfires before selecting a cell
beforeUnSelectfires before unselecting a cell

Export methods

NameDescription
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