Wijmo UI for the Web
Use Custom Filtering
Wijmo User Guide > Widgets > Grid > Grid Concepts > Filtering > Use Custom Filtering

Wijgrid also allows you to create custom filters based on your specified events, such as a custom button click. Building on the Quick Start example, you can create a custom filter using the filterValue and filterOperator options.

The script below allows you to add custom filter functions on the second of the grid columns (Nationality) using the filterValue and filterOperator options.

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
             showFilter: true,
             data: [
                [0, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Nationality"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    });
    function clearFilter() {
        var cols = $("#wijgrid").wijgrid("option", "columns");
        cols[1].filterValue = null;
        cols[1].filterOperator = "noFilter";
        $("#wijgrid").wijgrid("option", "columns", cols);
    }

    function canada() {
        var cols = $("#wijgrid").wijgrid("option", "columns");
        cols[1].filterValue = "Canada";
        cols[1].filterOperator = "Equals";
        $("#wijgrid").wijgrid("option", "columns", cols);
    }

    function us() {
        var cols = $("#wijgrid").wijgrid("option", "columns");
        cols[1].filterValue = "United States";
        cols[1].filterOperator = "Equals";
        $("#wijgrid").wijgrid("option", "columns", cols);
    }

</script>
See Also

Concepts

Reference