Features
This page contains structured information that will help you to start working with DHTMLX DataView and go into deep dive on its functionality.
How to start with DHTMLX DataView
In this section you can find out how to initialize DataView, how to load data into the component and how to integrate DataView 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 | Read 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 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 DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating 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 know how to configure the drag-n-drop functionality, how to activate the ability to use 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 that should be displayed in a row of DataView (Example) |
How to customize DataView and change its size
In this section you can learn how to configure the height and style of DataView and its items.
| Topic | Description |
|---|---|
| Height of DataView | Learn how to set the height for DataView (Example) |
| Height of an item | Learn how to set the height for DataView items (Example) |
| Setting template for rendering items | Learn how to define a template for rendering items in a dataview (Example) and add event handlers to HTML elements of the template (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 | The example of a CSS template for DHTMLX DataView |
| CSS template B | The example of a CSS template for DHTMLX DataView |
| CSS template C | The example of a CSS template for DHTMLX DataView |
| CSS template D | The example of a CSS template for DHTMLX DataView |
| CSS template E | The example of a CSS template for DHTMLX DataView |
| List of CSS classes | A set of CSS classes provided by the DHTMLX library |
How to work with data in DataView
This section will tell you how to use DataCollection API for working with data of DataView, 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 DataView, how to edit, update, or remove the items.
| Topic | Description |
|---|---|
| Editing item's data | Learn how to edit an item by its id (Example) |
| Adding an item | Learn how to add a new item into data collection (Example) |
| Updating an item | Learn how to update data of an item (Example) |
| Removing an item | Learn how to remove an item from data collection (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.
| 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 may study how to work with selection functionality.
| 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 selection | Learn how to enable/disable the ability to select items via 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 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 DataView events
This section explains how to work with DataView 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 DataView events (Example) |
API reference
In this section you can find out corresponding references of DataView API.
| 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 API of DataCollection to work with DataView data |
Common functionality
In this section you will learn about common functionality of the library which can be useful while working with DataView.
| 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 DataView |
| 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!