Available in the Full Version

Data Grid - Custom Conditions Filtering

Grid Filtering with custom conditions

Show
records
First NameLast NameRegister DateCountryAgeIs Active
DownsHolcomb7/25/2015Italy35
MckenzieCalderon9/22/2014USA26
HowellHawkins8/8/2015Canada25
SheppardNicholson6/28/2014Italy49
BettyeTrujillo4/19/2015Canada37
JoyceVaughan4/24/2014USA48
JanineMunoz2/9/2014USA59
BetsyShort6/4/2015USA26
TanishaHarrington11/25/2014USA31
FrenchSullivan8/16/2015Italy37

This sample is designed for a larger screen size.

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

Filtering feature also allows users to define custom conditions. Once defined these conditions are included in the default drop down list along with the default conditions avaliable for the column.
This sample demonstrates how this filtering functionality can be used in Country and Age. There are two custom conditions defined for the Country column which support values "USA" and "Canada" to list entries from USA and Canada. There is also a custom conditions for the "Age" column. In it users that are 21 years old and over could be filtered using "Over 21" condition.

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>
    <h3 id="gridCustomConditionsFilteringLabel">Grid Filtering with custom conditions</h3>
     <!-- Target element for the Custom conditions Filtering igGrid -->
    <table id="gridCustomConditions"></table>
     <br />
    
     <!--Sample JSON Data-->
   <script src="/data-files/employee-data-allDatatypes.js"></script>

    <script>
        $(function () {
            createCustomConditionsFilteringGrid();
        });

        function createCustomConditionsFilteringGrid() {
            $("#gridCustomConditions").igGrid({
                autoGenerateColumns: false,
                columns: [ 
                    { headerText: "Employee ID", key: "EmployeeID", dataType: "string", hidden: true },
                    { headerText: "First Name", key: "FirstName", dataType: "string" },
                    { headerText: "Last Name", key: "LastName", dataType: "string" },
                    { headerText: "Register Date", key: "RegistererDate", dataType: "date" },
                    { headerText: "Country", key: "Country", dataType: "string" },
                    { headerText: "Age", key: "Age", dataType: "number" },
                    { headerText: "Is Active", key: "IsActive", dataType: "bool" }
                ],
                dataSource: employees,
                renderCheckboxes: true,
                responseDataKey: "results",
                features: [
                    {
                        name: "Filtering",
                        mode: "simple",
                        filterDialogContainment: "window",
                        columnSettings: [
                        {
                            columnKey: "Country",
                            customConditions: {
                               USA: {
                                    key: 'USA',
                                    labelText: 'USA',
                                    expressionText: "USA",
                                    filterFunc: filterCountryUSA
                               },
                               Canada:{
                                     key: 'Canada',
                                     labelText: 'Canada',
                                     expressionText: "Canada",
                                     filterFunc: filterCountryCanada
                               },
                            }
                        },
                        {
                            columnKey: "Age",
                            customConditions: {
                                Over21: {
                                    labelText: 'Over 21',
                                    expressionText: 'Over 21',
                                    requireExpr: false,
                                    filterFunc: filterAge
                                }
                            },
                            defaultExpressions: [
                                { cond: "Over21" }
                            ]
                        }
                    ]
                    },
                    {
                        name: "Paging",
                        type: "local",
                        pageSize: 10
                    }
                ]
            });
        }

        function filterCountryUSA(value, expression, dataType, ignoreCase, preciseDateFormat) {
            return value === "USA";
        }
        function filterCountryCanada(value, expression, dataType, ignoreCase, preciseDateFormat) {
            return value === "Canada";
        }
        function filterAge(value, expression, dataType, ignoreCase, preciseDateFormat) {
            return value > 21;
        }
    </script>
</body>
</html>