Features
This page helps you start working with DHTMLX DataView and explore its functionality in depth.
How to start with DHTMLX DataView
In this section you will learn how to initialize DataView, load data into it, and integrate it into your applications.
Initialization
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize DataView |
| Pagination with DataView | The example shows how to initialize DataView inside Pagination |
Loading data into DataView
| Topic | Description |
|---|---|
| Loading data into DataView | Learn how to load the initial data into DataView |
| Initialization with config.data | The example shows how to load data into DataView on the fly |
| Initialization with data.load() | The example shows how to load data from an 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 |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use the DHTMLX Optimus framework to build DHTMLX-based apps (the recommended framework for apps with Suite components) |
| React integration | Learn how to use DHTMLX DataView with React (Demo) |
| Angular integration | Learn how to use DHTMLX DataView with Angular (Demo) |
| Vue integration | Learn how to use DHTMLX DataView with Vue.js (Demo) |
How to configure DataView
In this section you will learn how to configure drag-n-drop, enable key navigation, and more.
| Topic | Description |
|---|---|
| Configuring drag-n-drop | Learn how to configure drag-n-drop of items between dataviews (Example) |
| Copying items during drag-n-drop | Learn how to copy an item to a target during drag-n-drop (Example) |
| Enabling/disabling key navigation | Learn how to enable/disable key navigation (Example) |
| Activating inline editing | Learn how to enable inline editing on DataView initialization (Example) |
| Configuring amount of items in a row | Learn how to define the number of items in a DataView row (Example) |
How to customize DataView and change its size
In this section you will learn how to configure the height and style of DataView and its items.
| Topic | Description |
|---|---|
| Height of DataView | Learn how to set the height of a DataView (Example) |
| Height of an item | Learn how to set the height of DataView items (Example) |
| Setting template for rendering items | Learn how to define a template for items in a DataView (Example) and add event handlers to the HTML elements in it (Example) |
| Setting margins for items | Learn how to set margins around DataView items (Example) |
| Styling DataView items | Learn how to customize DataView items (Example) |
| Styling selected DataView items | Learn how to add custom style to the selected items (Example) |
| Styling DataView | Learn how to customize DataView (Example) |
| CSS template A | An example of a CSS template for DHTMLX DataView |
| CSS template B | An example of a CSS template for DHTMLX DataView |
| CSS template C | An example of a CSS template for DHTMLX DataView |
| CSS template D | An example of a CSS template for DHTMLX DataView |
| CSS template E | An example of a CSS template for DHTMLX DataView |
| List of CSS classes | The CSS classes included in the DHTMLX library |
How to work with data in DataView
In this section you will learn how to use the DataCollection API to work with DataView data — edit, add, remove, and sort it.
How to edit, add, remove data
In this section you will learn how to add new data items to DataView and how to edit, update, or remove them.
| Topic | Description |
|---|---|
| Editing item data | Learn how to edit an item by its id (Example) |
| Adding an item | Learn how to add a new item to the data collection (Example) |
| Updating an item | Learn how to update item data (Example) |
| Removing an item | Learn how to remove an item from the data collection (Example) |
| DataCollection API | Check the full DataCollection API reference |
How to sort and filter data
In this section you will learn how to sort and filter data.
| Topic | Description |
|---|---|
| Sorting items | Learn how to sort DataView items (Example) |
| Filtering items | Learn how to filter DataView items (Example) |
How to work with selection
In this section you will learn how to work with selection.
| Topic | Description |
|---|---|
| Enabling/disabling selection | Learn how to enable/disable selection on DataView initialization |
| Enabling/disabling multiselection | Learn how to enable/disable selection of multiple items (Example) |
| Enabling/disabling the selection object | Learn how to enable or disable item selection through the selection object (Example) |
| Setting selection | Learn how to select a particular item or all items (Example) |
| Getting selection | Learn how to get the id or the object of a selected item (Example) |
| Removing selection | Learn how to remove selection from selected items |
How to work with item in focus
In this section you will learn how to set focus on an item and get the id or the 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 the object of an item in focus |
How to work with DataView events
In this section you will learn how to work with DataView events.
| Topic | Description |
|---|---|
| Event basic rules | Learn the basic rules of event handling |
| Event handling | Learn how to attach, detach, or call DataView events (Example) |
API reference
In this section you will find the DataView API reference.
| Topic | Description |
|---|---|
| DataView methods | Check the list of DataView methods |
| DataView events | Check the list of DataView events |
| DataView properties | Check the list of DataView properties |
| DataCollection API | Check the DataCollection API for working with DataView data |
Common functionality
In this section you will learn about common library functionality that is useful when you work with DataView.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| Accessibility support | Learn about accessibility support in DataView |
| Custom scroll | Learn how to use custom scroll in DataView |
| AwaitRedraw | Learn how to run code after the component renders |
Any questions left?
info
Do you need more functionality? Feel free to share your suggestions in the comments below!