Available in the Full Version

Data Grid - Row Selectors

Default Row Selectors

NameTitlePhoneCountry
Davolio, NancySales Representative(206) 555-9857USA
Fuller, AndrewVice President, Sales(206) 555-9482USA
Leverling, JanetSales Representative(206) 555-3412USA
Peacock, MargaretSales Representative(206) 555-8122USA
Buchanan, StevenSales Manager(71) 555-4848UK
Suyama, MichaelSales Representative(71) 555-7773UK
King, RobertSales Representative(71) 555-5598UK
Callahan, LauraInside Sales Coordinator(206) 555-1189USA
Dodsworth, AnneSales Representative(71) 555-4444UK
 

Row Selectors With Checkboxes

NameTitlePhoneCountry
Davolio, NancySales Representative(206) 555-9857USA
Fuller, AndrewVice President, Sales(206) 555-9482USA
Leverling, JanetSales Representative(206) 555-3412USA
Peacock, MargaretSales Representative(206) 555-8122USA
Buchanan, StevenSales Manager(71) 555-4848UK
Suyama, MichaelSales Representative(71) 555-7773UK
King, RobertSales Representative(71) 555-5598UK
Callahan, LauraInside Sales Coordinator(206) 555-1189USA
Dodsworth, AnneSales Representative(71) 555-4444UK
 

Row Numbering

NameTitlePhoneCountry
1Davolio, NancySales Representative(206) 555-9857USA
2Fuller, AndrewVice President, Sales(206) 555-9482USA
3Leverling, JanetSales Representative(206) 555-3412USA
4Peacock, MargaretSales Representative(206) 555-8122USA
5Buchanan, StevenSales Manager(71) 555-4848UK
6Suyama, MichaelSales Representative(71) 555-7773UK
7King, RobertSales Representative(71) 555-5598UK
8Callahan, LauraInside Sales Coordinator(206) 555-1189USA
9Dodsworth, AnneSales Representative(71) 555-4444UK
 

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 how to configure row selectors in the igGrid control. Note: When you want to select an igGrid row under touch platform devices, the only way to do this is to use the igGrid row selector's checkboxes. In this sample igGrid checkboxes are enabled when the sample is opened from a touch device browser, while under Desktop browser they are off, because in such cases you are not required to use the checkboxes.

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

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

    <script>

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



        function createDefaultSelectorsGrid() {
            $("#defaultRowSelectors").igGrid({
                width: "100%",
                autoGenerateColumns: false,
                dataSource: northwindEmployees,
                responseDataKey: "results",
                dataSourceType: "json",
                columns: [
                    { headerText: "Employee ID", key: "ID", dataType: "number", width: "120px", hidden: true },
                    { headerText: "Name", key: "Name", dataType: "string" },
                    { headerText: "Title", key: "Title", dataType: "string"},
                    { headerText: "Phone", key: "Phone", dataType: "string" },
                    { headerText: "Country", key: "Country", dataType: "string" }
                ],
                features: [
                    {
                        name: 'Responsive',
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: 'Country',
                                classes: 'ui-hidden-phone'
                            }
                        ]
                    },
                    {
                        name: "RowSelectors",
                        enableRowNumbering: false
                    },
                    {
                        name: "Selection"
                    }
                ]
            });
        }

        function createCboxSelectorsGrid() {
            $("#cbRowSelectors").igGrid({
                width: "100%",
                autoGenerateColumns: false,
                dataSource: northwindEmployees,
                responseDataKey: "results",
                dataSourceType: "json",
                columns: [
                    { headerText: "Employee ID", key: "ID", dataType: "number", width: "120px", hidden: true },
                    { headerText: "Name", key: "Name", dataType: "string"},
                    { headerText: "Title", key: "Title", dataType: "string" },
                    { headerText: "Phone", key: "Phone", dataType: "string" },
                    { headerText: "Country", key: "Country", dataType: "string" }

                ],
                features: [
                    {
                        name: 'Responsive',
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: 'Country',
                                classes: 'ui-hidden-phone'
                            }
                        ]
                    },
                    {
                        name: "RowSelectors",
                        enableCheckBoxes: true,
                        enableRowNumbering: false
                    },
                    {
                        name: "Selection"
                    }
                ]
            });
        }

        function createRowNumberingGrid() {
            $("#rowNumbering").igGrid({
                width: "100%",
                autoGenerateColumns: false,
                dataSource: northwindEmployees,
                responseDataKey: "results",
                dataSourceType: "json",
                columns: [
                    { headerText: "Employee ID", key: "ID", dataType: "number", width: "120px", hidden: true },
                    { headerText: "Name", key: "Name", dataType: "string" },
                    { headerText: "Title", key: "Title", dataType: "string" },
                    { headerText: "Phone", key: "Phone", dataType: "string" },
                    { headerText: "Country", key: "Country", dataType: "string" }

                ],
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: 'Country',
                                classes: 'ui-hidden-phone'
                            }
                        ]
                    },
                    {
                        name: "RowSelectors",
                        enableRowNumbering: true
                    },
                    {
                        name: "Selection"
                    }
                ]
            });
        }
    </script>
</body>
</html>