We Keep Coding

JqGrid reload is not working without unloading the grid

I am using jqgrid version 4.5.2. I have a role list combobox outside of the grid and on change of the options I need to reload the grid. Below is the defination of my grid.
var finalUrl='';
var queueStatus=jQuery('#queueStatus option:selected').val();
finalUrl= "http://localhost:8080/ui/paw/loadworkflowqueuedata.raws?selRole="+ selectedRole+"&"+queueStatus;
var queueStatus=jQuery('#queueStatus option:selected').val();
finalUrl= "http://localhost:8080/ui/paw/loadworkflowqueuedata.raws?timezone="+&selRole="+ selectedRole+"&"+queueStatus;
jq("#grid").jqGrid('GridUnload');
jq("#grid").jqGrid({
url:finalUrl,
ajaxGridOptions: {cache: false},//added the option to always reload the grid and not to cache the result.
datatype: 'json',
mtype: 'GET',
colNames:[ 'Requestor Name'],
colModel:[
{name:'requestor',index:'requestor',sortable: true, width:100,editable:false, editrules:{required:true}, editoptions:{size:10}}
],
postData: {
},
height: 'auto',
autowidth: true,
rownumbers: true,
pager: '#pager',
viewrecords: true,
sortorder: "asc",
emptyrecords: "Empty records",
loadonce: true,
rowNum:20,
ignoreCase: true,
prmNames: {
nd: null
},
loadComplete: function() {
},
jsonReader : {
root: "rows",
repeatitems: false,
page:"page",
total: "total",
records: "records",
cell: "cell",
id: "id"
}
});
jQuery("#grid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search: false, refresh:true})
.navButtonAdd('#pager',{caption:"Export All",buttonicon:"ui-icon-document",onClickButton: function(){window.open(excelUrl,'_self');},position:"last"});
jQuery("#grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn",ignoreCase: true });
The grid above works fine(refreshes properly on change of rolelist combobox) only if I keep the below statement.
jq("#grid").jqGrid('GridUnload');
If I remove the above statement and reload the page than for the first time grid loads properly but after that If I change the option in my role list combo box it is not able to refresh the grid data neither it is throwing any error.
May I know why I need to unload the grid for refresh? Isn't there a way through which I can refresh the grid with out unloading the grid? Did I miss any options in grid defination that is the reason why grid reload is not working?Please do let me know if need more details for the above question for the solution.

You use loadonce: true options which is very helpful to load all the server data to the client side at once and then working with the data on the client side (paging, filtering and so on) without any communication with the server. To do this jqGrid changes datatype parameter of the grid to "local" after the first loading of data. So you need to reset the value of datatype parameter back to "json" before trigger reloadGrid event.
The corresponding code will be like
// create the initial grid
jQuery("#grid").jqGrid({
...
url: finalUrl,
datatype: 'json',
loadonce: true,
...
});
jQuery('#queueStatus').change(function () {
jQuery("#grid").jqGrid("setGridParam", {
datatype: "json",
url: "basePartOfUrl?" + jQuery.param({
timezone: "blabla",
selRole: jQuery('#queueStatus').val();
})
}).trigger("reloadGrid");
});
I use above jQuery.param instead of direct construction of parameters in the string to make the code more correct. Alternatively one should use encodeURIComponent to construct the parameter values appended to URL. It's clear that one can use queueStatus directly if it has no space, no special characters and so on, but the usage of encodeURIComponent or jQuery.param is still recommended and make the code working independent from the value of the string parameter.

Get to customize Jquery datatables GET request parameters that will be sent to the server

