Skip to main content

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

TopicDescription
Basic initializationLearn how to initialize DataView
Pagination with DataViewThe example shows how to initialize DataView inside Pagination

Loading data into DataView

TopicDescription
Loading data into DataViewRead how to load the initial data into DataView
Initialization with config.dataThe 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 DataCollectionThe example shows how to load data from external DataCollection

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

TopicDescription
Configuring drag-n-dropLearn how to configure drag-n-drop of items between dataviews (Example)
Copying items during drag-n-dropLearn how to copy an item to a target during drag-n-drop (Example)
Enabling/disabling key navigationLearn how to enable/disable key navigation (Example)
Activating inline editingLearn how to enable inline editing on DataView initialization (Example)
Configuring amount of items in a rowLearn 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.

TopicDescription
Height of DataViewLearn how to set the height for DataView (Example)
Height of an itemLearn how to set the height for DataView items (Example)
Setting template for rendering itemsLearn 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 itemsLearn how to set margins around DataView items (Example)
Styling DataView itemsLearn how to customize DataView items (Example)
Styling selected DataView itemsLearn how to add custom style to the selected items (Example)
Styling DataViewLearn how to customize DataView (Example)
CSS template AThe example of a CSS template for DHTMLX DataView
CSS template BThe example of a CSS template for DHTMLX DataView
CSS template CThe example of a CSS template for DHTMLX DataView
CSS template DThe example of a CSS template for DHTMLX DataView
CSS template EThe example of a CSS template for DHTMLX DataView
List of CSS classesA 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.

TopicDescription
Editing item's dataLearn how to edit an item by its id (Example)
Adding an itemLearn how to add a new item into data collection (Example)
Updating an itemLearn how to update data of an item (Example)
Removing an itemLearn how to remove an item from data collection (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.

TopicDescription
Sorting itemsLearn how to sort DataView items (Example)
Filtering itemsLearn how to filter DataView items (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 DataView initialization
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 (Example)
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 DataView events

This section explains how to work with DataView events.

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

API reference

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

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

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