Available in the Full Version

Data Grid - Twitter Bootstrap

Customer IDCompany NameContact NameContact TitleAddressCityCountry
ALFKIAlfreds FutterkisteMaria AndersSales RepresentativeObere Str. 57BerlinGermany
ANATRAna Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 2222México D.F.Mexico
ANTONAntonio Moreno TaqueríaAntonio MorenoOwnerMataderos 2312México D.F.Mexico
AROUTAround the HornThomas HardySales Representative120 Hanover Sq.LondonUK
BERGSBerglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8LuleåSweden
BLAUSBlauer See DelikatessenHanna MoosSales RepresentativeForsterstr. 57MannheimGermany
BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager24, place KléberStrasbourgFrance
BOLIDBólido Comidas preparadasMartín SommerOwnerC/ Araquil, 67MadridSpain
BONAPBon app'Laurence LebihanOwner12, rue des BouchersMarseilleFrance
BOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager23 Tsawassen Blvd.TsawassenCanada
BSBEVB's BeveragesVictoria AshworthSales RepresentativeFauntleroy CircusLondonUK
 

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 Responsive Web Design Mode feature to use Twitter Bootstrap Framework utility class for profile activation. This is done by using the Twitter Bootstrap responsive CSS classes (these classes are using CSS 3 media queries).
Depending on the device form factor (phone, tablet, desktop) in which this sample is viewed different set of columns are visible.
In Phone mode only 1 column is visible: Company Name. The other columns are configured to be hidden in this profile by using the hidden-sm-down Twitter Bootstrap CSS class.
In Tablet mode 4 columns are visible: Company Name, Contact Name, Address and City. The other columns are configured to be hidden in this profile by using the hidden-md-down Twitter Bootstrap CSS class.
In Desktop mode 7 columns are visible: Customer ID, Company Name, Contact Name, Contact Title, Address, City, and Country. All columns are visible in this profile.

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" />
    <link href="/css/bootstrap/bootstrap.min.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: "Customer ID", key: "ID", dataType: "string", width:"10%" },
                    { headerText: "Company Name", key: "CompanyName", dataType: "string", width: "10%" },
                    { headerText: "Contact Name", key: "ContactName", dataType: "string", width: "10%" },
                    { 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,
                dataSource: nwCustomersWithOrders,
                width: "100%",
                height: "400px",
                autofitLastColumn: false,
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "ID",
                                classes: "hidden-md-down hidden-sm-down"
                            },
                            {
                                columnKey: "ContactName",
                                classes: "hidden-sm-down"
                            },
                            {
                                columnKey: "ContactTitle",
                                classes: "hidden-md-down hidden-sm-down"
                            },
                            {
                                columnKey: "Address",
                                classes: "hidden-sm-down"
                            },
                            {
                                columnKey: "City",
                                classes: "hidden-sm-down"
                            },
                            {
                                columnKey: "Country",
                                classes: "hidden-md-down hidden-sm-down"
                            }
                        ]
                    }
                ]
            });
        });
    </script>
</body>
</html>