Related
I had a problem with jqGrid
When i use:
$("#gridView").jqGrid({
url:"grid.php",
colModel:[
{ name: 'id', index:'id'},
],
datatype: "json",
mtype:"post",
height:350,
rownumbers:true,
treeGrid: true,
treeGridModel : 'adjacency',
ExpandColumn : 'id',
ExpandColClick: true
....
$("#gridView").jqGrid("getGridParam", "data") return array
$("#gridView").jqGrid({
url:"grid.php",
colModel:[
{ name: 'id', index:'id'},
],
datatype: "json",
mtype:"post",
pager:"#pager",
rowNum:50,
rowList:[10,50,100,500,1000],
viewrecords:true,
height:350,
rownumbers:true,
....
$("#gridView").jqGrid("getGridParam", "data") return null ??
I've read article here JQGrid getGridParam not returning ID of data item
But I cannot set loadonce:true because of my dynamic data for each click
You don't need to use loadonce: true in case of treeGrid: true. jqGrid fills internal parameters data and _index for treegrid automatically (see the part of the code).
I suppose that you get null as the value of data parameter because you try to access data before the data will be loaded from the server. Try to use $(this).jqGrid("getGridParam", "data") inside of loadComplete callback. The callback will be called after filling of data.
I'm having troubles when showing my json data in jqGrid.
I've searched a lot in this forum and tried various forms to make it work. I apologize if this was already answered but I really need help with this one.
At the server page I was only using JavaScriptSerializer to send the data and the jsonreader function with the default parameters (this worked ok).
I now need to paginate and have changed my server page code to work with the sidx, sord, page, rows parameters.
The resulting string from the server looks like this:
{"total":"344","page":"1","records":"8577","root":[{"Id":"1","SerialNumber":"132","Name":"ServerName"},...]}
Here is my jQuery code:
$("#list").jqGrid({
datatype: "json",
mtype: 'GET',
url:'https://server/handlerpage.ashx',
colNames:['Id','SerialNumber','Name'],
colModel :[
{name:'Id', index:'Id', jsonmap:"Id", width:20},
{name:'Name', index:'Name', jsonmap:"Name", width:120},
{name:'SerialNumber', index:'SerialNumber', jsonmap:"SerialNumber", width:100}],
jsonreader: {repeatitems:false,id:'Id',root:'root'},
pager: '#pager',
rowNum:25,
rowList:[25,50,75,100],
sortname: 'Id',
viewrecords:true,
gridview: true,
height:"400",
width:"700",
caption: 'Select from existing server',
loadtext:'Loading, please wait'
}).navGrid("#pager", { edit: false, add: false, search: true, del: false });
In order to use json data as a response from a query the response has to be formatted correctly. It is difficult to determine what is the correct response and how to get it from the documents. More problems can occur as a result of your server settings generating a warning as part of the response which will cause the grid not to load.
From the documents this is the default json reader, meaning if you format your response correctly you don't need to add anything / a custom json reader.
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {
root:"rows",
repeatitems: true,
cell:"cell"
}
First make sure you have the right response format. {"page":1,"total":1,"records":"2","rows":[{"id":"1","cell":["1","mydata1"]},{"id":"2","cell":["2","mydata2"]}]}
No sample is given on the docs page but the above is correct if you only have two columns in your grid. You need to get your server query / parsing of your server query and values passed to the page that runs your sever side scripts to return this format. The example.php page from the documents gives you all the values you need.
This code will give you the proper header, to avoid error warnings and matches up with the response from above. Also note that in the docs they do not add the apostrophes around the indexes for the associative array index names. That will fail.
header('Content-type: application/json');$responce = new stdClass();$responce->page = $page;$responce->total = $total_pages;$responce->records = $count;$i=0;while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {$responce->rows[$i]['id']=$row['ID'];$responce->rows[$i]['cell']=array($row['ID'],$row['entity_name']); $i++; } echo json_encode($responce);
To rehash what is missing in the docs (it is possible that I just missed them and even if, the documents for jQgrid are epic/a masters work):
1. No mention of the need for a header statement for json (it is clear with the XML examples)
2. No sample of what a working returned string should look like
3. Lack of proper formatting of the associative array indexes.
4. No mention of how to avoid a PHP warning being returned as part of the response
Try the following
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: true,
cell: 'cell',
id: 'id',
userdata: 'userdata'
}
Please make sure that the server side script is returning proper json string with HEADERS
Further check the demo site and JSON example
I am getting a JavaScript error when trying to use the JQGrid:
"Message: 'undefined' is null or not an object"
When I debug on my server, I see that my JSON output looks like this: (does it matter that the "id" value is not inside double quotes?)
{
"page":"1",
"total":"20",
"records":"5",
"rows":[
{"id":1,"name":"Sam","phone":"732-333-2222"},
{"id":2,"name":"Dan","phone":"000-222-1111"},
{"id":6,"name":"George","phone":"333333"},
{"id":4,"name":"Jerry","phone":"332-333-4444"},
{"id":7,"name":"John","phone":"666666"},
{"id":8,"name":"Tom","phone":"3333"}]
}
.. and my page looks like this:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'/myUrlPage',
datatype: 'json',
mtype: 'GET',
colNames:['Id', 'Name', 'Phone'],
colModel :[
{name:'id', index:'id', width:55},
{name:'name', index:'name', width:90},
{name:'phone', index:'phone', width:150, sortable:false} ],
pager: jQuery('#pager'),
rowNum:10, rowList:[10,20,30],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'My first grid' }); });
</script>
You main problem will be solved if you include
jsonReader: { repeatitems: false }
parameter in your jqGrid. See details in the jqGrid documentation.
Moreover I modified a little your demo. You can see it here. I recommend you remove deprecated imgpath parameter. Instead of that I recommend you to use height: 'auto' which gives you good results in the most cases. Instead of jQuery('#pager') is better to use just '#pager'. You should additionally increase the value of the width for some columns in case of the usage of pager and viewrecords: true. I included in my demo the jQuery("#pager_left").hide(); statement which hide some block of the pager which you not use now. If you will start to use navigator buttons you should remove the line.
One more remarks about the JSON data which you use. The values of id, page, total and records properties can be either strings or integers, so "id":1 will gives you the same results as "id":"1".
It's important to understand how you should fill page, total and records. You current values are page=1, total=20, records=5 and you data contain 6 rows. All the data has no sense. The jqgrid asked the server with respect of additional parameters which it appended to the URL to gives one page of the data with 10 rows per page (rowNum:10). Your answer from the server means that your data contain 5 items (records=5) totally. If you order the data (the 5 items) in pages (10 items per page) you will have 20 pages (total=20) and the first one from there (page=1) you are filled with the data (6 items). The strange values of page, total and records from your JSON data follows to strange values in the pager on the demo:
I would recommend you to read the answer where I tried to describe why jqGrid need so strange format of JSON data.
I'm having some issues setting the url of the jqgrid using setGridParam.
I receive the message: "f is undefined".
My setup:
$("#prices").jqGrid({
colModel: [
...
],
pager: jQuery('#pricePager'),
ajaxGridOptions: { contentType: "application/json" },
mtype: 'POST',
loadonce: true,
rowTotal: 100,
rowNum: -1,
viewrecords: true,
caption: "Prices",
height: 300,
pgbuttons: false,
multiselect: true,
afterInsertRow: function (rowid, rowdata, rowelem) {
// ...
},
beforeSelectRow: function (rowid, e) {
// ...
},
onSelectRow: function (rowid, status) {
// ...
}
});
Getting the data:
$("#prices").setGridParam({ datatype: 'json', page: 1, url: '#Url.Action("GridDataPrices")', postData: JSON.stringify(selections) });
$("#prices").trigger('reloadGrid');
The Response is non encoded json:
{"total":1,"page":1,"records":100,"rows":[{"id":160602948,"StartDate":"\/Date(1311717600000)\/","Duration":7,"Price":1076.0000,"Code":"code"},{"id":160602950,...}]}
However, I get following message, using firebug:
"f is undefined"
I got this working first using addJSONData, but had to replace it because I want to preserve the local sorting.
Thanks in advance.
After you uploaded the code all will be clear. Your main errors are the follwings:
you should include datatype: 'local' in the jqGrid. Default value is 'xml'.
the JSON data have named properties so you have to use jsonReader: { repeatitems: false } (see the documentation for details)
you use "ArivalCodeWay" in colModel and "ArrivalCodeWay" in the JSON data. So you should fix the name of the corresponding jqGrid column
to decode the date from the "\/Date(1312840800000)\/" format you should include formatter:'date' in the corresponding column.
In the same way I find good to include formatter:'int', sorttype:'int' in the 'Duration' column and sorttype:'number', formatter:'number', formatoptions: { decimalPlaces:4, thousandsSeparator: "," } in the 'Price' column.
if you use JSON.stringify you should include json2.js to be sure that your code will work in all web browsers.
The modified demo (including some other minor changed) you can find here. If you click on "Click me" button the grid contain will be loaded.
I'm trying for a few hours now to generate an xml string from my grid's data , when the columns names will be the tag names and the content of the grid will be inside of them.
my grid is initialized with xmlReader.
I tried using:
var dataFromGrid = {row: grid.jqGrid('getGridParam', 'data') };
var xmldata = xmlJsonClass.json2xml (dataFromGrid, '\t');
alert(xmldata);
but it did not work for me.
how can this be done? it will be better not using json, if it's possible.
Thank's In advance.
Update:
This is my code: I'm using datatype xml.
Query("#signatory2_payment").jqGrid({
url:'loadgrid.jsp?type=3',
datatype: "xml",
direction:"rtl",
height: '100%',
width: '100%',
colNames:['group_order','claim','beneficiary_description','insurance_code_description'],
colModel:[
{name:'group_order',xmlmap:'group_order', width:80, align:"right",sorttype:"int"},
{name:'claim',xmlmap:'claim', width:70, align:"right",sorttype:"int"},
{name:'beneficiary_description',xmlmap:'beneficiary_description', width:120, align:"right",sorttype:"string"},
{name:'insurance_code_description',xmlmap:'insurance_code_description', width:120, align:"right",sorttype:"string"}},
],
xmlReader: {
root:"payments",
row:"payment",
page:"payments>page",
total:"payments>total",
records:"payments>records",
repeatitems:false
},
multiselect: false,
autowidth: true,
forceFit: false,
shrinkToFit: false,
caption: " xxxxxx "
});
If i understood you correctly it will work only on local data?
What is the solution for data that is not local?
Thank's again.
Look at the answer. You will find here a working demo which do what you need.
UPDATED: It is important, that you include definition of jqGrid in your question. The data parameter will be filled only in case of local data (for example if you use datatype:"local", datatype:"xmlstring" or use loadonce:true additional parameter which changes the datatype to datatype:"local" after the first load of data. So if my old answer will help you not you should append your question with additional informations.