UI Widgets DataGrid

A data grid widget.

Included in: dx.webappjs.js, dx.all.js

dxDataGrid is a widget that allows you to represent data from a local or remote storage in the form of a grid. This widget provides a great number of features including such basics as sorting, grouping, filtering, selection, as well as more advanced capabilities, like state storing, templating, scrolling of various types.

To create the dxDataGrid widget, add a div container to your HTML page.

HTML
<div id="gridContainer" style="height:300px; max-width:750px; margin: 0 auto"></div>

dxDataGrid can be created using a jQuery, Knockout or AngularJS approach. The following code demonstrates how to create the widget within the "gridContainer" container using the jQuery approach.

JavaScript
<script>
  $(function () {
    $("#gridContainer").dxDataGrid({
        //Options of the configuration object are specified here
    });
  });
</script>

To configure the dxDataGrid widget, pass a configuration object as the constructor's parameter. The fields of this object represent widget configuration options. To specify the options, set the required values to these fields. Refer to the Configuration section to find the configuration options for the grid.

To provide data for the dxDataGrid widget, specify a data source. dxDataGrid accepts two types of data sources: an array of objects and a DataSource configuration object. To learn more about data binding in dxDataGrid, refer to the Data Binding guide.

To discover the process of creating a widget in greater detail, refer to the Create a Widget guide.

Start Tutorial View Demo Watch Video

Configuration

This section describes the configuration options of the dxDataGrid widget.

Methods

This section describes the methods that can be used to manipulate the dxDataGrid widget.

Events

This section describes events fired by this component.