Click here to Skip to main content
Click here to Skip to main content

Qtip integration with JqGrid in ASP.NET MVC

, 16 Nov 2011
Rate this:
Please Sign up or sign in to vote.
How to integrate Qtip with JqGrid in ASP.MVC application

Introduction

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 (http://www.trirand.com/blog/), QTip (http://craigsworks.com/projects/qtip/) and ASP.NET MVC (http://www.asp.net/mvc).

Create a New ASP.NET MVC Application

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

File-New.png

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

Create-solution_small.png

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.

nextstp-creation.png

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

solution-hrchy.png

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”.

SomeEntity.cs

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

Repository.cs

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

        public IQueryable<SomeEntity> SelectAll()
        {
            return _data;
        }

        /// <span class="code-SummaryComment"><summary>
</span>        /// Demo data is static so that we can demonstrate sorting with the 
        /// same data for the whole lifetime of the application.
        /// <span class="code-SummaryComment"></summary>
</span>        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,
                page,
                records = totalRecords,

                rows = (
                           from m in data
                           select new
                           {
                               id = m.Id,
                               cell = new object[]
                                      {
                                          m.IntProperty,
                                          m.StringProperty,
                                          String.Format("{0:MM/dd/yyyy}", m.DateProperty)
                                      }
                           }).ToArray()
            };
            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") %>" 
		type="text/javascript">
    </script>
    <script src="../../Scripts/jquery-ui-1.8.7custom.min.js" 
		type="text/javascript"></script>
    <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">
        </table>
        <div id="pager" style="text-align: center;">
        </div>
        <div id="search" style="margin-left: 30%; display: none">
        </div>

JavaScript code for JqGrid in Home.GridDemo.js:

var lastsel;
$(function () {

    $("#grid").jqGrid({
        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');
        return;
    }

    if (elem == 0)
        return;

    jQuery(elem).qtip({
        content: getColDescription(this.name, selector),
        show: 'focusin',
        hide: 'focusout',
        style:
    {
        name: 'red',
        tip: 'leftTop',
        textAlign: 'left',
        fontWeight: '500',
        fontSize: '11px'
    },
        position:
    {
        corner:
        {
            target: 'rightTop',
            tooltip: 'LeftTop'

        }
    }
    });
}

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

        });
    }

    return description;
}

Web Page working Example:

webPage_small.png

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

License

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

About the Author

aamir sajjad
Software Developer (Senior) -
Pakistan Pakistan
i am working as a senior software developer.
 
aamirposwal.blogspot.com

Comments and Discussions

 
QuestionError Pinmembersaaddeve201229-Aug-12 13:47 
QuestionError Pinmemberraamanesaad29-Aug-12 3:07 
AnswerRe: Error Pinmemberaamir sajjad29-Aug-12 7:03 
GeneralRe: Error Pinmemberraamanesaad29-Aug-12 7:12 
GeneralRe: Error Pinmemberaamir sajjad29-Aug-12 7:22 
GeneralRe: Error Pinmembersaaddeve201229-Aug-12 7:29 
GeneralGreat Article PinmemberWajhi Ghumman17-Nov-11 2:02 
GeneralMy vote of 4 PinmemberSyed Kamran ul Haq16-Nov-11 19:19 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 16 Nov 2011
Article Copyright 2011 by aamir sajjad
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid