jqgrid retrieving empty rows using webapi (REST)
Posted
by
polonskyg
on Stack Overflow
See other posts from Stack Overflow
or by polonskyg
Published on 2012-12-15T05:02:22Z
Indexed on
2012/12/15
5:03 UTC
Read the original article
Hit count: 393
I'm using jqgrid in an ASPNET MVC4 project with WebApi (REST), Entity Framework 5 using Unit Of Work and Repository patterns. My problem is that I see the data flowing as json to the browser and I see three rows in the grid, but those rows are empty, and the data is not shown (three empty rows in the grid).
This is method to get the data in the WebApi controller:
public dynamic GetGridData(int rows, int page, string sidx, string sord)
{
var pageSize = rows;
var index = sidx;
var order = sord;
var categories = Uow.Categories.GetAll().OrderBy(t => (string.IsNullOrEmpty(index) ? "Id" : index) + " " + (order ?? "desc"));
var pageIndex = Convert.ToInt32(page) - 1;
var totalRecords = categories.Count();
var totalPages = (int)Math.Ceiling((float) totalRecords / (float) pageSize);
var categoriesPage = categories.Skip(pageIndex * pageSize).Take(pageSize).ToList();
return new
{
total = totalPages,
page = page,
records = totalRecords,
rows = (from category in categoriesPage
select new
{
id = category.Id.ToString(),
cell = new string[]
{
category.Id.ToString(),
category.Name,
category.Description
}
}).ToArray()
};
}
This is the json received in the browser
{
"total": 1,
"page": 1,
"records": 3,
"rows": [{
"id": "1",
"cell": ["1", "Category 1", null]
}, {
"id": "3",
"cell": ["3", "Category 3", "asAS"]
}, {
"id": "4",
"cell": ["4", "Category 4", null]
}]
}
This is the .js file with jqgrid
jQuery("#ajaxGrid").jqGrid({
url: $("#ServiceUrl").val(),
datatype: "json",
jsonReader: { repeatitems: false, id: "Id" },
colNames: ['Id', 'Name', 'Description'],
colModel: [
{ name: 'id', editable: true, sortable: true, hidden: true, align: 'left' },
{ name: 'name', editable: true, sortable: true, hidden: false, align: 'left' },
{ name: 'description', editable: true, sortable: true, hidden: false, align: 'left' }
],
mtype: 'GET',
rowNum: 15,
pager: '#ajaxGridPager',
rowList: [10, 20, 50, 100],
caption: 'List of Categories',
imgpath: $("#ServiceImagesUrl").val(),
altRows: true,
shrinkToFit: true,
viewrecords: true,
autowidth: true,
height: 'auto',
error: function(x, e)
{
alert(x.readyState + " "+ x.status +" "+ e.msg);
}
});
function updateDialog(action) {
return {
url: $("#ServiceUrl").val(),
closeAfterAdd: true,
closeAfterEdit: true,
afterShowForm: function (formId) { },
modal: true,
onclickSubmit: function (params) {
var list = $("#ajaxGrid");
var selectedRow = list.getGridParam("selrow");
params.url += "/" + list.getRowData(selectedRow).Id;
params.mtype = action;
},
width: "300",
ajaxEditOptions: { contentType: "application/json" },
serializeEditData: function (data) {
delete data.oper;
return JSON.stringify(data);
}
};
}
jQuery("#ajaxGrid").jqGrid(
'navGrid',
'#ajaxGridPager',
{
add: true,
edit: true,
del: true,
search: false,
refresh: false
},
updateDialog('PUT'),
updateDialog('POST'),
updateDialog('DELETE')
);
BTW, If I want to return jqGridData instead the dynamic, How should I do it? Did is showing empty rows as well:
public class jqGridData<T> where T : class
{
public int page { get; set; }
public int records { get; set; }
public IEnumerable<T> rows { get; set; }
public decimal total { get; set; }
}
public jqGridData<Category> GetGridData(int rows, int page, string sidx, string sord)
{
var pageSize = rows;
var index = sidx;
var order = sord;
var categories = Uow.Categories.GetAll().OrderBy(t => (string.IsNullOrEmpty(index) ? "Id" : index) + " " + (order ?? "desc"));
var pageIndex = Convert.ToInt32(page) - 1;
var totalRecords = categories.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var categoriesPage = categories.Skip(pageIndex * pageSize).Take(pageSize);
return new jqGridData<Category>
{
page = page,
records = totalRecords,
total = totalPages,
rows = categoriesPage
};
}
© Stack Overflow or respective owner