CODEWITHSUNDEEP
model-view-controllerjqgrid
Hiba
Hiba

Reputation: 251

JQGrid is not working in ASP.net mvc 4?

This is controller code:
using JQGird.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace JQGird.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {

            return View();

        }


        public JsonResult EmployeeDetail()
        {

            Database1Entities db = new Database1Entities();
            var employeedata = db.Empployees.Select(data => new
            {
                data.Id,
                data.Name,
                data.Designation,
                data.Address,
                data.Salary
            });
            var jsondat = new
            {
                total = 1,
                page = 1,
                records = db.Empployees.ToList().Count,
                rows = employeedata


            };

            return Json(jsondat, JsonRequestBehavior.AllowGet);
        }

    }
}

and this is view of index action method

@{
    ViewBag.Title = "Index";
}
<header>
<script>

    $(document).ready(function () {


        $('#grid').jqGrid({

            url: '/Home/EmployeeDetails',
            datatype: 'json',
            myType: 'GET',
            colNames: ['Id', 'Name', 'Designation', 'Address', 'Salary'],
            colModel: [
                { name: 'Id', index: 'Id' },
                { name: 'Name', index: 'Name' },
                { name: 'Designation', index: 'Designation' },
                { name: 'Address', index: 'Address' },
                { name: 'Salary', index: 'Salary' }
            ],
            jsonReader: {
                root: 'rows',
                page: 'page',
                total: 'total',
                reocords: 'records',
                id: '0',
                repeatitems: false
            },
            pager: $('#pager'),
            rowNum: 5,
            rowList: [2, 5, 10],
            width: 600,
            viewrecords: true,
            caption: 'Jqgrid MVC Tutorial'
        });

    });

</script>

<script src="~/Scripts/jquery.jqGrid.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
</header>

<h1>Records of employees</h1>
<div>
    <table id="grid">
    </table>
<div id="pager"></div>


</div>

When i run the application, i t only show data. I have also check that the Json data is coming successffully to the view but jqgrid is not working. What mistakes i am doing?

HTML of the page
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.5.3.js"></script>

</head>
<body>



<h1>Records of employees</h1>
<div>
    <table id="grid">
    </table>
<div id="pager"></div>


</div>

<script type="text/javascript">

    $(document).ready(function () {


        $('#grid').jqGrid({

            url: '/Home/EmployeeDetail',
            datatype: 'json',
            //myType: 'GET',
            loadonce: true,
            colNames: ['Id', 'Name', 'Designation', 'Address', 'Salary'],
            colModel: [
                { name: 'Id', index: 'Id' },
                { name: 'Name', index: 'Name' },
                { name: 'Designation', index: 'Designation' },
                { name: 'Address', index: 'Address' },
                { name: 'Salary', index: 'Salary' }
            ],
            jsonReader: {
                root: 'rows',
                page: 'page',
                total: 'total',
                reocords: 'records',
                id: '0',
                repeatitems: false
            },
            pager: $('#pager'),
            rowNum: 5,
            rowList: [2, 5, 10],
            width: 600,
            viewrecords: true,
            caption: 'Jqgrid MVC Tutorial'
        });

    });

</script>
<link href="/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>

<script src="/Scripts/i18n/grid.locale-en.js"></script>
<script src="/Scripts/jquery.jqGrid.min.js"></script>
<script src="/Scripts/jquery.jqGrid.js"></script>















</body>
</html>

Upvotes: 0

Views: 923

Answers (1)

Oleg
Oleg

Reputation: 222017

The HTML page have wrong order of JavaScripts which you includes.

  • It's important to understand that jqGrid is jQuery plugin. So one have to include first jQuery and only then one can includes jqGrid JavaScript files.
  • In the same way you use $(document).ready(function () {...}); which contains $ and .ready defined by jQuery, but you use the code before you included jQuery file jquery-1.9.1.min.js.
  • The next error: you included both non-minimized jqGrid jquery.jqGrid.js and then minimized version of the same file jquery.jqGrid.min.js. It's wrong. You should include only one from the files.
  • One more problem could exist in the order of the main jqGrid file (jquery.jqGrid.min.js, jquery.jqGrid.js or jquery.jqGrid.src.js) and the corresponding locale file grid.locale-en.js. There are different requirements for different versions of jqGrid and different forks, but the recommended order which works in all versions of jqGrid is: first include locale file (like grid.locale-en.js) and then the main jqGrid file (like jquery.jqGrid.min.js).
  • you skipped <body>...</body> after </header>.
  • The code of EmployeeDetail action don't uses any parameters which jqGrid send. You don't implemented any paging and sorting in the server code. Instead of that you just return all data at once. You should use loadonce: true options in the case. jqGrid will load all the data and then it will use sorting, paging and filtering on the client side. I hope that you use jqGrid in version higher as 3.7 which implemented support of loadonce: true. If you use loadonce: true option then the total, page and records properties of the server response will be ignored. Thus you can reduce the code of the server side and use return Json(employeedata, JsonRequestBehavior.AllowGet); instead of return Json(jsondat, JsonRequestBehavior.AllowGet);.
  • There are no myType option, but there are exist mtype option which default value is 'GET'. So you should remove myType: 'GET' option which will be ignored by jqGrid.
  • Some options of jqGrid can depend from the version of jqGrid which you use. I would recommend you to use gridview: true, autoencode: true, height: "auto". I would recommend you to remove unneeded index properties from all columns defined in colModel. Instead of that you can add key: true option for Id column. It will inform jqGrid to use the values from the columns as the values of id attribute of the rows (id of <td> elements). The jsonReader can be removed or you can use jsonReader: { repeatitems: false } or jsonReader: { repeatitems: false, root: function (obj) { return obj; } }. If you use recent version of jqGrid then no jsonReader will be required.
  • I mentioned above multiple times about versions which you use. I would recommend you to update jQuery 1.9.1 which you use currently to jQuery 1.11.3 or 2.1.4. Moreover I would recommend you to use the latest version of free jqGrid which you can get either from NuGet (see here), used URLs from CDN (see the wiki article) or to download the latest sources from GitHub directly.

Upvotes: 1

Related Questions