I'm using Jquery datatables and i would like when loading a page that it sends a customized GET request to the server not the default GEt request it sends. This is the JS section where it sends the request on load
$(document).ready(function() {
oTable=$('#ip_data').dataTable({
"bProcessing": true,
"bServerSide": true,
"bPaginate": true,
"bScrollCollpase": true,
"sScrollY": "200px",
"sAjaxSource": "/url"
});
});
where #ip_data is the html table id now with onload it works perfectly and this is the request headers it sends
http://domain.com/getdata?sEcho=1&iColumns=5&sColumns=%2C%2C%2C%2C&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSe arch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=1&sSearch_1=&bRegex_1=false&bSearchable_1=true&bSortable_1=true&mDataProp_2=2&sSearch_2=&bRegex_2=false&bSearchable_2=true&bSortable_2=true&mDataProp_3=3&sSearch_3=&bRegex_3=false&bSearchable_3=true&bSortable_3=true&mDataProp_4=4&sSearch_4=&bRegex_4=false&bSearchable_4=true&bSortable_4=true&sSearch=&bRegex=false&iSortCol_0=0&sSortDir_0=asc&iSortingCols=1&_=1402738395413
Now the server i'm working with is Rpc and it must get a method and params and id keys with the params part carrying the big chunk of data i.e to make the one shown above to something like this below which i have manually used and it has worked. the differences include
1 the addition of method=method
2 separation of method ,params and id by use of ';'
3 params={...} which is valid json
4 id=1
http://domain.com:5000/?method=datatables;params={"sEcho":"1", "iColumns":"5", "sColumns":",,,,", "iDisplayStart":"0", "iDisplayLength":"10", "mDataProp_0":"0", "sSearch_0":"", "bRegex_0":"false", "bSearchable_0":"true", "bSortable_0":"true", "mDataProp_1":"1", "sSearch_1":"", "bRegex_1":"false", "bSearchable_1":"true", "bSortable_1":"true", "mDataProp_2":"2", "sSearch_2":"", "bRegex_2":"false", "bSearchable_2":"true", "bSortable_2":"true", "mDataProp_3":"3", "sSearch_3":"", "bRegex_3":"false", "bSearchable_3":"true", "bSortable_3":"true", "mDataProp_4":"4", "sSearch_4":"", "bRegex_4":"false", "bSearchable_4":"true", "bSortable_4":"true", "sSearch":"", "bRegex":"false", "iSortCol_0":"0", "sSortDir_0":"asc", "iSortingCols":"1" };id=1
I know js and jquery can do the above but i haven't been succesful with jquery datatables since i can't get where to make a customized request to te server to what i want. Help apreciated.

In order to customize the request you need to add fnServerData in datatable initialization parameter with the function having customized ajax call as shown below. you can access the source, default data in aoData, callback function and settings, now you can add your own customized data like this,
aoData["MyCustomValue"] = 123;
or you can simply overwrite aoData object, its up to you
I have made a post request here.
$(document).ready(function() {
oTable=$('#ip_data').dataTable({
"bProcessing": true,
"bServerSide": true,
"bPaginate": true,
"bScrollCollpase": true,
"sScrollY": "200px",
"sAjaxSource": "/url",
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
aoData["MyCustomValue"] = 123;
oSettings.jqXHR = $.post(sSource, aoData, fnCallback, "json");
}
});
});

You should be able to use the following method to add id=1 and method=datatables.
var oTable = $('#ip_data').DataTable( {
"serverSide": true,
"ajax": {
"url": "/url",
"data": {
"method": "datatables",
"id": "1",
}
},
});
In everything I've read, nothing supports construction of query strings using semi-colon instead of ampersands as separators. For that you'd have to roll your own function, see the last example here https://datatables.net/reference/option/ajax.data
Also, passing raw json is a bit nasty. My advice would be to just let datatables automatically send the params. Datatables does this automagically if you are using the 'serverSide: true,' option.

in my case . i am sending with following code
$('#transactions_table').DataTable( {
"processing": true,
"bLengthChange": false,
"pageLength": 3,
"bFilter" : false,
"serverSide": true,
"headers": {'Content-Type':'application/x-www-form-urlencoded'},
"ajax":{
data:{currency:currency_code,date_from:date_from,date_to:date_to,is_zero_fee:is_zero_fee},
url :"http://ischool.pk",
type: "GET"
},"columns": [
{ "data": "transaction_id" },
{ "data": "currency" },
{ "data": "side" },
{ "data": "transaction_detail" },
{ "data": "insert_date" },
{ "data": "transaction_fee" },
{ "data": "amount" },
{ "data": "user_id" }
]
});

