Responsive Design with jQuery Grid

• Download source - 87.1 KB

Introduction

This tip is going to show how you can easily implement responsive design with jQuery Grid Plugin by gijgo.com in two different ways - with CSS3 media queries and with functionality of the plugin.

Background

In the sample project that you can download from this tip, I'm using jQuery Grid 0.5.1 by gijgo.com, jQuery 2.1.3 and Bootstrap 3.3.5.

A Few Words about jQuery Grid by gijgo.com

Since the other libraries that are in use are pretty popular compared to the grid plugin, I'm going to give you some information about this plugin.

• Stylish and Featured Tabular data presentation control
• JavaScript control for representing and manipulating tabular data on the web
• Ajax enabled
• Can be integrated with any of the server-side technologies like ASP.NET, Node.js, Ruby on Rails, JSP, PHP, etc.
• Support pagination, sorting, JavaScript and server side data sources
• Support jQuery UI and Bootstrap
• Free open source tool distributed under MIT License

You can find the documentation about the version of the plugin that is in use in this tip at this link.

Option 1 - Implementation of Responsive Design by CSS3 Media Queries

The main advantage of this option is the usage of native for the web browsers approach with CSS3 media queries that should be always faster than any JavaScript code that can simulate this behaviour. The disadvantage of this option are the limited options for customizations. In this option, you can control when to show and hide columns based on the available space, but you can't attach custom JavaScript code to the events of column hiding or showing.

In version 0.5, jQuery Grid by gijgo.com has 6 predefined CSS3 media queries that can help you to achieve responsive design.

• display-320 - Visible only if the screen resolution is 320px or higher. Invisible for old small smartphones.
• display-480 - Visible only if the screen resolution is 480px or higher. Invisible for smartphones in portrait mode.
• display-640 - Visible only if the screen resolution is 640px or higher. Invisible for small tablets in portrait mode.
• display-800 - Visible only if the screen resolution is 800px or higher.
• display-960 - Visible only if the screen resolution is 960px or higher.
• display-1120 - Visible only if the screen resolution is 1120px or higher. Invisible for most of the tablets.

You can find more information about screen resolutions of various devices in websites like mydevice.io.

You can also define your custom CSS3 media queries if the predefined media queries doesn't work for you. In the example below, you can see a definition of CSS3 media query that show column only in screens with resolutions bigger than 1008px.

/* Hide the column by default */
@media only all {
    TABLE.gj-grid-table th.display-1008,
    TABLE.gj-grid-table td.display-1008 {
        display: none;
    }
}
/* Show at 1008px (63em x 16px) */
@media screen and (min-width: 63em) {
    TABLE.gj-grid-table th.display-1008,
    TABLE.gj-grid-table td.display-1008 {
        display: table-cell;
    }
}

In the "example-1-css3-media-queries.html" file from the attachment above to the demo, you can see the implementation of responsive grid that is using a combination of predefined and custom CSS3 media queries.

Option 2 - Implementation of Responsive Design by Features of the Plugin

The main advantage of this option is the ability to customize the responsive behaviours with JavaScript code by using various features of the plugin. The disadvantage of this option is slower execution. The HTML elements don't support resize event and the plugin needs to check programmatically with JavaScript code if the width is changing, which may cause some delays.

In version 0.5, jQuery Grid by gijgo.com has the following configuration settings, methods and events that can help you to achieve responsive behaviours.

Configuration Settings

• responsive - This setting enables responsive behaviour of the grid where some columns are invisible when there is not enough space on the screen for them.
• column.minWidth - The minimum width of the column. The column is getting invisible when there is not enough space in the grid for this minimum width.
• column.priority - The priority of the column compared to other columns in the grid. The columns are hiding based on the priorities.
• showHiddenColumnsAsDetails - Automatically adds hidden columns to the details section of the row.
• resizeCheckInterval - The interval in milliseconds for checking if the grid is resizing.

Methods

• makeResponsive - Make the grid responsive based on the available space. Show column if the space for the grid is expanding and hide columns when the space for the grid is decreasing.

Events

• resize - Event fires when the grid width is changed.

The easiest way to achieve responsive behaviour with features of the grid is to set the responsive setting to true and set priorities for the columns that you want to hide when there is not enough space on the grid for them. The code will look like that.

