columns[]

An array of grid columns.

Type: Array
Default Value: undefined

By default, a column is created for each field of a data source object, but in most cases, it is redundant. To specify a set of columns to be created in a grid, assign an array specifying these columns to the columns option. Each grid column is represented in this array by an object containing column settings or by a data source field that this column is bound to. Detailed information on specifying grid columns is given in the Specifying Grid Columns article.

Column options define the behavior and appearance of a grid column. One of the other capabilities allows you to control the sorting of column values using the allowSorting and sortOrder options, apply a filter to grid records using the allowFiltering and filterOperations options, and group grid records using the allowGrouping and groupIndex options. In addition, you can change the visibility and width of a column using corresponding options.

To get or set an option or several options for a column at runtime, use the columnOption method with the required arguments.

View Demo

Show Example:
AngularJS
Knockout
jQuery

In this example, grid columns are configured using the columns array. Friendlier names are specified for the headers of the "Invoice Number", "City", "State" and "Employee" columns using the caption property. The "Order Date" column has an explicitly set data type, while the contents of this column are aligned to the right side using the alignment property. The "Invoice Number" and "Employee" columns have fixed widths specified by the width property. Further, the values in the "Sale Amount" column have a currency format as determined by the format property. In addition, the values of the "Employee" column are customized using a callback function assigned to the calculateCellValue property.


                                    

                                    

In this example, grid columns are configured using the columns array. Friendlier names are specified for the headers of the "Invoice Number", "City", "State" and "Employee" columns using the caption property. The "Order Date" column has an explicitly set data type, while the contents of this column are aligned to the right side using the alignment property. The "Invoice Number" and "Employee" columns have fixed widths specified by the width property. Further, the values in the "Sale Amount" column have a currency format as determined by the format property. In addition, the values of the "Employee" column are customized using a callback function assigned to the calculateCellValue property.


                                    

                                    

In this example, grid columns are configured using the columns array. Friendlier names are specified for the headers of the "Invoice Number", "City", "State" and "Employee" columns using the caption property. The "Order Date" column has an explicitly set data type, while the contents of this column are aligned to the right side using the alignment property. The "Invoice Number" and "Employee" columns have fixed widths specified by the width property. Further, the values in the "Sale Amount" column have a currency format as determined by the format property. In addition, the values of the "Employee" column are customized using a callback function assigned to the calculateCellValue property.


                                    

                                    

alignment

Specifies the content alignment within column cells.

Type: String
Default Value: undefined
Accepted Values: undefined | "left" | "center" | "right"

Default alignment of column content depends on the type of data represented by this column. The following table illustrates default values of alignment for the columns of different data types.

dataType alignment
'number' 'right'
'boolean' 'center'
'string' 'left'
'date' 'left'
'guid' 'left'
Show Example:
AngularJS
Knockout
jQuery

In this example, the content of the "First Name" and "Last Name" columns is centered using the alignment option specified for these columns in the columns array.


                                    

                                    

In this example, the content of the "First Name" and "Last Name" columns is centered using the alignment option specified for these columns in the columns array.


                                    

                                    

In this example, the content of the "First Name" and "Last Name" columns is centered using the alignment option specified for these columns in the columns array.


                                    

                                    

allowEditing

Specifies whether the values in a column can be edited at runtime. Setting this option makes sense only when editing is enabled for a grid.

Type: Boolean
Default Value: true

If the allowEditing option is set to true for a column, values in this column can be edited by an end-user. If you set this option to false, these values cannot be edited.

NOTE
If values in a column are calculated customarily using the calculateCellValue option, they cannot be edited at runtime.
See Also

For more information on how to specify editing settings in dxDataGrid, refer to the Editing in UI topic.

Show Example:
AngularJS
Knockout
jQuery

In this example, editing is enabled in a grid using the editing | editEnabled option. However, you cannot edit values in the "Author", "Title" and "Year" columns as the allowEditing option for them is set to false.


                                    

                                    

In this example, editing is enabled in a grid using the editing | editEnabled option. However, you cannot edit values in the "Author", "Title" and "Year" columns as the allowEditing option for them is set to false.


                                    

                                    

In this example, editing is enabled in a grid using the editing | editEnabled option. However, you cannot edit values in the "Author", "Title" and "Year" columns as the allowEditing option for them is set to false.


                                    

                                    

allowFiltering

Specifies whether or not a column can be used for filtering grid records. Setting this option makes sense only when the filter row and column header filtering are visible.

Type: Boolean
Default Value: true

If the allowFiltering option is set to true for a column, the cell of the filter row that corresponds to this column becomes enabled. A user can use this cell to filter grid records by the values of the column. Filtering by specific values provided by the column's header filter becomes available as well.

See Also

For more information on how to specify filtering settings in dxDataGrid, refer to the Filtering in UI topic.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can filter grid records by values from different columns using the filter row. Note that filtering is enabled for all columns by making the filter row visible, but for the "Customer ID" column it is disabled explicitly by setting the allowFiltering option of this column to false. Try to type several symbols in a filter row cell or the search panel, and grid records will be filtered by them.


                                    

                                    

In this example, you can filter grid records by values from different columns using the filter row. Note that filtering is enabled for all columns by making the filter row visible, but for the "Customer ID" column it is disabled explicitly by setting the allowFiltering option of this column to false. Try to type several symbols in a filter row cell or the search panel, and grid records will be filtered by them.


                                    

                                    

In this example, you can filter grid records by values from different columns using the filter row. Note that filtering is enabled for all columns by making the filter row visible, but for the "Customer ID" column it is disabled explicitly by setting the allowFiltering option of this column to false. Try to type several symbols in a filter row cell or the search panel, and grid records will be filtered by them.


                                    

                                    

allowFixing

Specifies whether or not the column can be anchored to a grid edge by end users. Setting this option makes sense only when the columnFixing | enabled option is set to true.

Type: Boolean
Default Value: true

If the allowFixing option is set to true for a column, the fixing-related commands in the column's context menu are available. To hide these commands from the context menu, set the column's allowFixing option to false.

For details on fixed columns, refer to the Fixing Grid Columns topic.

allowGrouping

Specifies whether a column can be used for grouping grid records at runtime. Setting this option makes sense only when the group panel is visible.

Type: Boolean
Default Value: true

If the allowGrouping option is set to true for a column, a user can drag this column by its header onto a group panel. As a result, grid records will be grouped by the values of this column. To disable this capability for one column, set the allowGrouping option for this column to false. If you need to prevent all columns from being dragged, assign false to the groupPanel | allowColumnDragging option.

See Also

For more information on how to specify grouping settings in dxDataGrid, refer to the Grouping in UI topic.