JqGrid don'i reload after click on the button

I work with jqGrid on my project and I have a problem that can not seem to solve even after reading the forums on the same subject.
I would reload the grid when a user clicks a button after selecting a date. I want the data recharge correspodent to choose the date.
I use the following code:
var loadfacture = false;
$('#btn-facture').click(function(){
if(!loadfacture){
$("#factures").jqGrid({
url:'loadfactureencours.json',
datatype: "json",
autowidth: true,
height:250,
colNames:['#','Numero','Date', 'Client','Serveur','Prix Total','Avance','Regler','Notes'],
colModel:[
{name:'idfac',index:'idfac', width:45,align:"center"},
{name:'numfac',index:'numfac', width:80,align:"center"},
{name:'datefac',index:'datefac', width:150,align:"center"},
{name:'client',index:'client', width:145,align:"center"},
{name:'utilisateur',index:'utilisateur', width:125,align:"center"},
{name:'montant',index:'montant', width:70,align:"center"},
{name:'avance',index:'avance', width:60,align:"center"},
{name:'regler',index:'regler', width:50,align:"center"},
{name:'description',index:'description', width:150, sortable:false}
],
rowNum:10,
rowTotal: 2000,
rowList : [10,20,30,40,50,60],
loadonce:true,
mtype: "GET",
postData: {
day: function () {
return $('#daySelect').val();
}
},
rownumbers: false,
rownumWidth: 40,
gridview: true,
pager: '#paging',
sortname: 'idfac',
viewrecords: true,
sortorder: "desc",
caption: "",
ondblClickRow: function(rowid,iRow,iCol,e){
var rowData = jQuery(this).getRowData(rowid);
console.log(rowData);
window.location = "ecrancommandebar.html?num="+rowData.numfac;
}
});
$("#factures").jqGrid('navGrid','#paging',{del:false,add:false,edit:false});
loadfacture = true;
}else{
var grid = $("#factures");
grid.trigger("reloadGrid",[{current:true}]);
}
});
I built this piece of code by reading the forum on the same subject but the grid load the first time then when I click on the button after changing the date nothing happens.
What is wrong with you? Thank you for your feedback.

You use loadonce:true option which changes datatype from initial "json" to "local" after the first loading of the data from the server. It allows to support local sorting, paging and filtering of data. So you should understand that grid.trigger("reloadGrid",[{current:true}]); will just reload the data from previously saved previous response. So no reloading from the server will take place till you reset the value of datatype parameter to "json". In other words you should rewrite else part to about the following
...
} else {
$("#factures").jqGrid("setGridParam", {datatype: "json"})
.trigger("reloadGrid", [{current: true, page: 1}]);
}

You can try with this:
}else{
var grid = $("#factures");
$.ajax({
url: "loadfactureencours.json",
dataType: "json",
success: function(data){
grid.trigger("reloadGrid",[{current:true}]);
},
error: function(){}
});
}

jqGrid: Load JSON data after local data already in table

