Available in the Full Version

Data Grid - Responsive Web Design Mode

Show
records
Company NameContact NameContact TitleAddressCityCountry
Alfreds FutterkisteMaria AndersSales RepresentativeObere Str. 57BerlinGermany
Ana Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 2222México D.F.Mexico
Antonio Moreno TaqueríaAntonio MorenoOwnerMataderos 2312México D.F.Mexico
Around the HornThomas HardySales Representative120 Hanover Sq.LondonUK
Berglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8LuleåSweden
 

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 Responsive Web Design (RWD) Mode feature of the igGrid control. Responsive Web Design mode allows you to support multiple screen sizes and form factors with single code base and design.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            padding: 0px !important;
            margin: 0px !important;
        }
    </style>
    <!-- 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>

    <script src="/data-files/nw-customers-with-orders.js"></script>
    <table id="grid"></table>
    <script>
        $(function () {
            $("#grid").igGrid({
                columns: [
                    { headerText: "Company Name", key: "CompanyName", dataType: "string", width: "20%" },
                    { headerText: "Contact Name", key: "ContactName", dataType: "string", width: "15%" },
                    { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "20%" },
                    { headerText: "Address", key: "Address", dataType: "string", width: "20%" },
                    { headerText: "City", key: "City", dataType: "string", width: "10%" },
                    { headerText: "Country", key: "Country", dataType: "string", width: "15%" }
                ],
                autoGenerateColumns: false,
                autofitLastColumn: false,
                dataSource: nwCustomersWithOrders,
                width: "100%",
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "ContactName",
                                configuration: {
                                    customPhone: {
                                        hidden: true
                                    },
                                    customAlt: {
                                        hidden: false
                                    }
                                }
                            },
                            {
                                columnKey: "ContactTitle",
                                configuration: {
                                    customPhone: {
                                        hidden: true
                                    },
                                    customAlt: {
                                        hidden: false
                                    }
                                }
                            },
                            {
                                columnKey: "Address",
                                configuration: {
                                    customPhone: {
                                        template: "${Address}, ${City}, ${Country}"
                                    },
                                    customAlt: {
                                        hidden: false
                                    }
                                }
                            },
                            {
                                columnKey: "City",
                                configuration: {
                                    customPhone: {
                                        hidden: true
                                    },
                                    customAlt: {
                                        hidden: false
                                    }
                                }
                            },
                            {
                                columnKey: "Country",
                                configuration: {
                                    customPhone: {
                                        hidden: true
                                    },
                                    customAlt: {
                                        hidden: false
                                    }
                                }
                            }
                        ],
                        responsiveModes: {
                            customPhone: {
                                minWidth: 0,
                                maxWidth: 600
                            },
                            // alternative mode
                            customAlt: {
                                minWidth: 601,
                                maxWidth: Number.MAX_VALUE
                            }
                        }
                    },
                    {
                        name: "Paging",
                        pageSize: 5
                    }
                ]
            });
        });
    </script>
</body>
</html>