NOTE
In a column with calculated values, this option is set to false by default.
Show Example:
AngularJS
Knockout
jQuery

In this example, grouping is enabled for the whole grid by making the group panel visible. However, grouping by the "Order ID" and "Shipped Date" columns is prohibited as the allowGrouping option is set to false for them. To group grid records by one of the other columns, drag it by the header and drop it onto the group panel.


                                    

                                    

In this example, grouping is enabled for the whole grid by making the group panel visible. However, grouping by the "Order ID" and "Shipped Date" columns is prohibited as the allowGrouping option is set to false for them. To group grid records by one of the other columns, drag it by the header and drop it onto the group panel.


                                    

                                    

In this example, grouping is enabled for the whole grid by making the group panel visible. However, grouping by the "Order ID" and "Shipped Date" columns is prohibited as the allowGrouping option is set to false for them. To group grid records by one of the other columns, drag it by the header and drop it onto the group panel.


                                    

                                    

allowHiding

Specifies whether or not a column can be hidden by a user. Setting this option makes sense only when the column chooser is visible.

Type: Boolean
Default Value: true

If the allowHiding option is set to true for a column, a user can drag this column by its header onto the column chooser panel to hide it. If this option is set to false, the column cannot be hidden by a user.

To learn more about how to invoke the column chooser, as well as the options available, refer to the columnChooser object description.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can hide grid columns by dragging their headers onto the column chooser panel. To invoke this panel, click the column chooser icon. However, the "Author", "Title" and "Year" columns cannot be hidden as the allowHiding option is set to false for them.


                                    

                                    

In this example, you can hide grid columns by dragging their headers onto the column chooser panel. To invoke this panel, click the column chooser icon. However, the "Author", "Title" and "Year" columns cannot be hidden as the allowHiding option is set to false for them.


                                    

                                    

In this example, you can hide grid columns by dragging their headers onto the column chooser panel. To invoke this panel, click the column chooser icon. However, the "Author", "Title" and "Year" columns cannot be hidden as the allowHiding option is set to false for them.


                                    

                                    

allowReordering

Specifies whether or not a particular column can be used in column reordering. Setting this option makes sense only when the allowColumnReordering option is set to true.

Type: Boolean
Default Value: true

Initially, grid columns appear in the order specified by the columns array. When this array is not specified, grid columns have the same order as the fields of the first object in the data source. A user can reorder columns if the allowColumnReordering option is set to true. If you need to prohibit using a specific column in the reordering process, set the allowReordering option of this column to false.

Show Example:
AngularJS
Knockout
jQuery

In this example, column reordering is enabled in a grid using the allowColumnReordering option. Drag a column by its header and drop it on the required place to change the order of grid columns. Note that the "Author", "Title" and "Year" columns cannot be used in reordering as the allowReordering option for them is set to false.


                                    

                                    

In this example, column reordering is enabled in a grid using the allowColumnReordering option. Drag a column by its header and drop it on the required place to change the order of grid columns. Note that the "Author", "Title" and "Year" columns cannot be used in reordering as the allowReordering option for them is set to false.


                                    

                                    

In this example, column reordering is enabled in a grid using the allowColumnReordering option. Drag a column by its header and drop it on the required place to change the order of grid columns. Note that the "Author", "Title" and "Year" columns cannot be used in reordering as the allowReordering option for them is set to false.


                                    

                                    

allowResizing

Specifies whether or not a particular column can be resized by a user. Setting this option makes sense only when the allowColumnResizing option is true.

Type: Boolean
Default Value: true

By default, the width of each grid column is calculated automatically, depending on the width of the widget's container and the total number of grid columns. To specify the width of a specific column, use the column's width option. At runtime, a user can resize columns if the allowColumnResizing option is set to true. If you need to prohibit resizing for a specific column, set the allowResizing option of this column to false.

Show Example:
AngularJS
Knockout
jQuery

In this example, grid columns can be resized by dragging their borders as the allowColumnResizing option is set to true. However, the "Title" column, which has its width specified, is restricted from being resized by setting its allowResizing option to false.


                                    

                                    

In this example, grid columns can be resized by dragging their borders as the allowColumnResizing option is set to true. However, the "Title" column, which has its width specified, is restricted from being resized by setting its allowResizing option to false.


                                    

                                    

In this example, grid columns can be resized by dragging their borders as the allowColumnResizing option is set to true. However, the "Title" column, which has its width specified, is restricted from being resized by setting its allowResizing option to false.


                                    

                                    

allowSearch

Specifies if a column can be used for searching grid records. Setting this option makes sense only when the search panel is visible.

Type: Boolean
Default Value: true

By default, searching is performed in all columns. But you can disable it in certain columns. For this purpose, set the allowSearch option to false.

See Also

For more information on how to specify filtering settings in dxDataGrid, refer to the Filtering in UI topic.

allowSorting

Specifies whether grid records can be sorted by a specific column at runtime. Setting this option makes sense only when the sorting mode differs from none.

Type: Boolean
Default Value: true
See Also

For more information on how to specify sorting settings in dxDataGrid, refer to the Sorting in UI topic.

NOTE
In a column with calculated values, this option is set to false by default.

View Demo

Show Example:
AngularJS
Knockout
jQuery

In this example, you can sort grid records by any column, except "Customer ID" and "Ship Name". For these columns, sorting is disabled using the allowSorting option set to false. To sort grid records by any other column, click its header.


                                    

                                    

In this example, you can sort grid records by any column, except "Customer ID" and "Ship Name". For these columns, sorting is disabled using the allowSorting option set to false. To sort grid records by any other column, click its header.


                                    

                                    

In this example, you can sort grid records by any column, except "Customer ID" and "Ship Name". For these columns, sorting is disabled using the allowSorting option set to false. To sort grid records by any other column, click its header.


                                    

                                    

autoExpandGroup

Specifies whether groups appear expanded or not when records are grouped by a specific column. Setting this option makes sense only when grouping is allowed for this column.

Type: Boolean
Default Value: true
See Also

To get information about expanding and collapsing groups in the dxDataGrid widget, refer to the Expanding and Collapsing Groups topic.

Show Example:
AngularJS
Knockout
jQuery

In this example, the visible group panel enables you to group records. Note that for the "Format" column, the autoExpandGroup option is set to false. Thus, when you group records by this column, the corresponding groups appear collapsed. As for other columns, this option preserves its default value - true. Thus, when you group records by these columns, the groups appear expanded.


                                    

                                    

In this example, the visible group panel enables you to group records. Note that for the "Format" column, the autoExpandGroup option is set to false. Thus, when you group records by this column, the corresponding groups appear collapsed. As for other columns, this option preserves its default value - true. Thus, when you group records by these columns, the groups appear expanded.


                                    

                                    

