Create simple jqGrid with examples

jqGrid is a Javascript plugin that displays table contents in various ways based on different configurations. Lets see how to create simple jqGrid with examples.

Features of jqGrid:

Sortable Columns: One can click on the column header to sort the rows by the content in the column.
Hover Effects: Free jqGrid gives you the ability to use hovering effects for rows and the cells on the grid.
Selectable Rows: One can click on a row of the grid to select/unselect it
Multi-Selectable Rows: One can select multiple rows.
Selectable Rows: One can click on a row of the grid to select it.
Resizable Columns: One can resize the columns in an intuitive way, as shown in the animated image below.

Important things to Create simple jqGrid

1. CSS and JS files
jqGrid uses jQuery UI CSS or Bootstrap CSS for styling. Thus one would have to include the corresponding JavaScript and CSS files.

2. Empty Table tag
We need to create an empty <table> element to reserve the place where the grid should be created

3. Call jQuery("#tableId").jqGrid({/*options*/});
tableId is the id given for the empty table that needs to be created.

4. Use of colModel and data variables.
colModel creates a header structure while the data adds content to the table.

Example

For the example we are using jqGrid js file from the cdn. You can download it and directly use it in your application.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Simple jqGrid Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
    <script>
    //<![CDATA[
    $(function () {
        "use strict";
        $("#grid").jqGrid({
            colModel: [
                { name: "firstName" },
                { name: "lastName" }
            ],
            data: [
                { firstName: "Zinedine", lastName: "Zidane" },
                { firstName: "Oliver", lastName: "Kahn" },
                { firstName: "David", lastName: "Beckham" },
                { firstName: "Lionel", lastName: "Messi" },
                { firstName: "Cristiano", lastName: "Ronaldo" }
            ]
        });
    });
    //]]>
    </script>
</head>
<body>
<table id="grid"></table>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Simple jqGrid Example</title>

//<![CDATA[

$(function () {

"use strict";

$("#grid").jqGrid({

colModel: [

{ name: "firstName" },

{ name: "lastName" }

data: [

{ firstName: "Zinedine", lastName: "Zidane" },

{ firstName: "Oliver", lastName: "Kahn" },

{ firstName: "David", lastName: "Beckham" },

{ firstName: "Lionel", lastName: "Messi" },

{ firstName: "Cristiano", lastName: "Ronaldo" }

]

});

//]]>

</script>

</head>

<body>

</body>

</html>

Output
Create simple jqGrid

How it works as html

If you inspect the jqGrid in explorer you will find how the jqGrid works
1. Every row of the grid ( <tr> elements) have id attribute If jqGrid will not find the id information in the input data, then it assign automaticaly the values “jqg1”, “jqg2”, “jqg2”, …
2. The column headers are not the part of the <table> . For making the header fixed and body scrollable 2 different tables are used instead.

Create simple jqGrid with =examples

Reference
1. Getting started with jqGrid