We Keep Coding

How to make jqgrid scroll to top when going to next page?

I have a grid that when the page is changed the scrollbar is still at the bottom of the grid. Is there a property in the jqgrid for it to automatically scroll back to the top of the grid.
Here are the properties for my grid:
options = {
datatype: 'local',
colModel: [],
colNames: [],
height: 'auto',
autowidth: true,
forceFit: true,
shrinkToFit: typeof(settings.shrink) != "undefined" ? false : true,
gridview: true,
recordpos: 'left',
scroll: false,
viewrecords: true,
hoverrows: false,
loadonce: true,
toppager: 'pager',
pagerpos: 'right',
pginput: false
}

After some more reasearch I found the answer. JQGrid also has a pagerOptions.onPaging event which allows you to execute code when changing pages.
Here is the fix I used.
pagerOptions.onPaging = function () {
window.scrollTo(0, $("#header").height());
};
When the page changes it scrolls the page up until the header.

After applying custom scrollbar to jqgrid,sorting is not working

I have applied custome scrollbar to div "ui-jqgrid-bdiv",sorting is not working of jqgrid.Without custom scrollbar sorting is working fine.After applying custom scrollbar,after clicking on column it is giving blank grid.
CODE:-
$(window).load(function(){
$(".FilterContainer,.ui-jqgrid-bdiv").mCustomScrollbar({
scrollButtons:{enable:true},
theme:"light-thick"
});
});
jQuery(gridOption).jqGrid({
data: applyBestMachineData,
datatype: "local",
colNames:[displayName,'', 'kA$','%','kA$','%','kA$','%'],
colModel:[
{name:'machineBestMachine',index:'machineBestMachine',width:350, sortable: false,classes: "machineBestMachinecol"},
{name:'machineValue',index:'machineValue', width:60,sortable: false, classes: "machineValue"},
{name:'applyBestMachineValue',index:'applyBestMachineValue', width:75,sortable: true, classes: "col2",sorttype:"text"},
{name:'applyBestMachinePer',index:'applyBestMachinePer', width:75, align:"center", sortable: true,classes: "col1",sorttype:"text"},
{name:'applyBestMachineOperation',index:'applyBestMachineOperation', width:65, align:"center",sortable: true, classes: "col2",sorttype:"text"},
{name:'applyBestMachineOperationPer',index:'applyBestMachineOperationPer', width:65,align:"right", sortable: false,classes: "col1"},
{name:'applyBothValue',applyBothValue:'applyBothValue', width:65,sortable: false, classes: "col2"},
{name:'applyBothPer',index:'applyBothPer', width:65,sortable: false, classes: "col1"}
],
rowNum:2000,
rowTotal: 2000,
scroll:1,
loadonce:true,
mtype: "GET",
rownumWidth: 40,
gridview: true,
autowidth: true,
height:gridHeight,
//sortable: false,
viewrecords: true,
onSelectRow: function(id) {
var rowData = jQuery(this).getRowData(id);
var machineBestMachineVar = rowData['machineBestMachine'];
var machineBestMachineValue = machineBestMachineVar.split('<');
openEvaluationItemDetailPopUp(machineBestMachineValue[0]);
},
loadComplete: function() {
//alert(this);
$(gridOption+" tr:even").addClass('myAltRowClassEven');
$(gridOption+" tr:odd").addClass('myAltRowClassOdd');
// $("#applyMachineGrid tr:even").addClass('myAltRowClassEven');
// $("#applyMachineGrid tr:odd").addClass('myAltRowClassOdd');
}
});

I got answer:-
Just remove scroll=1 property

jQuery jqGrid Inline Editing - Cancel row edit deletes the row?