In this example, the visible group panel enables you to group records. Note that for the "Format" column, the autoExpandGroup option is set to false. Thus, when you group records by this column, the corresponding groups appear collapsed. As for other columns, this option preserves its default value - true. Thus, when you group records by these columns, the groups appear expanded.


                                    

                                    

calculateCellValue

Specifies a callback function that returns a value to be displayed in a column cell.

Type: function(rowData)
Function parameters:
rowData: Object
The data object represented by the current grid row.
Return Value: any
A value to be displayed within a column cell.

By default, column cells are populated with the values of the data field, which this column is associated with. However, you can provide custom data for the cells instead. To do this, implement a callback function and assign it to the calculateCellValue option of the column. This function is called when a grid row is displayed.

NOTE
If values in a column are calculated customarily, they cannot be edited at runtime. Also, in a calculated column, the sorting and grouping capabilities are disabled by default. To enable them, set the column's allowSorting and allowGrouping options to true explicitly.

When you use this option to populate a column with data, filtering and searching may perform improperly in this column. In this case, implement the calculateFilterExpression function.

Show Example:
AngularJS
Knockout
jQuery

In this example, the orders data array is presented in a grid. The "Employee" column is populated with the values that are calculated using the function specified for the column's calculateCellValue option. In this function, the employees data array is scanned until an Employee object with the ID equal to the current order's EmployeeID field value is found. The value returned by this function is a concatenation of the "TitleOfCourtesy", "FirstName" and "LastName" field values of the found Employee object.


                                    

                                    

In this example, the orders data array is presented in a grid. The "Employee" column is populated with the values that are calculated using the function specified for the column's calculateCellValue option. In this function, the employees data array is scanned until an Employee object with the ID equal to the current order's EmployeeID field value is found. The value returned by this function is a concatenation of the "TitleOfCourtesy", "FirstName" and "LastName" field values of the found Employee object.


                                    

                                    

In this example, the orders data array is presented in a grid. The "Employee" column is populated with the values that are calculated using the function specified for the column's calculateCellValue option. In this function, the employees data array is scanned until an Employee object with the ID equal to the current order's EmployeeID field value is found. The value returned by this function is a concatenation of the "TitleOfCourtesy", "FirstName" and "LastName" field values of the found Employee object.


                                    

                                    

calculateFilterExpression

Specifies a callback function that defines filters for customary calculated grid cells.

Type: function(filterValue, selectedFilterOperation)
Function parameters:
filtervalue: any
The text typed in the filter row's cell.
selectedFilterOperation: String
The currently selected filter operation.
Return Value: Array
[dataSourceField, comparisonOperator, valueToCompareWith]

When you use the calculateCellValue option to populate a column with data, you are required to implement the calculateFilterExpression callback function in order to perform filtering and searching operations in this column. This action is required, because these operations are performed on data source objects, not on grid records.

The implemented function must return an array of the following items.

1. The data source field or a function providing actual values for a grid column. Commonly, the calculateCellValue function is passed here.
2. The comparison operator. The following operators are available: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains", "notcontains".
3. The value typed into a filter row cell. The actual values will be compared to this value.

The following code snippet demonstrates a common example of implementing the calculateCellValue and calculateFilterExpression functions.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    columns: [{
        calculateCellValue: function (rowData) {
            return rowData.Amount * rowData.Cost;
        },
        calculateFilterExpression: function (filterValue, selectedFilterOperation) {
            return [this.calculateCellValue, selectedFilterOperation || '=', filterValue];
        },
        // ...
    }, //...
    ]
});

calculateGroupValue

Specifies a field name or a function that returns a field name or a value to be used for grouping column cells.

Type: String|function(rowData)
Function parameters:
rowData: Object
The data object presented by the current grid row.
Return Value: any
The calculated value to be used for grouping.

By default, grouping is conducted using the exact values that the grouping column contains. However, in some cases, this approach may be giving poor results, e.g., when a user tries to group records by a column that contains dates. In such cases, it may be preferable to use calculated values in grouping. For this purpose, assign a function to the calculateGroupValue option. This function must return the calculated value for grouping.

calculateSortValue

Specifies a field name or a function that returns a field name or a value to be used for sorting column cells.

Type: String|function(rowData)
Function parameters:
rowData: Object
The data object presented by the current grid row.
Return Value: any
The calculated value to be used for sorting.

By default, sorting is conducted using the exact values that the column contains. However, in some cases, this approach may be produce poor results. In such cases, it may be preferable to use calculated values for column cells that are to be used in sorting. For this purpose, assign a function to the calculateSortValue option. This function must return the calculated value for sorting. Alternatively, assign the name of the field whose values will be used to sort current column values.

caption

Specifies a caption for a column.

Type: String
Default Value: undefined

You can use the caption option to display a descriptive or friendly name for a column. If this option is not set, a column caption will be generated using the name of the data source field that is used to provide data for this column.

Show Example:
AngularJS
Knockout
jQuery

In this example, the caption option specifies a more friendly name for the column that holds values from the "author_of_the_book" data source field.


                                    

                                    

In this example, the caption option specifies a more friendly name for the column that holds values from the "author_of_the_book" data source field.


                                    

                                    

In this example, the caption option specifies a more friendly name for the column that holds values from the "author_of_the_book" data source field.


                                    

                                    

cellTemplate

Specifies a custom template for grid column cells.

Type: String|function(cellElement, cellInfo)|DOM Node|jQuery
Function parameters:
cellElement: jQuery
The cell under customization.
cellInfo: Object
The options of the current cell.

To represent custom data in column cells, use the cellTemplate option. Implement a callback function defining the markup of column cells and assign it to this option. This function will be invoked every time dxDataGrid re-renders itself.

When implementing the cellTemplate function, you can access the cell under customization using the function's first parameter. This parameter provides access to element-related jQuery operations. In addition, you can access the options of the cell using the fields of the function's second parameter. These fields are listed below.

  • data
    Contains the object of the data source represented by the row to which the current cell belongs.
  • value
    Contains the value of the current cell as it is specified in the data source.
  • text
    Contains the value of the current cell in a string format. Use this field to get the value with format and precision applied.
  • displayValue
    Contains the value displayed by the current cell. Differs from the value field only when the column to which the current cell belongs uses lookup.
  • columnIndex
    Contains the index of the column to which the current cell belongs. For more information on how this index is calculated, refer to the Calculating the Column Index topic.
  • rowIndex
    Contains the index of the row to which the current cell belongs. When you have several pages in a grid, grid rows are indexed beginning with 0 on each page. Note that group cells are counted as rows as well, and thus have row indexes. For further information about row indexes, see the Grid Rows topic.
  • column
    Contains the settings of the column to which the current cell belongs.
  • rowType
    Represents the type of the row to which the current cell belongs. This field equals 'data' for ordinary rows or 'group' for group rows. Use this field to distinguish rows by type.

