Available in the Full Version

Data Grid - Feature Chooser

Employee ID
First Name
Last Name
Title
1NancyDavolioSales Representative
2AndrewFullerVice President, Sales
3JanetLeverlingSales Representative
4MargaretPeacockSales Representative
5StevenBuchananSales Manager
6MichaelSuyamaSales Representative
7RobertKingSales Representative
8LauraCallahanInside Sales Coordinator
9AnneDodsworthSales Representative

This sample is designed for a larger screen size.

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

Feature Chooser provides menu-like interface to grid columns when multiple features are enabled. Click on the gear icon shown in each grid column (or tap on the header when on thouch device) to start interacting with Feature Chooser. Feature Chooser supports the following features: Sorting (multi mode), Filtering (advanced mode), Hiding, Summaries, Column Moving.
Note: By default on touch devices the feature chooser icon (the gear icon) is hidden and the feature chooser will display when a column header is tapped. This behavior can be altered by the igGrid.featureChooserIconDisplay option.

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>

    <script src="/data-files/northwind.js"></script>
    <script>
        $(function () {
            $("#grid").igGrid({
                primaryKey: "EmployeeID",
                width: '100%',
                columns: [
                    { headerText: "Employee ID", key: "EmployeeID", dataType: "number", width: "15%" },
                    { headerText: "First Name", key: "FirstName", dataType: "string", width: "25%" },
                    { headerText: "Last Name", key: "LastName", dataType: "string", width: "25%"},
                    { headerText: "Title", key: "Title", dataType: "string", width: "35%" }
                ],
                autofitLastColumn: false,
                autoGenerateColumns: false,
                dataSource: northwind,
                responseDataKey: "results",
                features: [
                    {
                        name: "Sorting",
                        type: "local",
                        mode: "multi",
                        sortingDialogContainment: "window"
                    },
                    {
                        name: "Filtering",
                        type: "local",
                        mode: "advanced",
                        filterDialogContainment: "window"
                    },
                    {
                        name: "Hiding"
                    },
                    {
                        name: "ColumnMoving",
                        columnMovingDialogContainment: "window"
                    },
                    {
                        name: "Summaries"
                    }
                ]
            });
        });
     </script>
</body>
</html>