How to display custom no records message in jqgrid ~ MiTechDev.com

Mitechdev.com is a programming blog which focused on Web Programming and development

Monday, 3 July 2017

How to display custom no records message in jqgrid

20:43:00 Posted by raviteja swayampu No comments
Hi every one welcome again.In this tutorial i am going to explain how to hide jqgrid when there is no records and display an message that states 'no records found'.Recently i come across this problem.I searched for online but i did not find suitable solution to my problem.after searching sometime finally i found this solution.I want to share this solution to help the people who also work with jqgrid.

This solution is understandable for developers who have knowledge on jqgrid.If you are newbie then refer this link to know about jqgrid.Implementing jqgrid in asp.net mvc.

I implemented jqgrid with below code..


JqController.cs:
using System;
using System.Data;
using System.Linq;
using System.Data.Entity;
using System.Web.Mvc;
using Jqgrid.Models;
using System.Collections.Generic;

namespace Jqgrid.Controllers
{
    public class JqgridController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        //sample data to display in jqgrid
        public List GridData()
        {
            List userlist = new List()
            {
                new User {Id=1,Name="Raviteja",Address="Ongole",DOB="10-02-1994",Phone=1200439495 },
                new User {Id=2,Name="Koti",Address="Addanki",DOB="5-02-2017",Phone=1200439495 },
                new User {Id=3,Name="Sridhar",Address="Nellore",DOB="6-02-1997",Phone=1200439495 },
                new User {Id=4,Name="Rajkumar",Address="Kammam",DOB="9-02-1991",Phone=1200439495 },
                new User {Id=5,Name="Avinash",Address="Ongole",DOB="2-02-1994",Phone=1200439495 }
            };
            return userlist;
        }
        //Method to display jqgrid
        public JsonResult GetValues(string sidx, string sord, int page, int rows)  //Gets the todo Lists.
        {
            int pageIndex = Convert.ToInt32(page) - 1;
            int pageSize = rows;
            List userlist = new List();
            userlist = GridData();
            var Results = userlist.Select(
                    a => new
                    {
                        a.Id,
                        a.Name,
                        a.Phone,
                        a.Address,
                        a.DOB,
                    });
            int totalRecords = Results.Count();
            var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
            if (sord.ToUpper() == "DESC")
            {
                Results = Results.OrderByDescending(s => s.Id);
                Results = Results.Skip(pageIndex * pageSize).Take(pageSize);
            }
            else
            {
                Results = Results.OrderBy(s => s.Id);
                Results = Results.Skip(pageIndex * pageSize).Take(pageSize);
            }
            var jsonData = new
            {
                total = totalPages,
                page,
                records = totalRecords,
                rows = Results
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }
    }
}
Index.cshtml:
@{
    ViewBag.Title = "Jqgrid";
}

<h2>Jqgrid Application</h2>
<div id="griddisplaylookup">
    <table id="grid"></table>
    <div id="pager"></div>
</div>

<div id="NoRecordsFound" style="display:none;text-align:center;color:red;">No records found</div>

@*<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">*@
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.jqGrid.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/myjqgrid.js"></script>

1.Jqgrid provides an event called 'gridComplete' will be fired after grid loading completed.
2.I implemented logic to hide and display the 'No records found' message in call back function of this event like below.
//this event fires when grid completes..
        gridComplete: function () {
            debugger;
            //i am getting the number of records in grid...
            var records = parseInt(jQuery("#grid").jqGrid('getGridParam', 'records'));
            //if number of records are 0 then grid will be hided
            //and a div element will showed with 'No records found'
            if (records > 0) {
                $("#griddisplaylookup").show();
                $("#NoRecordsFound").hide();
            }
            else if (isNaN(records)) {
                $("#griddisplaylookup").hide();
                $("#NoRecordsFound").show();
            }
            else {
                $("#griddisplaylookup").hide();
                $("#NoRecordsFound").show();
            }
        }
3.The full script code is like below..



$(function () {
    debugger;
    $("#grid").jqGrid({
        url: "/Jqgrid/GetValues",
        datatype: 'json',
        mtype: 'Get',
        //table header name 
        colNames: ['Id', 'Name', 'Phone', 'Address', 'DOB'],
        //colModel takes the data from controller and binds to grid 
        colModel: [
            { key: true, hidden: true, name: 'Id', index: 'Id', editable: true },
            { key: false, name: 'Name', index: 'Name', editable: true },
            { key: false, name: 'Phone', index: 'Phone', editable: true },
            { key: false, name: 'Address', index: 'Address', editable: true },
            { key: false, name: 'DOB', index: 'DOB', editable: true, formatter: 'date', formatoptions: { newformat: 'd/m/Y' } }],

        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: 'Jq grid sample Application',
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        multiselect: false,
        //this event fires when grid completes..
        gridComplete: function () {
            debugger;
            //i am getting the number of records in grid...
            var records = parseInt(jQuery("#grid").jqGrid('getGridParam', 'records'));
            //if number of records are 0 then grid will be hided
            //and a div element will showed with 'No records found'
            if (records > 0) {
                $("#griddisplaylookup").show();
                $("#NoRecordsFound").hide();
            }
            else if (isNaN(records)) {
                $("#griddisplaylookup").hide();
                $("#NoRecordsFound").show();
            }
            else {
                $("#griddisplaylookup").hide();
                $("#NoRecordsFound").show();
            }
        }
        //pager-you have to choose here what icons should appear at the bottom
        //like edit,create,delete icons
    }).navGrid('#pager', { edit: true, add: true, del: true, search: false, refresh: true });
});
4.Now grid with records look like below...
5.The grid will like below if there is no records in jqgrid.(i commented data in controller).

Download source code for this application from here...Download

Conclusion:
I hope this tutorial will help you .To get more updates please subscribe to this blog subscribe. OR follow on Social networks for daily awesome updates[Facebook,twitter,google plus].

0 comments:

Post a Comment