I actual got a problem with my jqGrid and I couldn't find any similar problem on the net. Maybe I don't took the write tags for it, sorry tho.
Okay lets start talking about the real problem. I'm using inline editing, and I customized the buttons a bit. I wanna use "ENTER" and "ESC"-Keys as shortcuts. This works fine. I'm manipulating the data in my grid local and only if the user is pressing a specialised button I'll save the data in a file. This files are used to fill the grid too. So if the user now is editing any row in the grid which isn't in my file yet, and he is canceling the editing by pressing ESC, the complete row of data is getting deleted.
Anyone who can help me out? My grid:
// Table
jQuery("#tbl").tableDnD({scrollAmount:0});
jQuery("#tbl").jqGrid({
url:'../path/to/my/script.pl',
datatype: "json",
postData:{'art':'empfang'},
jsonReader: {
repeatitems: false
},
colNames:['1','2','3','4','5'],
colModel:
[
{name:'1',index:'1', width:200, align:"left", sortable:true,editable:true, edittype:"text"},
{name:'2',index:'2', width:200, align:"left", sortable:true,editable:true, edittype:"select",editoptions:{value:b}},
{name:'3',index:'3', width:200, align:"left", sortable:true,editable:true, edittype:"text"},
{name:'4',index:'4', width:220, align:"left", sortable:true,editable:true, edittype:"select",editoptions:{value:""}},
{name:'5',index:'5', width:200, align:"left",sortable:true,editable:true, edittype:"select",editoptions:{value:""}}
],
rowNum:2000,
rowTotal: 2000,
loadtext: 'Reading data...',
height: '100%',
width: '100%',
hidegrid: false,
sortable: true,
toppager: true,
gridview: true,
viewrecords: true,
rownumbers: true,
loadonce: true,
editurl: 'dummy.php',
pager: '#tbl_toppager',
loadComplete: function(data){
$("#tbl").setColProp('4', { editoptions: { value: data.userdata.4} });
$("#tbl").setColProp('5', { editoptions: { value: data.userdata.directory_listing} });
},
gridComplete: function() {
$("#_empty","#tbl").addClass("nodrag nodrop");
jQuery("#tbl").tableDnDUpdate();
},
caption: "Testgrid",
ondblClickRow: function(id){
jQuery('#tbl').editRow(id, true);
}
});
jQuery("#tbl").jqGrid('filterToolbar');
jQuery("#tbl").jqGrid(
'navGrid',
'#tbl_toppager',
{
del: true,
add: false,
edit: false,
refresh: false,
search: true
},
{
}, // edit options
{
}, // add options
{
reloadAfterSubmit: false,
jqModal: true,
closeOnEscape: true
}, // del options
{
jqModal: true,
closeOnEscape: true
} // search options
);
jQuery("#tbl").jqGrid(
'inlineNav',
'#tbl_toppager',
{
editParams: { keys: true },
addParams: { addRowParams: { keys: true } }
}
); // Inline Editing
jQuery("#tbl_toppager_right").hide();
jQuery("#tbl_toppager_center").hide();
jQuery("#tbl").navSeparatorAdd(
"#tbl_toppager_left",
{
sepclass : "ui-separator",
sepcontent:""
}
).jqGrid(
'navButtonAdd',
'#tbl_toppager_left',
{
caption: "",
buttonicon: "ui-icon-document",
title: "Save data in file",
position: "last",
onClickButton: function () {
$("#write_file").dialog('open');
}
}
);
Thanks in advice. Regards.

In the official demo of JQGrid they provide an example which do nearly the same of what you request
...
onSelectRow: function(id){
if(id && id!==lastsel){
jQuery('#rowed3').jqGrid('restoreRow',lastsel);
jQuery('#rowed3').jqGrid('editRow',id,true);
lastsel=id;
}
}
...
where lastsel is a global variable
So you can use jQuery('#rowed3').jqGrid('restoreRow',idOfLineToRestore);
in your escape event

Upload Multiple files of any format in Jqgrid.?

Am a newbie to Jqgrid. I dont know how to upload multiple files of any format in jqgrid. I searched for examples i could't find anything in google.It would be really helpful,that how multiple files can be uploaded of any format. Thanks for the help..!
function initjqgridfileupload(table,pager,msg,loadSelID,caption,chkMrk,del ){
$(table).empty();
$(table).GridUnload();
var woid = $("#ID").val();
var mygrid =jQuery(table).jqGrid({
datatype: "local",
height:25,
data:msg,
width: 750,
scrollOffset:0,
//autowidth: true,
colNames:['Id','File','File Name'],
colModel:[
{name:'id',index:'id',hidden: true , width:20,sorttype:"int",resizable:false},
{name:'fileName', width:150,align:"left",hidden: true ,resizable:false,edittype:'select', formatter:'FilesLinks'},
{name:'originalFileName',index:'originalFileName',id:'originalFileName',width:150,align:"center",formatter:'FilesLinks',editable:true,resizable:false,formoptions:{rowpos:1,colpos:1,label:"<font color='red'>File</font>"},editrules:{required:true},edittype:'file',editoptions: {enctype: "multipart/form-data",method:"post"}}
//{name:'originalFileName',hidden: true, width:150,align:"left",edittype:'select', resizable:false}
],
//pager: pager,
rowNum:10,
rowList:[], //disable the page size dropdown
pgbuttons: false, //disable page control like next , back
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: false , // disable current view record text like 'View 1-10 of 100'
//loadOnce:true,
rownumbers:false,
loadComplete: function() {
},
multiselect: del,
gridview : true,
sortname: 'id',
sortorder: "asc",
toppager:true,
caption:caption,
hidegrid: false,
beforeSelectRow: function(rowid, e) {
var $link = $('a', e.target);
if (e.target.tagName.toUpperCase() === "A" || $link.length > 0)
{
return false;
}
}
});
jQuery(table).jqGrid('navGrid',pager,{del:false,add:false,edit:false,search:false,refresh:true,cloneToTop:true},{},{},{},{});
}

JQGrid refresh data with updated data from server ater edit

