Visual Elements

This guide gives a detailed overview of dxDataGrid visual elements. Each topic in this guide contains a brief description of an element and its main features, which can be configured.

Below is a grid element map. It may be helpful as you begin learning the capabilities of the dxDataGrid widget. Hover over an element on the map to discover the name of this element. A click on an element navigates you to a topic devoted to this element.

DevExtreme dxDataGrid Elements

Group Panel Add Button Save Button Revert Button Delete Button Delete Button Delete Button Delete Button Delete Button Column Chooser Button Search Panel Column Header Filter Row Selection Column Selection Column Selection Column Selection Column Page Navigator Page Size Selector Group Row Group Row Group Row Grid Column Grid Column Grid Column

Grid Columns

There are two central elements, which the dxDataGrid widget is built on: grid columns and grid rows. This topic covers the main features of grid columns and the ways they can be configured.

A grid column is a visual representation of a set of data values that have a particular type. The general appearance of grid columns in the dxDataGrid widget is demonstrated in the image below.

DevExtreme DataGrid GridColumns

Specifying Grid Columns

By default, grid columns are generated on the base of the data source specified for dxDataGrid: one column for one field of a data source object. If you are not satisfied with the result, declare the columns array. The way you must declare it depends on the purposes you aim. If you want to change the set of presented columns or alter their order, fill this array with names of data source fields providing data for columns. The following code snippet illustrates this case.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    columns: ['CompanyName', 'ContactName', 'City', 'Country']
});

If you need to adjust grid column settings, declare columns as an array of objects. Each object must specify settings of one grid column. In this case, the name of a data source field should be assigned to the dataField property. For an example, see the following code snippet.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    columns: [{
            dataField: 'CompanyName',
            // Settings of the "Company Name" column are specified here
        }, {
            dataField: 'ContactName',
            // Settings of the "Contact Name" column are specified here
        }, {
            dataField: 'City',
            // Settings of the "City" column are specified here
        },
        // ...
    ]
});

These approaches can be combined. For example, you can specify some columns by objects, and other columns by the names of their data source fields.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    columns: [
        'CompanyName',
        {
            dataField: 'ContactName',
            // Settings of the "Contact Name" column are specified here
        }, {
            dataField: 'City',
            // Settings of the "City" column are specified here
        },
        // ...
    ]
});

Moreover, you can configure grid columns without declaring the columns array. Instead, change the required column settings within a callback function assigned to the grid's customizeColumns property. The array of grid columns can be accessed using the parameter of this function. Fields of each object in this array represent column properties identical to the properties described in the columns reference section. This approach is useful when you need to adjust only a few of column settings.

JavaScript
$("#gridContainer").dxDataGrid({
    customizeColumns: function (columns) {
        columns[0].width = 100;
        columns[1].width = 210;
    },
    // ...
});

Grid columns have many more features, a comprehensive list of which follows.

  • Visibility
    Each column is considered visible by default. To hide it, assign false to the visible property of a column. The headers of hidden columns appear in the column chooser.

  • Appearance
    You can completely change the appearance of a grid column. For this purpose, implement a CSS class and assign its name to the cssClass property of the column. Additionally, you can hide the lines separating one column from another by setting the showColumnLines property to false.

  • Size
    By default, all grid columns have equal width. Using the columnAutoWidth property, you can force the columns to adjust their widths to their content. If you want to specify a width for a column explicitly, use the width property of this column. In addition, you can allow a user to resize grid columns at runtime. For this purpose, assign true to the grid's allowColumnResizing property. The height of grid columns is calculated automatically depending on the height of the widget's container.

  • Text Formatting
    Values of a column can be displayed with an applied format and precision. If required, you can also customize them by assigning a callback function to the customizeText property of the column. This function must return the text to be displayed in the column.

Setting a Data Type

A very important property of a grid column is the type of data this column contains. By default, the type of a column is determined automatically depending on the type of values that are in the data source field of this column. However, in many cases, these values must be converted into another type, e.g., when you receive numbers in a string format. If you need to convert these values, set the data type of a column explicitly using its dataType property.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    columns: [{
            dataField: 'CustomerID',
            dataType: 'number'
        }, {
            dataField: 'OrderDate',
            dataType: 'date'
        },
        // ...
    ]
});
NOTE
If your date values are of a string type, make sure they have one of the following formats in order to provide cross-browser compatibility.
  • 'yyyy/MM/dd' (i.e., '2014/08/25')
  • 'yyyy/MM/dd HH:mm:ss' (i.e., '2014/08/25 16:35:10')

