Features
This page contains structured information that will help you to start working with DHTMLX TreeGrid and go into deep dive on its functionality.
How to start with DHTMLX TreeGrid
In this section you can find out how to initialize TreeGrid, how to load data into the component and how to integrate TreeGrid into your applications.
Initialization
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize TreeGrid |
| Initialization of a collapsed TreeGrid | Learn how to initialize a TreeGrid in the collapsed state (Example) |
| Pagination with TreeGrid | The example shows how to initialize TreeGrid inside Pagination |
Loading data into Grid
| Topic | Description |
|---|---|
| Loading data into TreeGrid | Read how to load the initial data into TreeGrid |
| Initialization with config.data | The example shows how to load data into TreeGrid on the initialization stage |
| Initialization with data.load() | The example shows how to load data from external file |
| Initialization with data.parse() | The example shows how to load data from a local data source |
| Initialization with external TreeGridCollection | The example shows how to load data from external TreeGridCollection |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| React integration | Learn how to use DHTMLX TreeGrid with React (Demo) |
| Angular integration | Learn how to use DHTMLX TreeGrid with Angular (Demo) |
| Vue integration | Learn how to use DHTMLX TreeGrid with Vue.js (Demo) |
How to configure TreeGrid
How to configure columns
In this section you will know how to configure TreeGrid columns on TreeGrid initialization.
| Topic | Description |
|---|---|
| Configuring columns | Learn how to define initial structure of TreeGrid |
| Configuring content alignment | Learn how to align data in a column (Example) |
| Frozen columns | Learn how to split treegrid columns into the frozen and movable parts (Example) |
| Hidden columns | Learn how to initialize Grid with hidden columns (Example) |
| Sortable columns | Learn how to make columns sortable (Example) |
| Resizable columns | Learn how to make columns resizable (Example) |
How to configure rows
In this section you will know how to configure rows on TreeGrid initialization.
| Topic | Description |
|---|---|
| Automatic adding of empty row into Grid | Learn how to to automatically add an empty row after the last filled row in the treegrid (Example) |
| Frozen rows | Learn how to split treegrid rows into the frozen and movable parts (Example) |
How to specify formats for TreeGrid data
In this section you will learn how to specify the necessary data formats for a separate column.
| Topic | Description |
|---|---|
| Configuring data formats | Learn how to display values of cells in different formats (percent, currency, date and combination with templates) (Example) |
| Date column and support of the Date() object | The example shows how to use the Date() object for specifying dates |
How to configure TreeGrid header and footer
In this section you can learn how to configure the header and footer of TreeGrid, how to configure their heights and styles.
| Topic | Description |
|---|---|
| Configuring header/footer | Learn how to configure a TreeGrid header/footer (Example) |
| Setting the height for header and footer | Learn how to set the height for rows in the header and footer of TreeGrid (Example) |
| Styling header cells | Learn how to stylize the text of header cells (Example) |
| Styling footer cells | Learn how to stylize the text of footer cells (Example) |
How to configure tooltips
In this section you will know how to add tooltips of the desired appearance with the necessary information, or hide them if needed.
| Topic | Description |
|---|---|
| Hiding tooltips | Learn how to hide/show a tooltip on hovering over the content of a column (Example) |
| Adding templates for tooltips | Learn how to customize the content of the tooltip of a column (Example) |
How to group cells in TreeGrid
In this section you will find out how to group cells in TreeGrid and its header.
| Topic | Description |
|---|---|
| Grouping cells | Learn how to specify columns and rows spans in TreeGrid (Example) |
| Adding/removing spans | Learn how to add, remove, and get spans of rows and columns via API methods |
| Grouping rows and columns in the header | Learn how to specify spans for columns and rows in the TreeGrid header (Example) |
How to configure drag-n-drop
In this section you will know how to configure the drag-n-drop functionality for TreeGrid.
| Topic | Description |
|---|---|
| Drag-n-drop inside a treegrid | Learn how to configure drag-n-drop of columns and (or) rows inside the treegrid (Example) |
| Drag-n-drop between grids | Learn how to configure drag-n-drop between treegrids (Example) |
| Drag-n-drop of multiple rows | Learn how to allow end users to drag-n-drop several rows at once |
| Copying of rows during drag-n-drop | Learn how to copy a row to a target during drag-n-drop (Example) |
| Expanding collapsed rows during drag-n-drop | Learn how to disable/enable the ability of collapsed rows to expand when you hover them over during drag-n-drop (Example) |
How to configure sizes of TreeGrid and its cells
| Topic | Description |
|---|---|
| Width and height of TreeGrid | Learn how to set specific size of TreeGrid (Example) |
| Auto-height for TreeGrid | Learn how to configure auto-height for TreeGrid (Example) |
| Adjusting columns by header, footer, data content | Learn how to make the size of columns to automatically adjust to their content (Example) |
| Max width of a column | Learn how to define the maximal width which can be set for a column (Example) |
| Min width of a column | Learn how to define the minimum width which can be set for a column (Example) |
| Auto-width for columns | Learn how to configure auto-width for columns (Example) |
| Auto-height for rows | Learn how to configure auto-height for columns(Example) |
| Row height | Learn how to configure the height of rows (Example 1, Example 2) |
How to customize TreeGrid and its cells
In this section you can learn how to configure the style of Grid and its cells.
| Topic | Description |
|---|---|
| Adding HTML content into cells | Learn how to add HTML content (for example, an image, an icon) into data of TreeGrid cells (Example) |
| Adding a template to cells | Learn how to customize the content of cells (Example) |
| Handling events in template | Learn how to assign event handlers to HTML elements of a custom template of TreeGrid cells (Example) |
| Styling Grid | Learn how to stylize a treegrid (Example) |
| Styling cells | Learn how to stylize the necessary cells (Example) |
| Marking cells with colors | Learn how to apply conditional formatting and mark cells in the treegrid (Example 1, Example 2) |
| Styling rows | Learn how to stylize the necessary rows (Example 1, Example 2) |
| Styling selection | The example shows how to stylize selection in the treegrid |
| List of CSS classes | A set of CSS classes provided by the DHTMLX library |
How to work with columns and rows
In this section you will know how to add and remove columns and rows, how to hide and show them, how to configure their sizes and align content inside the columns.
Adding/removing columns and rows
| Topic | Description |
|---|---|
| Adding / removing columns | Learn how to add/remove columns |
| Adding / removing rows | Learn how to add/remove rows (Example) |
Getting configuration of a cell/column
| Topic | Description |
|---|---|
| Getting configuration of a column | Learn how to get an object with configuration of the specified column |
| Getting configuration of a cell | Learn how to get the current coordinates and size of a cell |
Showing/hiding columns and rows
| Topic | Description |
|---|---|
| Showing / hiding a row | Learn how to show and hide a row in TreeGrid (Example) |
| Checking visibility of a row | Learn how to check whether a row is hidden (Example) |
| Hiding columns | Learn how to make a column hidden on TreeGrid initialization (Example) |
| Showing / hiding a column | Learn how to show and hide a column in TreeGrid (Example) |
| Checking visibility of a column | Learn how to check whether a column is hidden (Example) |
Expanding/collapsing rows
| Topic | Description |
|---|---|
| Expand / collapse rows | Learn how to collapse/expand rows (Example) |
Grouping data
| Topic | Description |
|---|---|
| Grouping data | Learn how to divide data of TreeGrid into groups (Example) |
How to work with data in TreeGrid
This section will tell you how to use TreeGrid API and TreeCollection API for working with data of TreeGrid, i.e. edit, add, remove, sort data, etc.
How to edit data
In this section you will find the ways of editing data in TreeGrid.
| Topic | Description |
|---|---|
| Enabling/disabling editing | Read how to enable/disable editing of the whole Grid or its separate columns |
| Editing with different editors | Learn how to specify the type of the editor for editing the cells (Example 1, Example 2, Example 3) |
| Editing of a specific cell | Learn how to enable editing of a cell (Example) |
| TreeCollection API | Check the list of all available TreeCollection API |
How to sort data
In this section you will find the ways of sorting data in TreeGrid.
| Topic | Description |
|---|---|
| Sorting data | Learn how to sort data in the treegrid (Example) |
| Sortable columns | Learn how to define whether a column should be sortable (Example) |
| Getting sorting state | Learn how to get the current state of sorting data in TreeGrid (Example) |
How to filter data
In this section you will find the ways of filtering data in TreeGrid.
| Topic | Description |
|---|---|
| Setting the type of a filter in the header/footer | Learn how to specify the type of the filter in the header/footer of a TreeGrid column (Example) |
| Filtering data | Learn how to filter grid data by the specified criteria (Example 1, Example 2) |
| Getting the header filter | Learn how to get and use an object of the header filter (Example) |
| Customizing filters in the header/footer | Learn how to add a custom function with your own logic for filtering data in a TreeGrid column (Example) |
How to work with selection
In this section you will find the ways of work with selection functionality.
| Topic | Description |
|---|---|
| Configuring selection | Learn how to configure the mode of selection of TreeGrid elements (Example) |
| Enabling multiselection | Learn how to enable multi-row/multi-cell selection in TreeGrid (Example) |
| Working with selection | Learn how to enable/disable selection, set selection to cells, remove selection, and get the object of a selected cell |
| Selection API | Learn how to use the API of Selection to manage the selection of TreeGrid cells |
How to scroll TreeGrid
In this section you will learn how to scroll TreeGrid to the necessary position.
| Topic | Description |
|---|---|
| Controlling scroll behavior | Learn how to scroll the treegrid content to exact position (Example) |
How to export TreeGrid
In this section you will know how to export TreeGrid to different formats.
| Topic | Description |
|---|---|
| Exporting TreeGrid to EXCEL, CSV, PDF, or PNG format | Learn how to export TreeGrid to the necessary format (Example 1, Example 2) |
How to work with TreeGrid events
This section explains how to work with TreeGrid events.
| Topic | Description |
|---|---|
| Event basic rules | Learn basic rules on how to work with events |
| Event handling | Learn how to attach, detach, or call the TreeGrid events (Example) |
API reference
In this section you can find out corresponding references of TreeGrid API.
| Topic | Description |
|---|---|
| TreeGrid methods | Check the list of TreeGrid methods |
| TreeGrid events | Check the list of TreeGrid events |
| TreeGrid properties | Check the list of TreeGrid properties |
| TreeGrid column properties | Check the list of properties of a TreeGrid column |
| DataCollection API | Check the API of TreeCollection to work with TreeGrid data |
| Selection API | Check the API of Selection to manage the selection of TreeGrid cells |
Common functionality
In this section you will learn about common functionality of the library which can be useful while working with TreeGrid.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| Custom scroll | Learn how to enable custom scroll in TreeGrid |
| AwaitRedraw | Learn how to perform the code after the component’s rendering |
Any questions left?
info
Do you need more functionality? Feel free to share your suggestions in the comments below!