Available in the Full Version

Hierarchical Grid - Row Selectors

Default Row Selectors

Show
records
Last NameFirst NameTitleAddressCity
 

Row Selectors With Checkboxes

Show
records
Last NameFirst NameTitleAddressCity
 

Row Numbering

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 Row Selectors feature of the igHierarchicalGrid. The Row Selectors feature provides the user with the functionality to select cell(s), or entire row(s) by clicking the row selector column placed on the left of the first column of the grid. In addition to that, the widget provides row numbering functionality and checkboxes for row selection.
Use the grids above to experience Row Selectors feature in different configurations.
Note: By default Row Selectors depends on the Selection feature and will throw an error when the Selection feature is not defined.

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">
    <h3>Default Row Selectors</h3>  
    <!-- Target element for the Default RowSelectors igHierarchicalGrid -->
    <table id="defaultRowSelectors">
    </table>
    <br />
    <h3>Row Selectors With Checkboxes</h3>
    <!-- Target element for the Checkboxes RowSelectors igHierarchicalGrid -->
    <table id="cbRowSelectors">
    </table>
    <br />
    <h3>Row Numbering</h3>
    <!-- Target element for the RowNumbering igHierarchicalGrid -->
    <table id="rowNumbering">
    </table>

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

        $(function () {
            /*----------------- Instantiation -------------------------*/
            createDefaultSelectorsGrid();
            createCboxSelectorsGrid();
            createRowNumberingGrid();
        });

        function createDefaultSelectorsGrid()
        {
            $( "#defaultRowSelectors" ).igHierarchicalGrid( {
                width: "100%",
                autoGenerateColumns: false,
                dataSource: northwind,
                responseDataKey: "results",
                dataSourceType: "json",
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "Title",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "Address",
                                classes: "ui-hidden-phone"
                            }
                        ]
                    },
                    {
                        name: "RowSelectors",
                        inherit: true,
                        enableRowNumbering: false
                    },
                    {
                        name: "Selection"
                    },
                    {
                        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: "20%" },
                   { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
                   { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
                   { key: "Address", headerText: "Address", dataType: "string", width: "25%" },
                   { key: "City", headerText: "City", dataType: "string", width: "15%" }
                ],
                autoGenerateLayouts: false,
                columnLayouts: [
                    {
                        key: "Orders",
                        width: "100%",
                        autoGenerateColumns: false,
                        primaryKey: "OrderID",
                        columns: [
                            { key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
                            { key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "0%", hidden: true },
                            { key: "Freight", headerText: "Freight", dataType: "string", width: "20%" },
                            { 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: "20%" },
                            { key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "20%" }
                        ],
                        features: [
                             {
                                 name: "Responsive",
                                 enableVerticalRendering: false,
                                 columnSettings: [
                                     {
                                         columnKey: "ShipAddress",
                                         classes: "ui-hidden-phone"
                                     },
                                     {
                                         columnKey: "ShipCity",
                                         classes: "ui-hidden-phone"
                                     }
                                 ]
                             }
                        ]
                    }
                ]
            } );
        }
        function createCboxSelectorsGrid()
        {
            $( "#cbRowSelectors" ).igHierarchicalGrid( {
                width: "100%",
                autoGenerateColumns: false,
                dataSource: northwind,
                responseDataKey: "results",
                dataSourceType: "json",
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "Title",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "Address",
                                classes: "ui-hidden-phone"
                            }
                        ]
                    },
                    {
                        name: "RowSelectors",
                        inherit: true,
                        enableCheckBoxes: true,
                        enableRowNumbering: false
                    },
                    {
                        name: "Selection",
                        mode: "row",
                        multipleSelection: 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: "20%" },
                   { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
                   { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
                   { key: "Address", headerText: "Address", dataType: "string", width: "25%" },
                   { key: "City", headerText: "City", dataType: "string", width: "15%" }
                ],
                autoGenerateLayouts: false,
                columnLayouts: [
                    {
                        key: "Orders",
                        width: "100%",
                        autoGenerateColumns: false,
                        primaryKey: "OrderID",
                        columns: [
                            { key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
                            { key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "0%", hidden: true },
                            { key: "Freight", headerText: "Freight", dataType: "string", width: "20%" },
                            { 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: "20%" },
                            { key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "20%" }
                        ],
                        features: [
                             {
                                 name: "Responsive",
                                 enableVerticalRendering: false,
                                 columnSettings: [
                                     {
                                         columnKey: "ShipAddress",
                                         classes: "ui-hidden-phone"
                                     },
                                     {
                                         columnKey: "ShipName",
                                         classes: "ui-hidden-phone"
                                     }
                                 ]
                             }
                        ]
                    }
                ]
            } );
        }
        function createRowNumberingGrid()
        {
            $( "#rowNumbering" ).igHierarchicalGrid( {
                width: "100%",
                autoGenerateColumns: false,
                dataSource: northwind,
                responseDataKey: "results",
                dataSourceType: "json",
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "Title",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "Address",
                                classes: "ui-hidden-phone"
                            }
                        ]
                    },
                    {
                        name: "RowSelectors",
                        inherit: true,
                        enableRowNumbering: true
                    },
                    {
                        name: "Selection",
                        mode: "row",
                        inherit: true,
                        multipleSelection: 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: "20%" },
                   { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
                   { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
                   { key: "Address", headerText: "Address", dataType: "string", width: "25%" },
                   { key: "City", headerText: "City", dataType: "string", width: "15%" }
                ],
                autoGenerateLayouts: false,
                columnLayouts: [
                    {
                        key: "Orders",
                        width: "100%",
                        autoGenerateColumns: false,
                        primaryKey: "OrderID",
                        columns: [
                            { key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
                            { key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "0%", hidden: true },
                            { key: "Freight", headerText: "Freight", dataType: "string", width: "20%" },
                            { 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: "20%" },
                            { key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "20%" }
                        ],
                        features: [
                             {
                                 name: "Responsive",
                                 enableVerticalRendering: false,
                                 columnSettings: [
                                     {
                                         columnKey: "ShipAddress",
                                         classes: "ui-hidden-phone"
                                     },
                                     {
                                         columnKey: "ShipCity",
                                         classes: "ui-hidden-phone"
                                     }
                                 ]
                             }
                        ]
                    }
                ]
            } );
        }
        </script>
</body>
</html>