JQGrid refresh data with updated data from server ater edit - javascript

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');

Related

free-jqGrid (4.15.4), server filter, client sorting and paging?

Attempting to load data from server based off of multisearch/filters, but do sorting and paging on client. i have found a few posts that say to simply set the datatype back to the original value in the beforeSearch method.
i have attempted this and it does execute against the server and return the correct data. However, the second time i filter it seems to get the data from the server but then it gets wiped out on line 4429 in the jqgrid code shown below. Any idea on how to achieve this goal?
Ln 4429 : p.lastSelectedData = query.select();
grid definition:
$element
.jqGrid({
cmTemplate: { search: true, searchoptions: { attr: { placeholder: "filter..." }, clearSearch: true }, sortable: true, align: "center" },
colModel: [
{ name: "Id", key: true, hidden: true, searchoptions: { searchhidden: true, sopt: ["eq"] } },
{ name: "TransmissionId", label: "Transmission Id", searchoptions: { sopt: ["eq"] } },
{ name: "Name", label: "Name", searchoptions: { sopt: ["cn"] } }
],
datatype: "json",
loadonce: true,
height: "auto",
ignoreCase: true,
pager: $("#" + pagerId),
pgbuttons: true,
pginput: false,
rowList: [10, 25, 50],
rowNum: 10,
toppager: true,
url: "url here",
loadComplete: function (data) {
if (this.p.datatype === "json") {
setTimeout(function () {
$element.trigger("reloadGrid", [{ page: 1 }]);
}, 50);
}
return data;
},
viewrecords: true
})
.jqGrid("filterToolbar", {
autosearch: true,
defaultSearch: "cn",
beforeSearch: function () {
$element.setGridParam({ datatype: "json", page: 1 });
}
})
.jqGrid("navGrid", "#" + pagerId, {
edit: false,
add: false,
del: false,
refresh: false,
view: false,
cloneToTop: true
});
I have trimmed down the grid to try to verify it is not custom logic that is causing this issue. the grid does have multipleSearch on. but is not defined above.
If I understand correctly your question then you should use forceClientSorting: true in combination with loadonce: true. It force that the data loaded from the server will be sorted, filtered and paged locally directly after loading from the server. Thus you can remove loadComplete, which you use currently. See the answer for a demo.
Additionally, you can add searching property, where you include all options of filterToolbar and searchGrid:
searching: {
autosearch: true,
defaultSearch: "cn",
beforeSearch: function () {
var p = $(this).jqGrid("getGridParam"), // get reference to all parameters
filters = JSON.parse(p.postData.filters);
p.datatype = "json";
// one can here analyse filters, modify it or clear it as
p.postData.filters = "";
// one can set any other parameters, which will be sent to the server
// by using p.postData.param1 = "value1";
// which will sent param1=value1 to the server.
}
}
In general you can do the same inside your current beforeSearch too.
UPDATED: Probably you should use beforeProcessing callback additionally. beforeProcessing will be called directly after receiving the data from the server. Inside of the callback you can clean-up all p.postData.filters (to "") and p.search (change it from true to false). As the result jqGrid will not try to filter locally by postData.filters the data returned from the server.

jqgrid dropdown list onclick of icon

