Click here to Skip to main content
15,793,260 members
Articles / Web Development / ASP.NET

Qtip integration with JqGrid in ASP.NET MVC

Rate me:
Please Sign up or sign in to vote.
4.75/5 (4 votes)
16 Nov 2011CPOL2 min read 38.8K   1.3K   20   8
How to integrate Qtip with JqGrid in ASP.MVC application


In this article, I am going to demonstrate with a code example how to integrate qtip with JqGrid in ASP.MVC application. This is a generic implementation in a way that you simply set a custom property named “description” in ColModel to whatever you want to display in tooltip such as text, images and server side data, etc.

To understand this example effectively, I will assume that you have the basic knowledge of JqGrid (, QTip ( and ASP.NET MVC (

Create a New ASP.NET MVC Application

In Visual Studio 2010 sp1, go to: File -> Project ->


Select “web” under Visual C#, then choose ASP.NET MVC 3 Web Application and change the name of the solution to “JqGridWithQTipIntegration”.


In the next step, let the options selected as default with “Internet Application” and “view engine as .aspx”.

Click Ok button to create a new ASP.NET MVC 3 web application.


After project creation, you are going to have the following hierarchy in solution explorer.


Build a Custom Model for Demo

In model folder in ASP.NET MVC web application, add new classes named as “SomeEntity.cs” and “Repository.cs”.


public class SomeEntity
      public int Id { get; set; }
      public int IntProperty { get; set; }
      public string StringProperty { get; set; }
      public DateTime DateProperty { get; set; }


/// <summary>
/// Trivial repository of random data for demo purposes. 
/// Not for use in a real application!
/// </summary>
    public class Repository
        private static IQueryable<SomeEntity> _data;

        public IQueryable<SomeEntity> SelectAll()
            return _data;

        /// <summary>
        /// Demo data is static so that we can demonstrate sorting with the 
        /// same data for the whole lifetime of the application.
        /// </summary>
        static Repository()
            var data = new List<SomeEntity>();
            var rand = new Random();
            for (int i = 0; i < 100; i++)
                data.Add(new SomeEntity
                        Id = i,
                        IntProperty = rand.Next(99),
                        StringProperty = rand.Next(99).ToString(),
                        DateProperty = new DateTime(2000 + rand.Next(10), 
                        	rand.Next(11) + 1, rand.Next(27) + 1)
            _data = data.AsQueryable();

Add ActionMethod in HomeController that will return server side data for JqGrid

Add the following Action method in Home Controller. This will return server side data to bind JqGrid which is of type Json and it will take parameters which JqGrid sends with ajax request as shown below.

(Link for jqgrid default parameters with ajax request)

public ActionResult GridDemoData(int page, int rows, 
		string search, string sidx, string sord)
            int currentPage = Convert.ToInt32(page) - 1;
            int totalRecords = 0;
            var repository = new Repository();
            var data = repository.SelectAll();
            totalRecords = data.Count();
            var totalPages = (int)Math.Ceiling(totalRecords / (float)rows);
            var jsonData = new
                total = totalPages,
                records = totalRecords,

                rows = (
                           from m in data
                           select new
                               id = m.Id,
                               cell = new object[]
                                          String.Format("{0:MM/dd/yyyy}", m.DateProperty)
            return Json(jsonData, JsonRequestBehavior.AllowGet);

JqGrid and Qtip Setup Requirements:

You need to include the following files in Site.Master to implement the solution:

  • ui.jqgrid.css is used for jqgrid style and formatting
  • jquery-ui-1.8.custom.css is used for style and formatting
  • jquery-1.5.1.min.js used for jquery framework
  • jquery-ui-1.8.7custom.min.js is used for jquery UI like dialog, etc.
  • grid.locale-en.js is used for jqgrid localization
  • jquery.jqGrid.min.js is required for jqgrid
<link href="<%= ResolveUrl("~/Content/themes/redmond/ui.jqgrid.css") %>" rel="stylesheet"
        type="text/css" />
    <link href="<%= ResolveUrl("~/Content/Site.css") %>" 
		rel="stylesheet" type="text/css" />
    <link href="<%= ResolveUrl("~/Content/themes/redmond/jquery-ui-1.8.custom.css") %>"
        rel="stylesheet" type="text/css" />
    <script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" 
    <script src="../../Scripts/jquery-ui-1.8.7custom.min.js" 
    <script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

Note: The order of files included is important because if you change the order, then JqGrid will not be operational.

JqGrid Configuration

Below is the JavaScript and HTML code for JqGrid.

HTML elements added for JqGrid in Index.aspx:

<table id="grid" cellpadding="0" cellspacing="0">
        <div id="pager" style="text-align: center;">
        <div id="search" style="margin-left: 30%; display: none">

JavaScript code for JqGrid in Home.GridDemo.js:

var lastsel;
$(function () {

        colNames: ['Int', 'String', 'Date'],
        colModel: [
                        { name: 'IntProperty', index: 'IntProperty', sortable: true,
                            editable: true, editoptions: { dataInit: ShowHint },
                            description: 'IntProperty tooltip goes here'
                        { name: 'StringProperty', index: 'StringProperty', sortable: true,
                            editable: true, editoptions: { dataInit: ShowHint },
                            description: 'StringProperty tooltip goes here'
                        { name: 'DateProperty', index: 'DateProperty', sortable: true,
                            editable: true, editoptions: { dataInit: ShowHint },
                            description: 'DateProperty tooltip goes here'
        pager: $("#pager"),
        sortname: 'IntProperty',
        rowNum: 10,
        rowList: [10, 20, 50],
        sortorder: "",
        height: 300,
        imgpath: '/Content/jqGridCss/redmond/images',
        width: 800,
        url: "/Home/GridDemoData",
        datatype: 'json',
        mtype: 'GET',
        onCellSelect: function (rowid, iCol, aData) {

            if (rowid && rowid !== lastsel) {

                if (lastsel)
                    jQuery('#grid').jqGrid('restoreRow', lastsel);
                jQuery('#grid').jqGrid('editRow', rowid, true);
                lastsel = rowid;
    }).navGrid($("#pager"), { edit: true, add: false, del: false, search: false });
    $("#search").filterGrid($("#grid"), {
        gridModel: false,
        filterModel: [{
            label: 'Search',
            name: 'search',
            stype: 'text'

Note that “description” is a custom property which contains text for tooltip and “ShowHint” method is called to display description text as a tooltip.

Generic Implementation of JqGrid Integration with QTip

Below is the code for JqGrid integration with Qtip in Helper.js:

// this function show tool tip dialog for a certain element of 
// jqgrid and assumes that jqgrid name is #grid
function ShowHint(elem) {
    var selector = '';
    if (this.gridName != null)
        selector = '#' + this.gridName;
    else if ($('#grid') != null) {
        selector = '#grid';

    if (selector == '') {
        alert('jqgrid name is not "grid" or gridName "Edit Option" not set');

    if (elem == 0)

        content: getColDescription(, selector),
        show: 'focusin',
        hide: 'focusout',
        name: 'red',
        tip: 'leftTop',
        textAlign: 'left',
        fontWeight: '500',
        fontSize: '11px'
            target: 'rightTop',
            tooltip: 'LeftTop'


function getColDescription(colName, jqGridSelector) {
    var description = '';
    if (colName != '') {
        var colModel = $(jqGridSelector).getGridParam('colModel');
        $.each(colModel, function (index, model) {
            if ( == colName) {
                description = model.description;
                return false;


    return description;

Web Page working Example:


You can download the complete demo code with the link provided.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer (Senior) -
Pakistan Pakistan
i am working as a senior software developer.

Comments and Discussions

QuestionError Pin
saaddeve201229-Aug-12 14:47
saaddeve201229-Aug-12 14:47 
QuestionError Pin
saaddeve201229-Aug-12 4:07
saaddeve201229-Aug-12 4:07 
AnswerRe: Error Pin
aamir sajjad29-Aug-12 8:03
aamir sajjad29-Aug-12 8:03 
GeneralRe: Error Pin
saaddeve201229-Aug-12 8:12
saaddeve201229-Aug-12 8:12 
GeneralRe: Error Pin
aamir sajjad29-Aug-12 8:22
aamir sajjad29-Aug-12 8:22 
GeneralRe: Error Pin
saaddeve201229-Aug-12 8:29
saaddeve201229-Aug-12 8:29 
GeneralGreat Article Pin
Wajhi Ghumman17-Nov-11 3:02
Wajhi Ghumman17-Nov-11 3:02 
GeneralMy vote of 4 Pin
Syed Kamran ul Haq16-Nov-11 20:19
Syed Kamran ul Haq16-Nov-11 20:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.