Skip to main content

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

TopicDescription
Basic initializationLearn how to initialize List
Pagination with ListThe example shows how to initialize List inside Pagination

Loading data into List

TopicDescription
Loading data into ListRead how to load the initial data into List
Initialization with config.dataThe 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 DataCollectionThe example shows how to load data from external DataCollection
Rendering a large data setLearn how to enable dynamic loading of data on scrolling the list (Example)
Lazy loadingThe example shows how to render data dynamically

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 List with React (Demo)
Angular integrationLearn how to use DHTMLX List with Angular (Demo)
Vue integrationLearn 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.

TopicDescription
Configuring drag-n-dropLearn how to configure drag-n-drop of items between lists (Example)
Copying items during drag-n-dropLearn how to copy an item to a target during drag-n-drop (Example)
Inline editingLearn how to enable inline editing in List (Example)
Keyboard navigationLearn 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.

TopicDescription
Height of ListLearn how to set the height for List (Example)
Height of a List itemLearn how to set the height for List items (Example)
Setting template for rendering itemsLearn how to define a template for rendering items in List (Example) and add event handlers to HTML elements of the template (Example)
Rendering HTML contentLearn how to display HTML content as plain text to prevent XSS attacks (Example)
Styling ListLearn how to customize List (Example)
Styling selected List itemsLearn how to add custom style to the selected items (Example)
Styling List itemsLearn how to customize List items (Example)
CSS template AThe example of a CSS template for DHTMLX List
CSS template BThe example of a CSS template for DHTMLX List
List of CSS classesA 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.

TopicDescription
Editing itemsLearn how to update List items using Form (Example)
Adding new itemsLearn how to add new items into List using Form (Example)
Updating an itemLearn how to update data of an item (Example)
Removing itemsLearn how to remove items from List (Example)
DataCollection APICheck 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.

TopicDescription
Filtering itemsLearn how to filter data in List (Example)
Sorting itemsLearn how to sort data in List (Example)

How to work with selection

In this section you may study how to work with selection functionality.

TopicDescription
Enabling/disabling selectionLearn how to enable/disable selection on List initialization (Example)
Enabling/disabling multiselectionLearn how to enable/disable selection of multiple items (Example)
Enabling/disabling selectionLearn how to enable/disable the ability to select items via the selection object
Setting selectionLearn how to select a particular item or all items (Example)
Getting selectionLearn how to get the id or an object of a selected item (Example)
Removing selectionLearn 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.

TopicDescription
Setting focus on itemLearn how to set focus on an item (Example)
Getting an item in focusLearn 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.

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

API reference

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

TopicDescription
List methodsCheck the list of List methods
List eventsCheck the list of List events
List propertiesCheck the list of List properties
DataCollection APICheck 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.

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