In a page, I have a form and a JQGrid. The form is used to enter specific filters. So the Javascript for that page contains a function which reloads the data in order to populate the JQGrid. The JQGrid has loadonce: true, so the refresh button doesn't do anything. I would need to make it call my existing function. Is it possible ?
If I understand you correctly then your problem exist because loadonce: true option changes the original datatype ("json" or "xml") to "local". It allows to use local paging, sorting and filtering of data. During the paging, filtering and sorting the grid will be reloaded, so local reloading do have sense.
If you need to reload the grid from the server you should first restore the original value of datatype and then do reloading.
So if you can use beforeRefresh callback of navGrid to reset datatype:
$("#grid").jqGrid("navGrid", "#pager", {
beforeRefresh: function () {
$(this).jqGrid("setGridParam", {datatype: "json"});
}
});
If you use free jqGrid then you can use new fromServer: true option of reloadGrid and you can use new style of options and new reloadGridOptions option of navGrid. The code will be like
$("#grid").jqGrid({
// standard jqGrid options
navOptions: {
// default options of navGrid
reloadGridOptions: {fromServer: true}
}
}).jqGrid("navGrid");
It will work with datatype:"json" or datatype:"xml".
A simple enough fix:
loadonce: false
really, setting this to true will serve no other purpose that you have specified.
Related
function drawTable(url){
$('#reportList').jqGrid({
url: url,
mtype: 'GET',
datatype: 'json',
shrinkToFit:false,
width:null,
colNames:['num', 'in_charge', 'section1','section2','product','product_description','status','rate','start_date','end_date','proceed_detail'],
colModel:[
{name:'num', index:'num', hidden:true},
{name:'in_charge', index:'in_charge', hidden:true},
{name:'section1', index:'section1', width:70},
{name:'section2', index:'section2', width:140},
{name:'product', index:'product', width:80},
{name:'product_description', index:'product_description', width:300},
{name:'status', index:'status', width:45},
{name:'rate', index:'rate', width:50},
{name:'start_date', width:80, index:'start_date'},
{name:'completion_date', width:80, index:'completion_date'},
{name:'proceed_detail', index:'proceed_detail', width:400}
],
pager: '#pager',
multiselect: true,
rownumbers: true,
shrinkToFit:false,
loadonce: true,
});
}
I retrieve data from server and display it in jqGrid.
First and Second components in colModel are hidden components. So, 'section1' is the first column components to be displayed in jqGrid.
Multiple rows may have same section1 and section2.
So, What I want to do is to merge rows that have same section1 and section2. Basic tag provides rowspan to merge rows.
However, jqGrid never provides that function by default. I've searched stackoverflow for a long time to find the solution, but was unable to do so.
Fetch data from server with 'extraProperty' like columnattr, which will contain information to merge rowspan or not. So you have to update your server code according to your requirement(just add column).
In colmodel add attribute 'cellattr' for particular column and assign your function which will decide to have rowspan from server data 's extraProperty. This function allow you to customize cell in grid. so here you can merge row.
Ref: Jqgrid - grouping row level data
Cheerssssss.
I know how to reload normal jqgrid table. I used the same method to reload treegrid, but it doesn't work.
The usual method to reload jqgrid:
$jqGrid.jqGrid('setGridParam',{
url:path+"/admin/demo/getLogsGridJson.do",
postData:{'aaa':111,'bbb':222}, //
page:1
}).trigger("reloadGrid");
This way I can again request and refresh data. But with treegrid it doesn't work.
How to reload treegrid to use new postData or new url?
To reload the jqGrid TreeGrid with new post data you will need to set treedattype to json like this
$jqGrid.jqGrid('setGridParam',{
url:path+"/admin/demo/getLogsGridJson.do",
postData:{'aaa':111,'bbb':222}, //
page:1,
treedatatype : 'json'
}).trigger("reloadGrid");
More about why is this you can read in Guriddo jqGrid Documenatation here
Kind Regards
Try to reset treeANode parameter of TreeGrid to -1. You can replace unneeded setting of page:1 to treeANode:-1. You can consider to add data: [], _index: {} to the options of setGridParam to improve the performance if you loaded previously large set of data.
I know, that there is several similar questions are exists on SO, but despite it I creating this question because:
- I still don't get it :)
- I want to create a topic that possibly will cover a problem more complete.
I reconstructed my production setup in simplified way, it available by link below.
In short - I have simple jqGrid, that uses jsonstring as dataType, and datastr with JSON data. And then by firing this:
$("#grid").setGridParam({'datastr': myNewData}).trigger('reloadGrid');
Im trying to reload data in grid, but it just doesnt work.
What am I missing?
ps
Also it is matter for me, that grid has summary row which defined with userdata.
DOWNLOAD SETUP
It's very seldom that you really need to use datatype which values other as "local", "json", "jsonp" or "xml". Most usage of other datatype can be easy replace to the tree main datatypes. If you use "jsonstring", "xmlstring" or "clientSide" then the datatype will be changed to "local" after loading of data (see the line of source code for example). So if you really need to use datatype: "jsonstring" you can fix reloading by usage
$("#grid").setGridParam({
datastr: myNewData,
datatype: "jsonstring" // !!! reset datatype
}).trigger("reloadGrid");
Additionally I could see that you used pager: false option of jqGrid. It's wrong option. If you don't need to use local paging of data I recommend you
don't include and pager option. Default value pager: "" is already OK.
include rowNum parameter with some large enough value like rowNum: 10000. Default value of rowNum is 20. So if you don't want to display only the first 20 rows of the input data you should increase the value of rowNum.
The last recommendation: you should include sorttype: "integer" (see the documentation) to columns which holds integer values. It will fix sorting of data if the user clicks on the column header. You should consider to use column templates too (see the old answer).
I've found similar but not identical questions on here; none of their posted answers solve this.
I have local data loaded using addJSONData. When you click a column header to sort, the grid is wiped. There are no errors in the web console/firebug. Data added by later calls to addJSONData is sorted by the selected column, at least.
My config:
jQuery('#attributes').jqGrid({
sortable:true,
datatype:"local",
colNames: cols,
colModel: colmods,
cmTemplate: {width:155, align:"left"},
multiselct: false,
shrinkToFit:false,
caption: "Node Attributes",
scroll: true,
footerrow: true,
userDataOnFooter: true,
rowNum: -1
});
My only idea is to save the data onSortCol and reload it in loadComplete. I don't much like that though. I've tried various combinations of rowNum: 9007199254740992, loadonce: true and others.
I've tried jqGrid versions 4.2.0 and 4.4.0 (in which rowNum: -1 is supported again).
Edit: The line that clears the data is the emptyRows bit in the sortData function:
if(ts.p.scroll) {
var sscroll = ts.grid.bDiv.scrollLeft;
emptyRows.call(ts, true, false);
ts.grid.hDiv.scrollLeft = sscroll;
}
Seems like the data should be saved before this happens, but I'm not familiar with this code to know where the data actually lives.
I'm newcomer to jqGRid (I only started to use it 3 days ago...) but, if you are using local, don't you also have to specify loadonce:true for sorting and paging to work?
I had a similar issue. I stumbled onto a fix though. After setting loadonce: true, if you hit the refresh button in the pager and then try to sort, it works fine.
So I force a click on the refresh button by doing something like: $(".ui-icon-refresh").trigger('click');
I ran this on the onClose event because that suited my requirements. You can check out my entire explanation on this issue here: Make 'Search' remote and everything else (sorting, pagination, etc) local in jqGrid
I have a javascript function to clear my form which includes a gridview, I previously tried another way to delete the rows without postback but somehow when I tried to add a new row, all the previous bounce back. Maybe I am using viewstate to maintain my gridview, not too sure but below is what I am doing which works well but somehow it only deletes one row, I guess probably when the postback occurs, the loop got wiped out. Any advice? I need the loop to delete all my gridview rows. Thanks!
for (i = 0; i < camGv.rows.length; i++) {
window.__doPostBack('ctl00$cphBody$gvCamVoucher', 'Delete$0');
}
Well i think you need 2 things
1- A Way to Delete Your Rows from the Grid in the Client Side
2- A way to make that deletion effect on the server side just in case you made any postbacks
to stay in your deletion state
1- you can catch the grid view in the client side with id and clear the all inside its execpt if there is a footer that have the paging like this code
document.getElementById('grid view id').getElementsByTagName('TBODY').innerHTML='';
this line of script deletes all your rows thats if you dont have a footer grid pager
2- you have to make an ajax call to contact with the server and make the real effect if that table is have some thing from the database i think u need a delete function to delete all the rows from the database , if that is just a temp table have nothing to do from the database so i suggest to put it inside a Session that you can access the session in the ajax call
JavaScript
$.ajax({
type: "POST",
//web method path
url: "pageName.aspx/webmethodName",
data: "{action:'delete'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function(result)
{
}
,error: function(error)
{
}
});
ASP.NET CS
[WebMethod]
public string DeleteAll(string action)
{
//you have to put the table from the begining where ever you initialize the data on it inside a session
DataTable dt = (DataTable)HttpContext.Current.Session["tbl"];
dt.Rows.Clear();
HttpContext.Current.Session["tbl"]=dt;
}
Regards
please any question ask me :)
Thanks for the answer, I clear the gridview rows from code behind and use an Update Panel to group the grid so that the postback do not in any way affect my other fields.