jQuery Grid Plugin - jqGrid - Topic: Data not showing C# asp.net MVC

maitopoika on Data not showing C# asp.net MVC

Wed, 17 Mar 2010 18:17:22 +0200

Thank you for the advice on using url.Content I will do that for sure.

I actually figured out what the problem was. I am using MVC2, with that I needed to add the following to my controller return statement

JsonRequestBehavior.AllowGet

so the return now looks like:

return Json(jsondata,JsonRequestBehavior.AllowGet);

and it works perfectly!

I appreciate your help, you really helped me understand what was working and that I needed to look else where in the code to find the problem.

yial2 on Data not showing C# asp.net MVC

Wed, 17 Mar 2010 09:53:52 +0200

Here is the client code I used

    $("#list2").jqGrid({
        url: '<%= Url.Content("~/Home/Test4Data/") %>',
         datatype: "json",
         mtype: 'GET',
         colNames: ['Invoice', 'Company', 'Model'],
         colModel: [
              { name: 'invoice', index: "invoice", width: 50, align: 'left' },
              { name: 'company', index: "company", width: 100, align: 'left' },
              { name: 'descript', index: "descript", width: 100, align: 'left'}],
         rowNum: 20,
         rowList: [10, 20, 30],
         imgpath: '<%= Url.Content("~/Scripts/jqueryUI/css/ui-lightness/images") %>',
         height: 'auto',
         width: '400',
         pager: jQuery('#pager'),
         sortname: 'invoice',
         viewrecords: true,
         sortorder: "Desc",
         caption: ""
    });

Beside my div name "list2", imagpath, and url, there are really no difference. I am also puzzled why yours do not work.

I recommend you to using MVC "Url.Content" to resolve the url, just a better practice.

maitopoika on Data not showing C# asp.net MVC

Tue, 16 Mar 2010 23:58:40 +0200

ok still nothing. I am doing something seriously wrong, because i cannot even get any tutorials to work when I walk through them step by step

here is everything I have please help if you can. I have been battling this all day for three days now. Very frustrating.

i simplified it even more than on my original post.

here is my view

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT.....t;>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ShowData</title>
    <link href="../../Content/CSS/startTheme/jquery-ui-1.8rc3.custom.css" rel="stylesheet"
        type="text/css" />
    <link href="../../Content/CSS/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.4.1.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>
</head>

<body>
    <div>
    <h2>Complete Unpaid</h2>

<table id="completeUnPaidList"></table>
<div id="pager"></div>
</div>
<script type="text/javascript">
     var gridimgpath = '../../Content/CSS/startTheme/Images/';
     var gridDataUrl = 'Home/JsonCompletedNotPayed/';
     jQuery("#completeUnPaidList").jqGrid({
         url: gridDataUrl,
         datatype: "json",
         mtype: 'GET',
         colNames: ['Invoice', 'Company', 'Model'],
         colModel: [
              { name: 'invoice', index: "invoice", width: 50, align: 'left' },
              { name: 'company', index: "company", width: 100, align: 'left' },
              { name: 'descript', index: "descript", width: 100, align: 'left'}],
         rowNum: 20,
         rowList: [10, 20, 30],
         imgpath: gridimgpath,
         height: 'auto',
         width: '400',
         pager: jQuery('#pager'),
         sortname: 'invoice',
         viewrecords: true,
         sortorder: "Desc",
         caption: ""
     });

$(function() {

         // Set the grid json url to get the data to display
         setGridUrl();
     });

     function setGridUrl() {
         // Get the start and end dates entered
         var newGridDataUrl = gridDataUrl;

         // Set the parameters in the grid data source
         jQuery('#completeUnPaidList').jqGrid('setGridParam', { url: newGridDataUrl }).trigger("reloadGrid");
     }
</script>

</div>
</body>
</html>

here is my controller

public ActionResult JsonCompletedNotPayed(DateTime start, DateTime end, string sidx, string sord, int page, int rows)
        {
            var dataJson = new
            {
                total = 1,
                page = page,
                records = 5,
                rows = new[]
                    {
                        new {id = 1, cell = new string[] {"abc1", "1", "a"}},
                        new {id = 2, cell = new string[] {"abc2", "1", "a"}},
                        new {id = 3, cell = new string[] {"abc3", "1", "a"}},
                        new {id = 4, cell = new string[] {"abc4", "1", "a"}},
                        new {id = 5, cell = new string[] {"abc5", "1", "a"}},
                    }
            };

return Json(dataJson);

}