I have a Jqgrid which requires editing. I have successfully managed to configure the grid to save the data after editing, however the issue is that when the data is saved the grid is not refreshed with the data present in the database. For example the version field is automatically updated by the application backend however after a edit is done it is not refreshed and the old value is shown. I have tried
afterSubmit
afterComplete
which did not work. I also placed an alert in it to verify that the function was called however the alert was not shown either. Additionally I set loadonce to false and reloadaftersubmit to true but this did not work either. I think the issue could be that I either havent configured the edit correctly or placed the above mention parameters in the incorrect location.
After a save is done (edit) the updated data (which is the WHOLE page) is returned to the Jqgrid (as json). The issue here is that the old data is shown and how do I display this updated data after the edit.
UPDATE : I found out that when I edit via the popup box the afterSubmit is executed. HOWEVER the editing takes place via the formatoptions which allows to edit the data in the table itself. Now when the data is edited and saved from the grid itself without the use of the popup I want an afterSubmit to fire to refresh the table. Where do I place my afterSubmit / How do I achieve this.
/**
* Initialize and Draw JQGrid
* #return
*/
function drawFOMJQGrid(){
var lastsel2;
jQuery("#tblGrid").jqGrid({
height: 180,
width:990,
datatype: "json",
colNames:['','Hotel','Outlet','Major Group','Item Group','Version'],
jsonReader : {
root: "regDetails",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
colModel:[
{name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
{name:'hotelName',index:'hotelName',align:"left",width:30,resizable:false},
{name:'majorGroupName',index:'majorGroupName',align:"left", width:20,resizable:false},
{name:'itemGroupName',index:'itemGroupName', width:30,align:"left",resizable:false},
{name:'version',index:'version', width:20,align:"right",resizable:false,editable:true,hidden: false}
],
onSelectRow: function(id){
},
/*afterSubmit : function(response, postdata){
alert("AAAA");
},
afterComplete : function(response, postdata){
alert("AAAA2");
}, */
//rowList:[10,20,30],
rowNum:5,
pager: '#divGridPg',
sortname: 'hotelName',
viewrecords: true,
sortorder: "outletName",
gridview: true,
bgiframe: true,
autoOpen: false,
caption: 'POS Item Pricing',
forceFit: false,
loadtext: 'Loading ...',
sortable: true,
loadonce: false,
editurl: "itemPricingSave.action", //"/js/itemPricing/server.js",
datatype: "json"
});
$("#tblGrid")[0].addJSONData(regGridJSONData);
$("#tblGrid").setGridParam({datatype: 'json'});
jQuery("#tblGrid").jqGrid('navGrid','#divGridPg',{edit:true,add:false,del:false,reloadAfterSubmit:true});
}
/**
* Initialize and Draw JQGrid
* #return
*/
function drawFOMJQGrid(){
var lastsel2;
jQuery("#tblGrid").jqGrid({
height: 180,
width:990,
datatype: "json",
colNames:['','Hotel','Outlet','Major Group','Item Group','Version'],
jsonReader : {
root: "regDetails",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
colModel:[
{name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
{name:'hotelName',index:'hotelName',align:"left",width:30,resizable:false},
{name:'majorGroupName',index:'majorGroupName',align:"left", width:20,resizable:false},
{name:'itemGroupName',index:'itemGroupName', width:30,align:"left",resizable:false},
{name:'version',index:'version', width:20,align:"right",resizable:false,editable:true,hidden: false}
],
onSelectRow: function(id){
},
/*afterSubmit : function(response, postdata){
alert("AAAA");
},
afterComplete : function(response, postdata){
alert("AAAA2");
}, */
//rowList:[10,20,30],
rowNum:5,
pager: '#divGridPg',
sortname: 'hotelName',
viewrecords: true,
sortorder: "outletName",
gridview: true,
bgiframe: true,
autoOpen: false,
caption: 'POS Item Pricing',
forceFit: false,
loadtext: 'Loading ...',
sortable: true,
loadonce: false,
editurl: "itemPricingSave.action", //"/js/itemPricing/server.js",
datatype: "json"
});
$("#tblGrid")[0].addJSONData(regGridJSONData);
$("#tblGrid").setGridParam({datatype: 'json'});
jQuery("#tblGrid").jqGrid('navGrid','#divGridPg',{edit:true,add:false,del:false,reloadAfterSubmit:true});
}

I did the following to force the grid reload:
.navGrid('#pager',
{edit:true,
add: true,
del:true,refresh:false},
{ // edit options
afterSubmit: function() {
comptes[0].clearToolbar();
comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
return [true,'',false]; // no error and no new rowid
}
},
{ // add options
afterSubmit: function() {
comptes[0].clearToolbar();
comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
return [true,'']; // no error
}
} ,
{ // delete options
afterSubmit: function() {
comptes[0].clearToolbar();
comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
return [true,'']; // no error
}
}
);

Try to reload jqGrid with new data after all your editing process as following:
jQuery("#grid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');