Available in the Full Version

Data Grid - Feature Persistence

Show
records
Drag a column here or select columns to Group By
Employee ID
First Name
Last Name
Birth Date
City
Country
11NancyDavolio12/8/1948SeattleUSA
22AndrewFuller2/19/1952TacomaUSA
33JanetLeverling8/30/1963KirklandUSA
44MargaretPeacock9/19/1937RedmondUSA
55StevenBuchanan3/4/1955LondonUK

This sample is designed for a larger screen size.

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

The sample demonstrates the persistence between states when Sorting, Filtering, GroupBy and Selection are enabled. The button will databind the grid to its data source.

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="grid"></table>
    <br />
    <input type="button" id="buttonDataBind" value="Databind" />

    <script src="/data-files/northwind.js"></script>
    <script>
        $(function () {
            $("#grid").igGrid({
                primaryKey: "EmployeeID",
                width: '100%',
                defaultColumnWidth: "15%",
                columns: [
                   { headerText: "Employee ID", key: "EmployeeID", dataType: "number" },
                   { headerText: "First Name", key: "FirstName", dataType: "string" },
                   { headerText: "Last Name", key: "LastName", dataType: "string" },
                   { headerText: "Birth Date", key: "BirthDate", dataType: "date" },
                   { headerText: "City", key: "City", dataType: "string" },
                   { headerText: "Country", key: "Country", dataType: "string" }
                ],
                autofitLastColumn: false,
                autoGenerateColumns: false,
                dataSource: northwind,
                responseDataKey: "results",
                features: [
                    {
                        name: "Sorting",
                        type: "local",
                        mode: "multi",
                        persist: true
                    },
                    {
                        name: "Filtering",
                        type: "local",
                        persist: true
                    },
                    {
                        name: "GroupBy",
                        type: "local",
                        persist: true
                    },
                    {
                        name: "Selection",
                        mode: 'row',
                        multipleSelection: true,
                        persist: true
                    },
                    {
                        name: "RowSelectors",
                        enableCheckBoxes: true
                    },
                    {
                        name: "Paging",
                        type: "local",
                        pageSize: 5
                    }
                ]
            } );
            $( "#buttonDataBind" ).igButton( {
                labelText: $( "#buttonDataBind" ).val(),
                click: function ( e )
                {
                    $( "#grid" ).igGrid( "dataBind" );
                }
            } );
        });
     </script>
</body>
</html>