Available in the Full Version

Data Grid - Excel-style Filtering

This sample demonstrates how to use EditorProviderCombo to customize the filtering fields.
Show
records
Product NameUnits In StockCategory
Chai39Beverages
Chang17Beverages
Aniseed Syrup13Condiments
Chef Anton's Cajun Seasoning53Condiments
Chef Anton's Gumbo Mix0Condiments
Grandma's Boysenberry Spread120Condiments
Uncle Bob's Organic Dried Pears15Produce
Northwoods Cranberry Sauce6Condiments
Mishi Kobe Niku29Meat/Poultry
Ikura31Seafood

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

EditorProviderCombo is used in the Category column input field to enable filtering using combo with multiple selection and checkboxes enabled.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
    <table id="productsGrid"></table>
    <script src="/data-files/nw-products.js"></script>
    <script>$(function () {
            let uniqueCategoriesSet = new Set();
            let uniqueCategories = [];

            northwindProducts.forEach(function (product) {
                uniqueCategoriesSet.add(product.CategoryName)
            });

            uniqueCategoriesSet.forEach(function (item) {
                uniqueCategories.push(item);
            });

            $.ig.CustomComboEditorProvider = $.ig.CustomComboEditorProvider || $.ig.EditorProviderCombo.extend({
                setSize: function (width, height) {
                    this.editor.element.css({
                        width: width,
                        height: height
                    });
                },
                getValue: function () {
                    return this.editor.value();
                },
                destroy: function () {
                    this.editor.element.remove();
                }
            });

            $("#productsGrid").igGrid({
                autoGenerateColumns: false,
                width: '100%',
                columns: [
                { headerText: "Product Name", key: "ProductName", dataType: "string" },
                { headerText: "Units In Stock", key: "InStock", dataType: "number" },
                { headerText: "Category", key: "CategoryName", dataType: "string" }
                ],
                dataSource: northwindProducts,
                responseDataKey: "results",
                autoCommit: true,
                features: [
                {
                    name: "Sorting",
                    sortingDialogContainment: "window"
                },
                {
                    name: "Filtering",
                    type: "local",
                    columnSettings: [
                    {
                        columnKey: "CategoryName",
                        conditionList: [
                            "equals"
                        ],
                        editorProvider: new $.ig.CustomComboEditorProvider(),
                        editorOptions: {
                            dataSource: uniqueCategories,
                            allowCustomValue: false,
                            autoComplete: true,
                            multiSelection: {
                                enabled: true,
                                showCheckboxes: true,
                                itemSeparator: ', '
                            }
                        }
                    }
                    ]
                },
                {
                    name: "Paging",
                    pageSize: 10
                }
                ]
            });
        });</script>
</body>
</html>