I have a very specific problem: I have a small form with four options. You may fill them out or not, and when you click 'Ok', I load a jqGrid with data depending on those options. But since I do not know what my columns look like, I let my servlet generate the column model and column name; thus I have to make an AJAX request to load the data and then fill it in jqGrid as "local" data. I would like to use pagination though.
Thus my question: How may I load more data into a jqGrid after it is already established through local data?
here's the code:
$.ajax({
type : 'GET',
url : 'data.jsp',
data : reqData,
dataType : 'json',
error: function() {
$("#dialog-message").dialog("open");
$("#ajax-loader").css("display", "none");
},
success : function(result) {
jQuery("#results").jqGrid({
data : result.rows,
datatype : "local",
colNames : result.columnNames,
colModel : result.columnModel,
pager : $('#pager'),
rowNum : 1000,
scroll : true,
viewrecords : true,
sortname : 'TITEL',
width : window.innerWidth - 30,
height : window.innerHeight - 190,
altRows : true,
loadError: function() {
$("#dialog-message").dialog("open");
$("#ajax-loader").css("display", "none");
},
loadComplete: function() {
$("#ajax-loader").css("display", "none");
}
}).jqGrid("navGrid", "#pager", {
edit: false,
add: false,
del: false,
search: true,
refresh: false
}).jqGrid("gridResize");
}
});
/edit: I've tried to do the following, but that still doesn't solve the problem that the grid doesn't know how many total pages there actually are (actually, at that point, I don't even know), and also, after loading, it thinks it only gets local data. Is there maybe an onScroll event or something? I haven't found one.
datatype : !json ? "local" : function(postdata) {
$.ajax({
type: 'GET',
url: 'data.jsp',
data: $.merge(postdata, reqData),
dataType: 'json',
success: function(data, status, jqXHR) {
var mygrid = jQuery("#results")[0];
var myjsongrid = eval("("+jqXHR.responseText+")");
mygrid.addJSONData(myjsongrid);
}
});
},

Can you not do something like this...get the grid, clear the data, define the url to get the data from (it may change depending on what option your user selected) and then change the dataformat to json instead of local.
var grid = $('#TargetGridID');
grid.clearGridData();
grid.setGridParam({ url: '../controller/action?datatype=Option1' });
grid.setGridParam({ datatype: 'json' });
grid.trigger('reloadGrid');
We use this methodology and it works great...use this with stored procedures capable of paging and the grids are blazing fast! I know a 20,000 row grid takes us roughly 700ms with a page count of 500 rows.
If you are using SQL for your data I can upload a sample on how to support paging in a SQL Stored Proc, very useful stuff.

Datatables fnAdjustColumnSizing doesn't work after ajax processing

I'm currently using datatables with ajax data and I want do adjust the column width.
So I found this function fnAdjustColumnSizing and I try to use it :
oTable = $('.datatable').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "200%",
"bScrollCollapse": true,
"bDestroy" : true,
"sAjaxSource": "xhr.php",
"bFilter": false,
"bSort": false,
"bLengthChange": false,
"bPaginate": false,
"bInfo": false,
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": "webservice.php",
"data": 'id=' + quotation_id + '&customer_id=' + id + '&action=true',
"success": function(msg){
fnCallback(msg);
}
});
},
"fnInitComplete": function() {
this.fnAdjustColumnSizing();
}
});
The function haven't any effect but if I use it inside another event such like this :
$('#target').click(function() {
oTable.fnAdjustColumnSizing();
});
It work well, any idea ?

Have you tried doing
"fnInitComplete": function() {
oTable.fnAdjustColumnSizing();
}
Because i'm not sure that this points to table object

I find a solution by using a function inside the "success" callback of my ajax query :
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": "webservice.php",
"data": 'edit_quotation=true&action=true' + data,
"success": function(msg){
fnCallback(msg);
$('.overlay').hide();
adjustTable();
}
});
function adjustTable(){
oTable.fnAdjustColumnSizing();
}
And it work like a charm but I don't know why. Someone can explain ?

I had a similar problem in Internet Explorer 8 (not in Firefox): I was getting my headers unaligned with respect to the table body.
The table is initialized inside a 'modal' dialog (twitter bootstrap), AFTER it is shown.
Finally, to make it work with Internet Explorer 8, after creating the table I'm making this call:
var t = setTimeout(function () { myTableObject.fnAdjustColumnSizing(false);}, 300);
This refreshes the table without making another unnecessary Ajax call, but it waits 300 ms before doing it, to 'let internet explorer do its thing' before readjusting. If you set lower values i.e. 10 ms) this doesn't work.
I hope it helps,
Roger