I am trying to generate a JQgrid with Subgrid based on examples I came across online but instead of local data, I am using json service .
By Using nested JSON data, where the nested json data is used for the subgrid section.
When I try to create the grid, I keep getting this error "SyntaxError: Unexpected token i in JSON at position 26 200 OK"
What am I doing wrong or missing?
My code is below and my Fiddle is here
MY CODE
$(document).ready(function() {
var jsonData = {
id: 48803,
thingy: "DSK1",
number: "02200220",
status: "OPEN",
subgridData: [{
num: 1,
item: "Item 1",
qty: 3
}, {
num: 2,
item: "Item 2",
qty: 5
}]
},
{
id: 48769,
thingy: "APPR",
number: "77733337",
status: "ENTERED",
subgridData: [{
num: 3,
item: "Item 3",
qty: 5
}, {
num: 2,
item: "Item 2",
qty: 10
}]
},
mmddyyyy = "";
/*********************************************************************/
$("#grid").jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
height: 'auto',
colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
colModel: [{
name: 'id',
width: 60,
sorttype: "int",
key: true
}, {
name: 'thingy',
width: 90
}, {
name: 'number',
width: 80,
formatter: "integer"
}, {
name: 'status',
width: 80
}],
gridview: true,
autoencode: true,
pager: '#pagerId',
caption: "Stack Overflow Subgrid Example",
subGrid: true,
subGridOptions: {
plusicon: "ui-icon-triangle-1-e",
minusicon: "ui-icon-triangle-1-s",
openicon: "ui-icon-arrowreturn-1-e"
},
shrinkToFit: false,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id = subgrid_id + "_t",
pager_id = "p_" + subgrid_table_id,
localRowData = $(this).jqGrid("getLocalRow", row_id);
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table><div id='" + pager_id + "'></div>");
$("#" + subgrid_table_id).jqGrid({
datatype: "local",
data: localRowData.subgridData,
colNames: ['No', 'Item', 'Qty'],
colModel: [{
name: "num",
width: 80,
key: true
}, {
name: "item",
width: 130
}, {
name: "qty",
width: 70,
align: "right"
}],
rowNum: 20,
idPrefix: "s_" + row_id + "_",
pager: "#" + pager_id,
autowidth: true,
gridview: true,
autoencode: true,
sortname: "num",
sortorder: "asc",
height: "auto"
}).jqGrid('navGrid', "#" + pager_id, {
edit: false,
add: false,
del: false
});
}
});
});
MY Fiddle
First of all you have to fix the syntax error. The definition of the variable jsonData in the form
var jsonData = {
id: 48803,
...
},
{
id: 48769,
...
};
is false. You try to define jsonData as array of items. Thus the code fragment have to be fixed to
var jsonData = [{
id: 48803,
...
},
{
id: 48769,
...
}];
Then you define <table id="grid"></table>, but create the grid using $("#output").jqGrid({...}); in your demo. You have to use in both cases the same value if id.
Now, back to you main problem. You want to use subgridData property of the items of the data ($(this).jqGrid("getLocalRow", row_id).subgridData) filled via datatype: "json". The datatype: "json" means server based sorting, paging and filtering of the data. jqGrid don't fill local data (the data parameter). To fill data you have to inform jqGrid that the input data from the server contains full data (all the pages) and thus jqGrid should fill data option and to use local sorting, paging and filtering. Thus you should add
loadonce: true,
and
additionalProperties: ["subgridData"],
additionally to inform jqGrid to fill the items of local data with subgridData property together with the properties id, thingy, number and status (the columns of the main grid).
Finally you can remove unneeded pager divs and to use simplified form of the pager: pager: true. You should consider to use Font Awesome additionally: iconSet: "fontAwesome".
The modified demo is https://jsfiddle.net/OlegKi/615qovew/64/, which uses the following code
$(document).ready(function() {
var jsonData = [{
id: 48803,
thingy: "DSK1",
number: "02200220",
status: "OPEN",
subgridData: [{
num: 1,
item: "Item 1",
qty: 3
}, {
num: 2,
item: "Item 2",
qty: 5
}]
},
{
id: 48769,
thingy: "APPR",
number: "77733337",
status: "ENTERED",
subgridData: [{
num: 3,
item: "Item 3",
qty: 5
}, {
num: 2,
item: "Item 2",
qty: 10
}]
}],
mmddyyyy = "",
$grid = $("#output");
/*********************************************************************/
$grid.jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
colModel: [{
name: 'id',
width: 60,
sorttype: "int",
key: true
}, {
name: 'thingy',
width: 90
}, {
name: 'number',
width: 80,
formatter: "integer"
}, {
name: 'status',
width: 80
}],
loadonce: true,
additionalProperties: ["subgridData"],
autoencode: true,
pager: true,
caption: "Stack Overflow Subgrid Example",
subGrid: true,
/*subGridOptions: {
plusicon: "ui-icon-triangle-1-e",
minusicon: "ui-icon-triangle-1-s",
openicon: "ui-icon-arrowreturn-1-e"
},*/
iconSet: "fontAwesome",
shrinkToFit: false,
subGridRowExpanded: function(subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
subgridData = $(this).jqGrid("getLocalRow", rowid).subgridData;
$("#" + subgridDivId).append($subgrid);
$subgrid.jqGrid({
data: subgridData,
colNames: ['No', 'Item', 'Qty'],
colModel: [{
name: "num",
width: 80,
key: true
}, {
name: "item",
width: 130
}, {
name: "qty",
width: 70,
align: "right"
}],
rowNum: 20,
idPrefix: "s_" + rowid + "_",
pager: true,
iconSet: "fontAwesome",
autowidth: true,
autoencode: true,
sortname: "num"
}).jqGrid('navGrid', {
edit: false,
add: false,
del: false
});
}
}).jqGrid('filterToolbar', {
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
});
$(window).on("resize", function() {
var newWidth = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid("setGridWidth", newWidth, true);
}).triggerHandler("resize");
});
Related
I have a jqGrid that loads fine and the drop down loads fine as well but I'm not sure hot to go about updating(loading) the second dropdown based on the first dropdown's onchange event.
Here is my grid. As you can see I load countries but now I would like to load the available currencies based on the selected country.
$("#jqgrid").jqGrid
({
url: '#Url.Action("GetSupplierData", "Maintenance")',
datatype: 'json',
mtype: 'Get',
//table header name
colNames: [
'Id', 'Code', 'Name', 'Account Number', 'Contact Person', 'Contact Number',
'Email', 'Address', 'Country', 'Currency', 'InsertUserId',
'InsertDateTime', 'InsertUserName', 'UpdateUserId', 'UpdateDateTime', 'UpdateUserName'
],
//colModel takes the data from controller and binds to grid
colModel: [
{
key: true,
hidden: true,
name: 'id',
index: 'id',
editable: true
}, {
key: false,
name: 'code',
index: 'code',
editable: true
}, {
key: false,
name: 'name',
index: 'name',
editable: true
}, {
key: false,
name: 'accountnumber',
index: 'accountnumber',
editable: true
}, {
key: false,
name: 'contactperson',
index: 'contactperson',
editable: true
}, {
key: false,
name: 'contactnumber',
index: 'contactnumber',
editable: true
}, {
key: false,
name: 'email',
index: 'email',
editable: true
}, {
key: false,
name: 'address',
index: 'address',
editable: true
}, {
key: false,
name: 'countryId',
index: 'countryId',
editable: true,
edittype: 'select',
editoptions: {
dataInit: function(element) {
$.ajax({
url: '#Url.Action("GetCountries", "Maintenance")',
dataType: 'json',
type: 'POST',
success: function(response) {
var array = response;
if (array != null) {
var i;
for (i in array) {
if (array.hasOwnProperty(i)) {
if (ctyId == array[i].id) {
$(element).append("<option value=" + array[i].id +" selected>" + array[i].name +"</option>");
} else {
$(element).append("<option value=" + array[i].id + ">" + array[i].name + "</option>");
}
}
}
}
}
});
},
dataEvents:
{
type: 'change',
fn: function (e) {
}
}
},
editrules: { required: true, integer: true }
}, {
key: false,
name: 'currencyId',
index: 'currencyId',
editable: true
}, {
key: false,
hidden: true,
name: 'insertUserId',
index: 'insertUserId',
editable: true
}, {
key: false,
hidden: true,
name: 'insertDateTime',
index: 'insertDateTime',
editable: true
}, {
key: false,
hidden: true,
name: 'insertUserName',
index: 'insertUserName',
editable: true
}, {
key: false,
hidden: true,
name: 'updateUserId',
index: 'updateUserId',
editable: true
}, {
key: false,
hidden: true,
name: 'updateDateTime',
index: 'updateDateTime',
editable: true
}, {
key: false,
hidden: true,
name: 'updateUserName',
index: 'updateUserName',
editable: true
}
],
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
caption: 'Suppliers',
emptyrecords: 'No records to display',
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
pager: '#pjqgrid',
sortname: 'id',
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
autowidth: true,
multiselect: false,
onSelectRow: function(id) {
var selRowId = $("#jqgrid").jqGrid('getGridParam', 'selrow');
ctyId = $("#jqgrid").jqGrid('getCell', selRowId, 'currencyId');
}
//pager-you have to choose here what icons should appear at the bottom
//like edit,create,delete icons
}).navGrid('#pjqgrid',
{
edit: true,
add: false,
del: true,
search: true,
refresh: true
},
{
// edit options
zIndex: 1000,
url: '#Url.Action("EditSupplier", "Maintenance")',
dataType: "html",
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function(response) {
$('#alerts').html(response.responseText);
}
},
{
// add options
},
{
// delete options
zIndex: 1000,
url: '#Url.Action("DeleteSupplier", "Maintenance")',
type: "POST",
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this?",
afterComplete: function(response) {
$('#alerts').html(response.responseText);
}
});
This Guriddo of jqGrid example will point you in the right direction.
I want to use jqgrid with subgrids. I have created a jqgrid table. However, I want to display the descriptions and symbols in the subgrid .
I have also included JSOn data and my code snippet and the fiddle demo here
Can I create subgrids from the following JSON data with jqgrid with out having nested JSON data? Is there any example or demo I can refer to?
$(document).ready(function() {
var jsonData = {
"Name": "Julie Brown",
"Account": "C0010",
"LoanApproved": "12/5/2015",
"LastActivity": "4/1/2016",
"PledgedPortfolio": "4012214.00875",
"MaxApprovedLoanAmt": "2050877.824375",
"LoanBalance": "1849000",
"AvailableCredit": "201877.824375",
"Aging": "3",
"Brokerage": "My Broker",
"Contact": "Robert L. Johnson",
"ContactPhone": "(212) 902-3614",
"RiskCategory": "Yellow",
"rows": [{
"ClientID": "C0010",
"Symbol": "WEC",
"Description": "Western Electric Co",
"ShareQuantity": "20638",
"SharePrice": "21.12",
"TotalValue": "435874.56",
"LTVCategory": "Equities",
"LTVRatio": "50%",
"MaxLoanAmt": "217937.28"
}, {
"ClientID": "C0010",
"Symbol": "BBB",
"Description": "Bins Breakers and Boxes",
"ShareQuantity": "9623",
"SharePrice": "74.29125",
"TotalValue": "714904.69875",
"LTVCategory": "Equities",
"LTVRatio": "50%",
"MaxLoanAmt": "357452.349375"
}, {
"ClientID": "C0010",
"Symbol": "GPSC",
"Description": "Great Plains Small Cap Stock",
"ShareQuantity": "49612",
"SharePrice": "14.24",
"TotalValue": "706474.88",
"LTVCategory": "Mutual Funds - Small Cap",
"LTVRatio": "40%",
"MaxLoanAmt": "282589.952"
}]
},
mmddyyyy = "";
/*********************************************************************/
$("#output").jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
colModel: [
/** { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
{
name: 'Symbol',
width: 65
}, {
name: 'Description',
width: 165
}, {
name: 'ShareQuantity',
align: 'right',
width: 85,
classes: "hidden-xs", labelClasses: "hidden-xs",
formatter: 'currency',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'SharePrice',
label: 'Share Price',
align: 'right',
width: 100,
classes: "hidden-xs", labelClasses: "hidden-xs",
template: "number",
formatoptions: {
prefix: " $",
decimalPlaces: 4
}
},
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{
name: 'TotalValue',
label: 'Total Value',
width: 160,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}, {
name: 'LTVRatio',
label: 'LTV Ratio',
width: 70,
sorttype: 'number',
align: "right",
formatter: 'percentage',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'LTVCategory',
label: 'LTV Category',
classes: "hidden-xs", labelClasses: "hidden-xs",
width: 120,
width: 165
},
{
name: 'MaxLoanAmt',
label: 'MaxLoanAmount',
width: 165,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}
],
additionalProperties: ["Num1"],
/*beforeProcessing: function (data) {
var item, i, n = data.length;
for (i = 0; i < n; i++) {
item = data[i];
item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
item.Value = parseFloat($.trim(item.Value).replace(",", ""));
item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
}
}, */
iconSet: "fontAwesome",
loadonce: true,
rownumbers: true,
cmTemplate: {
autoResizable: true,
editable: true
},
autoResizing: {
compact: true
},
autowidth: true,
height: 'auto',
forceClientSorting: true,
sortname: "Symbol",
footerrow: true,
caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",
loadComplete: function() {
var $self = $(this),
sum = $self.jqGrid("getCol", "Price", false, "sum"),
sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
//ltvratio = $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
$self.jqGrid("footerData", "set", {
LTVCategory: "Max Approved Loan Amount:",
Price: sum,
MaxLoanAmt: sum1
});
}
});
$("#output").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});
$(window).on("resize", function () {
var newWidth = $("#output").closest(".ui-jqgrid").parent().width();
$("#output").jqGrid("setGridWidth", newWidth, true);
});
});
If I correctly understand your requirements, it's relatively easy. If you want to display "Symbol" and "Description" in subgrid, then you would like to remove the corresponding columns from the main grid. You use loadonce: true option to fill the local data with the data return from the server. The item, which represent every row of input data, will be filled with columns and the properties from additionalProperties option. Thus you should add
additionalProperties: ["Symbol", "Description"]
after removing "Symbol" and "Description" from the columns.
Now you should add subGrid: true option to create the "subrgid" column with "+" symbol, which allows to open the grid. On opening jqGrid create the div for the subrgid and the callback subGridRowExpanded is responsible to fill the grid with data. One can create subgrid inside of the div, but one can place any HTML fragments in any form. For example
subGridRowExpanded: function (subgridDivId, rowid) {
var item = $(this).jqGrid("getLocalRow", rowid);
$("#" + $.jgrid.jqID(subgridDivId)).html("Symbol: <em>" + item.Symbol +
"</em><br/>Description: <em>" + item.Description + "</em>");
}
The resulting demo https://jsfiddle.net/OlegKi/615qovew/75/ displays the data like on the picture below
You are absolutely free in the design of information displayed in the "subgrid"-div.
There is a concept that eludes me ... I can't figure out what is it I do wrong !!!
I have the following JSON:
{
"data":[
{
"amount":150.00,
"dealDate":"10/18/15 11:53 AM",
"dealName":"Deal 1",
"id":"1",
"parent":"null",
"level":"0",
"isLeaf":false,
"loaded":true
},
{
"amount":100.00,
"dealDate":"10/16/15 11:53 AM",
"dealName":"Deal 1a",
"id":"2",
"parent":"1",
"level":"1",
"isLeaf":true,
"loaded":true
},
{
"amount":-20.34,
"dealDate":"10/16/15 11:53 AM",
"dealName":"Deal 1b",
"id":"3",
"parent":"1",
"level":"1",
"isLeaf":true,
"loaded":true
},
{
"amount":25,
"dealDate":"10/16/15 11:53 AM",
"dealName":"Deal 2",
"id":"4",
"parent":"null",
"level":"0",
"isLeaf":false,
"loaded":true
}
]
}
And the jQgrid definition: (with the treeGrid options removed (commented out))
<script type="text/javascript">
$(function () {
var mydata ;
$.getJSON( "sampleData.json", function( data ) {
mydata=$.extend(true, [], data.data) ;
console.log("Initial JSON data:\n" + JSON.stringify(mydata));
$("#list").jqGrid({
data: mydata,
datatype: "local",
mtype: "GET",
colNames: ["id", "Title", "Amount", "Date", "","","",""],
colModel: [
{ name: "id", width: 55, hidden: true},
{ name: "dealName", width: 90, editable: true },
{ name: "amount", width: 80, align: "right",editable: true },
{ name: "dealDate", width: 80, align: "right", editable: true }
{ name: "parent", width: 80, align: "right", hidden: true },
{ name: "level", width: 80, align: "right", hidden: true },
{ name: "isLeaf", width: 80, align: "right", hidden: true },
{ name: "loaded", width: 80, align: "right", hidden: true }
],
editurl: 'clientArray',
cellsubmit : 'clientArray',
rowNum: 10,
rowList: [10, 20, 30, 50],
sortname: "id",
viewrecords: true,
gridview: true,
// treeGrid: true,
// ExpandColumn: 'dealName',
// treeGridModel:'adjacency',
width: $(window).width() *0.55,
caption: "Deal Test Grid"
});
$("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del:
false });
$("#list").jqGrid('gridResize');
});
});
</script>
And this produces perfectly fine grid !!
HOWEVER !!!
Once I remove comments from tree grid parameters, my grid is NOT loaded !!
I have tried with adding and with removing of quotes around null value of a parent where there is no parent
"parent":"null", vs. "parent":null,
No avail !! Same results !!
Please, help !! What is it called - that thing that I am doing wrong.
There are some problems in your code. First of all, it's the syntax error in colModel: no comma after the item which defines the column dealDate. The next problem: the input data should contains id, parent, level, isLeaf and isLeaf, but you should not define any columns in colModel with the names. The last important problem: you need include treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "dealName" and optionally ExpandColClick: true to make the grid be TreeGrid.
The resulting code could be
$("#list").jqGrid({
data: mydata,
colNames: ["Title", "Amount", "Date"],
colModel: [
{ name: "dealName", width: 100 },
{ name: "amount", width: 80, template: "number" },
{ name: "dealDate", width: 180, align: "right", sorttype: "date",
formatter: "date",
formatoptions: { srcformat: "n/j/Y g:i A", newformat: "n/j/Y g:i A" } }
],
cmTemplate: { width: 80, autoResizable: true, editable: true },
iconSet: "fontAwesome",
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: "dealName",
ExpandColClick: true,
inlineEditing: { keys: true },
ondblClickRow: function (rowid, iRow, iCol, e) {
var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow");
if (savedRow.length > 0 && savedRow[0].id !== rowid) {
$self.jqGrid("restoreRow", savedRow[0].id);
}
$self.jqGrid("editRow", rowid, { focusField: e.target });
}
}).jqGrid("gridResize");
where I included starting inline editing on double-click. The resulting demo can be find here. It uses free jqGrid 4.10.0, which I published today. The code is already available on CDNs (see the wiki article).
I am building grid using JSGrid (js-grid.com). I want call back methods to implement validations before adding new record or updating record. Documentation provided on website is not clearly mentioned how to implement one. Please refer http://js-grid.com/docs/#callbacks.
I need help how can i implement callback method cause i am new to JSGrid & Scripting. Following is my sample code. Please guide me where to put callback methods.
$(function() {
$("#jsGrid").jsGrid({
height: "90%",
width: "100%",
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
});
Thanks in advanced.
$(function() {
$("#jsGrid").jsGrid({
height: "90%",
width: "100%",
// added for demo
onItemInserting: function(args) {}, // before controller.insertItem
onItemInserted: function(args) {}, // on done of controller.insertItem
onItemUpdating: function(args) {}, // before controller.updateItem
onItemUpdated: function(args) {}, // on done of controller.updateItem
onItemDeleting: function(args) {}, // before controller.deleteItem
onItemDeleted: function(args) {}, // on done of controller.deleteItem
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
});
I'm loading the JQgrid from the external Ajax call. I'm expecting my JQgrid to set the values with the edit fields once i pass my Array object.
I have tried all the ways which i found in google, but no luck.
Can someone point me where i'm making mistake ?
var grid = $("#JobGrid").jqGrid({
datatype: "json",
colNames: ['Product Name', 'Product ID', 'ProdTypeAvail', 'Piece/Sheet', 'Type', 'Pages', 'Copies', 'ExtraCharges', '', ''],
colModel: [
{ name: 'strProductName', index: 'strProductName', editable: true, edittype: 'text' },
{ name: 'strProductID', index: 'strProductID', editable: true, hidden: true, editrules: { edithidden: true } },
{ name: 'strProdTypeAvail', index: 'strProdTypeAvail', editable: true, hidden: true, editrules: { edithidden: true } },
{ name: 'iPiecesPerSheet', index: 'ipieces', editable: true, edittype: 'text', formatter: TrimZero },
{ name: 'strProductType', index: 'strProducttype', editable: true, edittype: 'select' },
{ name: 'iPages', index: 'iPages', editable: true, edittype: 'text', formatter: TrimZero },
{ name: 'iCopies', index: 'iCopies', editable: true, edittype: 'text', formatter: TrimZero },
{ name: 'dExtraCharge', index: 'dExtraCharge', editable: true, edittype: 'text', formatter: TrimZero },
{
name: 'Delete', label: 'Delete', title: 'Delete', width: 25, index: 'Delete', sortable: false,
formatter: function () {
return "<input type='button' value='del' />"
//return "<div><img src='http://icons.iconarchive.com/icons/hopstarter/button/16/Button-Delete-icon.png'/></div>"
}
},
{
name: 'Duplicate', width: 25, index: 'Duplicate', sortable: false,
formatter: function () {
return "<input type='button' value='dup' />"
//return "<div><img src='http://icons.iconarchive.com/icons/hopstarter/soft-scraps/16/File-New-icon.png'/></div>"
}
}
],
hidegrid: false,
autowidth: true,
shrinkToFit: true,
height: '100%',
scrollOffset: 0,
rowNum: -1,
jsonReader: { repeatitems: false},
rownumbers: true,
caption: "Job Details",
cellEdit: true,
cellsubmit: 'clientArray',
editurl: 'clientArray',
pager: '#JobGridpager',
localReader: { id: 'iRowID' },
....
My AJAX Call to load JQgrid
$j("#txtJobID").change(function () {
....
$j.ajax({
type: 'GET',
url: "http:/localhost:20/api/Job/GetFullJobDetails?Ary=" + JSON.stringify(obj),
dataType: 'json',
success: function (oJobdata) {
var oData = oJobdata.lstJobChildInfo;
grid.jqGrid('clearGridData');
grid.setGridParam({ data: oData });
grid[0].refreshIndex();
grid.trigger("reloadGrid");
...
My "oData" which I'm passing to my JQgrid...
[object1, object2]
Object1 :
dExtraCharge: 10
dJobDate: "0001-01-01T00:00:00"
iAddCopy: 0
iCopies: 4
iFirstCopy: 0
iPages: 1
iPiecesPerSheet: 0
iRowID: 1
iTotalCopy: 0
lstJobChildInfo: null
strAction: null
strCompanyID: "C01"
strCustomerID: null
strCustomerName: null
strJobID: null
strJobchdid: null
strMobile: null
strProdTypeAvail: "PT01-PT02-PT03"
strProductID: "P005"
strProductName: "Art 130 +3"
strProductType: "One Side"
strProductTypeID: "PT01"
strStatus: null
strUserName: null
proto: Object
Object2 :
dExtraCharge: 0
dJobDate: "0001-01-01T00:00:00"
iAddCopy: 0
iCopies: 4
iFirstCopy: 0
iPages: 2
iPiecesPerSheet: 2
iRowID: 2
iTotalCopy: 0
lstJobChildInfo: null
strAction: null
strCompanyID: "C01"
strCustomerID: null
strCustomerName: null
strJobID: null
strJobchdid: null
strMobile: null
strProdTypeAvail: "PT01-PT02-PT03"
strProductID: "P023"
strProductName: "Synthetic 125 Micron"
strProductType: "Diff Front And Back"
strProductTypeID: "PT02"
strStatus: null
strUserName: null
proto: Object
I have try setting,
iRowID as ID
jsonReader: { repeatitems: false},
grid[0].refreshIndex();
but still grid remains empty without any data :-(