Configuration 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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: ordersNew,
            columns: [{
                dataField: 'OrderNumber',
                width: 130,
                caption: 'Invoice Number'
            }, {
                dataField: 'OrderDate',
                dataType: 'date',
                alignment: 'right'
            }, {
                dataField: 'SaleAmount',
                format: 'currency',
            }, {
                caption: 'Employee',
                width: 150,
                calculateCellValue: calculateCellValue
            }, {
                dataField: 'CustomerStoreCity',
                caption: 'City'
            }, {
                dataField: 'CustomerStoreState',
                caption: 'State'
            }],
            paging: { pageSize: 8 }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.ordersNew = ordersNew;
        $scope.calculateCellValue = function (data) {
            return [data.EmployeePrefix, data.EmployeeFirstName, data.EmployeeLastName].join(' ');
        };
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: ordersNew,
        columns: [{
            dataField: 'OrderNumber',
            width: 130,
            caption: 'Invoice Number'
        }, {
            dataField: 'OrderDate',
            dataType: 'date',
            alignment: 'right'
        }, {
            dataField: 'SaleAmount',
            format: 'currency',
        }, {
            caption: 'Employee',
            width: 150,
            calculateCellValue: calculateCellValue
        }, {
            dataField: 'CustomerStoreCity',
            caption: 'City'
        }, {
            dataField: 'CustomerStoreState',
            caption: 'State'
        }],
        paging: { pageSize: 8 }
    }"></div>
    
    var myViewModel = {
        ordersNew: ordersNew,
        calculateCellValue: function (data) {
            return [data.EmployeePrefix, data.EmployeeFirstName, data.EmployeeLastName].join(' ');
        }
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: ordersNew,
            columns: [{
                dataField: "OrderNumber",
                width: 130,
                caption: "Invoice Number"
            }, {
                dataField: 'OrderDate',
                dataType: 'date',
                alignment: 'right'
            }, {
                dataField: "SaleAmount",
                format: "currency",
            }, {
                caption: 'Employee',
                width: 150,
                calculateCellValue: function (data) {
                    return [data.EmployeePrefix, data.EmployeeFirstName, data.EmployeeLastName].join(' ');
                }
            }, {
                dataField: 'CustomerStoreCity',
                caption: "City"
            }, {
                dataField: 'CustomerStoreState',
                caption: "State"
            }],
            paging: { pageSize: 8 }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: employees,
            columns: columns
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.employees = employees;
        $scope.columns = [
            { dataField: 'TitleOfCourtesy', caption: 'Title' },
            { dataField: 'FirstName', alignment: 'center' },
            { dataField: 'LastName', alignment: 'center' },
            { dataField: 'Title', caption: 'Position', width: 150 },
            { dataField: 'BirthDate', dataType: 'date', format: 'shortDate' },
            { dataField: 'HireDate', dataType: 'date', format: 'shortDate' }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: employees,
        columns: columns
    }"></div>
    
    var myViewModel = {
        employees: employees,
        columns: [
            { dataField: 'TitleOfCourtesy', caption: 'Title' },
            { dataField: 'FirstName', alignment: 'center' },
            { dataField: 'LastName', alignment: 'center' },
            { dataField: 'Title', caption: 'Position', width: 150 },
            { dataField: 'BirthDate', dataType: 'date', format: 'shortDate' },
            { dataField: 'HireDate', dataType: 'date', format: 'shortDate' }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: employees,
            columns: [
                { dataField: 'TitleOfCourtesy', caption: 'Title' },
                { dataField: 'FirstName', alignment: 'center' },
                { dataField: 'LastName', alignment: 'center' },
                { dataField: 'Title', caption: 'Position', width: 150 },
                { dataField: 'BirthDate', dataType: 'date', format: 'shortDate' },
                { dataField: 'HireDate', dataType: 'date', format: 'shortDate' }
            ]
        });
    });
    

    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 | allowUpdating option. However, you cannot edit values in the "Author", "Title" and "Year" columns as the allowEditing option for them is set to false.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            editing: { allowUpdating: true }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            { dataField: 'author', allowEditing: false },
            { dataField: 'title', allowEditing: false },
            { dataField: 'year', allowEditing: false },
            'genre', 'format',
            { dataField: 'price', format: 'currency', precision: 2 }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

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

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        editing: { allowUpdating: true }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            { dataField: 'author', allowEditing: false },
            { dataField: 'title', allowEditing: false },
            { dataField: 'year', allowEditing: false },
            'genre', 'format',
            { dataField: 'price', format: 'currency', precision: 2 }
        ]
    }
    ko.applyBindings(myViewModel);
    

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

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                { dataField: 'author', allowEditing: false },
                { dataField: 'title', allowEditing: false },
                { dataField: 'year', allowEditing: false },
                'genre', 'format',
                { dataField: 'price', format: 'currency', precision: 2 }
            ],
            paging: { pageSize: 8 },
            editing: { allowUpdating: true }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: orders,
            filterRow: { visible: true },
            searchPanel: { visible: true },
            columns: columns,
            paging: { pageSize: 6 }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.orders = orders;
        $scope.columns = [
            { dataField: 'OrderID', width: 100, filterOperations: [], selectedFilterOperation: '=' },
            { dataField: 'CustomerID', allowFiltering: false },
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: orders,
        filterRow: { visible: true },
        searchPanel: { visible: true },
        columns: columns,
        paging: { pageSize: 6 }
    }"></div>
    
    var myViewModel = {
        orders: orders,
        columns: [
            { dataField: 'OrderID', width: 100, filterOperations: [], selectedFilterOperation: '=' },
            { dataField: 'CustomerID', allowFiltering: false },
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            filterRow: { visible: true },
            searchPanel: { visible: true },
            columns: [
                { dataField: 'OrderID', width: 100, filterOperations: [], selectedFilterOperation: '=' },
                { dataField: 'CustomerID', allowFiltering: false },
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                'ShipName',
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            paging: { pageSize: 6 }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: orders,
            groupPanel: {
                visible: true
            },
            columns: columns,
            paging: { pageSize: 7 }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.orders = orders;
        $scope.columns = [
            { dataField: 'OrderID', allowGrouping: false },
            'CustomerID',
            { dataField: 'OrderDate', dataType: 'date', allowGrouping: false },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: orders,
        groupPanel: {
            visible: true
        },
        columns: columns,
        paging: { pageSize: 7 }
    }"></div>
    
    var myViewModel = {
        orders: orders,
        columns: [
            { dataField: 'OrderID', allowGrouping: false },
            'CustomerID',
            { dataField: 'OrderDate', dataType: 'date', allowGrouping: false },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            groupPanel: {
                visible: true
            },
            columns: [
                { dataField: 'OrderID', allowGrouping: false },
                'CustomerID',
                { dataField: 'OrderDate', dataType: 'date', allowGrouping: false },
                { dataField: 'ShippedDate', dataType: 'date' },
                'ShipName',
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            paging: { pageSize: 7 }
        });
    });
    

    allowHeaderFiltering

    Specifies whether or not to allow filtering by this column using its header.

    Type: Boolean
    Default Value: true

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 7 },
            columnChooser: { enabled: true }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            { dataField: 'author', allowHiding: false },
            { dataField: 'title', allowHiding: false },
            { dataField: 'year', allowHiding: false },
            'genre', 'format',
            { dataField: 'price', format: 'currency', precision: 2 }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 7 },
        columnChooser: { enabled: true }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            { dataField: 'author', allowHiding: false },
            { dataField: 'title', allowHiding: false },
            { dataField: 'year', allowHiding: false },
            'genre', 'format',
            { dataField: 'price', format: 'currency', precision: 2 }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                { dataField: 'author', allowHiding: false },
                { dataField: 'title', allowHiding: false },
                { dataField: 'year', allowHiding: false },
                'genre', 'format',
                { dataField: 'price', format: 'currency', precision: 2 }
            ],
            paging: { pageSize: 7 },
            columnChooser: { enabled: true }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            allowColumnReordering: true
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            { dataField: 'author', allowReordering: false },
            { dataField: 'title', allowReordering: false },
            { dataField: 'year', allowReordering: false },
            'genre', 'format',
            { dataField: 'price', format: 'currency', precision: 2 }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        allowColumnReordering: true
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            { dataField: 'author', allowReordering: false },
            { dataField: 'title', allowReordering: false },
            { dataField: 'year', allowReordering: false },
            'genre', 'format',
            { dataField: 'price', format: 'currency', precision: 2 }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                { dataField: 'author', allowReordering: false },
                { dataField: 'title', allowReordering: false },
                { dataField: 'year', allowReordering: false },
                'genre', 'format',
                { dataField: 'price', format: 'currency', precision: 2 }
            ],
            paging: { pageSize: 8 },
            allowColumnReordering: true
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            allowColumnResizing: true
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 220, allowResizing: false },
            'year', 'genre', 'format',
            { dataField: 'price', format: 'currency', precision: 2 }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        allowColumnResizing: true
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 220, allowResizing: false },
            'year', 'genre', 'format',
            { dataField: 'price', format: 'currency', precision: 2 }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 220, allowResizing: false },
                'year', 'genre', 'format',
                { dataField: 'price', format: 'currency', precision: 2 }
            ],
            paging: { pageSize: 8 },
            allowColumnResizing: true
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: orders,
            columns: columns,
            paging: { pageSize: 8 }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.orders = orders;
        $scope.columns = [
            'OrderID',
            { dataField: 'CustomerID', allowSorting: false },
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            { dataField: 'ShipName', allowSorting: false },
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: orders,
        columns: columns,
        paging: { pageSize: 8 }
    }"></div>
    
    var myViewModel = {
        orders: orders,
        columns: [
            'OrderID',
            { dataField: 'CustomerID', allowSorting: false },
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            { dataField: 'ShipName', allowSorting: false },
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            columns: [
                'OrderID',
                { dataField: 'CustomerID', allowSorting: false },
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                { dataField: 'ShipName', allowSorting: false },
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            paging: { pageSize: 8 }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            groupPanel: { visible: true }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author', 'title',
            { dataField: 'year', width: 60 },
            'genre',
            { dataField: 'format', autoExpandGroup: false }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        groupPanel: { visible: true }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author', 'title',
            { dataField: 'year', width: 60 },
            'genre',
            { dataField: 'format', autoExpandGroup: false }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author', 'title',
                { dataField: 'year', width: 60 },
                'genre',
                { dataField: 'format', autoExpandGroup: false }
            ],
            paging: { pageSize: 8 },
            groupPanel: { visible: true }
        });
    });
    

    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 be performed improperly in this column. In such a case, implement the calculateFilterExpression function.

    NOTE: To invoke the default behavior, call the this.defaultCalculateCellValue(rowData) function and return its result.

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: orders,
            columns: columns,
            paging: { pageSize: 8 }
        }"></div>
    </div>
    
    var employeesByKey = {};
    
    $(function () {
        for (var i = 0; i < employees.length; i++) {
            employeesByKey[employees[i].EmployeeID] = employees[i];
        };
    });
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.orders = orders;
        $scope.columns = [
            'CustomerID',
            {
                caption: 'Employee',
                width: 170,
                calculateCellValue: function (data) {
                    var employee = employeesByKey[data.EmployeeID];
                    return [employee.TitleOfCourtesy, employee.FirstName, employee.LastName].join(' ');
                }
            },
            { dataField: 'OrderDate', dataType: 'date' },
            'Freight',
            'ShipName',
            { dataField: 'ShipCity', caption: 'Ship To' }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: orders,
        columns: columns,
        paging: { pageSize: 8 }
    }"></div>
    
    var employeesByKey = {};
    
    $(function () {
        for (var i = 0; i < employees.length; i++) {
            employeesByKey[employees[i].EmployeeID] = employees[i];
        };
    });
    
    var myViewModel = {
        orders: orders,
        columns: [
            'CustomerID',
            {
                caption: 'Employee',
                width: 170,
                calculateCellValue: function (data) {
                    var employee = employeesByKey[data.EmployeeID];
                    return [employee.TitleOfCourtesy, employee.FirstName, employee.LastName].join(' ');
                }
            },
            { dataField: 'OrderDate', dataType: 'date' },
            'Freight',
            'ShipName',
            { dataField: 'ShipCity', caption: 'Ship To' }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    var employeesByKey = {};
    
    $(function () {
        for (var i = 0; i < employees.length; i++) {
            employeesByKey[employees[i].EmployeeID] = employees[i];
        };
    });
    
    $("#gridContainer").dxDataGrid({
        dataSource: orders,
        columns: [
            'CustomerID',
            {
                caption: 'Employee',
                width: 170,
                calculateCellValue: function (data) {
                    var employee = employeesByKey[data.EmployeeID];
                    return [employee.TitleOfCourtesy, employee.FirstName, employee.LastName].join(' ');
                }
            },
            { dataField: 'OrderDate', dataType: 'date' },
            'Freight',
            'ShipName',
            { dataField: 'ShipCity', caption: 'Ship To' }
        ],
        paging: { pageSize: 8 }
    });
    

    calculateDisplayValue

    Specifies how to get a value to be displayed in a cell when it is not in an editing state.

    Type: String| function(rowData)
    Function parameters:
    rowData: Object
    The object representing the grid row to which the cell belongs.
    Return Value: any
    A value to be displayed in a cell.

    If the grid data source contains the values that you wish to display, assign the dataField value of the required column to this option. If the values you want to display can be calculated using the values of several columns, or can be acquired from a remote data source, assign a function to this option.

    calculateFilterExpression

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

    Type: function(filterValue, selectedFilterOperation, target)
    Function parameters:
    filtervalue: any
    The text typed in the filter row's cell.
    selectedFilterOperation: String
    The currently selected filter operation.
    target: String
    Identifies the type of the filtering UI element where the filter expression was set.
    Possible values: "filterRow", "headerFilter" and "search".
    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 search 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: "=", "<>", ">", ">=", "<", "<=", "between", "startswith", "endswith", "contains", "notcontains".
    3. The value typed into a filter row cell. The actual values will be compared to this value.

    NOTE: The 'between' comparison operator is not supported on the data source level. If you need to use it, create a filter expression of the following format: [[selector, ">=", startValue], "and", [selector, "<=", endValue]] (see the code below). In case the selected filter operation is 'between', the filterValue field of the calculateFilterExpression function is an array containing the start and end values of the specified range.

    The following code snippet demonstrates an example of calculateCellValue and calculateFilterExpression function implementation.

    JavaScript
    $("#gridContainer").dxDataGrid({
        // ...
        columns: [{
            calculateCellValue: function (rowData) {
                return rowData.Amount * rowData.Cost;
            },
            calculateFilterExpression: function (filterValue, selectedFilterOperation) {
                // The way of implementation in case of the 'between' comparison operator
                /*if(selectedFilterOperation === "between" && $.isArray(filterValue)) {
                    var filterExpression = [
                        [this.calculateCellValue, ">=", filterValue[0]], 
                        "and", 
                        [this.calculateCellValue, "<=", filterValue[1]]
                    ];
                    return filterExpression;
                }*/
                return [this.calculateCellValue, selectedFilterOperation || '=', filterValue];
            },
            // ...
        }, //...
        ]
    });

    NOTE: To invoke the default behavior, call the this.defaultCalculateFilterExpression(filterValue, selectedFilterOperation) function and return its result.

    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 produce poor results. In such cases, it may be preferable to use calculated values for column cells 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.

    For more information, refer to the Sorting in Code topic.

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: dataSource,
            columns: [
                { dataField: 'author_of_the_book', caption: 'Author' },
                { dataField: 'title', width: 210 },
                'year',
                'genre',
                'format'
            ]
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.dataSource = [
            { author_of_the_book: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi', format: 'hardcover' },
            { author_of_the_book: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi', format: 'e-book' },
            { author_of_the_book: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction', format: 'hardcover' },
            { author_of_the_book: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel', format: 'e-book' },
            { author_of_the_book: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction', format: 'hardcover' },
            { author_of_the_book: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi', format: 'e-book' },
            { author_of_the_book: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, genre: 'Novel', format: 'paperback' },
            { author_of_the_book: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman', format: 'paperback' },
            { author_of_the_book: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction', format: 'paperback' },
            { author_of_the_book: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners', format: 'paperback' }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: dataSource,
        columns: [
            { dataField: 'author_of_the_book', caption: 'Author' },
            { dataField: 'title', width: 210 },
            'year',
            'genre',
            'format'
        ]
    }"></div>
    
    var myViewModel = {
        dataSource: [
            { author_of_the_book: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi', format: 'hardcover' },
            { author_of_the_book: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi', format: 'e-book' },
            { author_of_the_book: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction', format: 'hardcover' },
            { author_of_the_book: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel', format: 'e-book' },
            { author_of_the_book: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction', format: 'hardcover' },
            { author_of_the_book: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi', format: 'e-book' },
            { author_of_the_book: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, genre: 'Novel', format: 'paperback' },
            { author_of_the_book: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman', format: 'paperback' },
            { author_of_the_book: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction', format: 'paperback' },
            { author_of_the_book: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners', format: 'paperback' }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: [
                { author_of_the_book: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi', format: 'hardcover' },
                { author_of_the_book: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi', format: 'e-book' },
                { author_of_the_book: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction', format: 'hardcover' },
                { author_of_the_book: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel', format: 'e-book' },
                { author_of_the_book: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction', format: 'hardcover' },
                { author_of_the_book: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi', format: 'e-book' },
                { author_of_the_book: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, genre: 'Novel', format: 'paperback' },
                { author_of_the_book: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman', format: 'paperback' },
                { author_of_the_book: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction', format: 'paperback' },
                { author_of_the_book: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners', format: 'paperback' }
            ],
            columns: [
                { dataField: 'author_of_the_book', caption: 'Author' },
                { dataField: 'title', width: 210 },
                'year',
                'genre',
                'format'
            ]
        });
    });
    
    

    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.

    NOTE: 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 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.

    NOTE: If you implement two-way data binding in your template, make sure that you have switched off the built-in implementation of this feature by setting the twoWayBindingEnabled option to false.

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

    View Function Template Demo View Underscore Template 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.

    <div id="gridContainer" style="height:380px; max-width:800px; margin: 0 auto"></div>
    <div class="forDiv">
        Choose a column: 
        <input type="radio" name="columnIndex" value="0" checked/> Author 
        <input type="radio" name="columnIndex" value="1" /> Title 
        <input type="radio" name="columnIndex" value="2" /> Year 
        <input type="radio" name="columnIndex" value="3" /> Genre 
        <input type="radio" name="columnIndex" value="4" /> Format <br />
        Choose a color for text:
        <select id="styleSelector">
            <option value="red">red</option>
            <option value="green">green</option>
            <option value="blue">blue</option>
            <option value="purple">purple</option>
            <option value="gray">gray</option>
        </select><br />
        <input type="button" id="applyCssClassButton" style="margin: 5px" value="Apply Style" />
        <input type="button" id="removeCssClassButton" style="margin: 5px" value="Remove Style" />
    </div>
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                { dataField: 'author', cssClass: 'red' },
                { dataField: 'title', width: 210, cssClass: 'green' },
                { dataField: 'year', cssClass: 'blue' },
                { dataField: 'genre', cssClass: 'purple' },
                { dataField: 'format', cssClass: 'gray' }
            ],
            paging: { pageSize: 8 }
        });
    
        $('#applyCssClassButton').click(function () {
            var selectedColumnIndex = +$("input[name='columnIndex']:checked").val();
            var styleToBeApplied = $("#styleSelector").val();
            var grid = $('#gridContainer').dxDataGrid('instance');
            grid.columnOption(selectedColumnIndex, 'cssClass', styleToBeApplied);
        });
    
        $('#removeCssClassButton').click(function () {
            var selectedColumnIndex = +$("input[name='columnIndex']:checked").val();
            var grid = $('#gridContainer').dxDataGrid('instance');
            grid.columnOption(selectedColumnIndex, 'cssClass', undefined);
        });
    });
    
    .forDiv {
        margin: 5px auto;
        text-align: center
    }
    .red {
        color: red
    }
    .green {
        color: green
    }
    .blue {
        color: blue
    }
    .purple {
        color: purple
    }
    .gray {
        color: gray
    }

    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.
    target: String
    Indicates the type of the UI element where the customizeText function was called.
    Possible values: "filterRow", "headerFilter" and "search".
    groupInterval: String|Number
    Indicates how header filter values were combined into groups. Available if target is "headerFilter".
    For possible values, see the description of the headerFilter | groupInterval option.
    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.

    NOTE: The customizeText callback is also called when data displayed in the column matches the search condition to properly highlight the matching text.

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format',
            {
                dataField: 'language',
                customizeText: function (cellInfo) {
                    switch (cellInfo.value) {
                        case 'EN':
                            return 'English'
                            break;
                        case 'GER':
                            return 'German'
                            break;
                        case 'RU':
                            return 'Russian'
                            break;
                    }
                }
            }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format',
            {
                dataField: 'language',
                customizeText: function (cellInfo) {
                    switch (cellInfo.value) {
                        case 'EN':
                            return 'English'
                            break;
                        case 'GER':
                            return 'German'
                            break;
                        case 'RU':
                            return 'Russian'
                            break;
                    }
                }
            }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format',
                {
                    dataField: 'language',
                    customizeText: function (cellInfo) {
                        switch (cellInfo.value) {
                            case 'EN':
                                return 'English'
                                break;
                            case 'GER':
                                return 'German'
                                break;
                            case 'RU':
                                return 'Russian'
                                break;
                        }
                    }
                }
            ],
            paging: { pageSize: 8 }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: employees,
            columns: columns
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.employees = employees;
        $scope.columns = [
            { dataField: 'TitleOfCourtesy', caption: 'Title' },
            'FirstName',
            'LastName',
            { dataField: 'Title', caption: 'Position', width: 150 },
            { dataField: 'BirthDate', dataType: 'date', format: 'shortDate' },
            { dataField: 'HireDate', dataType: 'date', format: 'shortDate' }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: employees,
        columns: columns
    }"></div>
    
    var myViewModel = {
        employees: employees,
        columns: [
            { dataField: 'TitleOfCourtesy', caption: 'Title' },
            'FirstName',
            'LastName',
            { dataField: 'Title', caption: 'Position', width: 150 },
            { dataField: 'BirthDate', dataType: 'date', format: 'shortDate' },
            { dataField: 'HireDate', dataType: 'date', format: 'shortDate' }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: employees,
            columns: [
                { dataField: 'TitleOfCourtesy', caption: 'Title' },
                'FirstName',
                'LastName',
                { dataField: 'Title', caption: 'Position', width: 150 },
                { dataField: 'BirthDate', dataType: 'date', format: 'shortDate' },
                { dataField: 'HireDate', dataType: 'date', format: 'shortDate' }
            ]
        });
    });
    

    dataType

    Specifies the required type of column values.

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

    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'.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: orders,
            columns: columns,
            paging: { pageSize: 8 }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.orders = orders;
        $scope.columns = [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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'.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: orders,
        columns: columns,
        paging: { pageSize: 8 }
    }"></div>
    
    var myViewModel = {
        orders: orders,
        columns: [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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'.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            columns: [
                'OrderID', 'CustomerID',
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                'ShipName',
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            paging: { pageSize: 8 }
        });
    });
    

    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.

    NOTE: 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 editCellTemplate 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.

    NOTE: If you implement two-way data binding in your template, make sure that you have switched off the built-in implementation of this feature by setting the twoWayBindingEnabled option to false.

    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.

    <div style="height:440px; max-width:750px; margin: 0 auto" ng-controller="MyCtrl">
        <div dx-data-grid="{
            dataSource: [{ id: 1 }, { id: 2 }, { id: 3 }],
            columns: [{
                dataField: 'id',
                lookup: {
                    dataSource: items,
                    valueExpr: 'id',
                    displayExpr: 'name'
                },
                editCellTemplate: 'myTemplate'
            }],
            editing: {
                mode: 'row',
                allowUpdating: true
            }
        }">
            <div data-options="dxTemplate:{ name:'myTemplate' }">
                <div dx-lookup="{
                        dataSource: $parent.items, 
                        valueExpr: 'id',
                        displayExpr: 'name',
                        onValueChanged: $parent.valueChangeAction
                    }">
                </div>
            </div>
        </div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller('MyCtrl', ['$scope', function ($scope) {
        $scope.items = [{ id: 1, name: 'Item1' }, { id: 2, name: 'Item2' }, { id: 3, name: 'Item3' }];
        $scope.valueChangeAction = function (e) {
            this.setValue(e.value);
        };
    }]);
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:440px; max-width:750px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: [{ id: 1 }, { id: 2 }, { id: 3 }],
        columns: [{
            dataField: 'id',
            lookup: {
                dataSource: items,
                valueExpr: 'id',
                displayExpr: 'name'
            },
            editCellTemplate: 'myTemplate'
        }],
        editing: {
            mode: 'row',
            allowUpdating: true
        }
    }">
        <div data-options="dxTemplate:{ name:'myTemplate' }">
            <div data-bind="dxLookup: {
                    dataSource: $root.items,
                    valueExpr: 'id',
                    displayExpr: 'name',
                    onValueChanged: function (e) {
                        setValue(e.value);
                    }
                }">
            </div>
        </div>
    </div>
    
    var viewModel = {
        items: [{ id: 1, name: 'Item1' }, { id: 2, name: 'Item2' }, { id: 3, name: 'Item3' }]
    }
    ko.applyBindings(viewModel);
    

    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.

    <div id="gridContainer" style="height:440px; max-width:750px; margin: 0 auto"></div>
    
    $(function () {
        var items = [{ id: 1, name: 'Item1' }, { id: 2, name: 'Item2' }, { id: 3, name: 'Item3' }];
        $("#gridContainer").dxDataGrid({
            dataSource: [{ id: 1 }, { id: 2 }, { id: 3 }],
            columns: [{
                dataField: 'id',
                lookup: {
                    dataSource: items,
                    valueExpr: 'id',
                    displayExpr: 'name'
                },
                editCellTemplate: function (cellElement, cellInfo) {
                    var div = document.createElement("div");
                    cellElement.get(0).appendChild(div);
                    $(div).dxLookup({
                        dataSource: items,
                        valueExpr: 'id',
                        displayExpr: 'name',
                        onValueChanged: function (e) {
                            cellInfo.setValue(e.value);
                        }
                    });
                }
            }],
            editing: {
                mode: 'row',
                allowUpdating: true
            }
        });
    });
    

    editorOptions

    Specifies configuration options for the editor widget of the current column.

    Type: Object

    NOTE: If you specify the onValueChanged handler for the editor, the DataGrid will not save the value changed after editing the current cell. Instead, implement the onEditorPreparing handler.

    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.

    <div id="gridContainer" style="height:340px; max-width:750px; margin: 0 auto"></div>
    <div style="text-align:center">
        <div id="encodeHtmlCheckbox" style="height:25px; width:auto"></div>
    </div>
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: [
                { author: 'D. Adams', title: "<i>The Hitchhiker's Guide to the Galaxy</i>", year: 1979, genre: 'Comedy, sci-fi', format: 'hardcover' },
                { author: 'K. Vonnegut', title: "<i>Cat's Cradle</i>", year: 1963, genre: 'Satire, sci-fi', format: 'e-book' },
                { author: 'M. Mitchell', title: "<i>Gone with the Wind</i>", year: 1936, genre: 'Historical fiction', format: 'hardcover' },
                { author: 'H. Lee', title: "<i>To Kill a Mockingbird</i>", year: 1960, genre: 'Novel', format: 'e-book' },
                { author: 'G. Orwell', title: "<i>Nineteen Eighty-Four</i>", year: 1949, genre: 'Dystopian novel, political fiction', format: 'hardcover' },
                { author: 'R. Bradbury', title: "<i>The Martian Chronicles</i>", year: 1950, genre: 'Sci-fi', format: 'e-book' },
                { author: 'K. Vonnegut', title: "<i>God Bless You, Mr. Rosewater, or Pearls Before Swine</i>", year: 1965, genre: 'Novel', format: 'paperback' },
                { author: 'J. D. Salinger', title: "<i>The Catcher in the Rye</i>", year: 1951, genre: 'Bildungsroman', format: 'paperback' },
                { author: 'C. Dickens', title: "<i>Great Expectations</i>", year: 1861, genre: 'Realistic fiction', format: 'paperback' },
                { author: 'J. Austen', title: "<i>Pride and Prejudice</i>", year: 1813, genre: 'Novel of manners', format: 'paperback' }
            ],
            columns: [
                'author',
                { dataField: 'title', encodeHtml: false },
                { dataField: 'year', width: 70 },
                'genre', 'format'
            ],
            paging: { pageSize: 7 }
        });
    
        $("#encodeHtmlCheckbox").dxCheckBox({
            value: false,
            text: 'Encode HTML',
            onValueChanged: function (info) {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.columnOption('title', 'encodeHtml', info.value);
            }
        });
    });

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: dataSource,
            columns: columns,
            scrolling: { mode: 'standard' }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.dataSource = [
            { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, format: 'hardcover', price: 12.43, isDiscounted: true },
            { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, format: 'e-book', price: 7.21, isDiscounted: false },
            { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, format: 'hardcover', price: 29.84, isDiscounted: false },
            { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, format: 'e-book', price: 4.73, isDiscounted: true },
            { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, format: 'hardcover', price: 15.53, isDiscounted: false },
            { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, format: 'e-book', price: 4.5, isDiscounted: false },
            { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, format: 'paperback', price: 4.95, isDiscounted: true },
            { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, format: 'paperback', price: 4.56, isDiscounted: true },
            { author: 'C. Dickens', title: "Great Expectations", year: 1861, format: 'paperback', price: 2.41, isDiscounted: true },
            { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, format: 'paperback', price: 8.28, isDiscounted: false }
        ];
        $scope.columns = [
            'author', 'title',
            { dataField: 'year', width: 60 },
            'format',
            { dataField: 'price', format: 'currency', precision: 2 },
            { dataField: 'isDiscounted', falseText: 'No', trueText: 'Yes', showEditorAlways: false }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: dataSource,
        columns: columns,
        scrolling: { mode: 'standard' }
    }"></div>
    
    var myViewModel = {
        dataSource: [
            { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, format: 'hardcover', price: 12.43, isDiscounted: true },
            { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, format: 'e-book', price: 7.21, isDiscounted: false },
            { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, format: 'hardcover', price: 29.84, isDiscounted: false },
            { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, format: 'e-book', price: 4.73, isDiscounted: true },
            { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, format: 'hardcover', price: 15.53, isDiscounted: false },
            { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, format: 'e-book', price: 4.5, isDiscounted: false },
            { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, format: 'paperback', price: 4.95, isDiscounted: true },
            { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, format: 'paperback', price: 4.56, isDiscounted: true },
            { author: 'C. Dickens', title: "Great Expectations", year: 1861, format: 'paperback', price: 2.41, isDiscounted: true },
            { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, format: 'paperback', price: 8.28, isDiscounted: false }
        ],
        columns: [
            'author', 'title',
            { dataField: 'year', width: 60 },
            'format',
            { dataField: 'price', format: 'currency', precision: 2 },
            { dataField: 'isDiscounted', falseText: 'No', trueText: 'Yes', showEditorAlways: false }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: [
                { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, format: 'hardcover', price: 12.43, isDiscounted: true },
                { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, format: 'e-book', price: 7.21, isDiscounted: false },
                { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, format: 'hardcover', price: 29.84, isDiscounted: false },
                { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, format: 'e-book', price: 4.73, isDiscounted: true },
                { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, format: 'hardcover', price: 15.53, isDiscounted: false },
                { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, format: 'e-book', price: 4.5, isDiscounted: false },
                { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, format: 'paperback', price: 4.95, isDiscounted: true },
                { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, format: 'paperback', price: 4.56, isDiscounted: true },
                { author: 'C. Dickens', title: "Great Expectations", year: 1861, format: 'paperback', price: 2.41, isDiscounted: true },
                { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, format: 'paperback', price: 8.28, isDiscounted: false }
            ],
            columns: [
                'author', 'title',
                { dataField: 'year', width: 60 },
                'format',
                { dataField: 'price', format: 'currency', precision: 2 },
                { dataField: 'isDiscounted', falseText: 'No', trueText: 'Yes', showEditorAlways: false }
            ],
            scrolling: { mode: 'standard' }
        });
    });
    

    filterOperations

    Specifies the set of available filter operations.

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

    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' [ '=', '<>', '<', '>', '<=', '>=', 'between' ]
    'date' [ '=', '<>', '<', '>', '<=', '>=', 'between' ]

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: orders,
            columns: columns,
            paging: { pageSize: 7 },
            filterRow: { visible: true }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.orders = orders;
        $scope.columns = [
            { dataField: 'OrderID', filterOperations: ['='] },
            'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: orders,
        columns: columns,
        paging: { pageSize: 7 },
        filterRow: { visible: true }
    }"></div>
    
    var myViewModel = {
        orders: orders,
        columns: [
            { dataField: 'OrderID', filterOperations: ['='] },
            'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            columns: [
                { dataField: 'OrderID', filterOperations: ['='] },
                'CustomerID',
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                'ShipName',
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            paging: { pageSize: 7 },
            filterRow: { visible: true }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            filterRow: { visible: true },
            paging: { pageSize: 7 }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            { dataField: 'author', filterValue: 'Bradbury' },
            'title',
            { dataField: 'year', width: 70 },
            'genre', 'format'
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        filterRow: { visible: true },
        paging: { pageSize: 7 }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            { dataField: 'author', filterValue: 'Bradbury' },
            'title',
            { dataField: 'year', width: 70 },
            'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                { dataField: 'author', filterValue: 'Bradbury' },
                'title',
                { dataField: 'year', width: 70 },
                'genre', 'format'
            ],
            filterRow: { visible: true },
            paging: { pageSize: 7 }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: orders,
            columns: columns,
            paging: { pageSize: 8 }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.orders = orders;
        $scope.columns = [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            { dataField: 'Freight', format: 'fixedPoint', precision: 2 },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: orders,
        columns: columns,
        paging: { pageSize: 8 }
    }"></div>
    
    var myViewModel = {
        orders: orders,
        columns: [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            { dataField: 'Freight', format: 'fixedPoint', precision: 2 },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            columns: [
                'OrderID', 'CustomerID',
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                { dataField: 'Freight', format: 'fixedPoint', precision: 2 },
                'ShipName',
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            paging: { pageSize: 8 }
        });
    });
    

    formItem

    The form item configuration object. Used only when the editing mode is "form".

    If your grid contains groups or other comprehensive elements that have no representation in the columns array, use the form | items object to configure them.

    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.

    NOTE: 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 groupCellTemplate 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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: orders,
            columns: columns,
            customizeColumns: customizeColumns,
            paging: { pageSize: 8 }
            
        }"></div>
    </div>
    
    var groupCellTemplate = function (groupCell, info) {
        $('<div>').html(info.text).css('font-style', 'italic').appendTo(groupCell);
    };
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.orders = orders;
        $scope.columns = [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            { dataField: 'Freight', format: 'fixedPoint', precision: 2 },
            { dataField: 'ShipName', groupIndex: 1 },
            { dataField: 'ShipCountry', caption: 'Ship To', groupIndex: 0 }
        ];
        $scope.customizeColumns = function (columns) {
            $.each(columns, function (_, element) {
                element.groupCellTemplate = groupCellTemplate;
            });
        };
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

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

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: orders,
        columns: columns,
        customizeColumns: customizeColumns,
        paging: { pageSize: 8 }
        
    }"></div>
    
    var groupCellTemplate = function (groupCell, info) {
        $('<div>').html(info.text).css('font-style', 'italic').appendTo(groupCell);
    };
    
    var myViewModel = {
        orders: orders,
        columns: [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            { dataField: 'Freight', format: 'fixedPoint', precision: 2 },
            { dataField: 'ShipName', groupIndex: 1 },
            { dataField: 'ShipCountry', caption: 'Ship To', groupIndex: 0 }
        ],
        customizeColumns: function (columns) {
            $.each(columns, function (_, element) {
                element.groupCellTemplate = groupCellTemplate;
            });
        }
    }
    ko.applyBindings(myViewModel);
    

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

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    var groupCellTemplate = function (groupCell, info) {
        $('<div>').html(info.text).css('font-style', 'italic').appendTo(groupCell);
    };
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            columns: [
                'OrderID', 'CustomerID',
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                { dataField: 'Freight', format: 'fixedPoint', precision: 2 },
                { dataField: 'ShipName', groupIndex: 1 },
                { dataField: 'ShipCountry', caption: 'Ship To', groupIndex: 0 }
            ],
            customizeColumns: function (columns) {
                $.each(columns, function (_, element) {
                    element.groupCellTemplate = groupCellTemplate;
                });
            },
            paging: { pageSize: 8 }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 }
            
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre',
            { dataField: 'format', groupIndex: 0 }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 }
        
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre',
            { dataField: 'format', groupIndex: 0 }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre',
                { dataField: 'format', groupIndex: 0 }
            ],
            paging: { pageSize: 8 }
        });
    });
    

    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.

    NOTE: 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 headerCellTemplate 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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: orders,
            columns: columns,
            customizeColumns: customizeColumns,
            paging: { pageSize: 8 }
            
        }"></div>
    </div>
    
    var headerTemplate = function (header, info) {
        $('<div>').html(info.column.caption).css('font-size', '16px').appendTo(header);
    };
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.orders = orders;
        $scope.columns = [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            { dataField: 'Freight', format: 'fixedPoint', precision: 2 },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ];
        $scope.customizeColumns = function (columns) {
            $.each(columns, function (_, element) {
                element.headerCellTemplate = headerTemplate;
            });
        };
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

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

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: orders,
        columns: columns,
        customizeColumns: customizeColumns,
        paging: { pageSize: 8 }
        
    }"></div>
    
    var headerTemplate = function (header, info) {
        $('<div>').html(info.column.caption).css('font-size', '16px').appendTo(header);
    };
    
    var myViewModel = {
        orders: orders,
        columns: [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            { dataField: 'Freight', format: 'fixedPoint', precision: 2 },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ],
        customizeColumns: function (columns) {
            $.each(columns, function (_, element) {
                element.headerCellTemplate = headerTemplate;
            });
        }
    }
    ko.applyBindings(myViewModel);
    

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

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    var headerTemplate = function (header, info) {
        $('<div>').html(info.column.caption).css('font-size', '16px').appendTo(header);
    };
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            columns: [
                'OrderID', 'CustomerID',
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                { dataField: 'Freight', format: 'fixedPoint', precision: 2 },
                'ShipName',
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            customizeColumns: function (columns) {
                $.each(columns, function (_, element) {
                    element.headerCellTemplate = headerTemplate;
                });
            },
            paging: { pageSize: 8 }
        });
    });
    

    headerFilter

    Specifies column-level options for filtering using a column header filter.

    Type: Object
    Default Value: undefined

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre',
                { dataField: 'formatID', caption: 'Format', lookup: { dataSource: formats, valueExpr: 'id', displayExpr: 'format' } }
            ],
            paging: { pageSize: 7 },
            filterRow: { visible: true },
            editing: { allowUpdating: true }
        }"></div>
    </div>
    
    var books = [
       { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman', formatID: 2 },	
       { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi', formatID: 1 },
       { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi', formatID: 3 },
       { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, genre: 'Novel', formatID: 2 },
       { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction', formatID: 1 },
       { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel', formatID: 3 },
       { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction', formatID: 1 },
       { author: 'G. Grass', title: "The Tin Drum", year: 1959, genre: 'Speculative fiction', formatID: 1 },
       { author: 'R. Bradbury', title: "Dandelion Wine", year: 1957, genre: 'Novel', formatID: 3 },
       { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi', formatID: 3 },
       { author: 'R. Bradbury', title: "Fahrenheit 451", year: 1953, genre: 'Dystopian novel', formatID: 2 },	
       { author: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction', formatID: 2 },
       { author: 'F. Scott Fitzgerald', title: "The Great Gatsby", year: 1925, genre: 'Novel', formatID: 1 },
       { author: 'E. Hemingway', title: "For Whom the Bell Tolls", year: 1940, genre: 'War novel', formatID: 3 },
       { author: 'E. Hemingway', title: "Farewell to Arms", year: 1929, genre: 'War novel', formatID: 3 },
       { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners', formatID: 2 }
    ];
    
    var formats = [
        { id: 1, format: 'hardcover' },
        { id: 2, format: 'paperback' },
        { id: 3, format: 'e-book' },
    ];
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.formats = formats;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre',
            { dataField: 'formatID', caption: 'Format', lookup: { dataSource: formats, valueExpr: 'id', displayExpr: 'format' } }
        ],
        paging: { pageSize: 7 },
        filterRow: { visible: true },
        editing: { allowUpdating: true }
    }"></div>
    
    var books = [
       { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman', formatID: 2 },	
       { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi', formatID: 1 },
       { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi', formatID: 3 },
       { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, genre: 'Novel', formatID: 2 },
       { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction', formatID: 1 },
       { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel', formatID: 3 },
       { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction', formatID: 1 },
       { author: 'G. Grass', title: "The Tin Drum", year: 1959, genre: 'Speculative fiction', formatID: 1 },
       { author: 'R. Bradbury', title: "Dandelion Wine", year: 1957, genre: 'Novel', formatID: 3 },
       { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi', formatID: 3 },
       { author: 'R. Bradbury', title: "Fahrenheit 451", year: 1953, genre: 'Dystopian novel', formatID: 2 },	
       { author: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction', formatID: 2 },
       { author: 'F. Scott Fitzgerald', title: "The Great Gatsby", year: 1925, genre: 'Novel', formatID: 1 },
       { author: 'E. Hemingway', title: "For Whom the Bell Tolls", year: 1940, genre: 'War novel', formatID: 3 },
       { author: 'E. Hemingway', title: "Farewell to Arms", year: 1929, genre: 'War novel', formatID: 3 },
       { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners', formatID: 2 }
    ];
    
    var formats = [
        { id: 1, format: 'hardcover' },
        { id: 2, format: 'paperback' },
        { id: 3, format: 'e-book' },
    ];
    
    var myViewModel = {
        books: books,
        formats: formats
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    var books = [
       { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman', formatID: 2 },	
       { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi', formatID: 1 },
       { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi', formatID: 3 },
       { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, genre: 'Novel', formatID: 2 },
       { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction', formatID: 1 },
       { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel', formatID: 3 },
       { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction', formatID: 1 },
       { author: 'G. Grass', title: "The Tin Drum", year: 1959, genre: 'Speculative fiction', formatID: 1 },
       { author: 'R. Bradbury', title: "Dandelion Wine", year: 1957, genre: 'Novel', formatID: 3 },
       { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi', formatID: 3 },
       { author: 'R. Bradbury', title: "Fahrenheit 451", year: 1953, genre: 'Dystopian novel', formatID: 2 },	
       { author: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction', formatID: 2 },
       { author: 'F. Scott Fitzgerald', title: "The Great Gatsby", year: 1925, genre: 'Novel', formatID: 1 },
       { author: 'E. Hemingway', title: "For Whom the Bell Tolls", year: 1940, genre: 'War novel', formatID: 3 },
       { author: 'E. Hemingway', title: "Farewell to Arms", year: 1929, genre: 'War novel', formatID: 3 },
       { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners', formatID: 2 }
    ];
    
    var formats = [
        { id: 1, format: 'hardcover' },
        { id: 2, format: 'paperback' },
        { id: 3, format: 'e-book' },
    ];
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre',
                { dataField: 'formatID', caption: 'Format', lookup: { dataSource: formats, valueExpr: 'id', displayExpr: 'format' } }
            ],
            paging: { pageSize: 7 },
            filterRow: { visible: true },
            editing: { allowUpdating: true }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: orders,
            columns: columns,
            paging: { pageSize: 8 }
            
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.orders = orders;
        $scope.columns = [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            { dataField: 'Freight', format: 'fixedPoint', precision: 2 },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: orders,
        columns: columns,
        paging: { pageSize: 8 }
        
    }"></div>
    
    var myViewModel = {
        orders: orders,
        columns: [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            { dataField: 'Freight', format: 'fixedPoint', precision: 2 },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            columns: [
                'OrderID', 'CustomerID',
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                { dataField: 'Freight', format: 'fixedPoint', precision: 2 },
                'ShipName',
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            paging: { pageSize: 8 }
        });
    });
    

    selectedFilterOperation

    Specifies the default filter operation of a column.

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

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 7 },
            filterRow: { visible: true } 
            
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210, selectedFilterOperation: 'startswith' },
            'year', 'genre', 'format'
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

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

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 7 },
        filterRow: { visible: true } 
        
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210, selectedFilterOperation: 'startswith' },
            'year', 'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

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

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210, selectedFilterOperation: 'startswith' },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 7 },
            filterRow: { visible: true }
        });
    });
    

    setCellValue

    Specifies a callback function to be invoked after the cell value is edited by an end-user and before the new value is saved to the data source.

    Type: function(rowData, value)
    Function parameters:
    rowData: Object
    The data object represented by the current grid row.
    value: any
    The inputted value.

    Use this function if you need to process an end-user data input. The value inputted by an end-user is passed to this function as a value parameter. Process this value as your needs dictate and assign the result to the corresponding rowData option. You can also make changes in other row values.

    NOTE: To invoke the default behavior, call the this.defaultSetCellValue(rowData, value) function.

    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.

    <div ng-controller="demoController" style="text-align:center; height:390px; max-width:630px; margin: 0 auto">
        <div style="height:360px" dx-data-grid="{
            dataSource: dataSource,
            columns: columns,
            scrolling: { mode: 'standard' },
            onContentReady: getDataGrid
        }"></div>
        <div dx-check-box="{
            text: 'Show Editors',
            value: true,
            bindingOptions: {
                onValueChanged: 'onValueChanged'
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.dataSource = [
            { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, format: 'hardcover', price: 12.43, isDiscounted: true },
            { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, format: 'e-book', price: 7.21, isDiscounted: false },
            { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, format: 'hardcover', price: 29.84, isDiscounted: false },
            { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, format: 'e-book', price: 4.73, isDiscounted: true },
            { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, format: 'hardcover', price: 15.53, isDiscounted: false },
            { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, format: 'e-book', price: 4.5, isDiscounted: false },
            { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, format: 'paperback', price: 4.95, isDiscounted: true },
            { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, format: 'paperback', price: 4.56, isDiscounted: true },
            { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, format: 'paperback', price: 8.28, isDiscounted: false }
        ];
        $scope.columns = [
            'author', 'title',
            { dataField: 'year', width: 60 },
            'format',
            { dataField: 'price', format: 'currency', precision: 2 },
            { dataField: 'isDiscounted', showEditorAlways: true }
        ];
        $scope.dataGrid = null;
        $scope.getDataGrid = function (e) { dataGrid = e.component };
        $scope.onValueChanged = function (info) {
            dataGrid.columnOption('isDiscounted', 'showEditorAlways', info.value);
        };
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="text-align:center; height:390px; max-width:630px; margin: 0 auto">
        <div style="height:360px" data-bind="dxDataGrid: {
            dataSource: dataSource,
            columns: columns,
            scrolling: { mode: 'standard' },
            onContentReady: getDataGrid
        }"></div>
        <div data-bind="dxCheckBox: {
            text: 'Show Editors',
            value: true,
            onValueChanged: onValueChanged
        }"></div>
    </div>
    
    var myViewModel = {
        dataSource: [
            { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, format: 'hardcover', price: 12.43, isDiscounted: true },
            { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, format: 'e-book', price: 7.21, isDiscounted: false },
            { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, format: 'hardcover', price: 29.84, isDiscounted: false },
            { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, format: 'e-book', price: 4.73, isDiscounted: true },
            { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, format: 'hardcover', price: 15.53, isDiscounted: false },
            { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, format: 'e-book', price: 4.5, isDiscounted: false },
            { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, format: 'paperback', price: 4.95, isDiscounted: true },
            { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, format: 'paperback', price: 4.56, isDiscounted: true },
            { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, format: 'paperback', price: 8.28, isDiscounted: false }
        ],
        columns: [
            'author', 'title',
            { dataField: 'year', width: 60 },
            'format',
            { dataField: 'price', format: 'currency', precision: 2 },
            { dataField: 'isDiscounted', showEditorAlways: true }
        ],
        dataGrid: null,
        getDataGrid: function (e) { dataGrid = e.component },
        onValueChanged: function (info) {
            dataGrid.columnOption('isDiscounted', 'showEditorAlways', info.value);
        }
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div style="text-align:center; height:390px; max-width:630px; margin: 0 auto">
        <div id="gridContainer" style="height:360px;"></div>
        <div id="showEditorsCheckbox"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: [
                { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, format: 'hardcover', price: 12.43, isDiscounted: true },
                { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, format: 'e-book', price: 7.21, isDiscounted: false },
                { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, format: 'hardcover', price: 29.84, isDiscounted: false },
                { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, format: 'e-book', price: 4.73, isDiscounted: true },
                { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, format: 'hardcover', price: 15.53, isDiscounted: false },
                { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, format: 'e-book', price: 4.5, isDiscounted: false },
                { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, format: 'paperback', price: 4.95, isDiscounted: true },
                { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, format: 'paperback', price: 4.56, isDiscounted: true },
                { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, format: 'paperback', price: 8.28, isDiscounted: false }
            ],
            columns: [
                'author', 'title',
                { dataField: 'year', width: 60 },
                'format',
                { dataField: 'price', format: 'currency', precision: 2 },
                { dataField: 'isDiscounted', showEditorAlways: true }
            ],
            scrolling: { mode: 'standard' }
        });
    
        $("#showEditorsCheckbox").dxCheckBox({
            text: 'Show Editors',
            value: true,
            onValueChanged: function (info) {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.columnOption('isDiscounted', 'showEditorAlways', info.value);
            }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            { dataField: 'author', sortIndex: 0, sortOrder: 'asc' },
            { dataField: 'title', width: 210 },
            { dataField: 'year', sortIndex: 1, sortOrder: 'asc' },
            'genre', 'format'
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            { dataField: 'author', sortIndex: 0, sortOrder: 'asc' },
            { dataField: 'title', width: 210 },
            { dataField: 'year', sortIndex: 1, sortOrder: 'asc' },
            'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                { dataField: 'author', sortIndex: 0, sortOrder: 'asc' },
                { dataField: 'title', width: 210 },
                { dataField: 'year', sortIndex: 1, sortOrder: 'asc' },
                'genre', 'format'
            ],
            paging: { pageSize: 8 }
        });
    });
    

    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'.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            { dataField: 'year', sortOrder: 'desc' },
            'genre', 'format'
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

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

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            { dataField: 'year', sortOrder: 'desc' },
            'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

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

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                { dataField: 'year', sortOrder: 'desc' },
                'genre', 'format'
            ],
            paging: { pageSize: 8 }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: dataSource,
            columns: columns,
            scrolling: { mode: 'standard' }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.dataSource = [
            { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, format: 'hardcover', price: 12.43, isDiscounted: true },
            { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, format: 'e-book', price: 7.21, isDiscounted: false },
            { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, format: 'hardcover', price: 29.84, isDiscounted: false },
            { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, format: 'e-book', price: 4.73, isDiscounted: true },
            { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, format: 'hardcover', price: 15.53, isDiscounted: false },
            { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, format: 'e-book', price: 4.5, isDiscounted: false },
            { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, format: 'paperback', price: 4.95, isDiscounted: true },
            { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, format: 'paperback', price: 4.56, isDiscounted: true },
            { author: 'C. Dickens', title: "Great Expectations", year: 1861, format: 'paperback', price: 2.41, isDiscounted: true },
            { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, format: 'paperback', price: 8.28, isDiscounted: false }
        ];
        $scope.columns = [
            'author', 'title',
            { dataField: 'year', width: 60 },
            'format',
            { dataField: 'price', format: 'currency', precision: 2 },
            { dataField: 'isDiscounted', falseText: 'No', trueText: 'Yes', showEditorAlways: false }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: dataSource,
        columns: columns,
        scrolling: { mode: 'standard' }
    }"></div>
    
    var myViewModel = {
        dataSource: [
            { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, format: 'hardcover', price: 12.43, isDiscounted: true },
            { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, format: 'e-book', price: 7.21, isDiscounted: false },
            { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, format: 'hardcover', price: 29.84, isDiscounted: false },
            { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, format: 'e-book', price: 4.73, isDiscounted: true },
            { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, format: 'hardcover', price: 15.53, isDiscounted: false },
            { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, format: 'e-book', price: 4.5, isDiscounted: false },
            { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, format: 'paperback', price: 4.95, isDiscounted: true },
            { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, format: 'paperback', price: 4.56, isDiscounted: true },
            { author: 'C. Dickens', title: "Great Expectations", year: 1861, format: 'paperback', price: 2.41, isDiscounted: true },
            { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, format: 'paperback', price: 8.28, isDiscounted: false }
        ],
        columns: [
            'author', 'title',
            { dataField: 'year', width: 60 },
            'format',
            { dataField: 'price', format: 'currency', precision: 2 },
            { dataField: 'isDiscounted', falseText: 'No', trueText: 'Yes', showEditorAlways: false }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: [
                { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, format: 'hardcover', price: 12.43, isDiscounted: true },
                { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, format: 'e-book', price: 7.21, isDiscounted: false },
                { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, format: 'hardcover', price: 29.84, isDiscounted: false },
                { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, format: 'e-book', price: 4.73, isDiscounted: true },
                { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, format: 'hardcover', price: 15.53, isDiscounted: false },
                { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, format: 'e-book', price: 4.5, isDiscounted: false },
                { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, format: 'paperback', price: 4.95, isDiscounted: true },
                { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, format: 'paperback', price: 4.56, isDiscounted: true },
                { author: 'C. Dickens', title: "Great Expectations", year: 1861, format: 'paperback', price: 2.41, isDiscounted: true },
                { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, format: 'paperback', price: 8.28, isDiscounted: false }
            ],
            columns: [
                'author', 'title',
                { dataField: 'year', width: 60 },
                'format',
                { dataField: 'price', format: 'currency', precision: 2 },
                { dataField: 'isDiscounted', falseText: 'No', trueText: 'Yes', showEditorAlways: false }
            ],
            scrolling: { mode: 'standard' }
        });
    });
    

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: dataSource,
            columns: columns
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.dataSource = [
            { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi', format: 'hardcover' },
            { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi', format: 'e-book' },
            { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction', format: 'hardcover' },
            { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel', format: 'e-book' },
            { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction', format: 'hardcover' },
            { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi', format: 'e-book' },
            { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, genre: 'Novel', format: 'paperback' },
            { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman', format: 'paperback' },
            { author: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction', format: 'paperback' },
            { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners', format: 'paperback' }
        ];
        $scope.columns = [
            'author', 'title', 'year', 'genre',
            { dataField: 'format', visible: false }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

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

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: dataSource,
        columns: columns
    }"></div>
    
    var myViewModel = {
        dataSource: [
            { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi', format: 'hardcover' },
            { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi', format: 'e-book' },
            { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction', format: 'hardcover' },
            { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel', format: 'e-book' },
            { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction', format: 'hardcover' },
            { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi', format: 'e-book' },
            { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, genre: 'Novel', format: 'paperback' },
            { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman', format: 'paperback' },
            { author: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction', format: 'paperback' },
            { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners', format: 'paperback' }
        ],
        columns: [
            'author', 'title', 'year', 'genre',
            { dataField: 'format', visible: false }
        ]
    }
    ko.applyBindings(myViewModel);
    

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

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: [
                { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi', format: 'hardcover' },
                { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi', format: 'e-book' },
                { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction', format: 'hardcover' },
                { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel', format: 'e-book' },
                { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction', format: 'hardcover' },
                { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi', format: 'e-book' },
                { author: 'K. Vonnegut', title: "God Bless You, Mr. Rosewater, or Pearls Before Swine", year: 1965, genre: 'Novel', format: 'paperback' },
                { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman', format: 'paperback' },
                { author: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction', format: 'paperback' },
                { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners', format: 'paperback' }
            ],
            columns: [
                'author', 'title', 'year', 'genre',
                { dataField: 'format', visible: 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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: dataSource,
            columns: columns
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.dataSource = [
            { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi', format: 'hardcover' },
            { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi', format: 'e-book' },
            { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction', format: 'hardcover' },
            { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel', format: 'e-book' },
            { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction', format: 'hardcover' },
            { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi', format: 'e-book' },
            { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman', format: 'paperback' },
            { author: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction', format: 'paperback' },
            { author: 'E. Hemingway', title: "For Whom the Bell Tolls", year: 1940, genre: 'War novel', format: 'e-book' },
            { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners', format: 'paperback' }
        ];
        $scope.columns = [
            'author',
            { dataField: 'title', width: 250 },
            'year', 'genre', 'format'
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

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

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: dataSource,
        columns: columns
    }"></div>
    
    var myViewModel = {
        dataSource: [
            { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi', format: 'hardcover' },
            { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi', format: 'e-book' },
            { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction', format: 'hardcover' },
            { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel', format: 'e-book' },
            { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction', format: 'hardcover' },
            { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi', format: 'e-book' },
            { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman', format: 'paperback' },
            { author: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction', format: 'paperback' },
            { author: 'E. Hemingway', title: "For Whom the Bell Tolls", year: 1940, genre: 'War novel', format: 'e-book' },
            { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners', format: 'paperback' }
        ],
        columns: [
            'author',
            { dataField: 'title', width: 250 },
            'year', 'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

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

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: [
                { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi', format: 'hardcover' },
                { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi', format: 'e-book' },
                { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction', format: 'hardcover' },
                { author: 'H. Lee', title: "To Kill a Mockingbird", year: 1960, genre: 'Novel', format: 'e-book' },
                { author: 'G. Orwell', title: "Nineteen Eighty-Four", year: 1949, genre: 'Dystopian novel, political fiction', format: 'hardcover' },
                { author: 'R. Bradbury', title: "The Martian Chronicles", year: 1950, genre: 'Sci-fi', format: 'e-book' },
                { author: 'J. D. Salinger', title: 'The Catcher in the Rye', year: 1951, genre: 'Bildungsroman', format: 'paperback' },
                { author: 'C. Dickens', title: "Great Expectations", year: 1861, genre: 'Realistic fiction', format: 'paperback' },
                { author: 'E. Hemingway', title: "For Whom the Bell Tolls", year: 1940, genre: 'War novel', format: 'e-book' },
                { author: 'J. Austen', title: "Pride and Prejudice", year: 1813, genre: 'Novel of manners', format: 'paperback' }
            ],
            columns: [
                'author',
                { dataField: 'title', width: 250 },
                'year', 'genre', 'format'
            ]
        });
    })