Order id is stored in variable _documentId and changed in runtime by ajax call if new order is saved to actual it.
If adding new detail row to jqGrid Add form url or inline Edit url reqires this id also.
I tried to use postdata but _documentId is not passed if Edit and Add urls are called.
How to pass _documentId value to those urls ?
var _documentId; // assigned from ajax call after save.
$(function () {
var grid = $("#grid");
grid.jqGrid({
postData: {_documentId: function() { return _documentId } },
editurl: 'Edit', // How to pass _documentId value to this controller ?
url: 'GetData',
datatype: "json",
mtype: 'POST',
scroll: 1,
multiselect: true,
multiboxonly: true,
scrollingRows : true,
autoencode: true,
prmNames: {id:"_rowid", oper: "_oper" },
colModel: <%= Model.ColModel() %>,
gridview: true,
toppager: true,
viewrecords: true
});
grid.navGrid("#grid_toppager", {}, {}
{ url: 'Add' } // How to pass _documentId value to this controller ?
);
In case of form editing, you should use editData parameter to send additional data to the server. Another way is to modify the postdata inside of onclickSubmit or beforeSubmit event handler. You can of course do it in the serializeEditData event handler instead. Using onclickSubmit, you can easy modify the URL (params.url) if you need really place the information in the URL and not in the data which will be send to the server.
In case of inline editing, you can use extraparam parameter of the editRow or use serializeRowData event handler.
Related
//Hidden Input element
//my grid details:
$("#jqGrid").jqGrid({
url: '#Url.Action("EditedEventData", "Calendar" ,new{ })' + '?CountryId=' + #countryid + '&CityId=' + #cityid ,
async: true,
datatype: "json",
colModel: [
//label: "Edit Actions",
name: "",
width: 100,
formatter: "actions",
formatoptions: {
keys: true,
edit: true,
add: true,
del: true,
editOptions: {},
addOptions: {},
delOptions: {
url:'#Url.Action("RemoveEvent", "Calendar")'+ '?HolidayId='+document.getElementById('hdnEventId').value ,
//mtype: 'POST',
}// **here it is showing hdnEventId value empty**
}
}
],
onSelectRow : function(id){
console.log('inside onSelectRow');
alert(id);
document.getElementById('hdnEventId').value=id;
alert(document.getElementById('hdnEventId').value);
},
sortname: 'EventDate',
loadonce: true,
width: 750,
height: 200,
rowNum: 150,
pager: "#jqGridPager"
});
I am unable to access id of onSelectRow in delOptions action method.
So thought of taking a hidden html element and store the value but it is showing empty.
Thanks in advance
When a delete is performed the id is automatically send to the server. The parameter which is obtained via post is named id.
If you additionally want to fill a id on deleting a rows you can use some events to fill the field you want. These are described here. In the same documentation see the chapter What is posted to the server .
To fill the id in another field when a row is deleted I think the good choice is to use either serializeDelData or afterSubmit events - see the events on the same link.
When use these events the parameter postdata contain the id. By example in serializeDelData (set this in delOptions) this can look like
serializeDelData : function( postdata ) {
var id = postdata.id;
document.getElementById('hdnEventId').value=id;
return postdata;
}
Remember both events should return some params
I have the following problem. I m using a custom form for Jqgrid, the problem is that I can t figure it out how can I use different functions for submit button in add/edit/delete. Can you help me? I can use delfunc with succes. How can I add delfunc to the button submit from del form, and the function addfunc to submit button from the form of add.
$('#jqGrid').navGrid("#jqGridPager", {
edit: true,
add: true,
del: true,
refresh: true,
view: false,
addfunc : function(){
var angajat = new Object();
angajat.id = null;
angajat.firstName = "andrei" //jQuery("#jqGrid").jqGrid('getRowData');
angajat.lastName = " chivu " //jQuery("#jqGrid").jqGrid('getRowData');
console.log(angajat);
$.ajax({
type: "POST",
url: "rest/user/add",
data: JSON.stringify(angajat),
contentType: "application/json; charset=utf-8",
dataType: "json",
contentType: "application/json",
success: function (data) {
$("#response").html(JSON.stringify(data));
}
});
},
delfunc : function (id){
$.ajax({
type:"DELETE",
url:"rest/user/delete",
data:JSON.stringify(id),
dataType: "json",
contentType: "application/json",
}).done(function( msg ) {
alert("Content Deleted: " + id);},
jQuery("#jqGrid").trigger("reloadGrid"));
},
editCaption: "Update Employee",
template: template,
//onClick: alert("alaaaaa"),
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
addCaption: "Add new Employee",
template: template,
sData: alert("alaaaaa"),
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dialog
{
caption: "Delete the Employee",
msg: "Are you sure ? ",
beforeSubmit: alert("alaaaaa"),
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
});
});
One don't need to use delfunc, addfunc, editfunc or viewfunc in the most cases. The function are replacements for delGridRow, editGridRow and viewGridRow, but to replace the methods which code is not so small one have to understand the code in details.
I try to explain your problem how I understand it. I'll start with the usage of delfunc. What you try to do is calling of URL rest/user/delete using HTTP DELETE. Thus I suppose that you have RESTful services on the backend. To use HTTP DELETE you need to append the id of deleted item to the URL, use DELETE operation and be sure that no other information (like oper parameter) are placed in HTTP body. Thus you can use existing options of delGridRow.
It's important to understand that navGrid just add some buttons in the navigator bar and it calls the methods delGridRow, editGridRow and viewGridRow if the user clicks on the corresponding buttons. The options of navGrid looks like
$("#gridid").jqGrid('navGrid','#gridpager', {parameters},
prmEdit, prmAdd, prmDel, prmSearch, prmView);
(see the documentation). The parameters parts are real options of navGrid and it informs navGrid for example which buttons should be included on the navigator bar. The other options are the options of delGridRow, editGridRow, searchGrid and viewGridRow methods which shoule be used if the user clicks on the corresponding button of navigator bar. To configure the behavior of Delete button we need to specify prmDel parameter. The value of the parameter should be object with the properties and
callbacks of delGridRow method. See the documentation.
In the same way if one uses formatter: "actions" or inlineNav then another buttons will be added and one have to use the corresponding options to specify, which options of delGridRow should be used.
I find that the options of navGrid is difficult to understand. Because of that I introduced in free jqGrid alternative way of specify default options used in jqGrid by delGridRow inside of formDeleting of jqGrid options. Thus the most free jqGrid looks like the demo. It uses formEditing, formViewing, searching options of jqGrid and the call of navGrid is either without any parameters or with the small set of options. Now back to your main problems. See the wiki for more information.
If the main logic is clear then it will be clear how one configure jqGrid to do on Delete exactly what you need. To do this you should specify mtype: "DELETE" option and ajaxDelOptions: {...} to specify other options of Ajax call. To append the id to the URL you can use onclickSubmit or beforeSubmit callbacks (see the answer), but in free jqGrid and can use url defined as function (see the answer) and have more readable code. Thus I suggest you to use formDeleting option with the value
{
mtype: "DELETE",
url: function (rowid) {
return "/rest/user/delete/" + rowid;
},
ajaxDelOptions: { contentType: "application/json" },
serializeDelData: function () {
return "";
},
reloadGridOptions: { fromServer: true },
}
The grid will be reloaded automatically on successful deleting because reloadAfterSubmit: true is default option of delGridRow (see here). The last option reloadGridOptions is helpful in case of usage loadonce: true option of jqGrid. It will force reloading of grid from the server.
In the same way to configure Add and Edit buttons you can use formEditing option of jqGrid with the value
{
url: function (id, editOrAdd) {
return "/rest/user/" + (editOrAdd === "add" ? "add" : "edit");
},
mtype: function (editOrAdd) {
return editOrAdd === "add" ? "POST" : "PUT";
},
serializeEditData: function (postData) {
return JSON.stringify(postData);
},
serializeEditData: function (postData) {
var dataToSend = $.extend({}, postData); // make copy of data
// don't send any id in case of creating new row or to send `0`:
if (dataToSend.id === "_empty") {
delete dataToSend.id; // or dataToSend.id = 0;
}
return JSON.stringify(dataToSend);
},
ajaxEditOptions: { contentType: "application/json" },
reloadGridOptions: { fromServer: true }
}
I have two buttons in the pager, one for adding a new record. See the code below:
$(grid_selector).jqGrid('navGrid', pager_selector,
{
edit: false,
add: true,
addicon : 'icon-plus-sign purple',
del: true,
delicon : 'icon-trash red',
search: false,
refresh: false,
view: false,
},
null, //no need for edit
{
//new record form
url: "/add",
...
afterSubmit : function(response, postdata) {
// ??? how to refresh the grid
}
},
...
}
After adding a record, I am hoping to refresh the grid. Could someone let me know how to do this?
I am using local data for the test purpose.
Regards.
Make sure that you are using updated version of jqGrid in your application
If all other parameters are are correct ( refresh:true etc ) you can use this to reload Grid
$(grid_selector).trigger("reloadGrid");
Please note this condition too
The reloading is not performed due to the datatype got change to local(loadonce is true).You need to reload the grid manually in afterSubmit function for form editing. You need to set the datatype to json before triggering reload event.
$(grid_selector).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
Default property used in form editing is reloadAfterSubmit: true. It means that jqGrid trigger reloadGrid processing of afterSubmit.
You wrote "I am using local data". It's difficult to answer on your question because you don't posted more full code which you use. I try to guess what you do. Because jqGrid don't support local for editing till now then I suppose that your problem exist because you use loadonce: true option. If the option are used then jqGrid changes the original datatype to "local" after the first loading of data. In other words jqGrid "breaks" connection to the server (to url) after the first loading of data.
So you need just to reset the original datatype ("json" or "xml") before jqGrid trigger reloadGrid. The corresponding code will be about the following:
$(grid_selector).jqGrid("navGrid", pager_selector,
{
edit: false,
addicon : 'icon-plus-sign purple',
delicon : 'icon-trash red',
search: false,
beforeRefresh: function () {
$(this).jqGrid("setGridParam", { datatype: "json" });
}
},
{}, //no need for edit
{
//new record form
url: "/add",
...
afterSubmit: function () {
$(this).jqGrid("setGridParam", { datatype: "json" });
}
},
...
}
The above code add "Refresh" button and uses the same beforeRefresh and afterSubmit. In the way "Refresh" button reloads the data from the server. I personally find existence of such button practical in loadonce: true scenario.
By ajax call data fetched from server but problem is that response
should be load in jqgrid but not loading. In var dataAjax = jData.responseText;
dataAjax received data from server.
Whats wrong with that. please help
$(document).ready(function(){
var resData = "";
$(".btnLoad").click((function(){
resData = $.ajax({
type : "POST",
url: "/AccountUI/DataFlow/AccountDetails.html",
dataType: "json",
success: functioin(jData){
var dataAjax = jData.responseText;
return dataAjax;
}
});
});
var gridData = new Array();
gridData = resData;
jQuery("#ajgrid").jqGrid({
datatype: "json",
height: 250,
colNames:['AccID','AccName', 'AccBranch'],
colModel:[ {name:'AccID',index:'AccID', width:60, sorttype:"int"},
{name:'AccName',index:'AccName', width:90},
{name:'AccBranch',index:'AccBranch', width:100}
],
multiselect : true,
caption : "Account Grid"
});
for(var i=0;i<=gridData.length;i++)
jQuery("#ajgrid").jqGrid('addRowData',i+1,gridData[i]);
});
There are misunderstanding what datatype: "json" means. It works together with url option. jqGrid makes Ajax request for you and filled returned from the server data in the grid. If you don't implemented server side paging you should add additionally loadonce: true option to the grid.
So I hope that what you need is: 1) remove manual $.ajax call; 2) remove the loop where you fill the grid using addRowData; 3) add the following options to jqGrid:
url: "/AccountUI/DataFlow/AccountDetails.html",
mtype: "POST",
loadonce: true,
gridview: true,
autoencode: true
I recommend you additionally to replace height: 250 to height: "auto". Depend on the exact format of returned data you could need to add jsonReader with the properties which help jqGrid to interpret the server response correctly. Probably that jqGrid could automatically detect the format of returned data.
jqGrid delete action button is used to delete row.
This button click calls Edit method, it looks like it uses editurl parameter.
How to force it to call Delete method like Delete toolbar button calls ?
$(function () {
var grid = $("#grid");
grid.jqGrid({
url: '/GetData',
colModel: [{
"formatter":"actions",
"formatoptions":{"keys":true,"delbutton":true,
...
}}],
editurl: '/Edit',
});
grid.navGrid("#grid_toppager", null,null,null, { url: '/Delete' } );
});
You should include delOptions option in the formatoptions:
formatter: "actions",
formatoptions: {
keys: true,
delbutton: true,
delOptions: {
url: "/Delete"
}
}
Inside of delOptions you can use any from the properties and any events of the delGridRow method.