Responsive Web Design with jQuery Grids

Responsive Web Design page with Ignite UI jQuery Hierarchical Grid and Twitter Bootstrap

by Yolanda Robles

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="brand" href="#"> Responsive Hierarchical Grid</a>

            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a>

                    </li>
                    <li><a href="#about">About</a>

                    </li>
                    <li><a href="#contact">Contact</a>

                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a>

                            </li>
                            <li><a href="#">Another action</a>

                            </li>
                            <li><a href="#">Something else here</a>

                            </li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a>

                            </li>
                            <li><a href="#">One more separated link</a>

                            </li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form pull-right">
                    <input class="span2" type="text" placeholder="Email">
                    <input...

CSS

footer p {
     background-image: url('http://www.infragistics.com/uploadedImages/Content/PRODUCTS/jQuery/ignite-secondary-navigation-logo.png');
     background-repeat: no-repeat;
     padding-left: 135px;
     margin: 5px;
     vertical-align: top;
     font-size: 1.2em;
 }
 </style> <!-- as per http://doc.jsfiddle.net/use/hacks.html --> <meta name="viewport" content="width=device-width, initial-scale=1"> <script>
// from http://trentwalton.com/2013/01/16/windows-phone-8-viewport-fix/ 
    if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
     var msViewportStyle=document.createElement("style");
     msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
     document.getElementsByTagName("head")[0]. appendChild(msViewportStyle);
 }
 </script> <style>

JavaScript

var departments;
setupData();

$.ig.loader({
    scriptPath: "http://cdn-na.infragistics.com/jquery/20131/latest/js",
    cssPath: "http://cdn-na.infragistics.com/jquery/20131/latest/css",
    resources: "igHierarchicalGrid.MultiColumnHeaders.Responsive.Hiding"
});

$.ig.loader(function () {
    $('#grid').igHierarchicalGrid({
        dataSource: departments,
        autoGenerateColumns: false,
        autoGenerateLayouts: false,
        columns: [{
            key: 'DepartmentID',
            dataType: 'number',
            headerText: 'DEP Id'
        }, {
            key: 'Dep',
            headerText: 'Dep',
            group: [{
                key: 'Name',
                dataType: 'string',
                headerText: 'Name'
            }, {
                key: 'GroupName',
                dataType: 'string',
                headerText: 'GroupName'
            }]
        }, {
            key: 'ModifiedDate',
            dataType: 'date',
            headerText: 'ModifiedDate'
        }],
        columnLayouts: [{
            autoGenerateColumns: false,
            autoGenerateLayouts: false,
            columns: [{
                key: 'BusinessEntityID',
                dataType: 'number',
                headerText: 'B.E. Id'
            }, {
                key: 'LoginID',
                dataType: 'string',
                headerText: 'Login ID'
            }, {
                key: 'NationalIDNumber',
                dataType: 'string',
                headerText: 'National ID Num'
            }, {
                key: 'Gender',
                dataType: 'string',
                headerText: 'Gender'
            }, {
                key: 'BirthDate',
                dataType: 'date',
                headerText: 'Birth Date'
            }, {
                key: 'MaritalStatus',
                dataType: 'string',
                headerText: 'MaritalStatus'
            }, {
                key: 'JobTitle',
                dataType: 'string',
         ...