I have a Kendo UI grid that works absolutely fine in IE10/11/Chrome/Firefox. However, in IE8/9 it completely fails to render any of the returned data. It is hooked up to an OData Web Api 2 endpoint. Here is the Javascript:
$(document).ready(function ()
{
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "http://cross_site_url:port/api/TrackedContainers/get"
},
pageSize: 15,
sort: { field: "EventTime", dir: "desc" }
},
filterable: true,
sortable: true,
pageable: true,
columns: [
{ field: "QrCode", title: "QR Code", width: 100 },
{ field: "Type", title: "Type", width: 150 },
{ field: "Location", title: "Location", width: 200 },
{ field: "Status", title: "Status", width: 90 },
{ field: "FailedCollectionReason", title: "Failed Collection Reason", width: 150 },
{
field: "EventTime",
title: "Event Time",
type: "date",
format: "{0:dd-MMM-yyyy hh:mm:ss tt}",
parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"],
width: 150
}
]
});
});
For once, IE11's compatibility mode appears to be accurately mimicking the real world and also fails to display any results when set to IE8 Document mode. The URL above is obviously not the real one - it does however make a cross site call and as such I have tried enabling XSS in IE8 but to no avail. Adding to trusted sites also does not make any difference.
Looking at the network traffic it, would appear that the grid doesn't even attempt the HTTP GET at all in IE8/9.
Any ideas?
Did you add a CORS transport to jQuery? IE8 and 9 require the use of
the XDomainRequest object to perform CORS requests which is not
included in jquery. – Kevin B 41 mins ago
Above your document.ready, add $.support.cors = true; – Robin Giltner
53 secs ago
The above fixed it, thanks guys.
You need to add dataType:json in your datasource
transport: {
read: {
url: "/api/request/GetUrcs",
dataType: "json"
}
},
batch: false,
Related
I want this:
Without having to start like this:
But for some reason the data only shows up when I use "hiddengrid: true,"
I tried following this demo and was only able to get the example to work by adding "hiddengrid: true," like so:
<body>
<div class="center" id="overGrid">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'api/codes',
editurl: 'api/codes',
colModel: [
{
label: "Edit Actions",
name: "actions",
width: 75,
formatter: "actions",
formatoptions: {
keys: true,
editOptions: {},
addOptions: {},
delOptions: {}
}
},
{
label: 'Id',
name: 'id',
width: 150,
editable: true
},
{
label: 'Title',
name: 'title',
width: 100,
editable: true
},
{
label: 'Code',
name: 'code',
width: 100,
editable: true
},
{
label: 'Original Url',
name: 'originalUrl',
width: 200,
editable: true
}
],
align: 'center',
viewrecords: true,
rowList: [10, 20, 30],
width: 925,
height: 445,
rowNum: 20,
loadonce: true,
hiddengrid: true, // <-------------------- HERE
toppager: '#jqGridPager',
pager: '#jqGridPager',
caption: "Database"
}); jQuery("#jqGrid")
.navGrid('#pager', { edit: false, add: false, del: false, search: false })
.navButtonAdd('#pager', {
caption: "Add",
buttonicon: "ui-icon-add",
onClickButton: function () {
alert("Adding Row");
},
position: "last"
})
.navButtonAdd('#pager', {
caption: "Del",
buttonicon: "ui-icon-del",
onClickButton: function () {
alert("Deleting Row");
},
position: "last"
});
function fetchGridData() {
var gridArrayData = [];
// show loading message
$("#jqGrid")[0].grid.beginReq();
$.ajax({
url: 'api/codes',
mtype: 'POST',
datatype: 'JSON',
success: function (result) {
for (var i = 0; i < result.items.length; i++) {
var item = result.items[i];
gridArrayData.push({
id: item.id,
title: item.title,
code: item.code,
originalUrl: item.originalUrl,
});
}
// set the new data
$("#jqGrid").jqGrid('setGridParam', { data: gridArrayData });
// hide the show message
$("#jqGrid")[0].grid.endReq();
// refresh the grid
$("#jqGrid").trigger('reloadGrid');
}
});
}
fetchGridData();
});
</script>
</body>
Examples such as this don't seem to be working for me on their own so I keep having to reference other sources such as this that are much more complex and informative but possibly the reason for why I continue to have issues every step of the way.
Side Note
I should probably point out that I was only just recently introduced to jqGrid as a result of this question I asked about a week ago: " How can I separate my output using “onclick” and format the data to 20 per page?
"
I did a fairly decent job of documenting the steps that brought me to this point so it might be worth checking out for an in depth look as to what I am dealing with.
In short I am building an API in Asp.Net Core that sends and receives JSON data to my MongoDb database and then outputs the data to a single HTML page using jqGrid. So far I have created functioning Get, Post, Put, and Delete methods that return and send JSON data to my MongoDb database.
Update:
I have gone through the docs suggested by Tony Tomov and I understand their meaning. I just haven't the slightest clue to the solution to this problem. Everything I have thought to be a possible solution and tried from before and after I posted this question has given me a blank page without any errors.
I have the code available here: https://jsfiddle.net/zqLp4yrg/41/
datatype is "local" not json.
$("#jqGrid").jqGrid({
url: "/echo/json/", // use JSFiddle echo service
postData: {
json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
},
mtype: "POST", // needed for JSFiddle echo service
datatype: "json",
colModel: [
{ label: 'CatId', name: 'CatId', key: true, width: 30 },
{ label: 'InventoryDate', name: 'InventoryDate', width: 70 },
{ label: 'ProductName', name: 'ProductName', width: 150 },
{ label: 'RemainingQuantity', name: 'RemainingQuantity', width: 150, summaryType: 'sum', sortable: true }
],
iconSet: "fontAwesome",
viewrecords: true,
rowList: [20,30,50],
width: 780,
height: 250,
rowNum: 20,
sortname: "ProductName",
grouping: true,
groupingView: {
groupField: ["CatId"],
groupColumnShow: [true],
groupText: [
"CatId: <b>{0}</b>"
],
groupOrder: ["asc"],
groupSummary: [true],
groupSummaryPos: ["header"],
groupCollapse: true
}
});
In here I want to sort the Remaining quantity based on its summary value in header. Please help.
Your demo has many small problems:
First of all you write about the usage of datatype is "local", but you use datatype: "json" in the demo. Moreover, you use no loadonce: true option and no forceClientSorting: true option. It means that the server is responsible for sorting the data. Moreover, if you use grouping, then the data returned from the server have to be sorted (on the server) by both groupingView.groupField (CatId in your case) and then by sortname (RemainingQuantity in your case). The data which you use as the source are not sorted correctly. One sees, for example, that jqGrid displays two CatId: 2 and two CatId: 3 groups.
You can fix the problem by adding loadonce: true and forceClientSorting: true options, but you use old version of free jqGrid (4.11.1), which is not support forceClientSorting: true. You have to upgrade to the latest version (4.14.0) of free jqGrid to be able to sort and group the data returned from the server on the client before displaying.
The source data, which contains integer data will be returned from the server as strings. Moreover, some data items contains spaces (" 16" instead of "16" or 16). It changes the order of sorting the data.
You should use sorttype (for example sorttype: "integer") to sort the data in the column corresponds to the type of the data.
To sort the date column correctly you should use both sorttype: "date" and the formatter: "date" with the formatoptions (in you case: formatoptions: { srcformat: "d/m/Y H:i:s", newformat: "d/m/Y H:i:s" })
If you want that the options rowNum, rowList and viewrecords work, then the grid have to have at least one pager. Thus you probably skip pager: true or toppager: true (or both) options.
The fixed demo is https://jsfiddle.net/OlegKi/zqLp4yrg/43/. I removed groupingView.groupollapse: true and height: 250 only to make easy to examine the results. The settings are not important for your main problem.
I have an association set up between my CostCenter and my Site Model.
My problem is that the association is not loaded in time when I try to display the Site in the CostCenterGrid.
items: [
{
xtype: 'gridpanel',
itemId: 'CostCenterGrid',
columns: [
{
text: MR.locale.Name,
dataIndex: 'Name',
renderer: function(translation) {
return translation.get('ActualTranslation');
},
width: 150
}, {
text: MR.locale.Site,
dataIndex: 'Site',
renderer: function(value, meta, record) {
return record.getSite().get('ActualName');
},
width: 150
},
],
store: 'MR.store.administration.CostCenter',
}
As you can see i have a Custom renderer for the site property. The first time I render the grid, the Site isn't display. When running it again the site is then correctly visible.
How to overcome this issue?
Usually when you get such anomaly when things load at second time and such, it probably related to an Async processes.
I think that your record object is not ready or empty at first.
Make sure you get the data before you render it.
I can't seem to get jqGrid pagination to work. It is not making a request when I click next/prev/reload or when I try to filter. As soon as I click any of those buttons, all of the records disappear.
This is the initial request that gets sent, so you can see that all of those parameters are being passed in.
https://www.xxxxxxx.com/getallorders?contactId=333&bucketId=444&_search=false&nd=1366982305621&rows=20&page=1&sidx=PKId&sord=desc
This returns proper number of records, and if I manually execute it and pass in let's say page=2 I do get proper set back. The problem seems to be that the request is not made.
jQuery("#grid").jqGrid({
url:'/GetAllOrders',
mtype: "GET",
datatype: "json",
jsonReader: {
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
repeatitems: false,
userdata: "UserData",
id: "Id"
},
postData: {
contactId: currentUserId,
bucketId: currentBucketId
},
colNames:[
'Id',
'Cancel',
'Order #',
'Order Date',
'Bucket',
'Warehouse',
'Destination',
'Status',
'Tracking #',
'Transport By',
'Ordered By',
'Order Items'
],
colModel:[
{name:'Id',index:'Id', width:5, align:"center", hidden: true},
{name:'Cancel', index:'Cancel',width:80, align:"center", formatter: cancelLinkFormatter, search:false },
{name:'OrderNumber',index:'OrderNumber', width:80, align:"center"},
{name:'OrderDate',index:'OrderDate', width:140, align:'right'},
{name:'Bucket',index:'Bucket', width:180, align:"center", hidden: false},
{name:'Warehouse',index:'Warehouse', width:80, align:"center", hidden: true},
{name:'Destination',index:'Destination', width:150},
{name:'StatusCode', index:'StatusCode', width:100, align: 'center'},
{name:'TrackingNumber', index:'TrackingNumber', width:100, align: 'center'},
{name:'TransportCompany', index:'TransportCompany', width:100, align: 'center'},
{name:'OrderedBy', index:'OrderedBy', width:100, align: 'center'},
{name:'OrderItems', index:'OrderItems', width:100, align: 'center'}
],
viewrecords: true,
rowNum: 20,
autowidth: false,
width: 860,
height: 450,
rowList:[10,20,30,40,50],
pager: jQuery('#pager'),
sortname: 'Id',
align: 'center',
sortorder: "desc",
loadonce: false,
ignoreCase: true,
caption:"Orders"
}).navGrid('#pager',{edit:false,add:false,del:false});
setSearchSelect('StatusCode');
jQuery("#grid").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: "cn"});
This is the json response I get from the server on initial load.
{
"Total":2,
"Page":1,
"Records":28,
"Rows":[
{
"PKId":1234,
"OrderNumber":"XXXXXX97",
"Cancel":"Cancel",
"OrderDate":"Jul 11 2012 12:37PM",
"Warehouse":"",
"Bucket":"xxxxxxxx",
"StatusCode":"Shipped Complete",
"StatusLink":"View Info",
"TrackingNumber":"xxxxxxx",
"TransportCompany":"xxxxxxxx",
"Destination":"xxxxxxx",
"BucketId":110,
"ShippingEmail":"xxxxxxxx",
"OrderedBy":"xxxxxxxx",
"OrderItem":"xxxxxxx"
},
.... MORE DATA HERE ... 20 OBJECTS ALL-TOGETHER WITHIN Rows Array
{
"PKId":13434,
"OrderNumber":"XXXXXX97",
"Cancel":"Cancel",
"OrderDate":"Jul 11 2012 12:37PM",
"Warehouse":"",
"Bucket":"xxxxxxxx",
"StatusCode":"Shipped Complete",
"StatusLink":"View Info",
"TrackingNumber":"xxxxxxx",
"TransportCompany":"xxxxxxxx",
"Destination":"xxxxxxx",
"BucketId":110,
"ShippingEmail":"xxxxxxxx",
"OrderedBy":"xxxxxxxx",
"OrderItem":"xxxxxxx"
},
],
"UserData":null
}
Any suggestions?
Btw, the pagination and filtering was working just fine when I used loadonce: true and when I loaded all data at once, however, due to too many records I simply have to switch to server-side.
EDIT
I found the problem. First of all, I am sorry for not including the rest of the code.
You see, I also had loadComplete and that was causing the problem for me.
Code in the question will work, so I want to thank everyone for participating.
This is the loadComplete that caused the problem. Once I removed it it started paging properly.
loadComplete: function() {
setParamsOnComplete();
var myGrid = jQuery("#grid");
var ids = myGrid.getDataIDs();
for (var i = 0, idCount = ids.length; i < idCount; i++) {
jQuery("#"+ids[i]+" a",myGrid[0]).click(function(e) {
var hash=e.currentTarget.hash;// string like "#?id=0"
if (hash.substring(0,6) === "#S?id=") {
var id = hash.substring(6,hash.length);
var text = this.textContent || this.innerText;
dialog.dialog({ title: 'Status Information',
buttons:{ Ok: function() {
jQuery( this ).dialog("close");
}
},
open: function() {
jQuery('.ui-dialog-buttonpane').find('button:contains("Ok")').css('font-size', '10px');
}
});
dialog.dialog('open');
}
if (hash.substring(0,6) === "#C?id=") {
var id = hash.substring(6,hash.length);
var text = this.textContent || this.innerText;
var changed = false;
var additionalMesages = "";
jQuery.post("DataFetcher.asp", { 'action': "cancelOrder", 'id':id }, function(xml) {
changed = (xml === 'True');
additionalMesages = xml;
}).success(function(){
if (changed){
showDialogCustomTitle("Success", "You've successfully cancelled the order " + id + ".");
jQuery("#grid").setGridParam({datatype:'xml', page:1}).trigger('reloadGrid');
}else if (additionalMesages.split("_")[1] == "2"){
showDialogCustomTitle("Error", additionalMesages.split("_")[2]);
}else if (additionalMesages.split("_")[1] == "1"){
showDialogCustomTitle("Error", additionalMesages.split("_")[2]);
}
});
}
//e.preventDefault();
});
}
},
Next task for me is to perhaps figure out why loadComplete cause the problem.
EDIT 2
Found the first issue with loadComplete. I was too tired last night to notice it, but the leftover code from the period when this grid was populated with xml and paged on client side definitely caused the problems. Thank you all for involvement again. :)
jQuery("#grid").setGridParam({datatype:'xml', page:1}).trigger('reloadGrid');
Since you have set loadonce:false, the request for paging and filtering try to get processed at the server side. Since that may not probably happening in your case, there will be no data to return to and set in the jqGrid.
If you are using loadonce:false and datatype:"json" jqGrid option then your server must implement the pagination of your grid. The server receives some parameters which is appended to the url in case of the 'GET' requests or sent in the HTTP body in case of "POST" requests namely : rows, page, sidx, sord.
For example if your table have a column with the index 'Col1' as the current sort column and rowNum: 20 then your url will be appended with baseUrl?rows=20&page=1&sidx=Col1&sord=asc. Your server side coding should modify your query for data so that it is to be having ORDER BY (Col1 datafield in the table) asc and rowNum from 1 to 20.
If you have done as stated above and it is not working, you should verify your server code.
Hi I am not able to get the data from JSON loaded on to grid,
HEre is my code for the grid wich displays the stock prices for the stock for a user :
$(document).ready(function () {
// $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
jQuery("#jqTable").jqGrid({
url:jqDataUrl,
datatype: "json",
mtype: "POST",
height: 250,
// Specify the column names
colNames: ["SYMBOL", "LAST", "CHANGE", "%CHANGE","HIGH/LOW"],
// Configure the columns
colModel: [
{ name: "SYMBOL", index: "SYMBOL", width: 200, align: "left" },
{ name: "LAST", index: "LAST", width: 200, align: "left" },
{ name: "CHANGE", index: "CHANGE", width: 200, align: "left" },
{ name: "%CHANGE", index: "%CHANGE", width: 200, align: "left"},
{ name: "HIGH/LOW", index: "HIGH/LOW", width: 200, align: "left"}
],
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "cell",
id: "id",
},
multiselect: false,
// paging: true,
// rowNum:10,
// rowList:[10,20,30],
pager: $("#jqTablePager"),
loadonce:true,
caption: "WatchList"
}).navGrid('#jqTablePager',{edit:false,add:true,del:true});
}
});
But when i try and run the code i am not able to get the contents on to the table (but the grid loads with no content)
And My json is of the form :
{
total: "1",
page: "1",
records: "2",
rows :
[
{id:"1", cell:["cell11", "cell12", "cell13","cell13","cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23","cell13","cell13"]}
]
}
Please help me solve the problem
UPDATE:
I discovered that if you do not put repeatitems:true option into json reader, jqGrid assumes that you are using json dot notation. When you put it into jsonReader, your data is properly loaded. Here is working example: http://jsfiddle.net/a5e5F/3/
Old version:
I played a lot with your jqgrid code, and it seems that there is a bug in this version of jqGrid, which causes your jsonReader not to work. It reads data directly, ignoring root element and assuming that your data is array of json objects in format
{propertyName1:'PropertyValue1', propertyName2:'PropertyValue2', ...}
You can see what I mean on http://jsfiddle.net/a5e5F/2/
If you replace data:rows with data:data (your format of data), it does not load data. Maybe you should try to change your json data to use real json format (with properties named as columns)?
I have been trying a ton of stuff, changing column names to check for issue in #Barmar's coment, which I also thought it is the cause.