CODEWITHSUNDEEP
jqueryasp.net-mvcjqgrid
Piyush Sardana
Piyush Sardana

Reputation: 1758

JQGrid not showing json data

I have tried hard with this but i'm not getting any success with it.

My controller is

public ActionResult CompOff()
        {

            return View();

        }


         [HttpPost]
        public JsonResult CompOff(RegisterCompOff r)
        {
            var compoffs = db.RegisterCompOffs.Where(l => l.Employee.Id == this.EmployeeId).Select(l => new { l.CompOffDate, l.Description, l.ExpiryDate, l.IsApproved, l.IsUtilized }).ToList();
            return Json(compoffs);

        }

My view is

<table id="jqgProducts" cellpadding="0" cellspacing="0"></table>
<div id="jqgpProducts" style="text-align:center;"></div>


<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
 <script type="text/javascript">
     $(document).ready(function () {



         $('#jqgProducts').jqGrid({
             //url from wich data should be requested
             url: '@Url.Action("CompOff")',
             //type of data
             datatype: 'json',
             //url access method type

             mtype: 'POST',
             //columns names

             colNames: ['CompOffDate', 'Description', 'ExpiryDate', 'IsApproved', 'IsUtilized'],
             //columns model
             colModel: [
                            { name: 'CompOffDate', index: 'CompOffDate', align: 'left' },
                              { name: 'Description', index: 'Description', align: 'left' },
                            { name: 'ExpiryDate', index: 'ExpiryDate', align: 'left' },
                            { name: 'IsApproved', index: 'IsApproved', align: 'left' },

                            { name: 'IsUtilized', index: 'IsUtilized', align: 'left' }

                          ],
             //pager for grid
             pager: $('#jqgpProducts'),
             //number of rows per page
             rowNum: 10,
             //initial sorting column
             sortname: 'CompOffDate',
             //initial sorting direction
             sortorder: 'asc',
             //we want to display total records count
             viewrecords: true,
             //grid height
             height: '100%'
         });
     });
    </script>

I'm getting json result in post method of my controller but that data is not getting binded to my grid..all i'm seeing is an empty grid, when i try to bind some local data, it works good, can some one please help me on this

Upvotes: 0

Views: 4280

Answers (1)

VJAI
VJAI

Reputation: 32768

You have to return the JSON data in the proper format with the necessary parameters.

For ex.

return Json(new{
                 total = 1,
                 page = 1,
                 records = collection.Count, // actual data count
                 rows = collection // actual data
              });

You are not returning the total, page(current page), records and rows.

Try this..

[HttpPost]
public JsonResult CompOff(RegisterCompOff r)
{
        var compoffs = db.RegisterCompOffs.Where(l => l.Employee.Id == 
        this.EmployeeId).Select(l => new { l.CompOffDate, l.Description, l.ExpiryDate, 
        l.IsApproved, l.IsUtilized }).ToList();

        return Json(new{
            total = 100, // change into actual value
            page = 1, //first page
            records = compoffs.Count(), // no. of records you are returning now
            rows = compoffs // data
        });
}

and add following part to view

jsonReader : {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",  
                repeatitems: false,
                cell: "cell",
                id: "id",
                userdata: "userdata",    
               },

Upvotes: 2

Related Questions