Calculating the Column Index

Another important property of a grid column is its index. It can be used for obtaining or changing column options by calling the columnOption, or for implementing callback functions, such as the editCellTemplate or onCellClick. Note that those indexes differ. The index passed to the columnOption method - an "initial" index - equals the index of the column in the columns array. The index used in callback functions is equal to the "visible" index of the column. It depends on the current location of a column in the grid and changes dynamically when a user reorders columns or performs grouping. The following image illustrates how the "visible" index is calculated.

DevExtreme DataGrid GridColumns

The "initial" index of a column can be obtained within a callback function also. For this purpose, use the column.index property of the object passed to this function as the argument.

Configuring Column Headers

A column header is the top cell of a column that contains a text describing the contents of the column.

DevExtreme DataGrid ColumnHeaders

A text in a column header is called "caption". Usually, a caption is generated automatically on the base of the data field assigned to this column. In this case, the caption is a more friendly name of the data field. For example, if "orderDate" is the data field, then the caption will be "Order Date". There may be cases, when specifying the caption is required, e.g., when you use a calculated column and do not assign any data field. Then, assign the required text to the caption property of the column.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    columns: [{
            dataField: 'CompanyName',
            caption: 'Company',
            // ...
        }, {
            caption: 'Contact Name',
            // ...
        },
        // ...
    ]
});

Column headers in dxDataGrid are also used for sorting. To apply sorting to a column, a user must click its header. An arrow indicating the applied sort order will appear in the column header. In addition, the user can use a context menu to apply sorting. It is invoked by a right-click on a column header. Various sort orders can be selected within this context menu.

DevExtreme DataGrid ColumnHeaders

In case column headers are not required, hide them by assigning false to the grid's showColumnHeaders property.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    showColumnHeaders: false
});

Fixing Grid Columns

The dxDataGrid widget allows you to anchor columns to the left or right grid edge. When anchored, columns are not horizontally scrolled with the grid. Use this feature if you need a column (or columns) to always be displayed, regardless of scrolling.

View Demo

To anchor columns to grid edges, set the grid's columnFixing | enabled option to true. In this instance, column fixing-related commands will be available in the column headers' context menu. Using these commands, end users can anchor any column to the left or to the right grid edge and then unfix it.

JavaScript
var gridOptions = {
    //...
    columnFixing: { 
        enabled: true
    }
    //...
}

DevExtreme DataGrid Column Fixing

You can prevent the fixing of a particular column by setting its allowFixing option to false. In this instance, the fixing-related commands will not be available in the column's context menu.

Columns can be fixed at runtime and at design time. If you require certain columns to appear fixed initially, set the columns' fixed option to true. In this instance, the grid's columnFixing | enabled option will automatically be set to true.

JavaScript
var gridOptions = {
    //...
    columns: [
        { 
            fixed: true,
            //...
        },
        //...
    ]
    //...
}

DevExtreme DataGrid Column Fixing

Note that the command columns, the ones containing check boxes to select rows or links to save/delete rows, are fixed when you enable column fixing, since the fixed option is set to true for these columns internally.

Anchoring columns makes sense only when the auto width feature is disabled and the total width of columns exceeds the grid container's width. Otherwise, horizontal scrolling does not occur and fixed columns end up behaving like other columns.

Grid Rows

Along with grid columns, grid rows are a fundamental element in the dxDataGrid widget. A grid row is a grid element representing a structured data item. In fact, a grid can be thought of as consisting of rows and columns.

DevExtreme DataGrid GridRows

In dxDataGrid, you specify data for grid columns mostly, while grid rows are formed automatically based on the contents of data source objects. Normally, a grid row is generated for each data source object.

To identify a row, a row index is used. If paging is enabled, grid rows are indexed beginning with 0 on each page. Otherwise, grid rows are indexed beginning with 0 continuously. Note that group rows are counted too and thus have row indexes.

DevExtreme DataGrid GridRows

