Related
My subgrid only shows the column headers but not not load the json data from the main grid. The columns are empty. I followed the tutorial on JQuery Grid-SubGrid for Parent-Child relation
but it does not work.
This is my javascript code:
jQuery().ready(function () {
var grid = jQuery("#shipment_grid");
var mainGridPrefix = "s_";
grid.jqGrid({
url: '${pageContext.request.contextPath}/getTruckShipmentJSONAction?truckId=' + <c:out value="${truckId}" />,
datatype: "json",
mtype: 'GET',
loadonce: true,
colNames: ['Lead Tracking #'],
colModel: [
{name: 'trackingNr', index: 'trackingNr', width: 100, align: 'left'}
],
rowNum: 10,
height: 230,
width: 700,
idPrefix: mainGridPrefix,
autoheight: true,
rowList: [10, 20, 30],
pager: jQuery('#shipment_grid_pager'),
sortname: 'trackingNr',
sortorder: "desc",
jsonReader: {
root: "records",
page: "page",
total: "total",
records: "rows",
repeatitems: false
},
viewrecords: true,
altRows: false,
gridview: true,
multiselect:true,
hidegrid: false,
shrinkToFit: true,
forceFit: true,
idPrefix: mainGridPrefix,
caption: "Shipments Overview",
subGrid: true,
beforeProcessing: function(data) {
//align 'Lead Tracking #' column header to the left
grid.jqGrid ('setLabel', 'trackingNr', '', {'text-align':'left'});
var rows = data.rows, l = rows.length, i, item, subgrids = {};
for (i = 0; i < l; i++) {
item = rows[i];
if (item.shipUnitView) {
subgrids[item.id] = item.shipUnitView;
}
}
data.userdata = subgrids;
},
subGridRowExpanded: function (subgridDivId, rowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
subgrids = $(this).jqGrid("getGridParam", "userData");
$subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
$subgrid.jqGrid({
datatype: "local",
data: subgrids[pureRowId],
colNames: ['Ship Type (Pallet / Carton)', 'Ship Unit (Pallet ID / Cone #)', 'Total Cartons'],
colModel: [
{ name: "shipUnitType", index: 'shipUnitType', width: 100, align: 'center'},
{ name: "reference", index: 'reference', width: 100, align: 'center'},
{ name: "totalOfCartons", index: 'totalOfCartons', width: 100, align: 'center'}
],
sortname: "shipUnitType",
sortorder: "desc",
height: "100%",
rowNum: 10,
autowidth: true,
autoencode: true,
jsonReader: {
root: "records",
records: "rows",
repeatitems: false,
id: "reference" },
gridview: true,
idPrefix: rowId + "_"
});
}
}).navGrid('#shipment_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true});
});
This is my json data from the server:
{"page":1,
"records":[
{"id":2,"trackingNr":"1Z1484366620874728",
"shipUnitView":[{"reference":"65000943","shipUnitType":"CARTON","totalOfCartons":1},
{"reference":"65000942","shipUnitType":"CARTON","totalOfCartons":1}]},
{"id":4, "trackingNr":"1Z1484366620874746"
"shipUnitView":[{"reference":"65000940","shipUnitType":"CARTON","totalOfCartons":1},
{"reference":"65000939","shipUnitType":"CARTON","totalOfCartons":1}]},
{"id":3, "trackingNr":"1Z1484366620874764"
"shipUnitView":[{"reference":"65000938","shipUnitType":"CARTON","totalOfCartons":1},
{"reference":"65000937","shipUnitType":"CARTON","totalOfCartons":1}]}
],
"recordsTotal":3,"rows":10,"sidx":null,"sord":"asc","total":1,"trackingNr":null,"truckId":"174225","truckShipmentComponent":{}}
First of all there are small errors in the JSON data which you posted. It contains no commas after "trackingNr":"1Z1484366620874746" and "trackingNr":"1Z1484366620874764". I hope that it's only cut&paste error during preparing the data for the question. In any way it would be more safe to include loadError callback (see the answer) in case of loading errors.
Your main error seems to me are inside of beforeProcessing callback. The data parameter of the callback contains the server response. The array of items you have inside of data.records, but you use var rows = data.rows, ... instead. The line should be fixed to var rows = data.records, ....
One asked you in the comment to prepare JSFiddle demo which demonstrates the problem and you had problems to prepare it because of usage datatype: "json". On the other side JSFiddle do provides you possibility to implement demos in the case. One can use Echo service. In case of jqGrid one needs just use mtype: "POST" and url: "/echo/json/". To inform echo service which data you want to have one need just send JSON encoded data in json parameter. So the fill looks like
// the data which we want to receive back
var serverResponse = {
"page":1,
...
};
$("#gridId").jqGrid({
url: "/echo/json/", // use JSFiddle echo service
postData: {
json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
},
datatype: "json",
mtype: "POST", // needed for JSFiddle echo service
...
});
The working JSFiddle demo you can find here: http://jsfiddle.net/OlegKi/ntfw57zm/. I makes some small additional optimization of your code.
I hope the example could help other people to post his questions with JSFiddle demos.
This is my Jsp Page using jQuery
jQuery("#jqGrid01").jqGrid({
url: "JqGridDemoJson.action",
datatype:"json",
height: 200,
rowNum: 10,
rowList: [10,20,30],
colNames:['Inv No','Name'],
colModel:[
{name:'id',index:'id', editable: true,sorttype:"int",search:true},
{name:'name',index:'name', editable: true,width:30}
],
pager: "#jqGridPager01",
viewrecords: true,
add: true,
edit: true,
addtext: 'Add',
edittext: 'Edit',
caption: "Data",
hidegrid:false
});
This is my action retriveing list:
{"JQgridAction":"success",
"mitnolist":
[{"id":1,"name":"MIT\/1009\/SUF-"},
{"id":2,"name":"MIT\/1010\/SUF-"},
{"id":5,"name":"MIT\/1011\/SUF-Adma Site"},
]}
This list unable to load on the above JQgrid.
Your json is an object while jqgrid uses [{}, {}, {},...] array of multiple objects so you have to return your json as this example:
[{"id":1,"name":"MIT\/1009\/SUF-"},
{"id":2,"name":"MIT\/1010\/SUF-"},
{"id":5,"name":"MIT\/1011\/SUF-Adma Site"}]
or there is another way that you write a js ajax function and pass the required data to your jqgrid:
$.ajax({
url: "JqGridDemoJson.action",
dataType: 'json',
type: 'post',
success: function(data){
makeGrid(data.mitnolist); // as this seems to be populated in grid
}
});
now in your jqgrid you can do this:
function makeGrid(gData){ // pass in args
$("#grid").jqGrid({
data: gData, // your data to populate in grid
datatype: "local", // now change the datatype to local
.....
});
}
A small working example.
I'm trying to populate a JqGrid inside the success function of an Ajax call. My ajax call is passing a date parameter to the function which will filter the results. My grid loads, but no data is displayed and it says Loading... above my grids caption. I'm using a drop down to filter results based on date. My json data has been verified to be valid.
$(document).ready(function () {
$("[name='DDLItems']").change(function () {
var selection = $(this).val();
var dataToSend = {
//holds selected value
idDate: selection
};
$.ajax({
type: "POST",
url: "Invoice/Filter",
data: dataToSend,
success: function (dataJson) {
// alert(JSON.stringify(dataJson));
$("#grid").jqGrid({ //set your grid id
data: dataJson, //insert data from the data object we created above
datatype: json,
mtype: 'GET',
contentType: "application/json; charset=utf-8",
width: 500, //specify width; optional
colNames: ['Invoice_Numbers', 'Amt_Totals','f', 'ff', 't'], //define column names
colModel: [
{ name: 'Invoice_Number', index: 'Invoice_Number', key: true, width: 50 },
{ name: 'Amt_Total', index: 'Amt_Total', width: 50 },
{ name: 'Amt_Due', index: 'Amt_Due', width: 50 },
{ name: 'Amt_Paid', index: 'Amt_Paid', width: 50 },
{ name: 'Due_Date', index: 'Due_Date', width: 50 },
], //define column models
pager: jQuery('#pager'), //set your pager div id
sortname: 'Invoice_Number', //the column according to which data is to be sorted; optional
viewrecords: false, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
sortorder: "asc", //sort order; optional
caption: "jqGrid Example", //title of grid
});
},
-- controller
[HttpPost] // Selected DDL value
public JsonResult Filter(int idDate)
{
switch (idDate)
// switch statement goes here
var dataJson = new UserBAL().GetInvoice(date);
return Json(new { agent = dataJson}, JsonRequestBehavior.AllowGet);
Here's the answer if anyone else comes across this. This is what I ended up doing, the rows are getting filtered passed on the date parameter I'm passing to the URL of the function. Having the Grid populate inside the Ajax call also seemed like it was a problem so I had to take it out.
public JsonResult JqGrid(int idDate)
{
switch (idDate)
#region switch date
--Switch Statement--
#endregion
var invoices = new UserBAL().GetInvoice(date);
return Json(invoices, JsonRequestBehavior.AllowGet);
}
[HttpPost] // pretty much does nothing, used as a middle man for ajax call
public JsonResult JqGridz(int idDate)
{
switch (idDate)
#region switch date
--Switch Statement--
#endregion
var invoices = new UserBAL().GetInvoice(date);
return Json(invoices, JsonRequestBehavior.AllowGet);
}
Yes these two functions seem very redundant and they are. I don't know why my post wouldn't update data, but I needed to reload the grid each time and when I did that it would call the first function. So yea the post jqGridz is kinda of just a middle man.
Here's the jquery code I used
var dropdown
var Url = '/Invoice/JqGrid/?idDate=0'
$(document).ready(function () {
$("#jqgrid").jqGrid({
url: Url,
datatype: 'json',
mtype: 'GET', //insert data from the data object we created above
width: 500,
colNames: ['ID','Invoice #', 'Total Amount', 'Amount Due', 'Amount Paid', 'Due Date'], //define column names
colModel: [
{ name: 'InvoiceID', index: 'Invoice_Number', key: true, hidden: true, width: 50, align: 'left' },
{ name: 'Invoice_Number', index: 'Invoice_Number', width: 50, align: 'left'},
{ name: 'Amt_Total', index: 'Amt_Total', width: 50, align: 'left' },
{ name: 'Amt_Due', index: 'Amt_Due', width: 50, align: 'left' },
{ name: 'Amt_Paid', index: 'Amt_Paid', width: 50, align: 'left' },
{ name: 'Due_Date', index: 'Due_Date', formatter: "date", formatoptions: { "srcformat": "Y-m-d", newformat: "m/d/Y" }, width: 50, align: 'left' },
],
pager: jQuery('#pager'),
sortname: 'Invoice_Number',
viewrecords: false,
editable: true,
sortorder: "asc",
caption: "Invoices",
});
$("[name='DDLItems']").change(function () {
var selection = $(this).val();
dropdown = {
//holds selected value
idDate: selection
};
$.ajax({
type: "POST",
url: "Invoice/JqGridz",
data: dropdown,
async: false,
cache: false,
success: function (data) {
$("#jqgrid").setGridParam({ url: Url + selection})
$("#jqgrid").trigger('reloadGrid');
}
})
})
});
Are you actually passing a value to your controller? I see you have data: dataToSend which doesn't match to your controllers idDate.
Is there a reason you are trying to setup your grid this way? Do you not want to deal with paging, or I'm not even sure if your setup would handle rebuild a grid when a user picks the date for a 2nd time.
My personal suggestion would be that you:
setup your grid separately, hidden if you don't want it visible on page load
set it's datatype to local so the grid doesn't load on page load
on the change event:
show the grid
change the postdata parameter the grid has
set the url of the controller/action which will feed the data back to the grid
trigger a grid reload
I run this code and the dropdown won't drop down -- no items get displayed.
Looking in the debugger I see that the store has no items.
When I comment out the 'url' and uncomment 'data' (which contains the exact json string produced by the .cfm page) the dropdown works as expected.
Anyone know what's going on here?
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" />
<script src="ext-3.1.0/adapter/ext/ext-base.js"></script>
<script src="ext-3.1.0/ext-all-debug.js"></script>
<script>
if (Ext.BLANK_IMAGE_URL.substr(0,5) != 'data:')
{
Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/default/s.gif';
}
Ext.onReady(function()
{
var testStore = new Ext.data.JsonStore({
url: 'combotest.cfm',
//data: {"ROWS":[{"NAME":"one"},{"NAME":"two"},{"NAME":"three"}]},
root: 'ROWS',
fields: ['NAME'],
autoLoad: true
});
var test_form = new Ext.FormPanel(
{
renderTo: Ext.getBody(),
frame: true,
title: 'Form',
width: 500,
items: [
{
xtype: 'combo',
fieldLabel: 'Combo Box',
triggerAction: 'all',
mode: 'local',
store: testStore,
displayField: 'NAME',
width: 350
}
]
});
});
</script>
</head>
<body>
</body>
</html>
A colleague figured it out. The .cfm page was returning debug info in addition to the json string. Adding
<cfsetting showdebugoutput="FALSE">
to the end of the .cfm page cleared it up.
I'm using JqGrid with Django framework. That's JS:
jQuery("#list").jqGrid({
url:'{% url views.manage.devicesajax %}',
datatype: 'json',
mtype: 'GET',
colNames:['DID', 'UDID', 'Owner', 'Name', 'First seen', 'Last seen'],
colModel :[
{name:'did', index:'did', width: 30, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'udid', index:'udid', width: 120, editable: true, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'d_owner', index:'d_owner', width: 70, editable: true, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'d_name', index:'d_name', editable: true, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'d_firstseen', index:'d_firstseen', width: 80},
{name:'d_lastseen', index:'d_lastseen', width: 80}],
pager: jQuery('#pager'),
rowNum:20,
rowList:[20,50,100],
sortname: 'did',
sortorder: "desc",
multiselect: true,
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'Devices list',
height: 330,
width: 1000,
onSelectRow: function(id) {
var id = $("#list").getRowData(id).message_id;
message_id = id;
},
editurl: "{% url views.manage.deviceseditajax %}"
});
When I do edit row in JqGrid I get error from editurl:
Forbidden (403)
CSRF verification failed. Request aborted.
It's because csrf_token doesn't pass to editurl with the other data.
How to add csrf_token to the POST request to editurl ?
This code works perfectly ( complete piece of jqgrid init ):
jQuery("#list").jqGrid({
url:'{% url views.manage.devicesajax %}',
datatype: 'json',
mtype: 'GET',
colNames:['DID', 'UDID', 'Owner', 'Name', 'First seen', 'Last seen'],
colModel :[
{name:'did', index:'did', width: 30, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'udid', index:'udid', width: 120, editable: true, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'d_owner', index:'d_owner', width: 70, editable: true, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'d_name', index:'d_name', editable: true, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'d_firstseen', index:'d_firstseen', width: 80},
{name:'d_lastseen', index:'d_lastseen', width: 80}],
pager: jQuery('#pager'),
rowNum:20,
rowList:[20,50,100],
sortname: 'did',
sortorder: "desc",
multiselect: true,
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'Devices list',
height: 330,
width: 1000,
editurl: "{% url views.manage.deviceseditajax %}",
});
jQuery("#list").navGrid('#pager',{edit:true,add:true,del:true,search:true},
{
closeAfterEdit:true,
reloadAfterSubmit:true,
closeOnEscape:true,
editData: {csrfmiddlewaretoken: '{{ csrf_token }}'}
},
{
closeAfterAdd:true,
reloadAfterSubmit:true,
closeOnEscape:true,
editData: {csrfmiddlewaretoken: '{{ csrf_token }}'}
},
{
closeOnEscape:true,
delData: {csrfmiddlewaretoken: '{{ csrf_token }}'}
},
{
caption: "Search",
Find: "Find",
Reset: "Reset",
sopt : ['eq', 'cn'],
matchText: " match",
rulesText: " rules",
closeAfterSearch: true,
afterShowSearch: function ()
{
$('#reset_filter1_block').show();
}
}
);
I don't use Django framework and not familiar with the csrf_token, but after searching in Google it seems that you need to set it in the HTTP header of the request: xhr.setRequestHeader('X-CSRF-Token', csrf_token);. To do this in case of jqGrid you can use loadBeforeSend event handler:
loadBeforeSend: function(jqXHR) {
// you should modify the next line to get the CSRF tocken
// in any way (for example $('meta[name=csrf]').attr('content')
// if you have <meta name="csrf" content="abcdefjklmnopqrstuvwxyz="/>)
var csrf_token = '<%= token_value %>'; // any way to get
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
See here for a very close problem.
UPDATED: To post additional data in case of form editing usage you can use editData: editData: { csrfmiddlewaretoken:'<%= token_value %>' }. For example:
jQuery("#list").jqGrid('navGrid','#pager',{},
{ // Edit option (parameters of editGridRow method)
recreateForm:true,
reloadAfterSubmit:false,
closeOnEscape:true,
savekey: [true,13],
closeAfterEdit:true,
ajaxEditOptions: {
beforeSend: function(jqXHR) {
// you should modify the next line to get the CSRF tocken
// in any way (for example $('meta[name=csrf]').attr('content')
// if you have <meta name="csrf" content="abcdefjklmnopqrstuvwxyz="/>)
var csrf_token = '<%= token_value %>'; // any way to get
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
},
editData: {
csrfmiddlewaretoken: '<%= token_value %>'
}
},
{ // Add options (parameters of editGridRow method)
recreateForm:true,
reloadAfterSubmit:false,
closeOnEscape:true,
savekey: [true,13],
closeAfterAdd:true,
ajaxEditOptions: {
beforeSend: function(jqXHR) {
// you should modify the next line to get the CSRF tocken
// in any way (for example $('meta[name=csrf]').attr('content')
// if you have <meta name="csrf" content="abcdefjklmnopqrstuvwxyz="/>)
var csrf_token = '<%= token_value %>'; // any way to get
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
},
editData: {
csrfmiddlewaretoken: '<%= token_value %>'
}
}
);
I placed here both ways: setting of 'X-CSRF-Token' HTTP header and posting of the csrfmiddlewaretoken parameter. You can remove one way after the corresponding experiments.
If you use some parameters for all grids on the page you can better change the defaults (see here for details)
jQuery.extend(jQuery.jgrid.edit, {
recreateForm:true,
reloadAfterSubmit:false,
closeOnEscape:true,
savekey: [true,13],
closeAfterAdd:true,
closeAfterEdit:true,
ajaxEditOptions: {
beforeSend: function(jqXHR) {
// you should modify the next line to get the CSRF tocken
// in any way (for example $('meta[name=csrf]').attr('content')
// if you have <meta name="csrf" content="abcdefjklmnopqrstuvwxyz="/>)
var csrf_token = '<%= token_value %>'; // any way to get
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
},
editData: {
csrfmiddlewaretoken: '<%= token_value %>'
}
});
The setting is common for both Add and Edit forms. So you can use navGrid in the simplified form.
jQuery("#list").jqGrid('navGrid','#pager');
Check your cookies. Django's CSRF also save a cookie csrftoken which does have the same value as the csrf_token which you would use in a form. You can use any Javascript cookie library to get the cookie and pass it to the POST request as csrfmiddlewaretoken.
According to the jqGrid documentation, you can pass a postData options.
If you're using jQuery Cookie plugin, you can add something like :
postData: {
csrfmiddlewaretoken: $.cookie(CSRF_COOKIE_NAME)
},
to your list of options to jqGrid.
The CSRF_COOKIE_NAME is set in your django application settings.py and is 'csrftoken' by default.
I found simple solution using latest JqGrid and Inline Edit submit csrf_token to request POST django without #csrf_exempt
onSelectRow: function(id){
if(id && id!==lastSel){
$(selector).restoreRow(lastSel);
lastSel=id;
}
var editparameters = {
extraparam: {csrfmiddlewaretoken: $('.token-data').data('token')},
keys: true,
};
$(selector).jqGrid('editRow', id, editparameters);
}
For example, please see on my blog post:
http://yodi.polatic.me/jqgrid-inline-editing-integration-with-django-send-csrf-token/