When utilizing the Knockout or AngularJS library in your application, you can specify a cell template using the dxTemplate markup component.

See Also

It is also possible to define a cell template in markup by utilizing one of the following template engines. The above-mentioned cell settings can be accessed in a similar manner inside of the template.

Using a template engine, pass one of the following values to the cellTemplate option.

  • A jQuery object representing the template's container.
  • A DOM Node representing the template's container.
  • A function that returns a jQuery object or a DOM Node representing the template's container.

To customize a cell without defining the entire template, handle the cellPrepared event.

See Also

View Function Template Demo View Underscore Template Demo

View Demo

cssClass

Specifies a CSS class to be applied to a column.

Type: String
Default Value: undefined

In dxDataGrid, you can change the appearance of grid columns using CSS styles. To apply a style to a column, implement a CSS class, which may contain various properties, and assign the name of this class to the cssClass option of the column.

Show Example:
jQuery

In this example, a grid contains five columns each of which has an applied CSS style. The styles are applied using the cssClass option. You can change the CSS style of a column at runtime with controls located below the grid. Choose a required column using radio buttons and a CSS style using a drop-down menu. To apply the style to the column, click the "Apply Style" button. To remove a style, click the "Remove Style" button.


                                    

                                    

                                    

customizeText

Specifies a callback function that returns the text to be displayed in the cells of a column.

Type: function(cellInfo)
Function parameters:
cellInfo: Object
The value of a cell.
Object structure:
A cell value as it is specified in the data source.
valueText: String
A cell value with applied format and precision.
Return Value: String
The text to be displayed in a cell.

When implementing a callback function for this option, you can access the value of a cell using the object passed as the function's parameter. Alternatively, you can use the this object within the function. This object has the same structure as the object passed as the parameter.

Show Example:
AngularJS
Knockout
jQuery

In this example, the data source field providing data for the "Language" column contains truncated identifiers of languages, i.e., 'EN' for 'English', 'GER' for 'German', etc. To display the full names of languages instead of identifiers, a callback function is implemented and assigned to the customizeText option of the "Language" column.


                                    

                                    

In this example, the data source field providing data for the "Language" column contains truncated identifiers of languages, i.e., 'EN' for 'English', 'GER' for 'German', etc. To display the full names of languages instead of identifiers, a callback function is implemented and assigned to the customizeText option of the "Language" column.


                                    

                                    

In this example, the data source field providing data for the "Language" column contains truncated identifiers of languages, i.e., 'EN' for 'English', 'GER' for 'German', etc. To display the full names of languages instead of identifiers, a callback function is implemented and assigned to the customizeText option of the "Language" column.


                                    

                                    

dataField

Specifies the field of a data source that provides data for a column.

Type: String
Default Value: undefined

When specifying data for grid columns, you can simply assign an array of data source fields to the columns option. This approach is useful when no other options of the columns object should be specified. Otherwise, assign an array of objects representing grid columns to the columns option and specify the dataField option within each object. You can combine these approaches. For example, the following code is acceptable.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    columns: [
        'CustomerID',
        { dataField: 'EmployeeID', width: 200 },
        'OrderDate',
        { dataField: 'Freight', format: 'fixedPoint' },
        'ShipName',
        'ShipCity'
    ]
});

For more detailed information on how to specify grid columns, refer to the Specifying Grid Columns article.

Show Example:
AngularJS
Knockout
jQuery

In this example, the dataField option is used to specify data source fields for the "Title", "Position", "Birth Date" and "Hire Date" columns. Data source fields for the other columns are specified without using this option, because these columns do not require any customizations.


                                    

                                    

In this example, the dataField option is used to specify data source fields for the "Title", "Position", "Birth Date" and "Hire Date" columns. Data source fields for the other columns are specified without using this option, because these columns do not require any customizations.


                                    

                                    

In this example, the dataField option is used to specify data source fields for the "Title", "Position", "Birth Date" and "Hire Date" columns. Data source fields for the other columns are specified without using this option, because these columns do not require any customizations.


                                    

                                    

dataType

Specifies the required type of column values.

Type: String
Default Value: undefined
Accepted Values: "string" | "number" | "date" | "boolean"

The type of column values is determined based on the type of values specified in the corresponding data source field. If values from a data source are of a numeric type, column values will also be numeric. The same logic applies to values of the other types.

In some cases, you may need to convert data source values. For this purpose, specify the required type using the dataType option. For more information, see the Setting a Data Type topic.

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')
Show Example:
AngularJS
Knockout
jQuery

In this example, the data source fields providing data for the "Order Date" and "Shipped Date" columns contain values in a string format. To convert them into correct dates, set the dataType option for these columns to 'date'.


                                    

                                    

In this example, the data source fields providing data for the "Order Date" and "Shipped Date" columns contain values in a string format. To convert them into correct dates, set the dataType option for these columns to 'date'.


                                    

                                    

In this example, the data source fields providing data for the "Order Date" and "Shipped Date" columns contain values in a string format. To convert them into correct dates, set the dataType option for these columns to 'date'.


                                    

                                    

editCellTemplate

Specifies a custom template for the cell of a grid column when it is in an editing state.

Type: String|function(cellElement, cellInfo)|DOM Node|jQuery
Function parameters:
cellElement: jQuery
The cell under customization.
cellInfo: Object
The options of the current cell.

By default, when a user edits a cell, he or she changes the string value represented by it. However, there may be scenarios in which a cell has a custom appearance in its editing state. For example, you may want the cell to display a combo box with a set of values to choose from. In such cases, specify the editCellTemplate option for a column. Implement a callback function customizing the content of the column cell in its editing state and assign it to this option. This function will be invoked every time a cell within the column switches to an editing state.