I am trying to show dropdown list in one cell of jqgrid an onClick of pencil icon(which when click the whole row become editable and dropdown list shows in debit credit )
below picture shows what i try to do
my approach is below code what i did
''''''''''''''''''''''''gridfucntion''''''''''''''''''''''''''''''''''''''''
function showMinorityEntryData(){
alert('minoritydatashow');
if($("#reportingPeriodId").val()!="" && $("#parentCmp").val()!=""){
alert('minoritydatashow1111');
// $('#masterDiv').show();
$("#grid").jqGrid({
datatype: 'json',
url:'showMinorityData.action?companyId='+companyId+"&parentCmp="+$("#parentCmp").val()+"&reportingPeriodId="+$("#reportingPeriodId").val(),
mtype: 'GET',
colNames:['Id', 'GlELEMENTNAME', 'Account Type','Pre-Acq-Amount','Share Amount','Actions'],
colModel:[
{name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:false,jsonmap:"minorityId"},
{name:'glElementName',index:'glElementName', width:100,editable:false, editrules:{required:true}, editoptions:{size:10},jsonmap:"glElementName"},
{name:'accountType',index:'accountType', width:100,editable:true, editrules:{required:true}, edittype:"select",formatter:'select',editoptions:{ value: "Debit:Debit;Credit:Credit"},editoptions:{size:10},jsonmap:"acntTypeName"},
{name:'preAcqAmount',index:'preAcqAmount', width:100,editable:true, editrules:{required:true}, editoptions:{size:10},jsonmap:"preAcqAmt"},
{name:'shareAmount',index:'shareAmount', width:100,editable:true, editrules:{required:true}, editoptions:{size:10},jsonmap:"shareAmt"},
{name:'actions',index:'actions', sortable:false,width : 50,align : 'center',formatter:actionIcons}
],
postData: {
},
rowNum:20,
rowList:[10,20,40],
height: 200,
autowidth: true,
// rownumbers: true,
pager: '#pager',
sortname: 'minorityId',
viewrecords: true,
sortorder: "asc",
caption:"Minority Interest",
emptyrecords: "Empty records",
loadonce: false,
loadComplete: function() {
},
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "minorityId"
},
editurl: 'clientArray',
});
}
}
i take help from this link http://www.codeproject.com/Articles/610359/JqGrid-Inline-Editing
but when i convert accountType cell in dropdown it doesn't show type of Account type below image shows what happen
when i click on pencil icon the whole row become editable but in accountype column the dropdown doesn't show any value
what wrong i did it.
jqgrid is new for me
thanks in advance
You should include editoptions or any other property only once. So
editoptions:{ value: "Debit:Debit;Credit:Credit"},editoptions:{size:10}
need be replaced to
editoptions: { value: "Debit:Debit;Credit:Credit", size:10}
In code you have to write this
{name:'accountType',index:'accountType', width:100,editable:true, editrules:{required:true},editoptions:{size:10},edittype:"select",formatter:'select',editoptions:{ value: "Debit:Debit;Credit:Credit"},jsonmap:"acntTypeName"},
this will solve my requirement

jqgrid autocomplete visible behind edit form

Hello ,
I am trying to implement jqgrid with autocomplete in one of its column. But I have very strange problem, auto-complete list is shown below the jqgird edit form.
I have included following jquery js file.
1. jquery-ui-1.10.4.custom.min.js
2. jquery.ui.core.js
3. jquery.ui.widget.js
4. jquery.ui.position.js
5. jquery.ui.menu.js
6. jquery.ui.autocomplete.js
following jqgrid js file.
1. grid.locale-en.js
2. jquery.jqGrid.min.js
3. grid.common.js
4. jqModal.js
5. jqDnR.js
6. grid.formedit.js
Following jqgrid css file.
ui.jqgrid.css
Following jquery css file.
1. jquery-ui-1.10.4.custom.css
2. demos.css
3. jquery.ui.all.css
Following code to implement jqgrid colModel.
colNames:['Id', 'First Name', 'Last Name'],
colModel:[
{name:'id',index:'id', width:55,editable:false,editoptions:readonly:true,size:10},hidden:true},
{name:'firstname',index:'lastname', width:100,editable:true,edittype:'text',
editoptions: {
dataInit: function (elem) {
myAutocomplete(elem, "${pageContext.servletContext.contextPath}/grid/autocomplete.action");
}
}},
{name:'lastname',index:'firstname', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
],
Below is my entire jqgrid code.
var jq = jQuery.noConflict();
jq(function() {
jq("#grid").jqGrid({
url:'${pageContext.servletContext.contextPath}/grid/load.action',
datatype: 'json',
mtype: 'GET',
colNames:['Id', 'First Name', 'Last Name'],
colModel:[
{name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true},
{name:'firstname',index:'lastname', width:100,editable:true,edittype:'text',
editoptions: {
dataInit: function (elem) {
myAutocomplete(elem, "${pageContext.servletContext.contextPath}/grid/autocomplete.action");
}
}},
{name:'lastname',index:'firstname', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
],
postData: {
},
rowNum:20,
rowList:[20,40,60],
height: 200,
autowidth: true,
rownumbers: true,
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption:"Users",
emptyrecords: "Empty records",
loadonce: false,
editurl:'${pageContext.servletContext.contextPath}/grid/edit.action',
loadError : function(xhr,st,err) {
console.log('display error : '+err);
jq("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
},
loadComplete: function() {
},
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id"
}
});
jq("#grid").jqGrid('navGrid','#pager',
{edit:true,add:true,del:true,search:true},
{ },
{ },
{ },
{
sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true }
);
});
Here autocomplete works fine, it lists all the username but it shows behind the editForm on jqgrid. Please suggest a solution.
Thanks & Regards,
Kartik Jajal
I have solved the problem by setting the z-index property of .ui-front like below .ui-front { z-index: 1000; } in jquery ui css

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

jqGrid sorting on client side

I have a tree-grid with autoloading rows. The goal is to sort the grid by tree column, right on client side.
But each time I click on sort column header, it issues an Ajax call for sorting, but all I need is on-place sorting using the local data.
Do I have incorrect grid parameters or doesn't tree work with client-side sorting on tree column?
Current jqGrid params for sorting are are:
loadonce: true, // to enable sorting on client side
sortable: true //to enable sorting
To get client-side sorting to work, I needed to call reloadGrid after the grid was loaded:
loadComplete: function() {
jQuery("#myGridID").trigger("reloadGrid"); // Call to fix client-side sorting
}
I did not have to do this on another grid in my application because it was configured to use data retrieved via another AJAX call, instead of data retrieved directly by the grid:
editurl: "clientArray"
datatype: "local"
I'm using client-side sorting on jqGrid and retrieving a new set of json data when a select list changes. You need to set rowTotal to an amount higher or equal to the number of rows returned, and then set the data type to 'json' just before reloading the grid.
// Select list value changed
$('#alertType').change(function () {
var val = $('#alertType').val();
var newurl = '/Data/GetGridData/' + val;
$("#list").jqGrid().setGridParam({ url: newurl, datatype: 'json' }).trigger("reloadGrid");
});
// jqGrid setup
$(function () {
$("#list").jqGrid({
url: '/Data/GetGridData/-1',
datatype: 'json',
rowTotal: 2000,
autowidth: true,
height:'500px',
mtype: 'GET',
loadonce: true,
sortable:true,
...
viewrecords: true,
caption: 'Overview',
jsonReader : {
root: "rows",
total: "total",
repeatitems: false,
id: "0"
},
loadtext: "Loading data...",
});
});
$(function () {
$("#list").jqGrid({
url: '/Data/GetGridData/-1',
datatype: 'json',
rowTotal: 2000,
autowidth: true,
height:'500px',
mtype: 'GET',
loadonce: true,
sortable:true,
...
viewrecords: true,
caption: 'Overview',
jsonReader : {
root: "rows",
total: "total",
repeatitems: false,
id: "0"
},
loadtext: "Loading data...",
});
});

Categories