Features
This page contains structured information that will help you to start working with DHTMLX List and go into deep dive on its functionality.
How to start with DHTMLX List
In this section you can find out how to initialize List, how to load data into the component and how to integrate List into your applications.
Initialization
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize List |
| Pagination with List | The example shows how to initialize List inside Pagination |
Loading data into List
| Topic | Description |
|---|---|
| Loading data into List | Read how to load the initial data into List |
| Initialization with config.data | The example shows how to load data into List 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 DataCollection | The example shows how to load data from external DataCollection |
| Rendering a large data set | Learn how to enable dynamic loading of data on scrolling the list (Example) |
| Lazy loading | The example shows how to render data dynamically |
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 List with React (Demo) |
| Angular integration | Learn how to use DHTMLX List with Angular (Demo) |
| Vue integration | Learn how to use DHTMLX List with Vue.js (Demo) |
How to configure List
In this section you will know how to configure the drag-n-drop functionality, how to activate inline editing and key navigation.
| Topic | Description |
|---|---|
| Configuring drag-n-drop | Learn how to configure drag-n-drop of items between lists (Example) |
| Copying items during drag-n-drop | Learn how to copy an item to a target during drag-n-drop (Example) |
| Inline editing | Learn how to enable inline editing in List (Example) |
| Keyboard navigation | Learn how to enable key navigation in List |
How to customize List and change its size
In this section you can learn how to configure the height and style of List and its items.
| Topic | Description |
|---|---|
| Height of List | Learn how to set the height for List (Example) |
| Height of a List item | Learn how to set the height for List items (Example) |
| Setting template for rendering items | Learn how to define a template for rendering items in List (Example) and add event handlers to HTML elements of the template (Example) |
| Rendering HTML content | Learn how to display HTML content as plain text to prevent XSS attacks (Example) |
| Styling List | Learn how to customize List (Example) |
| Styling selected List items | Learn how to add custom style to the selected items (Example) |
| Styling List items | Learn how to customize List items (Example) |
| CSS template A | The example of a CSS template for DHTMLX List |
| CSS template B | The example of a CSS template for DHTMLX List |
| List of CSS classes | A set of CSS classes provided by the DHTMLX library |
How to work with data in List
This section will tell you how to use DataCollection API for working with data of List, i.e. edit, add, remove, sort data, etc.
How to edit, add, remove data
In this section you may study how to add new data items into List, how to edit, update, or remove the items.
| Topic | Description |
|---|---|
| Editing items | Learn how to update List items using Form (Example) |
| Adding new items | Learn how to add new items into List using Form (Example) |
| Updating an item | Learn how to update data of an item (Example) |
| Removing items | Learn how to remove items from List (Example) |
| DataCollection API | Check the list of all available DataCollection API |
How to sort and filter data
In this section you may study how to sort and filter data in List.
| Topic | Description |
|---|---|
| Filtering items | Learn how to filter data in List (Example) |
| Sorting items | Learn how to sort data in List (Example) |
How to work with selection
In this section you may study how to work with selection functionality.
| Topic | Description |
|---|---|
| Enabling/disabling selection | Learn how to enable/disable selection on List initialization (Example) |
| Enabling/disabling multiselection | Learn how to enable/disable selection of multiple items (Example) |
| Enabling/disabling selection | Learn how to enable/disable the ability to select items via the selection object |
| Setting selection | Learn how to select a particular item or all items (Example) |
| Getting selection | Learn how to get the id or an object of a selected item (Example) |
| Removing selection | Learn how to remove selection from a selected item(s) |
How to work with item in focus
In this section you will learn how to set focus on an item and get the id/object of an item in focus.
| Topic | Description |
|---|---|
| Setting focus on item | Learn how to set focus on an item (Example) |
| Getting an item in focus | Learn how to get the id or an object of an item in focus |
How to work with List events
This section explains how to work with List 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 List events (Example) |
API reference
In this section you can find out corresponding references of List API.
| Topic | Description |
|---|---|
| List methods | Check the list of List methods |
| List events | Check the list of List events |
| List properties | Check the list of List properties |
| DataCollection API | Check the API of DataCollection to work with List data |
Common functionality
In this section you will learn about common functionality of the library which can be useful while working with List.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| Custom scroll | Learn how to use custom scroll in List |
| AwaitRedraw | Learn how to perform the code after the component’s rendering |
Any questions left?
Do you need more functionality? Feel free to share your suggestions in the comments below!