I am using a jqgrid but am having trouble positioning to a specific page. I have seen a couple of examples using reloadGrid which I have tried but it doesn't work. I have a large data set that is paged. If I try to go to page 76 of my data set it acts like it is trying to do it as the "View" count at the bottom is correct however the grid is displayed empty (even though my JSON data looks correct). I notice the scroll bar is still positioned to the top and if I touch it it automatically reloads back to page 1. Am I missing something?
Here is my grid definition:
$("#list1").jqGrid({
url: 'jqgrid.php?cmd=getrecs',
editurl: 'jqgrid.php?cmd=editrec',
datatype: 'json',
colNames:['Branch', 'Description', 'Type', 'Active' ],
colModel :[
{name:'rbranch',
index:'rbranch',
sortable:true,
editable:true
},
{name:'des',
index:'des',
sortable:true,
editable:true
},
{name:'type',
index:'type',
sortable:true,
editable:true
},
{name:'status',
index:'status',
sortable:false,
editable:true
}
],
pager: '#pager1',
sortname: 'rbranch',
sortorder: 'asc',
rowNum: 100, // Only fetch 100 at a time
viewrecords: true,
scroll: 1,
sortable: true,
caption: 'Scheduling Resources'
});
$("#list1).navGrid("#pager1",
// Turn on the icons
{edit:true,
add:true,
del:true,
search:true,
refresh:true,
refreshstate:'current',
view:true
},
// Edit dialog parameters
{reloadAfterSubmit: false,
closeAfterEdit: true
},
// Add dialog parameters
{reloadAfterSubmit: true,
closeAfterAdd: true
},
// Delete dialog parameters
{reloadAfterSubmit: false},
// Search dialog parameters
{},
// View dialog parameters
{}
);
To go to page 76 I am trying this:
$("#list1").trigger("reloadGrid",[{page:76}]);
You use scroll: 1 option. It's a special virtual scrolling mode. In the mode many things work in another way or not works at all. You can try to remove the option and use standard paging.
Related
Below is my grid ..
the Column TestType has a list of values (say test1, test2..test10 ) .
how can i generate Add form like this.
Can any one throw some light on this?
many thanks..
UPDATED:
========
this is how my add form should look like
As I Understand from your above comments, Your add form need to be in Tabular format.
A. Easy way is Grid inline edit. But I think it is not suitable for you. If so,
B. Do the following:
Instead of grid's default add button use external add button. On clicking that button open a custom form in tabular form with Save option.
Onclick of save button just read all fields data from the tabular form. Here you have some small problem.
You may have to iterate the rows in the table to insert into the Database (This is Based on your database design).
On success of AJAX you just reload the Grid by using $('#yourGrid').trigger("reloadGrid");
This is a design idea only. Unfortunately I do not have any example for you :(
Let me know if you need more details.
Edit:
External add button:
Resulted add form:
Do you create a jqgrid in your form?
You are have create a jqgrid like this:
jQuery("#list2").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
Where colNames its a caption, colModel contain a name and format you grid, and exists a tag PostData contain a arguments for populate your grid, its return a format JSON or Xml.
Do you see more in a Wiki and Demos.
You're Welcome.
One solution could be to go 'out of band' with jqgrid. you could add an 'onSelectRow' attribute to your jqGrid javascript-object. Allowing it to load up some other content, say for instance in a dialog. this would look like this.
$("#list").jqGrid({
url:'/path/to/jqgrid/data/',
datatype: 'json',
mtype: 'GET',
colNames:['TestID','ArticleID', 'Color', 'TestType', 'Places Tested', 'Results', 'comments'],
colModel :[
{name:'testid', index:'testid', width:35, align:'center', sortable:true},
{name:'artileid', index:'articleid', width:50, align:'left', sortable:false},
{name:'color', index:'color', width:80, align:'left', sortable:true},
{name:'testtype', index:'testtype', width:40, align:'right', sortable:true},
{name:'placestested', index:'placestested', width:50, align:'center', sortable:false},
{name:'results', index:'results', width:50, align:'center', sortable:false},
{name:'comments', index:'commente', width:35, align:'center', sortable:false}
],
pager: '#pager',
rowNum:15,
rowList:[15,30,60,120],
sortname: 'testid',
sortorder: 'desc',
viewrecords: true,
gridview: true,
emptyrecords: "No Tests in system",
height: "100%",
autowidth: true,
caption: 'Test Details',
onSelectRow: function(id, status, event){
console.log("jqGrid.onSelectRow called");
alert('TODO: add dialog');
var url = "/new/dialog/server/data/' + id + "/"
console.log(url);
window.openDialog( url, id );
$('tr[id=' + id + ']').removeClass('ui-state-highlight'); // no annoying white row.
},
loadComplete: function() {
console.log('jqGrid.loadcomplete');
}
}); // end jqGrid stanza
Not Quite Finished:
Now you need to do 3 things
Build the server response: that will respond to the jqgrid url request. '/path/to/jqgrid/data/'
you will need to write your javascript 'openDialog(url, id)' function. This should be a wrapper function to a jquery-ui dialog.
you will need to build another server response: that will respond to the openDialog url request.
Note: I recommend since you are using jqGrid, you would be using a jquery-ui dialog.
Finally: 'just to be sure' the response that you are going to need from # 1 will look something like this.
{
"total": 1,
"records": 2,
"rows": [
{
"cell": [ 1, 398, "red", "unit", "lab", "failed", "failed post progression bla" ],
"id": 2
},
{
"cell": [ 2,399, "green", "unit", "lab", "passed", "past post progression bla" ],
"id": 1
}
],
"page": 1
}
I am using this jqgrid
$("#griglia-navgrid").jqGrid( {
url: 'search.do?report='+r,
datatype: "json",
colNames:[ ... ],
colModel:[ ... ],
rowNum:50,
rowList:[20,50,100],
pager: '#pager',
autowidth:true,
height:'auto',
viewrecords: true,
sortname: "MATNR",
sortorder: "asc",
footerrow : true,
userDataOnFooter: true,
jsonReader: {
root:"INVDATA",
page: "CURRPAGE",
total: "TOTALPAGES",
records: "TOTALRECORDS",
repeatitems: false,
id: "0",
userdata: "USERDATA",
}
}); //jqGrid
On server side I calculate the totals and I use "userdata" like this:
"userdata":{"total":1234,"name":"Totals"}
And it's works. Now I need to show 2 footer row with totals. And i try something like this:
"userdata":[{"total":1234,"name":"Totals"},{"total":5678,"name":"Totals"}]
But does not work. Is it possible add two footer rows using "userdata"? How can I do this?
You can use my old answer as a basis of the solution which you need. It shows how to add two rows in the footer.
If you examine the source code of jqGrid for the usage of userDataOnFooter option you would find that in case of usage datatype: "json" it's only one line of code:
if(ts.p.userDataOnFooter) { self.jqGrid("footerData","set",ts.p.userData,true); }
So jqGrid just get the value of userData parameter (the userdata in the JSON response from the server) and uses it as the parameter of footerData method. So you can just remove userDataOnFooter option and uses the approach described in the referenced above answer to add two rows in the footer with the information from userData.
in jqgrid for inline editing when we click the save icon, ** internally it calls the saveRow method, but i want to call my custom method where i will implement my save logic as well calling to controller method.**
i used below code for grid.
var grid = jQuery("#list5").jqGrid({
url: '/home1/GetUserData',
datatype: "json",
mtype: "POST",
colNames: ['Code', 'LoginID', 'Emailid', 'CreateDate', 'PostalCode', 'Mobile'],
colModel: [
{name: 'Code', index: 'Code', width: '16%', editable: true, sortable: true },
{ name: 'LoginID', index: 'LoginID', width: '16%', editable: true, sortable: true },
{ name: 'Emailid', index: 'Emailid', width: '16%', editable: true,
sortable: true },
],
rowNum: 10,
height: '100%',
scrollOffset: 0,
rowList: 10,
shrinkToFit: true,
pager: $("#pager2"),
editurl: "/home1/EditUserData",
caption: "Simple data manipulation"
});
jQuery("#list5").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: true, search: false, refresh: false }, {}, {}, { url: '/home1/DeleteUserData' });
jQuery('#list5').jqGrid('inlineNav', '#pager2', { edit: true, add: true},
});
});
so please anyone let me know how to implement it.
I don't really understand your requirements. saveRow has a lot of customization possibilities. You can rename all parameters which will be sent to the server using prmNames option of jqGrid. Using extraparam parameter of saveRow you can specify additional information which can be sent to the server. The callback serializeRowData can be used to implement your custom serialization. For example you can convert the data to JSON. Using aftersavefunc you can make some custom actions after the data will be successfully saved on the server. So I recommend you use the features instead of implementing your custom saveRow method.
UPDATED: If you want to have navigator icon which uses your custom saveRow you should don't add "Save" button by inlineNav. You can use save: false option of inlineNav. Then you can just use navButtonAdd and add your custom icon which look exactly like original "Save" button and make call of your "custom saveRow" in the onClickButton callback.
I'm using jqGrid with mvc 2 like this:
jQuery("#extension_grid").jqGrid({
url: '/Extension/Report',
datatype: "json",
direction: "rtl",
height: "auto",
jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, userdata: "UserData" },
colModel:
[
{ name: 'id', label: 'داخلی', key: true, search: true, width: 55 },
{ name: 'assigned_user', label: 'کاربر', width: 90, editable: true },
{ name: 'creation_date', label: 'تاریخ ایجاد', width: 100, formatter: 'date', formatoptions: { newformat: 'Y-m-d H:i:s'} }
],
rowNum: -1,
pager: '#extension_pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "داخلیها",
editurl: '/Extension/MyEdit'
});
jQuery("#extension_grid").jqGrid('navGrid', '#extension_pager', { edit: true, add: true, del: true }, {}, {}, {}, { multipleSearch: true });
when I select a row and click the edit button a dialog appears and I can edit the row. after submit, data is posted to the editurl successfully. but changes are not saved to grid client side. should I save the changes client side manually?
I tried with datatype local and it works!!! what should I do? is there any problem with using json data and form editing?
The situation which you described seems me very strange. There are default setting reloadAfterSubmit:true for "Add" and "Edit" forms. It means that after submitting of the "Edit" form for example the grid contain will be reloaded. You can verify with respect of Fiddler or Firebug that the grid reloading take place. So either your server part '/Extension/MyEdit' not save the data or another the server '/Extension/Report' don't get the refreshed data. Do you have some kind of data caching on the server?
So you should analyse the problem which you have more exctly. If you would not solve the problem yourself you should update/append your question with more additional information.
I am using jqGrid for my data table solution. Below are the configuration codes.
$(function() {
$("#submitInput").click(function() {
alert("I am called...")
jQuery("#list").jqGrid({
datatype: "json",
url: "http://localhost:1201/admin/someURL.htm",
mtype:"POST",
height: "auto",
colNames:["Column 1", "Column 2", "Column 3", "Column 4", "Column 5"],
colModel:[
{name:"col1", index:"col1", sortable:true, resizable:false},
{name:"col2", index:"col2", sortable:true},
{name:"col3", index:"col3", sortable:false, resizable:false},
{name:"col4", index:"col4", sortable:true, resizable:false},
{name:"col5", index:"col5", sortable:true, resizable:false}
],
sortname:'col1',
sortorder:'asc',
pager: $('#pager'),
rowNum:10,
viewrecords: true,
rowList:[10,20,30],
caption: 'Some Grid Values',
jsonReader: {
root: "responseData",
page: "currentPage",
total: "totalPages",
records: "totalFetchedRecords",
repeatitems: true,
cell: "rowContent",
id: "rowID"
},
gridComplete: function() {
alert("Loading done...");
}
});
});
});
My JSON data is coming in the following format:
"currentPage":"1","responseData":[
{"rowContent":["Col1_Val_000001","Col2_Val_1","Col3_Val_1","Col4_Val_1","Col5_Val_1"],"rowID":"Col1_Val_000001"},
{"rowContent":["Col1_Val_000002","Col2_Val_2","Col3_Val_2","Col4_Val_2","Col5_Val_2"],"rowID":"Col1_Val_000002"}
], "totalFetchedRecords":"50","totalPages":"5"}
In my HTML, there is a button with id "submitInput" and a table with id "list".
Somehow, this data is not loaded into the grid. What is the reason?
Probably you should don't create jqGrid inside of click handle. You should do this one time outside of click handle and call jQuery("list").trigger('reloadGrid') inside of the handler. If at the beginning the data should be not loaded in the grid, you can use datatype: 'local' an the beginning. If it needed, you can makes div with jqGrid sometimes visitable and sometimes invisible using using hide() and show() jQuery functions. Inside of click handler you can change the datatype to 'json' with respect of setGridParam() and then call trigger('reloadGrid'). In a lot of situation you also change some parameters of URL before calling trigger('reloadGrid') (see Should one replace the usage addJSONData of jqGrid to the usage of setGridParam(), and trigger('reloadGrid')?), but probably you need it not in your case.