Configuration filterRow

    Specifies filter row options.

    Type: Object

    In dxDataGrid, an end-user can filter grid records at runtime using the filter row. This row is located below the grid row that contains column captions. By default, the filter row is hidden. To make it appear, set the visible option of the filterRow object to true.

    To filter grid records by a value in a grid column, the user must enter the required value (or a part of it) in the filter row cell that belongs to this column. The matched records are determined according to the column's currently selected filter operation. To change this operation, the user must click the magnifying glass icon accompanying each filter row cell and choose the required filter operation from the appeared drop-down list.

    See Also
    • For more information about filtering, refer to the Filtering topic.
    • To discover how to apply a filter from code, see the Filtering in Code topic.

    View Demo

    Show Example:
    jQuery

    In this example, the filter row is made visible by setting the filterRow | visible option to true. In addition, a filter operation is selected for each grid column from code using the selectedFilterOperation option. This operation can not be changed at runtime, because the filterRow | showOperationChooser option is set to false.

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

    applyFilter

    Specifies when to apply a filter.

    Type: String
    Default Value: "auto"
    Accepted Values: "auto" | "onClick"

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

    View Demo

    Show Example:
    jQuery

    In this example, the applyFilter option is set to 'onClick'. This setting supplies the grid with the "Apply Filter" button. Type a text in any filter row cell and then click the "Apply Filter" button to apply filtering.

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

    applyFilterText

    Specifies text for the hint that pops up when a user hovers the mouse pointer over the "Apply Filter" button.

    Type: String
    Default Value: "Apply filter"

    operationDescriptions

    Specifies descriptions for filter operations.

    Type: Object
    Default Value: { "=": "Equals", "<>": "Does not equal", "<": "Less than", "<=": "Less than or equal to", ">": "Greater than", ">=": "Greater than or equal to", "startswith": "Starts with", "contains": "Contains", "notcontains": "Does not contain", "endswith": "Ends with" }

    When a user selects a filter operation, he or she uses the drop-down list of available operations that appears by a click on the magnifying glass icon in a filter row cell. Each operation in this list is represented by an icon symbolizing this operation and a descriptive text. Filter operations have descriptive texts specified by default, but if you are not satisfied with them, you can adjust them as required using the operationDescriptions option. This option accepts an object, wherein filter operations are associated with their descriptions. For example, in the following code, the description of the "startswith" filter operation is set to "Begins with".

    JavaScript
    $("#gridContainer").dxDataGrid({
        // ...
        filterRow: {
            // ...
            operationDescriptions: {
                'startswith': 'Begins with'
            }
        }
    });

    Note that if you do not have specified descriptions for all filter operations, the unspecified ones will have default descriptions.

    Show Example:
    jQuery

    In this example, you can change descriptions of filter operations at runtime using the set of controls under the grid. Choose a filter operation, whose textual representation must be changed, from the drop-down menu. Then, enter a required description for this operation into the textbox. To assign the description to the operation, click the "Change Description" button. To see the changes, hover over the filter operation chooser of any column.

    <div id="gridContainer" style="height:350px; max-width:800px; margin: 0 auto"></div>
    <div style="margin:5px;text-align:center">
        Choose a filter operation:
        <select id="filterOperationSelector">
            <option value="=">=</option>
            <option value="<>"><></option>
            <option value="<"><</option>
            <option value="<="><=</option>
            <option value=">">></option>
            <option value=">=">>=</option>
            <option value="startswith">startswith</option>
            <option value="contains">contains</option>
            <option value="notcontains">notcontains</option>
            <option value="endswith">endswith</option>
        </select><br />
        <input type="text" id="operationDescription" style="margin:5px" size="45" placeholder="Enter a description for the chosen operation"/><br />
        <input type="button" id="changeDescriptionButton" style="margin:5px" value="Change Description" />
    </div>
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            columns: [
                'OrderID', 'CustomerID',
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                'ShipName',
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            pager: { visible: false },
            scrolling: { mode: 'infinite' },
            filterRow: { visible: true }
        });
    
        $('#changeDescriptionButton').click(function () {
            var filterOperation = $("#filterOperationSelector").val();
            var description = $("#operationDescription").val();
            var operationDescriptions = {};
            operationDescriptions[filterOperation] = description;
            var dataGrid = $('#gridContainer').dxDataGrid('instance');
            dataGrid.option({
                filterRow: {
                    operationDescriptions: operationDescriptions
                }
            });
        });
    });

    resetOperationText

    Specifies text for the reset operation in a filter list.

    Type: String
    Default Value: "Reset"

    The reset operation restores the default filter operation for a column. This operation depends on the type of data held by this column. The following table represents default filter operations by data types.

    dataType Default filter operation
    'string' 'contains'
    'number' '='
    'date' '='
    'guid' '='

    Reset is available from the drop-down list of available filters in a filter row cell. You can change the descriptive text that represents the reset operation in this list by specifying the resetOperationText option.

    Show Example:
    jQuery

    In this example, the filterRow | resetOperationText option is used to alter the text that represents the reset operation in a filter list. To see the altered text, hover over the filter operation chooser of any grid column.

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

    showAllText

    Specifies text for the operation of clearing the applied filter when a select box is used.

    Type: String
    Default Value: "(All)"

    When a column holds boolean values or uses lookup, a select box is used to filter grid records. Selecting an item in this select box filters grid records by this item. To clear the selection, a user must select the "All" item in the select box. You can specify a custom text for this item using the showAllText option.

    Show Example:
    jQuery

    In this example, "Format" is declared as a lookup column. To filter grid records by this column, use the select box that occupies the filter row cell of this column. Note that in this select box, the operation of clearing the applied filter is represented by the '(Show All)' item. Text for this item is set using the filterRow | showAllText option.

    <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,
                showAllText: '(Show All)'
            }
        });
    });

    showOperationChooser

    Specifies whether or not an icon that allows the user to choose a filter operation is visible.

    Type: Boolean
    Default Value: true

    Show Example:
    jQuery

    In this example, you can change the visibility of the operation chooser at runtime using the check box below the grid.

    <div id="gridContainer" style="height:380px; max-width:800px; margin: 0 auto"></div>
    <div id="checkboxContainer" style="height:20px;margin:5px auto;text-align:center">
        <input type="checkbox" id="showOperationChooserCheckbox" checked> Show Operation Chooser
    </div>
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            columns: [
                { dataField: 'OrderID', width: 100, filterOperations: [], selectedFilterOperation: '=' },
                'CustomerID',
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                'ShipName',
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            pager: { visible: false },
            scrolling: { mode: 'infinite' },
            filterRow: { visible: true }
        });
    
        $('#showOperationChooserCheckbox').change(function () {
            var dataGrid = $('#gridContainer').dxDataGrid('instance');
            dataGrid.option({
                filterRow: { showOperationChooser: this.checked }
            });
        });
    });

    visible

    Specifies whether the filter row is visible or not.

    Type: Boolean
    Default Value: false

    Show Example:
    jQuery

    In this example, you can change the visibility of the filter row at runtime using the check box below the grid.

    <div id="gridContainer" style="height:380px; max-width:800px; margin: 0 auto"></div>
    <div id="checkboxContainer" style="height:20px;margin:5px auto;text-align:center">
        <input type="checkbox" id="showFilterRowCheckbox" checked> Show Filter Row
    </div>
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            columns: [
                { dataField: 'OrderID', width: 100, filterOperations: [], selectedFilterOperation: '=' },
                'CustomerID',
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                'ShipName',
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            pager: { visible: false },
            scrolling: { mode: 'infinite' },
            filterRow: { visible: true }
        });
    
        $('#showFilterRowCheckbox').change(function () {
            var dataGrid = $('#gridContainer').dxDataGrid('instance');
            dataGrid.option({
                filterRow: { visible: this.checked }
            });
        });
    });