There are several features of grid rows that you can configure. They are listed below.

  • Appearance
    By default, all grid rows are displayed on a monochrome area without visual distinctions between them. If you need to distinguish one row from its neighboring rows visually, set the rowAlternationEnabled option to true. In this case, ordinary-looking rows will alternate with slightly shaded ones. Also, grid rows can be highlighted when the mouse pointer moves over them. To enable this capability, set the hoverStateEnabled property to true. Additionally, you can change the visibility of row lines using the showRowLines property.

  • Customization
    After a row has been rendered, you can apply final customizations to it. For this purpose, implement a function that handles the rowPrepared event and assign it to the onRowPrepared property. Usually, handling the rowPrepared event is sufficient for grid rows to appear according to your needs. However, some scenarios require defining grid rows in full. In such a case, implement a row template and assign it to the grid's rowTemplate property.

Grid Cells

A grid cell is formed at the intersection of a grid row and a grid column. Although a grid has many types of cells, such as filter row cells and column header cells, a "grid cell" mainly refers to a cell holding data.

DevExtreme DataGrid GridCell

A grid cell can be in a normal or editing state. The appearance of a grid cell depends on the type of data that its column contains. The following image shows how cells that belong to columns of different types look like in the normal and editing states.

DevExtreme DataGrid GridCell

Although the appearance of a grid cell is determined by its column settings, there are several grid properties that allow you to perform cell-level customizations. After a cell has been rendered, you can apply final customizations to it. For this purpose, assign a function to the onCellPrepared property. This function will be executed when the cellPrepared event fires.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    onCellPrepared: function (eventInfo) {
        // ...
    }
});

Usually, implementing the onCellPrepared function is sufficient for grid cells to appear according to your specifications. However, some scenarios require you to define grid cells in full. In that case, implement a cell template and assign it to the cellTemplate property of the column, which the cell belong to. Similarly, you can specify a template for a cell in the editing state using the editCellTemplate property. Different grid columns can have different templates specified.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    columns: [{
            dataField: 'CompanyName',
            cellTemplate: function(cellElement, cellInfo) {
                // ... 
            },
            editCellTemplate: function(cellElement, cellInfo) {
                // ...
            }
        }, {
            dataField: 'ContactName',
            cellTemplate: function(cellElement, cellInfo) {
                // ... 
            },
            editCellTemplate: function(cellElement, cellInfo) {
                // ...
            }
        }
        // ...
    ]
});

Pager

A pager is a grid element that allows a user to navigate through grid pages and change their size at runtime.

DevExtreme DataGrid Pager

As illustrated in the image above, the pager consists of a page navigator and a page size selector, both configured by the pager object.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    pager: {
        // Pager is configured here
    }
});

By default, the page navigator contains page numbers only. Clicking a page number navigates the user to that page. Additionally, the page navigator can contain buttons that navigate the user to the previous or next page. To make them visible, assign true to the showNavigationButtons property.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    pager: {
        showNavigationButtons: true
        // ...
    }
});

Moreover, you can accompany the page navigator with a text displaying information on the current page number and the total page count. To make this text visible, assign true to the showInfo property. To change this text, use the infoText property.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    pager: {
        showInfo: true,
        infoText: 'Your text goes here'
        // ...
    }
});

The page size selector contains page sizes that can be selected. They are specified by the allowedPageSizes option of the pager configuration object. Note that the page size selector is hidden by default. To make it visible, assign true to the showPageSizeSelector option of the same object.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    pager: {
        allowedPageSizes: [3, 5, 8],
        showPageSizeSelector: true,
        // ...
    }
});

Whether the pager is visible depends on whether paging is enabled. If required, you can change the visibility of the whole pager (page navigator and page size selector) explicitly using its visible property.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    pager: {
        visible: true,
        // ...
    }
});

Filter Row

A filter row is a grid element that enables users to filter grid records. The filter row consists of cells that correspond to a grid column. A filter row cell contains a filter operation chooser represented by a magnifying glass icon. Hovering over this element opens a list that permits users to change the filter applied to a column. Operations available in this list are specified by the filterOperations property of a particular column.

DevExtreme DataGrid FilterRow

To configure the filter row, use filterRow object fields.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    filterRow: {
        // Filter row is configured here
    }
});