<table id="grid" data-ui-library="bootstrap">
    <thead>
        <tr>
            <th width="36">ID</th>
            <th>Name</th>
            <th data-field="PlaceOfBirth" 
            data-priority="1">Place Of Birth</th>
            <th data-field="DateOfBirth" 
            data-type="date" data-priority="2">Date Of Birth</th>
        </tr>
    </thead>
</table>
<script>
    data = [
        { "ID": 1, "Name": "Hristo Stoichkov", 
        "PlaceOfBirth": "Plovdiv, Bulgaria", 
        "DateOfBirth": "/Date(-122954400000)/" },
        { "ID": 2, "Name": 
        "Ronaldo Luís Nazário de Lima", 
        "PlaceOfBirth": "Rio de Janeiro, Brazil", 
        "DateOfBirth": "/Date(211842000000)/" },
        { "ID": 3, "Name": "David Platt", 
        "PlaceOfBirth": "Chadderton, Lancashire, England", 
        "DateOfBirth": "/Date(-112417200000)/" },
        { "ID": 4, "Name": "Manuel Neuer", 
        "PlaceOfBirth": "Gelsenkirchen, West Germany", 
        "DateOfBirth": "/Date(512258400000)/" },
        { "ID": 5, "Name": "James Rodríguez", 
        "PlaceOfBirth": "Cúcuta, Colombia", 
        "DateOfBirth": "/Date(679266000000)/" },
        { "ID": 6, "Name": "Dimitar Berbatov", 
        "PlaceOfBirth": "Blagoevgrad, Bulgaria", 
        "DateOfBirth": "/Date(349653600000)/" }
    ];
    $(document).ready(function () {
        $('#grid').grid({
            responsive: true,
            dataSource: data
        });
    });
</script>

You can also see this example in the example-2-grid-responsive-plugin.html file from the samples in the attachment.

With the jQuery grid by gijgo.com, you can also show the values of the hidden column at narrower screens in row details section by using the showHiddenColumnsAsDetails setting. You just need define detailTemplate and set showHiddenColumnsAsDetails to true. The code will look like this:

<table id="grid" data-ui-library="bootstrap">
    <thead>
        <tr>
            <th width="36">ID</th>
            <th>Name</th>
            <th data-field="PlaceOfBirth" 
            data-min-width="200" data-priority="1">Place Of Birth</th>
            <th data-field="DateOfBirth" 
            data-type="date" data-min-width="200" data-priority="2">
		Date Of Birth</th>
        </tr>
    </thead>
</table>
<script>
    data = [
        { "ID": 1, "Name": "Hristo Stoichkov", 
        "PlaceOfBirth": "Plovdiv, Bulgaria", 
	"DateOfBirth": "/Date(-122954400000)/" },
        { "ID": 2, "Name": 
        "Ronaldo Luís Nazário de Lima", 
        "PlaceOfBirth": "Rio de Janeiro, Brazil", 
	"DateOfBirth": "/Date(211842000000)/" },
        { "ID": 3, "Name": "David Platt", 
        "PlaceOfBirth": "Chadderton, Lancashire, England", 
	"DateOfBirth": "/Date(-112417200000)/" },
        { "ID": 4, "Name": "Manuel Neuer", 
        "PlaceOfBirth": "Gelsenkirchen, West Germany", 
	"DateOfBirth": "/Date(512258400000)/" },
        { "ID": 5, "Name": "James Rodríguez", 
        "PlaceOfBirth": "Cúcuta, Colombia", 
	"DateOfBirth": "/Date(679266000000)/" },
        { "ID": 6, "Name": "Dimitar Berbatov", 
        "PlaceOfBirth": "Blagoevgrad, Bulgaria", 
	"DateOfBirth": "/Date(349653600000)/" }
    ];
    $(document).ready(function () {
        $('#grid').grid({
            responsive: true,
            showHiddenColumnsAsDetails: true,
            detailTemplate: '<div class="row"/>',
            dataSource: data
        });
    });
</script>

You can also see this example in the example-3-grid-responsive-plugin.html file from the samples in the attachment.

Even more responsive customizations could be achieved by using the resize, columnShow and columnHide events of the jQuery grid by gijgo.com.

I hope that this tip is going to be useful for your project. Happy coding!