Skip to main content

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

TopicDescription
Basic initializationLearn how to initialize TreeGrid
Initialization of a collapsed TreeGridLearn how to initialize a TreeGrid in the collapsed state (Example)
Pagination with TreeGridThe example shows how to initialize TreeGrid inside Pagination

Loading data into Grid

TopicDescription
Loading data into TreeGridRead how to load the initial data into TreeGrid
Initialization with config.dataThe 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 TreeGridCollectionThe example shows how to load data from external TreeGridCollection

Integration

TopicDescription
Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX TreeGrid with React (Demo)
Angular integrationLearn how to use DHTMLX TreeGrid with Angular (Demo)
Vue integrationLearn 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.

TopicDescription
Configuring columnsLearn how to define initial structure of TreeGrid
Configuring content alignmentLearn how to align data in a column (Example)
Frozen columnsLearn how to split treegrid columns into the frozen and movable parts (Example)
Hidden columnsLearn how to initialize Grid with hidden columns (Example)
Sortable columnsLearn how to make columns sortable (Example)
Resizable columnsLearn how to make columns resizable (Example)

How to configure rows

In this section you will know how to configure rows on TreeGrid initialization.

TopicDescription
Automatic adding of empty row into GridLearn how to to automatically add an empty row after the last filled row in the treegrid (Example)
Frozen rowsLearn 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.

TopicDescription
Configuring data formatsLearn how to display values of cells in different formats (percent, currency, date and combination with templates) (Example)
Date column and support of the Date() objectThe example shows how to use the Date() object for specifying dates

In this section you can learn how to configure the header and footer of TreeGrid, how to configure their heights and styles.

TopicDescription
Configuring header/footerLearn how to configure a TreeGrid header/footer (Example)
Setting the height for header and footerLearn how to set the height for rows in the header and footer of TreeGrid (Example)
Styling header cellsLearn how to stylize the text of header cells (Example)
Styling footer cellsLearn 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.

TopicDescription
Hiding tooltipsLearn how to hide/show a tooltip on hovering over the content of a column (Example)
Adding templates for tooltipsLearn 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.

TopicDescription
Grouping cellsLearn how to specify columns and rows spans in TreeGrid (Example)
Adding/removing spansLearn how to add, remove, and get spans of rows and columns via API methods
Grouping rows and columns in the headerLearn 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.

TopicDescription
Drag-n-drop inside a treegridLearn how to configure drag-n-drop of columns and (or) rows inside the treegrid (Example)
Drag-n-drop between gridsLearn how to configure drag-n-drop between treegrids (Example)
Drag-n-drop of multiple rowsLearn how to allow end users to drag-n-drop several rows at once
Copying of rows during drag-n-dropLearn how to copy a row to a target during drag-n-drop (Example)
Expanding collapsed rows during drag-n-dropLearn 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

TopicDescription
Width and height of TreeGridLearn how to set specific size of TreeGrid (Example)
Auto-height for TreeGridLearn how to configure auto-height for TreeGrid (Example)
Adjusting columns by header, footer, data contentLearn how to make the size of columns to automatically adjust to their content (Example)
Max width of a columnLearn how to define the maximal width which can be set for a column (Example)
Min width of a columnLearn how to define the minimum width which can be set for a column (Example)
Auto-width for columnsLearn how to configure auto-width for columns (Example)
Auto-height for rowsLearn how to configure auto-height for columns(Example)
Row heightLearn 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.

TopicDescription
Adding HTML content into cellsLearn how to add HTML content (for example, an image, an icon) into data of TreeGrid cells (Example)
Adding a template to cellsLearn how to customize the content of cells (Example)
Handling events in templateLearn how to assign event handlers to HTML elements of a custom template of TreeGrid cells (Example)
Styling GridLearn how to stylize a treegrid (Example)
Styling cellsLearn how to stylize the necessary cells (Example)
Marking cells with colorsLearn how to apply conditional formatting and mark cells in the treegrid (Example 1, Example 2)
Styling rowsLearn how to stylize the necessary rows (Example 1, Example 2)
Styling selectionThe example shows how to stylize selection in the treegrid
List of CSS classesA 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

TopicDescription
Adding / removing columnsLearn how to add/remove columns
Adding / removing rowsLearn how to add/remove rows (Example)

Getting configuration of a cell/column

TopicDescription
Getting configuration of a columnLearn how to get an object with configuration of the specified column
Getting configuration of a cellLearn how to get the current coordinates and size of a cell

Showing/hiding columns and rows

TopicDescription
Showing / hiding a rowLearn how to show and hide a row in TreeGrid (Example)
Checking visibility of a rowLearn how to check whether a row is hidden (Example)
Hiding columnsLearn how to make a column hidden on TreeGrid initialization (Example)
Showing / hiding a columnLearn how to show and hide a column in TreeGrid (Example)
Checking visibility of a columnLearn how to check whether a column is hidden (Example)

Expanding/collapsing rows

TopicDescription
Expand / collapse rowsLearn how to collapse/expand rows (Example)

Grouping data

TopicDescription
Grouping dataLearn 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.

TopicDescription
Enabling/disabling editingRead how to enable/disable editing of the whole Grid or its separate columns
Editing with different editorsLearn how to specify the type of the editor for editing the cells (Example 1, Example 2, Example 3)
Editing with a colorpicker editorThe example shows how to implement a colorpicker editor for editing cells
Editing of a specific cellLearn how to enable editing of a cell (Example)
TreeCollection APICheck the list of all available TreeCollection API

How to sort data

In this section you will find the ways of sorting data in TreeGrid.

TopicDescription
Sorting dataLearn how to sort data in the treegrid (Example)
Sortable columnsLearn how to define whether a column should be sortable (Example)
Getting sorting stateLearn 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.

TopicDescription
Setting the type of a filter in the header/footerLearn how to specify the type of the filter in the header/footer of a TreeGrid column (Example)
Filtering dataLearn how to filter grid data by the specified criteria (Example 1, Example 2)
Getting the header filterLearn how to get and use an object of the header filter (Example)
Customizing filters in the header/footerLearn 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.

TopicDescription
Configuring selectionLearn how to configure the mode of selection of TreeGrid elements (Example)
Enabling multiselectionLearn how to enable multi-row/multi-cell selection in TreeGrid (Example)
Working with selectionLearn how to enable/disable selection, set selection to cells, remove selection, and get the object of a selected cell
Selection APILearn 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.

TopicDescription
Controlling scroll behaviorLearn 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.

TopicDescription
Exporting TreeGrid to EXCEL, CSV, PDF, or PNG formatLearn 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.

TopicDescription
Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the TreeGrid events (Example)

API reference

In this section you can find out corresponding references of TreeGrid API.

TopicDescription
TreeGrid methodsCheck the list of TreeGrid methods
TreeGrid eventsCheck the list of TreeGrid events
TreeGrid propertiesCheck the list of TreeGrid properties
TreeGrid column propertiesCheck the list of properties of a TreeGrid column
DataCollection APICheck the API of TreeCollection to work with TreeGrid data
Selection APICheck 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.

TopicDescription
Touch supportLearn how to work with touch support
TypeScript supportLearn how to work with TypeScript
Custom scrollLearn how to enable custom scroll in TreeGrid
AwaitRedrawLearn 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!