By default, the filter row is hidden. To make it visible, set the visible property of the filterRow object to true.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    filterRow: {
        visible: true
    }
});

A filter row can have additional elements, e.g., when a column has a 'date' or 'boolean' dataType, or a column is declared as a lookup column. The image below illustrates a filter row with a date and a boolean cell. The date cell contains a calendar that helps choose a date value, while the boolean cell is a select box containing two items: true and false.

DevExtreme DataGrid FilterRow

Configurable features of the filter row, which can be specified within the filterRow object, are listed below.

  • Visibility
    In addition to the visibility of the whole filter row, which is mentioned earlier, you can individually specify the visibility of operation choosers using the showOperationChooser property.

  • Behavior
    By default, a filter applies automatically when a user finishes typing a string in a filter row cell. Alternatively, you can give a user the opportunity to apply a filter at the required time. To do this, assign 'onClick' to the applyFilter option. In this case, a filter will be applied by a click on the "Apply Filter" button.

  • Texts
    You can specify required descriptions for the items appearing in the filter list using the operationDescriptions property. A description for the reset operation should be specified separately using the resetOperationText property.

Search Panel

A search panel is a grid element that allows a user to search records by a search string. The search string is highlighted in the found records. The search panel can be thought of as a filter row cell that applies a filter to all grid columns at once.

DevExtreme DataGrid SearchPanel

Searching is performed differently in columns with different data types. To find a record by a numeric, boolean or date value, a user must enter the full value into the search panel. To find a record by a string value, entering a part of this value is sufficient.

To configure the search panel, use searchPanel object fields.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    searchPanel: {
        // Search panel is configured here
    }
});

By default, the search panel is hidden. To make it visible, set the visible property of the searchPanel object to true.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    searchPanel: {
        visible: true
    }
});

Configurable features of the search panel are listed below. Options that control them must be specified within the searchPanel object.

  • Text Highlighting
    By default, the search string is highlighted in matched records. To disable this feature, assign false to the highlightSearchText property.

  • Appearance
    The width of the search panel can be adjusted using the width property. Additionally, you can change the text displayed by an empty search panel. For this purpose, use the placeholder property.

Group Panel

To group grid records, use a group panel. A user can drag-and-drop columns onto and from it, thus grouping grid records by these columns.

DevExtreme DataGrid GroupPanel

To configure the group panel, use groupPanel object fields.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    groupPanel: {
        // Group panel is configured here
    }
});

By default, the group panel is hidden. To make it visible, set the visible property of the groupPanel object to true.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    groupPanel: {
        visible: true
    }
});

There are several additional features of the group panel that may be configured. They are listed below.

  • Blocking the Group Panel
    If required, you can prohibit drag-and-drop but leave the group panel visible. In that case, assign false to the allowColumnDragging field of the groupPanel object. This is useful, for instance, when grid records are grouped initially and when a user needs to know about that grouping but must not be able to change it.

  • Specifying a Placeholder
    You can change the text displayed by an empty group panel. Use the groupPanel | emptyPanelText property for this purpose.

When grid records are grouped, group rows are formed. To learn how to configure them, see the Group Rows topic.

Group Rows

Grouped records in a grid are headed by a group row, which contains the name of that group and helps users identify it.

DevExtreme DataGrid GroupRows

NOTE
Although group rows look like rows, internally they are treated like cells. Therefore, in dxDataGrid documentation, you are just as likely to encounter "group row" as "group cell".

A grid group can be in an expanded or collapsed state. When a group is expanded, it appears as a set of data rows headed with a group row. This state is illustrated by the image above. In the collapsed state, a group is represented by a group row only. By default, group rows appear expanded, but you may force them to appear collapsed by setting the grouping | autoExpandAll property to false. Additionally, you can prohibit the collapsing of groups. For this purpose, assign false to the grouping | allowCollapsing property.

In some cases, a grid group may be too large to fit into a grid page. If so, the group is parted, and a message notifying a user about that fact is added to the text of the group row. If you are not satisfied with that message, change it using the groupContinuedMessage and groupContinuesMessage properties of the grouping object.

Group Summary

A group summary item is a grid element that aggregates a column of data in a group. It can display the result of different calculations within the group, for example, the number of rows, sum of the column's numeric values, the minimum or maximum value, etc.

DevExtreme DataGrid GroupPanel