When implementing the editCellTemplate function, you can access the cell being edited using the function's first parameter. This parameter provides access to element-related jQuery operations. In addition, you can access cell options using the fields of the function's second parameter. These fields are listed below.

  • data
    Contains the object of a data source represented by the row to which the currently edited cell belongs.
  • value
    Contains the value of the currently edited cell as it is specified in a data source.
  • text
    Contains the value of the currently edited cell in a string format. Use this field to get a value with a format and precision applied.
  • displayValue
    Contains the value displayed by the currently edited cell. It differs from the value field only when the column to which the current cell belongs uses lookup.
  • columnIndex
    Contains the index of the column to which the currently edited cell belongs. For more information on how this index is calculated, refer to the Calculating the Column Index topic.
  • rowIndex
    Contains the index of the row to which the currently edited cell belongs. When you have several pages in a grid, grid rows are indexed beginning with 0 on each page. Note that group cells are also counted as rows, and thus have row indexes. For further information about row indexes, see the Grid Rows topic.
  • column
    Contains the settings of the column to which the currently edited cell belongs.
  • rowType
    Represents the type of the row to which the currently edited cell belongs. This field equals 'data' for ordinary rows or 'group' for group rows. Use this field to distinguish rows by type.
  • setValue(newValue)
    A method that changes the cell value when edited. After this method is called, the cell editing process concludes. Note that calling this method means that the value of a cell is changed. In the batch edit mode, this circumstance may lead the edited cell to be highlighted even when its value was not actually changed, i.e., when a user switched a cell into the editing state and then immediately switched it back to the normal state without changing the value. To prevent this behavior, call the setValue(newValue) method only if the new value does not equal the old value, which can be accessed using the value field of the object passed to the editCellTemplate function as the second parameter.

When utilizing the Knockout or AngularJS library in your application, you can specify the template using the dxTemplate markup component.

See Also

Also, you can use a template engine to define a template for grid cells. dxDataGrid supports the following template engines. The above mentioned options can be accessed in a similar manner inside the template.

Using a template engine, pass one of the following values to the cellTemplate option.

  • A jQuery object representing the template's container.
  • A DOM Node representing the template's container.
  • A function that returns a jQuery object or a DOM Node representing the template's container.
Show Example:
AngularJS
Knockout
jQuery

In this example, the cell editing feature is implemented using a template. Click the 'Edit' link to the right of any row and the corresponding cell will be transformed into a drop-down menu with a list of options. Open this menu, choose an option and click 'Save' to modify the grid's data source.


                                    

                                    

In this example, the cell editing feature is implemented using a template. Click the 'Edit' link to the right of any row and the corresponding cell will be transformed into a drop-down menu with a list of options. Open this menu, choose an option and click 'Save' to modify the grid's data source.


                                    

                                    

In this example, the cell editing feature is implemented using a template. Click the 'Edit' link to the right of any row and the corresponding cell will be transformed into a drop-down menu with a list of options. Open this menu, choose an option and click 'Save' to modify the grid's data source.


                                    

                                    

encodeHtml

Specifies whether HTML tags are displayed as plain text or applied to the values of the column.

Type: Boolean
Default Value: true

By default, the values of a data source field are displayed in a column as plain text, which is sufficient in most cases. But if your data source contains text marked up with HTML tags, you may want these tags to be applied. In this case, set the encodeHtml property of the column to false.

Show Example:
jQuery

In this example, the values of the data source field providing data for the "Title" column contain HTML tags. Initially, these values are displayed with applied HTML tags, since the encodeHtml property of the column is set to false. You can change the value of this property at runtime by clicking the check box below the grid.


                                    

                                    

falseText

In a boolean column, replaces all false items with a specified text.

Type: String
Default Value: "false"
NOTE
This option applies only if you set the showEditorAlways option to false.

Additionally, you can specify a text to replace all true values in a column of a boolean data type. For this purpose, utilize the trueText option.

Show Example:
AngularJS
Knockout
jQuery

In this example, the "Is Discounted" column contains values of a boolean data type. The true and false values of this column are replaced by Yes and No using the trueText and falseText options. Note that the showEditorAlways option is set to false. This setting prohibits check boxes from representing boolean values.


                                    

                                    

In this example, the "Is Discounted" column contains values of a boolean data type. The true and false values of this column are replaced by Yes and No using the trueText and falseText options. Note that the showEditorAlways option is set to false. This setting prohibits check boxes from representing boolean values.


                                    

                                    

In this example, the "Is Discounted" column contains values of a boolean data type. The true and false values of this column are replaced by Yes and No using the trueText and falseText options. Note that the showEditorAlways option is set to false. This setting prohibits check boxes from representing boolean values.


                                    

                                    

filterOperations

Specifies the set of available filter operations.

Type: Array
Default Value: undefined
Accepted Values: "=" | "<>" | "<" | "<=" | ">" | ">=" | "notcontains" | "contains" | "startswith" | "endswith"

When a column can be used for filtering grid records using the filter row (i.e., when the allowFiltering option is true), you can specify filters that can be applied to this column. For this purpose, assign an array of filters chosen from the pool of accepted values to the filterOperations option.

The following table displays available filters by the data type. The same filters are assigned to the columns of a specific data type by default.

dataType filterOperations
'string' [ 'contains', 'notcontains', 'startswith', 'endswith', '=', '<>' ]
'numeric' [ '=', '<>', '<', '>', '<=', '>=' ]
'date' [ '=', '<>', '<', '>', '<=', '>=' ]

To change an applied filter at runtime, a user must click a magnifying glass icon in the corresponding cell of a filter row.

NOTE
The filterOperations option also accepts an empty array. In this case, the selected filter operation is "=" for all data types, and an end user cannot change it.
Show Example:
AngularJS
Knockout
jQuery

In this example, filtering is enabled in a grid. Each column has a default set of available filter operations, except for "Order ID", whose set is restricted to only one filter operation using the filterOperations option. Hover over the magnifying glass icon of a column to see the list of filters available for this column.


                                    

                                    

In this example, filtering is enabled in a grid. Each column has a default set of available filter operations, except for "Order ID", whose set is restricted to only one filter operation using the filterOperations option. Hover over the magnifying glass icon of a column to see the list of filters available for this column.


                                    

                                    

In this example, filtering is enabled in a grid. Each column has a default set of available filter operations, except for "Order ID", whose set is restricted to only one filter operation using the filterOperations option. Hover over the magnifying glass icon of a column to see the list of filters available for this column.


                                    

                                    

filterType

Specifies whether to include or exclude the records with the values selected in the column's header filter.

Type: String
Default Value: "include"
Accepted Values: "include" | "exclude"

filterValue

Specifies a filter value for a column.

Type: any
Default Value: undefined

Using this option, you can specify a filter value for a column at design-time as if an end-user set it using the filter row. This value is applied using a filter operation specified by the selectedFilterOperation option.

See Also

For more information about setting filtering, refer to the Filtering article.

Show Example:
AngularJS
Knockout
jQuery

In this example, grid records are initially filtered by the "Author" column using its filterValue property. Also, the grid filter row is made visible in order to enable you to change the filtering.


                                    

                                    

In this example, grid records are initially filtered by the "Author" column using its filterValue property. Also, the grid filter row is made visible in order to enable you to change the filtering.


                                    

                                    

