Responsive Layouts with jQuery Mobile and jQWidgets

In this tutorial you will learn how to use jQWidgets with jQuery Mobile.

jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. We will showcase an example which makes use of jQuery Mobile's responsive design capabilities to change the layout of a group of widgets (jqxGrid and jqxChart) depending on the screen width.

1. Create a New Page and Add the Necessary References

First, we create a new HTML page and add references to jQuery:

  • jquery-1.11.1.min.js

jQuery Mobile (download the files from here: http://jquerymobile.com/download/):

  • jquery.mobile-1.4.2.min.css
  • jquery.mobile-1.4.2.min.js

and jQWidgets (only the files needed for jqxGrid and jqxChart):

  • jqx.base.css
  • jqxcore.js
  • jqxdata.js
  • jqxbuttons.js
  • jqxscrollbar.js
  • jqxmenu.js
  • jqxlistbox.js
  • jqxdropdownlist.js
  • jqxgrid.js
  • jqxgrid.selection.js
  • jqxgrid.columnsresize.js
  • jqxgrid.filter.js
  • jqxgrid.sort.js
  • jqxgrid.pager.js
  • jqxgrid.grouping.js
  • jqxchart.js

2. Add the HTML structure

Next, we will build our HTML layout - two columns with a jqxGrid in the left one and a jqxChart in the right one. Here is the HTML code we put in the body: 

<body>
    <div data-role="page">
        <div data-role="header">
            <h1>
                Integration of jQWidgets with jQuery Mobile</h1>
        </div>
        <div class="ui-grid-a my-breakpoint">
            <div class="ui-block-a" style="padding: 10px;">
                <div id="jqxGrid">
                </div>
            </div>
            <div class="ui-block-b" style="padding: 10px;">
                <div id="jqxChart" style="width: 100%; height: 402px;">
                </div>
            </div>
        </div>
    </div>
</body>

We have a page (div with data-role="page") with a header (data-role="header") and content. The content is a jQuery Mobile two column grid layout (not to be confused with jqxGrid). Two column layouts are designated by adding the class ui-grid-a to a div. In it, there have to be two child divs with the classes ui-block-a and ui-block-b. Other types of grid layouts can also be created. You can learn more about them in the jQuery Mobile API Documentation. In the first column we put a jqxGrid initialization div (id="jqxGrid") and in the second one - a jqxChart div (id="jqxChart").

We initialize both widgets in $(document).ready(). For responsive behaviour (discussed in Step 3), we recommend setting the widgets' width to a percentage value (e.g. "100%"). 

<script type="text/javascript">
    $(document).ready(function () {
        // jqxGrid data source
        var data = new Array();
        var firstNames =
        [
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
        ];
        var lastNames =
        [
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
        ];
        var productNames =
        [
            "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
        ];
        var priceValues =
        [
            "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
        ];
        for (var i = 0; i < 100; i++) {
            var row = {};
            var productindex = Math.floor(Math.random() * productNames.length);
            var price = parseFloat(priceValues[productindex]);
            var quantity = 1 + Math.round(Math.random() * 10);
            row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
            row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
            row["productname"] = productNames[productindex];
            row["price"] = price;
            row["quantity"] = quantity;
            row["total"] = price * quantity;
            data[i] = row;
        }
        var source =
        {
            localdata: data,
            datatype: "array"
        };
        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function (data) { },
            loadError: function (xhr, status, error) { }
        });
        // jqxGrid initialization
        $("#jqxGrid").jqxGrid(
        {
            width: "100%",
            height: 400,
            source: dataAdapter,
            columns: [
                { text: 'First Name', datafield: 'firstname', width: "20%" },
                { text: 'Last Name', datafield: 'lastname', width: "20%" },
                { text: 'Product', datafield: 'productname', width: "20%" },
                { text: 'Quantity', datafield: 'quantity', width: "10%", cellsalign: 'right' },
                { text: 'Unit Price', datafield: 'price', width: "10%", cellsalign: 'right', cellsformat: 'c2' },
                { text: 'Total', datafield: 'total', width: "20%", cellsalign: 'right', cellsformat: 'c2' }
            ]
        });
        // jqxChart data source
        var sampleData = [
            { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
            { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
            { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
            { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
            { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
            { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
            { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
        ];
        // jqxChart initialization
        var settings = {
            title: "Fitness & exercise weekly scorecard",
            description: "Time spent in vigorous exercise",
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            source: sampleData,
            categoryAxis:
                {
                    dataField: 'Day',
                    showGridLines: false
                },
            colorScheme: 'scheme01',
            seriesGroups:
                [
                    {
                        type: 'column',
                        columnsGapPercent: 30,
                        seriesGapPercent: 0,
                        valueAxis:
                        {
                            minValue: 0,
                            maxValue: 100,
                            unitInterval: 10,
                            description: 'Time in minutes'
                        },
                        series: [
                                { dataField: 'Keith', displayText: 'Keith' },
                                { dataField: 'Erica', displayText: 'Erica' },
                                { dataField: 'George', displayText: 'George' }
                            ]
                    }
                ]
        };
        $('#jqxChart').jqxChart(settings);
    });
</script>

And here is the result we get:

jQuery Mobile Grid Layout

3. Responsive Behaviour

We will now add a responsive behaviour to our layout, i.e. when the screen/window width is under a certain value, there will be only one column. For this, we will make a media query for the two column grid layout. It already has the class my-breakpoint, which we will now use in the media query.

Add the following style to the page: 

<style type="text/css">
    @media all and (max-width: 62em)
    {
        .my-breakpoint .ui-block-a, .my-breakpoint .ui-block-b
        {
            width: 100%;
            float: none;
        }
    }
</style>

This means that when the width of the page div (which is 100% the width of the screen) is less than 62em (992px), there will be only one column, with the second widget under the first. Here is what the layout looks like in a smaller screen/window:

jQuery Mobile Responsive Layout

And what if our screen is very big? We would like the grid to be wider, then, showing the full cell values. For that purpose, we add another media query, which makes the grid take 65% of the screen if it is wider than 72 em (1152px). Note the slightly narrower widths set to work around rounding issues across platforms. 

@media all and (min-width: 72em)
{
    .my-breakpoint .ui-block-a
    {
        width: 64.95%;
    }
        
    .my-breakpoint .ui-block-b, .my-breakpoint .ui-block-c, .my-breakpoint .ui-block-d, .my-breakpoint .ui-block-e
    {
        width: 34.95%;
    }
}

Only if the width is between 992px and 1152px, the two columns will be of equal width (as in image #1).

Click on the link to try the complete jQuery Mobile example in your browser now.