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.
Related
I'm trying to validate the search field for integer data alone but unfortunately am unable to do so. I have tried all possible solutions like searchrules:{required:true,integer=true} etc..
But none of them proves fruitful.
I basically launch the search dialog with the field and without inputting any data, am hitting on the 'Find' button. As per the above options, i believe a validation message should be shown to the user asking him to enter a value in the field before hitting find.
[UPDATED] - Code Snippet
var grid = $("#list");
grid.jqGrid({
url:'/index.jsp',
datatype: 'json',
mtype: 'POST',
colNames:['Name','Age', 'Address'],
colModel :[
{name:'name', index:'name', width:55,search:true },
{name:'age', index:'age',
width:90,editable:true,search:true, stype:'text',
searchrules:{required:true,integer:true}},
{name:'address', index:'address', width:80,
align:'right', editable: true,search:false }
],
pager: '#pager',
jsonReader : {
root:"address",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
rowNum:10,
rowList:[10,20,30],
sortname: 'name',
sortorder: 'desc',
viewrecords: true,
gridview: true,
autowidth: true,
toppager: true,
loadtext: "Loading records.....",
caption: 'Test Grid',
gridComplete: function(){
}
});
**grid**.jqGrid('navGrid','#pager',
{view:true,edit:true,add:true,del:true,refresh:true,
refreshtext:'Refresh',addtext:'Add',
edittext:'Edit',cloneToTop:true,
edittitle: "Edit selected row"},
{},{},{},
{caption: "Search The Grid",Find: "Find Value",Reset: "Reset"},
{});
[Updated] : Am not able to make the searchrules properly work for the single/advanced searching modes.
[Updated] : Even the 'Validation in Search' in
jqGrid Demo is not working for searchrules.
The reason of described problem is a bug in jqGrid. The line
ret = $.jgrid.checkValues(val, -1, null, colModelItem.searchrules, colModelItem.label);
initialize the third parameter of $.jgrid.checkValues to null, but the last version of checkValues implementation started (see the line) with
var cm = g.p.colModel;
but g is initialized to null. The last modification which generates the error was based on my suggestion, but I don't wrote the part of the code.
One can solve the problem in different way. I would suggest to modify the line where $.jgrid.checkValues will be called with null parameter to the following
ret = $.jgrid.checkValues(val, -1, {p: {colModel: p.columns}}, colModelItem.searchrules, colModelItem.label);
Additionally, to be sure, I would suggest to modify one more line
if(!nm) { nm = g.p.colNames[valref]; }
to
if(!nm) { nm = g.p.colNames != null ? g.p.colNames[valref] : cm.label; }
The fixed version of jquery.jqGrid.src.js one can get here. I will post my bug report with the same suggestions later ti trirand.
I am using jqgrid 4.0 .The grid is loaded on page load using 'local' datatype , loadonce:'true' and I don't want to use pagination. Since the data that is to be loaded is huge, it takes lot of time to get loaded. How can I
load the grid only first with headers, displaying a load text as 'loading....' and then load the data? Right now, both the grid and data loads together and page doesnt appear until this is complete.
Load the data faster in grid?
Below is my code snippet where 'data' is the json encoded array formed server side.
<script type="text/javascript">
jQuery("#list9").jqGrid({
data: data,
datatype: "local",
colNames:[...],
colModel:[...],
sortname: 'fld_name',
rowNum: '-1',
loadonce:true,
mtype: "GET",
gridview: true,
viewrecords: true,
sortorder: "asc",
pager: '#pager9',
rownumbers: true,
multiselect: false,
width: '100%',
pgbuttons:false,
pgtext:'',
loadtext: 'loading....',
ignoreCase: true
});
jQuery("#list9").jqGrid('filterToolbar', {stringResult: true,searchOnEnter : false});
$('.ui-widget-header').css("background", "#7B9FBC");
$('.ui-jqgrid-sortable').css("text-align", "left");
</script>
What I do is:
First, render the grid without any data.
var grid = $('#myGrid');
grid.jqGrid({
data: [],
datatype: "local",
colModel: [ ...
Then, add the data to the grid using addRowData.
var grid = $('#myGrid');
grid.jqGrid('addRowData', 'ContactID', newRowData, 'first');
It sounds like you have your data already in memory when you build the grid, and it's just taking a long time to render the grid. This might be because of all the DOM objects being created when rendering the grid. There isn't much you can do about that other than paging, or decrease the complexity of your cells if you are using heavy formatting.
I'm trying to turn jqGrid within MODx, as do other data exchange using "$. ajax", move the call from a URL to a resource protected by a password and from there call a snippet of code in PHP, so the security framework, the ajax call is guaranteed
This is one example of a chunk $.ajax:
$.ajax ({
url :'[[~94]]',
type: 'post',
async: false,
success: function(rsp) {
$.Cookie("xxxxxx-tipodirlist", rsp);
}
});
*[[~94]] is a protected resource is within a snippet call [[!SnpBridgedata_blabla]]
the system works perfectly well throughout the web application, receiving and sending data safely and securely.
Now a customer asked me for a completed application wanted web results in a good grid and after seeing a bit of code I decided to use jqGrid for my project.
integration was quick and I am very happy to have changed "DataTable" with "jqGrid," but when I finished the test, change the absolute path to xxxxxx.php with the call to snippet
this is the code for jqGrid:
chargeSedi function (idx)
{
// Test with file. Php !work fine!
// Var esURL = 'http://xxxxx.com/xxxxxxx.php?IDX =' + idx;
// Test with MODx resource !not work!
esURL var = '[[~ 97]] & IDX =' + idx;
csURL var = '[[~ 96]] & IDX =' + idx;
tipodirlist = $ var. cookie ("xxxxxxxx-tipodirlist");
tiposedelist = $ var. cookie ("xxxxxxx-tiposedelist");
$("#sediTable").ready(function() {
$("#sediTable").jqGrid({
url:csURL,
datatype: "json",
height: 250,
autowidth:true,
colNames:[ 'ID','CODICE', 'NOME','TDIR', 'DIR','COMUNE', 'PROVINCIA','CAP', 'TSEDE','NOTA'],
colModel:[
{name:'ID',index:'ID', width:25, editable: false},
{name:'CODICE',index:'CODICE', width:60, editable: true},
{name:'NOME',index:'NOME', width:60, editable: true},
{name:'TDIR',index:'TDIR', width:60, editable: true,edittype:"select",editoptions:{value:tipodirlist}},
{name:'DIR',index:'DIR', width:200, sortable:false,editable: true},
{name:'COMUNE',index:'COMUNE', width:170, sortable:false,editable: true},
{name:'PROVINCIA',index:'PROVINCIA', width:170, sortable:false,editable: true},
{name:'CAP',index:'CAP', width:40, sortable:false,editable: true},
{name:'TSEDE',index:'TSEDE', width:90, editable: true,edittype:"select",editoptions:{value:tiposedelist}},
{name:'NOTA',index:'NOTA', width:170, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}} ],
sortname: 'ID',
viewrecords: true,
sortorder: "desc",
loadonce: true,
editurl: esURL ,
caption: "Sedi" });
});
]
and for my surprise the MODx deny Access to jqGrid ajax calls, as if you were out of session, but after hours testing and watching the traffic with wireshark I realized that jqGrid sends a POST variable called "id" and call MODx a GET variable "id". this in other environments is possible without problem, but it is not possible MODx and there's the problem.
my question is how I can change the name of the POST variable "id" jqGrid, without changing the source of jqGrid?
at the same time wanted to ask, you can customize the import of a select the value and not the index
example of trame POST:
{Name: 'TDIR', index: 'TDIR', width: 60, editable: true, EditType: "select" editoptions: {value: tipodirlist}}
tipodirlist = 1:via;2:piazza;3:ect
TDIR=2
CODICE=1&NOME=principale&TDIR=2&DIR=Roma&COMUNE=Torino&PROVINCIA=Torino&CAP=10000&TSEDE=2&NOTA=NO=edit&id=0
for this:
TDIR=piazza
CODICE=1&NOME=principale&TDIR=piazza&DIR=Roma&COMUNE=Torino&PROVINCIA=Torino&CAP=10000&TSEDE=2&NOTA=NO=edit&id=0
without having to filter the results on the server.
I hope I've explained well and clear. as I asked myself, the team "StackOverflow" before asking this question
Thank you so much
Regards
niro.
PS.I hope that GOD "Oleg" help me:)
I don't know and don't use MODx. Nevertheless I hope that your problem is: how to rename the name of the id parameter to have no conflict with the id parameter used by MODx.
If I understand your question correct you should just add additional prmNames parameter which set the new name of id parameter used in editing operations:
prmNames: {id: 'myId'}
The example will rename the default id parameter name ({id: "id"}) to myId which you should you in your server part.
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.
using jqGridversion 3.7.2
I thought that if I set cellSubmit: 'clientArray' then the grid does NOT need a url to post data. I'm trynig to just capture the changed value locally and process it manually, not auto trigger a server event. Yet when I try to exit an edited cell I still get the "Error: No url is set" dialog.
grid options def:
$(".mytable").jqGrid({
datatype: 'local',
data: myData,
colModel: colModelDef,
sortname: 'date',
sortorder: 'desc',
width: 950,
height: 550,
shrinkToFit: false,
rownumbers: true,
multiselect: true,
cellEdit: true,
beforeSaveCell: function() {
//rowid, cellname, value, iRow, iCol
alert(arguments[2]);
},
cellSubmit: 'clientArray'
});
turns out it was a typo, should read "cellsubmit" not "cellSubmit" works like a charm. Thanks Tony!
Before all you should replace class selector $(".mytable") to the id selector like $("#mygrid"). If the <table> element not yet has the id you should add it. jqGrid works intern permanent with the id of the table element and construct ids of other DOM elements based on the id of the <table> element. So the usage of <table> without id can not good work.
If a simple change of the selector will not help you should include full code of an example which can be used to reproduce the problem.
add follow attr and the error will be gone
loadonce:true