In this example, grid records are initially filtered by the "Author" column using its filterValue property. Also, the grid filter row is made visible in order to enable you to change the filtering.


                                    

                                    

filterValues

Specifies initial filter values for the column's header filter.

Type: Array
Default Value: undefined

Using this option, you can specify filter values for a column at design-time as if an end-user set it using the header filter.

See Also

For more information about setting filtering, refer to the Filtering article.

fixed

Indicates whether the column takes part in horizontal grid scrolling or is anchored to a grid edge.

Type: Boolean
Default Value: false

Check that you set the columnFixing | enabled option to true.

For additional information about fixed columns, read the Fixing Grid Columns topic.

View Demo

fixedPosition

Specifies the grid edge to which the column is anchored.

Type: String
Default Value: undefined
Accepted Values: "left" | "right"

If the grid's columnFixing | enabled option is set to true and the column's fixed option is set to true, you can specify to which grid column the column must be anchored. For this purpose, use the fixedPosition option.

format

Specifies a format for the values displayed in a column.

Type: String
Default Value: ""
Accepted Values: "currency" | "fixedPoint" | "percent" | "decimal" | "exponential" | "largeNumber" | "thousands" | "millions" | "billions" | "trillions" | "longDate" | "longTime" | "monthAndDay" | "monthAndYear" | "quarterAndYear" | "shortDate" | "shortTime" | "millisecond" | "day" | "month" | "quarter" | "year"

Additionally, you can set a precision for the values of numeric formats using the precision option.

NOTE
If you set this option to 'currency', cell values will be formatted according to the settings specified for the current culture in the globalize library. To provide a custom 'currency' format, use the customizeText option instead.
Show Example:
AngularJS
Knockout
jQuery

In this example, the "Freight" column contains values in a 'fixedPoint' format with a precision of 2. These parameters are specified using the format and precision options of this column.


                                    

                                    

In this example, the "Freight" column contains values in a 'fixedPoint' format with a precision of 2. These parameters are specified using the format and precision options of this column.


                                    

                                    

In this example, the "Freight" column contains values in a 'fixedPoint' format with a precision of 2. These parameters are specified using the format and precision options of this column.


                                    

                                    

groupCellTemplate

Specifies a custom template for the group cell of a grid column.

Type: String|function(cellElement, cellInfo)|DOM Node|jQuery
Function parameters:
cellElement: jQuery
The cell under customization.
cellInfo: Object
The options of the current cell.

By default, a group cell displays the name of the column used for grouping combined with the value from this column by which grid records are grouped. If you need to represent custom data in a group cell, use the groupCellTemplate option. Implement a callback function customizing the content of a group cell and assign it to this option. This function will be invoked every time the column with the specified template is involved in grouping.

When implementing the groupCellTemplate function, you can access the group cell under customization using the function's first parameter. This parameter provides access to element-related jQuery operations. In addition, you can access the options of the cell using the fields of the function's second parameter. These fields are listed below.

  • data
    Contains a data object that represents data items matching a grouping key. For example, if you group grid records by country, the following object can be obtained from the data field.

    JavaScript
    {
        key: 'Spain', // The name of a country
        items: [      // Data source objects corresponding to the key
            { ... }, 
            { ... },
            // ...
        ]
    }
  • value
    Contains the value of the current group cell as it is specified in a data source.
  • text
    Contains the value of the current group cell in a string format. Use this field to get a value with applied format and precision.
  • displayValue
    Contains the value displayed by the current group cell. Differs from the value field only when the column to which the current cell belongs uses lookup.
  • columnIndex
    Contains the index of the column to which the current group cell belongs. For more information on how this index is calculated, refer to the Calculating the Column Index topic.
  • rowIndex
    Contains the index of the row that the current group cell occupies. For further information about row indexes, see the Grid Rows topic.
  • column
    Contains the settings of the column to which the current group cell belongs.
  • summaryItems
    An array of group summary items that are defined to be displayed in a group row. The array objects have the structure of the group summary items with an addition of the value (the summary item value) and columnCaption (usually used to present a summary value) fields.
  • groupContinuesMessage
    If the current group continues on the next page, this field contains a corresponding message. The value of this field equals the value of the grouping | groupContinuesMessage property. If the current group does not continue on the next page, this field equals undefined.
  • groupContinuedMessage
    If the current group is continued from the previous page, this field contains a corresponding message. The value of this field equals the value of the grouping | groupContinuedMessage property. If the current group is not continued from the previous page, this field equals undefined.

When utilizing the Knockout or AngularJS library in your application, you can specify the template using the dxTemplate markup component.

See Also

It is also possible to define a group cell template in markup. For this purpose, use one of the following template engines. The above-mentioned cell settings can be accessed in a similar manner inside the template.

Using a template engine, pass one of the following values to the cellTemplate option.

  • A jQuery object representing the template's container.
  • A DOM Node representing the template's container.
  • A function that returns a jQuery object or a DOM Node representing the template's container.
Show Example:
AngularJS
Knockout
jQuery

In this example, the font style of group cells is altered using the callback function assigned to the groupCellTemplate option of each column.


                                    

                                    

In this example, the font style of group cells is altered using the callback function assigned to the groupCellTemplate option of each column.


                                    

                                    

In this example, the font style of group cells is altered using the callback function assigned to the groupCellTemplate option of each column.


                                    

                                    

groupIndex

Specifies the index of a column when grid records are grouped by the values of this column.

Type: Number
Default Value: undefined

A user can group grid records by columns by dragging the required column to a group panel. But there may be cases when grid records must be grouped initially. To do this, assign an integer value to the groupIndex option of those columns that should be used for grouping grid records. For example, consider the following data source.

JavaScript
var dataSource = [
    { FirstName: 'John', LastName: 'Doe', Title: 'Sales Manager' },
    { FirstName: 'Michael', LastName: 'King', Title: 'Sales Representative' },
    // ...
];

To group these records first by the "LastName" field and then by the "FirstName" field, use the following code.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    columns: [
        { dataField: 'FirstName', groupIndex: 1 },
        { dataField: 'LastName', groupIndex: 0 },
        // ...
    ]
});

View Demo

Show Example:
AngularJS
Knockout
jQuery

In this example, grid records are grouped initially by the "Format" column using the groupIndex option of this column, which is set to 0. Note that the group panel is not visible, thus, initial grouping cannot be changed by a user.


                                    

                                    

In this example, grid records are grouped initially by the "Format" column using the groupIndex option of this column, which is set to 0. Note that the group panel is not visible, thus, initial grouping cannot be changed by a user.


                                    

                                    

