Available in the Full Version

Data Grid - Advanced Filtering

Grid with Advanced Filtering

Show
records
First Name
Last Name
Register Date
Country
Age
Is 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.

Our jQuery Grid filtering feature includes two modes: simple and advanced.
When Advanced filtering is configured, then an advanced filtering button is rendered next to the column header text (default). Once the advanced button is clicked, the “advanced” filtering dialog appears where more complex filtering conditions are available to the user.

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="gridAdvancedFilteringLabel">Grid with Advanced Filtering</h3>
     <!-- Target element for the Simple Filtering igGrid -->
    <table id="gridAdvancedFiltering"></table>
     <br />
   
     <!--Sample JSON Data-->
   <script src="/data-files/employee-data-allDatatypes.js"></script>

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

        function createAdvancedFilteringGrid() {
            $("#gridAdvancedFiltering").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",
                        type: "local",
                        mode: "advanced",
                        filterDialogContainment: "window"
                    },
                    {
                        name: "Paging",
                        type: "local",
                        pageSize: 10
                    }
                ]
            });
        }



    </script>
</body>
</html>