now when i run it and put a break point in the controller, it never gets there, and I just get a page with the top and bottom of the grid

yial2 on Data not showing C# asp.net MVC

Tue, 16 Mar 2010 20:15:25 +0200

Hmmm…

I have tried your code with static data in MVC control as following…

            var dataJson = new
            {
                total = 1,
                page = page,
                records = 5,
                rows = new[]
                    {
                        new {id = 1, cell = new string[] {"abc1", "1", "a"}},
                        new {id = 2, cell = new string[] {"abc2", "1", "a"}},
                        new {id = 3, cell = new string[] {"abc3", "1", "a"}},
                        new {id = 4, cell = new string[] {"abc4", "1", "a"}},
                        new {id = 5, cell = new string[] {"abc5", "1", "a"}},
                    }
            };

return Json(dataJson);

and it is working just fine.Give it a try and see if you get the grid to show up.

maitopoika on Data not showing C# asp.net MVC

Tue, 16 Mar 2010 16:23:05 +0200

Have you tried to put a break point on your controller and see if the grid is actually calling JsonCompletedNotPayed?

Yes, I have done this. And it does go into the controller run the code and return a Json result set. But still no data shows.

yial2 on Data not showing C# asp.net MVC

Tue, 16 Mar 2010 06:46:33 +0200

Hi,

Have you tried to put a break point on your controller and see if the grid is actually calling JsonCompletedNotPayed?

I think you should initialized JqGrid inside JQuery ready function:


$(function() {
//Initialized JqGrid here
});

E.g. Check the javascript on this page (scroll all the way to the bottom to click on pop up to see the JqGrid)

maitopoika on Data not showing C# asp.net MVC

Tue, 16 Mar 2010 00:17:35 +0200

I am trying to use jqGrid to display data. How ever the data is just not displaying, and I get no errors at all.

The graphics of the grid are showing and it acts like it completes normally, but with no data in the grid. I have verified that my controller method is in fact returning the expected data in Json format.

Here is my script

<h2>Complete Unpaid</h2>

<table id="completeUnPaidList"></table>
<div id="pager"></div>
</div>
<script type="text/javascript">
     var gridimgpath = '../../../../Content/CSS/startTheme/Images';
     var gridDataUrl = 'DealerServices/JsonCompletedNotPayed';
     jQuery("#completeUnPaidList").jqGrid({
         url: gridDataUrl,
         datatype: "json",
         mtype: 'GET',
         colNames: ['Invoice', 'Company', 'Model'],
         colModel: [
              { name: 'invoice', index: "invoice", width: 50, align: 'left' },
              { name: 'company', index: "company", width: 100, align: 'left' },
              { name: 'descript', index: "descript", width: 100, align: 'left'}],
         rowNum: 20,
         rowList: [10, 20, 30],
         imgpath: gridimgpath,
         height: 'auto',
         width: '400',
         pager: jQuery('#pager'),
         sortname: 'invoice',
         viewrecords: true,
         sortorder: "Desc",
         caption: ""
     });

$(function() {

         // Set the grid json url to get the data to display
         setGridUrl();
     });

     function setGridUrl() {
         // Get the start and end dates entered
         var newGridDataUrl = gridDataUrl;

         // Set the parameters in the grid data source
         jQuery('#completeUnPaidList').jqGrid('setGridParam', { url: newGridDataUrl }).trigger("reloadGrid");
     }
</script>

here is my controller method

public ActionResult JsonCompletedNotPayed(string sidx, string sord, int page, int rows)
        {
            SpaService SpaSvc = new SpaService(spaRepository);
            List<SpaOrder> context = SpaSvc.GetSpaOrdersCompleteNotPaid();

            int pageIndex = Convert.ToInt32(page) - 1;
            int pagesize = rows;
            int totalrecords = context.Count();
            int totalPages = (int)Math.Ceiling((float)totalrecords / (float)pagesize);
            //string orderBy = string.Format("{0} {1}", sidx, sord);
            var spas = context.AsQueryable()
                            //.OrderBy(orderBy)
                            .Skip(pageIndex * pagesize)
                            .Take(pagesize);

            //format data for the grid
            var jsondata = new
            {
                total = totalPages,
                page = page,
                records = totalrecords,
                rows = (from s in spas
                        select new
                        {
                            cell = new string[]{
                                 s.invoice.ToString(),
                                 s.company,
                                 s.descript
                             }
                        }).ToArray()
            };

return Json(jsondata);

}