jqxgrid not loading data - datagridviewcolumn

Question

I am trying to lead data from my controller. The queries work right but i cant seem to load the data in the view. If anyone can see my mistake, i will appreciate it.
controller
public ActionResult GetItemList(int RRGroupID)
{
var item = ReportEngineHelper.GetReportingEngine(Session).Generate<ItemListQuery>(new Filter()
{
Item=new Item()
{
RRGroupID = RRGroupID,
}
}).ToQueryModel<ItemName>();
var listItemName = new List<ItemName>();
return Json(item, JsonRequestBehavior.AllowGet);
}
view
var detailsSource =
{
url: $.ajax({url: url,
type: "json",
data: {RRGroupID:RRGroupID},
}),
datatype: "json",
datafields: [{ name: "ItemID", type: "int" }, { name: "FullItemName" }],
};
var detailsAdapter = new $.jqx.dataAdapter(detailsSource);
$("#jqxgrid").jqxGrid({
source: detailsAdapter,
autoheight:true,
autowidth: true,
columns: [
{ text: 'Item Name', datafield: 'FullItemName', width: 200, editable: false },
{ text: 'Unit', width: 100, editable: true },
{ text: 'Beginning Balance', width: 180, editable: true },
{ text: 'Loss', width: 80, editable: true, cellsalign: 'right' },
{ text: 'Quantity Recieved', width: 90, editable: true, cellsalign: 'right'},
{ text: 'DOS', width: 100, editable: true, cellsalign: 'right' },
{ text: 'Requested Quantity', width: 100, editable: true, cellsalign: 'right'}
],
});

Answer 1

//this is your function build grid
function buildDetail(data){
var detailsSource:{
localdata:data,
datafields: [{ name: "ItemID", type: "int" }, { name: "FullItemName" }],
type:'json',
};
var detailsAdapter = new $.jqx.dataAdapter(detailsSource);
$("#jqxgrid").jqxGrid({
source: detailsAdapter,
autoheight:true,
autowidth: true,
columns: [
{ text: 'Item Name', datafield: 'FullItemName', width: 200, editable: false },
{ text: 'Unit', width: 100, editable: true },
{ text: 'Beginning Balance', width: 180, editable: true },
{ text: 'Loss', width: 80, editable: true, cellsalign: 'right' },
{ text: 'Quantity Recieved', width: 90, editable: true, cellsalign: 'right'},
{ text: 'DOS', width: 100, editable: true, cellsalign: 'right' },
{ text: 'Requested Quantity', width: 100, editable: true, cellsalign: 'right'}
],
});
}
// now get your data with ajax then build grid.
$(document).ready(function(){
$.ajax({url: url,
type: "json",
data: {RRGroupID:RRGroupID},
success:function(data){
//now call your build function
buildDetail(data);
}
});
})
By this way, you load your data without using jqx.ajax