To define a group summary item, use the summary | groupItems array.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    summary: {
        groupItems: [{
            // Group summary item configuration
        }
        // ...
        ]
    }
});

The following features of the group summary item can be changed.

  • Location
    By default, group summary items are displayed in the header of a group row. You can also align the items by columns within the group row by setting the alignByColumn option to true. In addition, you can place items to the group footer by setting the showInGroupFooter option to true. In both these scenarios, you can place items to alternative columns by using the showInColumn option.

  • Value Format
    Use the valueFormat option to specify the kind of data that is represented by the group summary item. If you need to, you can change the precision of the calculated summary value.

  • Text Format
    To accompany the summary value with a text, use the displayFormat option. The additional calculations on the value can be performed in the customizeText function.

NOTE
To learn how to implement a group summary, refer to the Summaries | Group Summary topic.

Selection Column

When a user is allowed to select records in the multiple mode, a grid is supplemented with a selection column. This column contains a set of check boxes, each of which corresponds to a data row. Toggling a check box selects or deselects the row.

DevExtreme DataGrid SelectionColumn

The selection column appears when the selection | mode property is set to 'multiple'.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    selection: {
        mode: 'multiple'
    }
});

Additionally, a user can select/deselect all rows at once using the check box located in the header of the selection column. If this capability is not required, assign false to the selection | allowSelectAll property.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    selection: {
        // ...
        allowSelectAll: true
    }
});

Column Chooser

In dxDataGrid, a user may be capable of altering the set of presented columns at runtime. This capability is provided by a grid element called "column chooser". A column chooser is a panel that contains the headers of hidden columns in an alphabetical order. A column is considered hidden if its visible property is set to false.

JavaScript
$("#gridContainer").dxDataGrid({
    columns: [{
            dataField: 'CustomerID',
            visible: false
        },
        // ...
    ],
    // ...
});

A user can drag headers to or from the column chooser to hide or show grid columns. The column chooser can be invoked by a click on the column chooser button.

DevExtreme DataGrid ColumnChooser

The column chooser panel can either be empty or contain column headers. The images below illustrate both these states.

DevExtreme DataGrid ColumnChooser DevExtreme DataGrid ColumnChooser

To change the appearance of the column chooser, use properties of the columnChooser object.

JavaScript
$("#gridContainer").dxDataGrid({
    columnChooser: {
        // Column chooser is configured here
    }
});

The following features of the column chooser can be changed using the properties of this object.

  • Availability
    By default, a user cannot invoke the column chooser, because its enabled property is set to false. To enable it, set this property to true.

  • Size
    You can change the size of the column chooser panel using the height and width properties.

  • Texts
    If you are not satisfied with the text displayed in the title of the column chooser, change it using the title property. In addition, you can change the text displayed by the column chooser panel when it's empty. For this purpose, use the emptyPanelText property.

Load Panel

When data is taking noticeable time to be loaded, which may occur if you use a remote data source, dxDataGrid displays a load panel that notifies the user of the data loading process.

DevExtreme DataGrid LoadPanel

As you can see in the image above, the load panel consists of a loading indicator, a pane and a text. You can configure the load panel using loadPanel object properties.

JavaScript
$("#gridContainer").dxDataGrid({
    loadPanel: {
        // Load panel is configured here
    }
});

The following load panel features can be changed using the properties of the loadPanel object.

  • Availability
    By default, the load panel is enabled. If you need to disable it, assign false to its enabled property.

  • Pane Visibility
    The load panel pane is visible by default. If it is not required, hide it by assigning false to the showPane property.

  • Loading Indicator Options
    By default, the loading indicator is visible. If you require hiding it, assign false to the showIndicator property. Additionally, you can specify the image to be displayed as a loading indicator. For this purpose, assign the URL of this image to the indicatorSrc property.

  • Text
    To change the text displayed by the load panel, use its text property.

  • Size
    The size of the load panel can be changed using its width and height properties.

Data Modification Controls

dxDataGrid provides the capability to modify data it contains. Data modification can be conducted in three edit modes: row, batch and cell. In addition, data modification can be restricted to only one or several operations, e.g., editing only, or removing and insertion. These parameters are specified by properties of the editing object.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    editing: {
        editMode: 'batch', // Specifying the edit mode
        editEnabled: true, // Allowing editing
        insertEnabled: true, // Allowing insertion
        removeEnabled: true // Allowing removing
    }
});

