Jitesh Byahut 8/16/2015 3553

JqGrid Basic Examples In MVC

In web application, every time we need to represent data into tabular form. In Asp.Net, we are using gridview but in Asp.Net MVC we don't have any readymade tool like gridview that handle pagination, sorting and some other functions. So we are using third party tool like jqGrid, DataTable etc. Here we are going to study about jqGrid in MVC. jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.

Here we are creating an Asp.Net MVC application for demonstrating jqGrid. That has a controller that name is JqGridController. In that controller, GetStudents() method return the list of records from database table Student using Entity Framework in json format. Index action method is created for ui representation.

Controller Codes

public class JqGridController : Controller

{

    public ActionResult Index()

    {  

        return View();

    }       

 

    public JsonResult GetStudents()

    {

        DbStudentEntities db = new DbStudentEntities();

        var data = from i in db.Students

                    select new

                    {

                        StudentId = i.StudentId,

                        Name = i.Name,

                        Mobile = i.Mobile,

                        Email = i.Email,

                        City = i.City,

                        DOJ = i.DOJ

                    };

        return Json(data, JsonRequestBehavior.AllowGet);

    }

}

API References

You can download the jqGrid api package or install the jqGrid packages using NuGet package installer from visual studio. After that add all required scripts on page. Below is showing all necessary reference files.

<link href="~/Scripts/JqGrid/css/ui.jqgrid.css" rel="stylesheet" />

<link href="~/Scripts/Jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />

<script src="~/Scripts/JqGrid/js/jquery-1.11.0.min.js"></script>

<script src="~/Scripts/JqGrid/js/jquery.jqGrid.min.js"></script>

<script src="~/Scripts/JqGrid/js/i18n/grid.locale-en.js"></script>

Html codes

<div>

    <table id="tblData"></table>

    <div id="divPager"></div>

</div>

We done the setup of controller codes and added the jqGrid required api refrences on the page. Now we are going to learn one by one features of jqGrid.

A simple basic JqGrid

Now we are creating js codes for binding a basic jqGrid that have four columns Name, Mobile, Email and City. Below is showing required options of jqGrid for binding a basic grid.

1. url: specify the url that return the data in specified format.

2. datatype: specify the type of your data that return from url.

3. mtype: specify that Post or Get option for retrieving the data.

4. colNames: used for defining header names

5. colModel: used for server side object manipulation and many more feature options.

6. width: set the width of grid.

7. height: set the height of grid.

8. caption: set the title of grid.

Below is showing basic js script codes for binding jqGrid.

<script>

    $(document).ready(function () {

        $("#tblData").jqGrid({

            url: 'http://localhost:51548/JqGrid/GetStudents',

            datatype: "json",

            mtype: 'Get',

            colNames: ['Name', 'Mobile', 'Email', 'City'],

            colModel: [{ name: 'Name', index: 'Name' },

                        { name: 'Mobile', index: 'Mobile' },

                        { name: 'Email', index: 'Email' },

                        { name: 'City', index: 'City' }],

            width: 700,

            height: 'auto',

            caption: "JqGrid Sample By Asphelps.com"

        });

    });

</script>

Set width of column in jqGrid

You can adjust the width of columns. Use colModel's width option for column size.

$("#tblData").jqGrid({

    url: 'http://localhost:51548/JqGrid/GetStudents',

    datatype: "json",

    mtype: 'Get',

    colNames: ['Name', 'Mobile', 'Email', 'City'],

    colModel: [{ name: 'Name', index: 'Name', width: 180 },

                { name: 'Mobile', index: 'Mobile', width: 100 },

                { name: 'Email', index: 'Email', width: 200 },

                { name: 'City', index: 'City', width: 120 }],

    width: 700,

    height: 'auto',

    caption: "JqGrid Sample By Asphelps.com"

});

Hide the column in jqGrid

You can hide any columns. Use colModel's hidden option for column hiding. It accepts boolean value true or false. Default value is false. In Below example, we are hiding Email column.

$("#tblData").jqGrid({

    url: 'http://localhost:51548/JqGrid/GetStudents',

    datatype: "json",

    mtype: 'Get',

    colNames: ['Name', 'Mobile', 'Email', 'City'],

    colModel: [{ name: 'Name', index: 'Name' },

                { name: 'Mobile', index: 'Mobile' },

                { name: 'Email', index: 'Email', hidden: true },

                { name: 'City', index: 'City' }],

    width: 700,

    height: 'auto',

    caption: "JqGrid Sample By Asphelps.com"

});

Set the column alignment in jqGrid

You can align the columns of jqGrid. Use colModel's align option for column alignment. It have three options: left, center, right. Default value is left.

$("#tblData").jqGrid({

    url: 'http://localhost:51548/JqGrid/GetStudents',

    datatype: "json",

    mtype: 'Get',

    colNames: ['Name', 'Mobile', 'Email', 'City'],

    colModel: [{ name: 'Name', index: 'Name', align: 'center' },

                { name: 'Mobile', index: 'Mobile', align: 'center' },

                { name: 'Email', index: 'Email', align: 'center' },

                { name: 'City', index: 'City', align: 'center' }],

    width: 700,

    height: 'auto',

    caption: "JqGrid Sample By Asphelps.com"

});

Create first column as index column in jqGrid

Sometimes we have requirement for first column as index column of the grid that showing the index of each rows starting from 1. JqGrid has an option rownumbers that accepts boolean value true or false. Default value is false.

$("#tblData").jqGrid({

    url: 'http://localhost:51548/JqGrid/GetStudents',

    datatype: "json",

    mtype: 'Get',

    colNames: ['Name', 'Mobile', 'Email', 'City'],

    colModel: [{ name: 'Name', index: 'Name' },

                { name: 'Mobile', index: 'Mobile' },

                { name: 'Email', index: 'Email' },

                { name: 'City', index: 'City' }],

    width: 700,

    rownumbers: true,

    height: 'auto',

    caption: "JqGrid Sample By Asphelps.com"

});


Please give your feedback for improving this page