In this example, grid records are grouped initially by the "Format" column using the groupIndex option of this column, which is set to 0. Note that the group panel is not visible, thus, initial grouping cannot be changed by a user.


                                    

                                    

headerCellTemplate

Specifies a custom template for the header of a grid column.

Type: String|function(columnHeader, headerInfo)|DOM Node|jQuery
Function parameters:
columnHeader: jQuery
The header under customization.
headerInfo: Object
The options of the current header.

If you must display custom data in the header of a grid column, use the headerCellTemplate option. Implement a callback function customizing the content of the header and assign it to this option. This function will be invoked every time dxDataGrid rerenders itself.

When implementing the headerCellTemplate function, you can access the header under customization using the function's first parameter. This parameter provides access to element-related jQuery operations. In addition, you can access the options of the header using the fields of the function's second parameter. These fields are listed below.

  • columnIndex
    Contains the index of a column that the current header belongs to. For more information on how this index is calculated, refer to the Calculating the Column Index topic.
  • column
    Contains the settings of a column that the current header belongs to.

When utilizing the Knockout or AngularJS library in your application, you can specify the template using the dxTemplate markup component.

See Also

It is also possible to define a header cell template in markup. For this purpose, use one of the following template engines. The above-mentioned cell settings can be accessed similarly inside of the template.

Using a template engine, pass one of the following values to the cellTemplate option.

  • A jQuery object representing the template's container.
  • A DOM Node representing the template's container.
  • A function that returns a jQuery object or a DOM Node representing the template's container.
Show Example:
AngularJS
Knockout
jQuery

In this example, the font size of column headers is changed using the headerCellTemplate property.


                                    

                                    

In this example, the font size of column headers is changed using the headerCellTemplate property.


                                    

                                    

In this example, the font size of column headers is changed using the headerCellTemplate property.


                                    

                                    

lookup

Specifies options of a lookup column.

Type: Object
Default Value: undefined

Use a lookup column if you need to restrict the set of values that can be chosen when a user edits or filters a grid column. In a lookup column, each cell is a drop-down menu where items represent available values. Additionally, you can use a lookup column when you need to substitute displayed values for required values.

For example, consider that you have two arrays of objects: Drivers and Buses.

JavaScript
var drivers = [
    { DriverID: 1, FirstName: 'John', LastName: 'Smith', BusID: 2 },
    { DriverID: 2, FirstName: 'Lizzy', LastName: 'Cook', BusID: 1 },
    { DriverID: 3, FirstName: 'Brian', LastName: 'Hawkins', BusID: 3 }
];

var buses = [
    { BusID: 1, Plates: '123456' },
    { BusID: 2, Plates: 'AB-1234'  },
    { BusID: 3, Plates: 'CD-9876' }
];

The objects of the Drivers array have the BusID field, which binds these two arrays together. If the Drivers array takes on the role of the main grid data source, the BusID grid column displays the IDs of buses, which do not matter to a user. In this situation, it will be more convenient to display the bus license plates specified in the Plates field. For this purpose, the Buses array must be set as a lookup data source for the BusID grid column using the lookup | dataSource option. Then, the valueExpr option must be set to "BusID" indicating the field whose values should be replaced. These values will be replaced by the values of the field specified by the displayExpr option.

JavaScript
$(function () {
    $("#gridContainer").dxDataGrid({
        dataSource: drivers,
        // ...
        columns: [
            // ...
            { dataField: 'BusID', lookup: { dataSource: buses, valueExpr: 'BusID', displayExpr: 'Plates' } },
            // ...
        ]
    });
});

With this code applied, the "BusID" grid column contains the bus license plates instead of the bus IDs. Moreover, now the user can choose a plate number using the drop-down menu in a filter row cell to filter records, or a column cell to edit this cell. If these features are not required, assign false to the allowFiltering or allowEditing column option correspondingly.

Show Example:
AngularJS
Knockout
jQuery

In this example, the "Format" is declared as a lookup column. To filter grid records by this column, use the select box appearing in this column's filter row cell. Additionally, you can edit grid records. Note that when you edit values in the "Format" column, a select box similar to the filtering one does not let you enter any values other than those represented in the select box.


                                    

                                    

In this example, the "Format" is declared as a lookup column. To filter grid records by this column, use the select box appearing in this column's filter row cell. Additionally, you can edit grid records. Note that when you edit values in the "Format" column, a select box similar to the filtering one does not let you enter any values other than those represented in the select box.


                                    

                                    

In this example, the "Format" is declared as a lookup column. To filter grid records by this column, use the select box appearing in this column's filter row cell. Additionally, you can edit grid records. Note that when you edit values in the "Format" column, a select box similar to the filtering one does not let you enter any values other than those represented in the select box.


                                    

                                    

name

Specifies the identifier of the column.

Type: String
Default Value: undefined

Specify this option if you need to refer to a column in your code afterwards, e.g., when specifying a summary item or changing a column option.

precision

Specifies a precision for formatted values displayed in a column.

Type: Number
Default Value: undefined

Assign an integer to the option responsible for the number of digits displayed within the column. This option applies only when the values in this column are of a numeric format.

Show Example:
AngularJS
Knockout
jQuery

In this example, the "Freight" column contains values in a 'fixedPoint' format with a precision of 2. These parameters are specified using the format and precision options of this column.


                                    

                                    

In this example, the "Freight" column contains values in a 'fixedPoint' format with a precision of 2. These parameters are specified using the format and precision options of this column.


                                    

                                    

In this example, the "Freight" column contains values in a 'fixedPoint' format with a precision of 2. These parameters are specified using the format and precision options of this column.


                                    

                                    

selectedFilterOperation

Specifies the default filter operation of a column.

Type: String
Default Value: undefined
Accepted Values: "=" | "<>" | "<" | "<=" | ">" | ">=" | "notcontains" | "contains" | "startswith" | "endswith"

When a column can be used for filtering grid records using the filter row (i.e., when the allowFiltering option is true), you can specify a filter that should be applied to the column. For this purpose, assign the required filter to the selectedFilterOperation option. By default, the selected filter operation is chosen on the base of the column's data type. The following table represents default filter operations by data types.

dataType Default filter operation
'string' 'contains'
'number' '='
'date' '='
'guid' '='
Show Example:
AngularJS
Knockout
jQuery

In this example, a default filter operation is specified for the "Title" column using the selectedFilterOperation property of this column.


                                    

                                    

In this example, a default filter operation is specified for the "Title" column using the selectedFilterOperation property of this column.


                                    

                                    

In this example, a default filter operation is specified for the "Title" column using the selectedFilterOperation property of this column.


                                    

                                    

showEditorAlways

Specifies whether or not the column displays its values by using editors.

