Available in the Full Version

Hierarchical Grid - Selection


Single Cell Selection

Show
records
Last NameFirst NameTitleAddressCity
 

Multiple Row Selection

Show
records
Last NameFirst NameTitleAddressCity
 

This sample is designed for a larger screen size.

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

This sample demonstrates the Selection feature of the igHierarchicalGrid. Selection operates in two distinct modes: cell and row. Cell mode allows you to select individual cells. Row mode allows you to select individual rows. Each of the two modes can be configure in either single or multiple selection by setting the multipleSelection to true.
The grid on the top is configured in single cell selection mode.
The grid on the bottom is configured in the multiple row selection mode.

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 class="samplePage">
    <br />
    <h3>Single Cell Selection</h3>
    <!-- Target element for the CellSelection igHierarchicalGrid -->
    <table id="cellSelectionGrid">
    </table>
    <br />
    <h3>Multiple Row Selection</h3>
    <!-- Target element for the RowSelection igHierarchicalGrid -->
    <table id="rowSelectionGrid">
    </table>

    <!--Sample JSON Data-->
    <script src="/data-files/northwind.js"></script>

    <script type="text/javascript">

        $(function () {
            /*----------------- Instantiation -------------------------*/
            createCellSelectionGrid();
            createRowSelectionGrid();
        });

        function createCellSelectionGrid() {
            $( "#cellSelectionGrid" ).igHierarchicalGrid( {
                width: "100%",
                autoGenerateColumns: false,
                dataSource: northwind,
                responseDataKey: "results",
                dataSourceType: "json",
                features: [
                        {
                            name: "Responsive",
                            enableVerticalRendering: false,
                            columnSettings: [
                                {
                                    columnKey: "Title",
                                    classes: "ui-hidden-tablet"
                                },
                                {
                                    columnKey: "Address",
                                    classes: "ui-hidden-tablet"
                                }
                            ]
                        },
                        {
                            name: "Selection",
                            mode: "cell",
                            multipleSelection: false,
                            touchDragSelect: false,
                            multipleCellSelectOnClick: false
                        },
                        {
                            name: "Paging",
                            pageSize: 5,
                            type: "local",
                            inherit: true
                        }
                    ],
                columns: [
                  { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
                  { key: "LastName", headerText: "Last Name", dataType: "string", width: "10%" },
                  { key: "FirstName", headerText: "First Name", dataType: "string", width: "10%" },
                  { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
                  { key: "Address", headerText: "Address", dataType: "string", width: "20%" },
                  { key: "City", headerText: "City", dataType: "string", width: "10%" }
                ],
                autoGenerateLayouts: false,
                columnLayouts: [
                    {
                        key: "Orders",
                        autoGenerateColumns: false,
                        width: "100%",
                        primaryKey: "OrderID",
                        columns: [
                            { key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
                            { key: "Freight", headerText: "Freight", dataType: "string", width: "15%" },
                            { key: "ShipName", headerText: "Ship Name", dataType: "string", width: "20%" },
                            { key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "20%" },
                            { key: "ShipCity", headerText: "Ship City", dataType: "string", width: "15%" },
                            { key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "15%" }
                        ],
                        features: [
                            {
                                name: "Responsive",
                                enableVerticalRendering: false,
                                columnSettings: [
                                    {
                                        columnKey: "ShipAddress",
                                        classes: "ui-hidden-tablet"
                                    },
                                    {
                                        columnKey: "ShipName",
                                        classes: "ui-hidden-tablet"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
        }

        function createRowSelectionGrid()
        {
            $( "#rowSelectionGrid" ).igHierarchicalGrid( {
                width: "100%",
                autoGenerateColumns: false,
                dataSource: northwind,
                responseDataKey: "results",
                dataSourceType: "json",
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "Title",
                                classes: "ui-hidden-tablet"
                            },
                            {
                                columnKey: "Address",
                                classes: "ui-hidden-tablet"
                            }
                        ]
                    },
                    {
                        name: "Selection",
                        mode: "row",
                        multipleSelection: true,
                        inherit: true
                    },
                    {
                        name: "Paging",
                        pageSize: 5,
                        type: "local",
                        inherit: true
                    }
                ],
                columns: [
                  { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
                  { key: "LastName", headerText: "Last Name", dataType: "string", width: "10%" },
                  { key: "FirstName", headerText: "First Name", dataType: "string", width: "10%" },
                  { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
                  { key: "Address", headerText: "Address", dataType: "string", width: "20%" },
                  { key: "City", headerText: "City", dataType: "string", width: "10%" }
                ],
                autoGenerateLayouts: false,
                columnLayouts: [
                    {
                        key: "Orders",
                        autoGenerateColumns: false,
                        width: "100%",
                        primaryKey: "OrderID",
                        columns: [
                            { key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
                            { key: "Freight", headerText: "Freight", dataType: "string", width: "15%" },
                            { key: "ShipName", headerText: "Ship Name", dataType: "string", width: "20%" },
                            { key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "20%" },
                            { key: "ShipCity", headerText: "Ship City", dataType: "string", width: "15%" },
                            { key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "15%" }
                        ],
                        features: [
                            {
                                name: "Responsive",
                                enableVerticalRendering: false,
                                columnSettings: [
                                    {
                                        columnKey: "ShipAddress",
                                        classes: "ui-hidden-tablet"
                                    },
                                    {
                                        columnKey: "ShipName",
                                        classes: "ui-hidden-tablet"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            } );
        }
    </script>
</body>
</html>