Depending on the specified properties of the editing object, a certain set of controls is presented in a grid. For more information on these controls, see the following subtopics.

Editing in the Row Mode

This subtopic describes controls that appear in the dxDataGrid widget when the editMode property is set to "row". These controls are illustrated by the image below.

DevExtreme DataGrid Editing

Depending on the specified properties of the editing object, different controls are presented in a grid. These controls and the options that enable them are listed further.

  • editEnabled is true
    This setting supplements each grid row with the "Edit" button. Clicking this button switches the corresponding row into the editing state. At the same time, the "Save" and "Cancel" buttons appear.

  • insertEnabled is true
    This setting adds the "Add" button to the upper-right corner of the dxDataGrid widget.

  • removeEnabled is true
    This setting adds the "Delete" button to each grid row.

In addition, the text of a certain button can be changed using the fields of the editing | texts object.

Button Field
Edit editRow
Delete deleteRow
Save saveRowChanges
Cancel cancelRowChanges
Add addRow h
NOTE
The h mark designates that the property specifies text for a hint appearing when a user hovers the mouse pointer over a button, but not for that button.

Editing in the Batch Mode

This subtopic describes controls that appear in the dxDataGrid widget when the edit mode property is set to "batch". These controls are illustrated by the image below.

DevExtreme DataGrid Editing

Depending on the specified properties of the editing object, different controls are presented in a grid. These controls and the options that enable them are listed further. Note that the "Save" and "Revert" buttons appear in a grid even if only one of the editEnabled, insertEnabled or removeEnabled properties is true.

  • editEnabled is true
    No extra buttons are added.

  • insertEnabled is true
    This setting adds the "Add" button to the upper-right corner of the dxDataGrid widget.

  • removeEnabled is true
    This setting adds the "Delete" button to each grid row. When a user clicks one of these buttons, it is substituted by the "Undelete" button.

In addition, the text of a certain button can be changed using the fields of the editing | texts object (if this button is not represented by an icon).

Button Field
Delete deleteRow
Undelete saveRowChanges
Add addRow h
Save saveAllChanges h
Revert cancelAllChanges h
NOTE
The h mark designates that the property specifies the text for a hint that appears when a user hovers the mouse pointer over a button, but not for that button.

Editing in the Cell Mode

This subtopic describes controls that appear in the dxDataGrid widget when the editMode property is set to "cell". These controls are illustrated by the image below.

DevExtreme DataGrid Editing

Depending on the specified properties of the editing object, different controls are presented in a grid. These controls and the options that enable them are listed further.

  • editEnabled is true
    No extra buttons are added.

  • insertEnabled is true
    This setting adds the "Add" button to the upper-right corner of the dxDataGrid widget.

  • removeEnabled is true
    This setting adds the "Delete" button to each grid row.

In addition, the text of a certain button can be changed using the fields of the editing | texts object.

Button Field
Delete deleteRow
Add addRow h
NOTE
The h mark designates that the property specifies text for a hint that appears when a user hovers the mouse pointer over a button, but not for that button.

Total Summary

A total summary item is a grid element that aggregates the entire column of data. It can display the result of different calculations, for example, the number of rows, sum of the column's numeric values, the minimum or maximum value, etc.

Total Summary

To define a total summary item, use the summary | totalItems array.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    summary: {
        totalItems: [{
            // Total summary item configuration
        }
        // ...
        ]
    }
});

The following features of a total summary item can be changed.

  • Location
    The total summary item can be placed to another column using the showInColumn option. You can also change the text alignment.

  • Value Format
    Use the valueFormat option to specify what kind of data is represented by the total summary item. Should you require it, you can change the precision of the calculated summary value.

  • Text Format
    To accompany the summary value with a text, use the displayFormat option. Additional calculations on the value can be performed in the customizeText function.

NOTE
To learn how to implement a total summary, refer to the Summaries | Total Summary topic.

Master-Detail Interface

The master-detail interface enables you to display additional information in the expandable section of a data row. The data row is called "master row", while the section is called "detail section".

Total Summary

To learn how to use this feature, refer to the Master-Detail Interface topic.