Type: Boolean
Default Value: false

A grid cell has normal and editing states. In a normal state, grid cell value is ordinary text. In the editing state, a grid cell contains an editor that indicates the cell value and allows a user to edit it. However, in certain cases, the grid cell value is easier for a viewer to spot when an editor indicates that value in both normal and editing states. For example, boolean values are more comprehensible when they are indicated by check boxes. To force a column to display editors in its cells permanently, set the showEditorAlways option to true.

NOTE
The default value of this option depends on the column's data type. For boolean columns, the showEditorAlways option is true. For columns of other types, it is false.

If you use templates, setting this option to true means that the column will use editCellTemplate instead of cellTemplate to display its values.

Show Example:
AngularJS
Knockout
jQuery

In this example, the Is Discounted column contains boolean values. These values can be represented either by text or by check boxes. To change the form of representation, toggle the check box under the grid.


                                    

                                    

In this example, the Is Discounted column contains boolean values. These values can be represented either by text or by check boxes. To change the form of representation, toggle the check box under the grid.


                                    

                                    

In this example, the Is Discounted column contains boolean values. These values can be represented either by text or by check boxes. To change the form of representation, toggle the check box under the grid.


                                    

                                    

showInColumnChooser

Specifies whether or not to display the header of a hidden column in the column chooser.

Type: Boolean
Default Value: true

A grid column is considered hidden when its visible option is false. By default, the header of a hidden column is displayed in the column chooser. If you require this header to be omitted from the column chooser, set the showInColumnChooser option to false.

showWhenGrouped

Specifies whether or not to display the column when grid records are grouped by it.

Type: Boolean
Default Value: false

Displaying a grouping column may be useful if you calculate its grouping values. Consider that you need to group records by a column that contains dates. Grouping by full dates seems inconvenient. It would be smarter to group by months or years instead. For this purpose, you calculate grouping values within the calculateGroupValue function and leave the grouping column visible by setting the showWhenGrouped option to true so that the user can view the full dates.

sortIndex

Specifies the index of a column when grid records are sorted by the values of this column.

Type: Number
Default Value: undefined

A user can sort grid records by the values of columns. To do it, he or she must click the header of a required column. But there may be cases, when grid records should be sorted initially. To do this, assign an integer value to the sortIndex option of the columns that should be used for sorting grid records. For example, consider the following data source.

JavaScript
var dataSource = [
    { FirstName: 'John', LastName: 'Doe', Title: 'Sales Manager' },
    { FirstName: 'Michael', LastName: 'King', Title: 'Sales Representative' },
    // ...
];

To sort these records by the "LastName" field first and then by the "FirstName" field, use the following code.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    columns: [
        { dataField: 'FirstName', sortIndex: 1, sortOrder: 'asc' },
        { dataField: 'LastName', sortIndex: 0, sortOrder: 'asc' },
        // ...
    ]
});

Note that the sortIndex option should be used along with the sortOrder option as demonstrated in the code above. The sortOrder option specifies a sort order for the values of a column.

Show Example:
AngularJS
Knockout
jQuery

In this example, grid records appear sorted first by the "Author" column and then by the "Year" column. This sequence of applying sorting to columns is specified using the sortIndex option.


                                    

                                    

In this example, grid records appear sorted first by the "Author" column and then by the "Year" column. This sequence of applying sorting to columns is specified using the sortIndex option.


                                    

                                    

In this example, grid records appear sorted first by the "Author" column and then by the "Year" column. This sequence of applying sorting to columns is specified using the sortIndex option.


                                    

                                    

sortOrder

Specifies the initial sort order of column values.

Type: String
Default Value: undefined
Accepted Values: undefined | "asc" | "desc"

By default, records in a grid are ordered according to the data source. You can, however, set a different initial sort order for the records in one or several columns. To sort grid records by one column, specify the required order using the sortOrder option. To sort grid records by several columns, use the sortIndex option in addition to the sortOrder option.

NOTE
If you specify the sortOrder option for several columns omitting the sortIndex option, a sort index will be assigned to each sort column according to its position in the columns array.

View Demo

Show Example:
AngularJS
Knockout
jQuery

In this example, grid records are sorted initially by the "Year" column descending using the sortOrder option of this column set to 'desc'.


                                    

                                    

In this example, grid records are sorted initially by the "Year" column descending using the sortOrder option of this column set to 'desc'.


                                    

                                    

In this example, grid records are sorted initially by the "Year" column descending using the sortOrder option of this column set to 'desc'.


                                    

                                    

trueText

In a boolean column, replaces all true items with a specified text.

Type: String
Default Value: "true"
NOTE
This option applies only if you set the showEditorAlways option to false.

Additionally, you can specify a text to replace all false values in a column of a boolean data type. For this purpose, utilize the falseText option.

Show Example:
AngularJS
Knockout
jQuery

In this example, the "Is Discounted" column contains values of a boolean data type. The true and false values of this column are replaced by Yes and No using the trueText and falseText options. Note that the showEditorAlways option is set to false. This setting prohibits check boxes from indicating boolean values.


                                    

                                    

In this example, the "Is Discounted" column contains values of a boolean data type. The true and false values of this column are replaced by Yes and No using the trueText and falseText options. Note that the showEditorAlways option is set to false. This setting prohibits check boxes from indicating boolean values.


                                    

                                    

In this example, the "Is Discounted" column contains values of a boolean data type. The true and false values of this column are replaced by Yes and No using the trueText and falseText options. Note that the showEditorAlways option is set to false. This setting prohibits check boxes from indicating boolean values.


                                    

                                    

validationRules

Specifies an array of validation rules to be checked when updating column cell values.

Type: Array

You can change the validation result before it is displayed in the grid. For this purpose, handle the grid's rowValidating event.

View Demo

visible

Specifies whether a column is visible or not.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery

In this example, the "format" column is made invisible by setting its visible option to false.


                                    

                                    

In this example, the "format" column is made invisible by setting its visible option to false.


                                    

                                    

In this example, the "format" column is made invisible by setting its visible option to false.


                                    

                                    

visibleIndex

Specifies the sequence number of the column in the grid.

Type: Number
Default Value: undefined

For more information on how the visible index of a column is calculated, see the Calculating the Column Index topic.

width

Specifies a column width in pixels or percentages.

Type: Number|String
Default Value: undefined

Show Example:
AngularJS
Knockout
jQuery

In this example, the "Title" column has a large fixed width, so that long book titles can fit in a column cell.


                                    

                                    

In this example, the "Title" column has a large fixed width, so that long book titles can fit in a column cell.


                                    

                                    

In this example, the "Title" column has a large fixed width, so that long book titles can fit in a column cell.