I have a jgrid and the code is below. I wish to send some extra parameters to the server when the save icon in each row is clicked. How to do this?
let colNames = ['Designation', 'No. of Resource(s) Required', 'Competence for Job', 'Skill of Resource', 'Time Required(in %)', 'From', 'To', 'Reason For Request', 'Assigned Person(s)', 'Current Role in Project', 'resource_type', 'Billing'];
let colModel = [
{name:'resource_designation', index:'resource_designation', resizeable:true, editable: true, edittype: 'select', editoptions: {value:designation_options}, editrules:{required:true}, search: false},
{name:'resource_resources_required', index:'resource_resources_required', resizeable:true, editable: true, edittype: 'text', editrules:{required:true}, search: false},
{name:'resource_competence_for_job', index:'resource_competence_for_job', resizeable:true, editable: true, edittype: 'textarea', search: false},
{name:'resource_skill_of_resource', index:'resource_skill_of_resource', resizeable:true, editable: true, edittype: 'textarea', search: false},
{name:'resource_percentage_time_required', index:'resource_percentage_time_required', resizeable:true, editable: true, edittype: 'text', editrules:{required:true, integer: true}, search: false},
{name:'resource_duration_from', index:'resource_duration_from', resizeable:true, editable: true, edittype: 'text', editoptions: {
dataInit: function(el){
$(el).datepicker({
id: 'resource_duration_from',
dateFormat: "dd-M-yy"
});
}
}, search: false},
{name:'resource_duration_to', index:'resource_duration_to', resizeable:true, editable: true, edittype: 'text', editoptions: {
dataInit: function(el){
$(el).datepicker({
id: "resource_duration_to",
dateFormat: "dd-M-yy"
});
}
}, search: false},
{name:'resource_reason_for_request', index:'resource_reason_for_request', resizeable:true, editable: true, edittype: 'text', editrules:{required:true}, search: false},
//{name:'assigned_persons', index:'assigned_persons', resizeable:true, editable: true, edittype: 'select', editrules:{required:true}, search: false},
{name:'resource_assigned_persons', index:'resource_assigned_persons', resizeable:true, editable: true, edittype: 'select', editoptions:{value:assigned_persons}, editrules: {required: true}, search: false},
//{name:'current_role', index:'current_role', resizeable:true, editrules:{required:true}, search: false},
{name:'resource_current_role_in_project', index:'resource_current_role_in_project', resizeable:true, editable: true, edittype: 'select', editoptions: {value: designation_options}, editrules:{required:true}, search: false},
{name:'resource_resource_type', index:'resource_resource_type', resizeable:true, editable: true, edittype: 'select', editoptions: {value: {"Full Time": "Full Time", "Buffer": "Buffer", "Trainee": "Trainee"}}, editrules:{required:true}, search: false},
{name:'resource_billing', index:'resource_billing', resizeable:true, editable:true, edittype:'select', editoptions: {value:{"Billable": "Billable", "Non-Billable": "Non-Billable"}}, search: false}
];
let editparameters = {
"keys" : false,
"oneditfunc" : null,
"successfunc" : null,
"url" : location_url,
"extraparam" : {"grid": "rsf_people"},
"aftersavefunc" : null,
"errorfunc": null,
"afterrestorefunc" : null,
"restoreAfterError" : true,
"mtype" : "POST"
};
let parameters = {
edit: true,
editicon: "ui-icon-pencil",
add: true,
addicon:"ui-icon-plus",
save: true,
saveicon:"ui-icon-disk",
cancel: true,
cancelicon:"ui-icon-cancel",
//addParams : saveparameters,
addParams : {addRowParams:{extraparam:{"grid":"rsf_people"}}},
editParams : editparameters
};
$("#rsf_people").jqGrid({
url: location_url,
datatype: "json",
mtype: "POST",
postData: {action: "get_saved_allocated_resources"},
colNames:people_colNames,
colModel:people_colModel,
rowNum: 5,
height:'auto',
autowidth: true,
shrinkToFit: true,
pager: true,
emptyrecords: " ",
viewrecords: true,
sortorder: "asc",
scrollOffset:0,
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true, resetWidthOrg: true },
idPrefix: "g1_",
autoencode: true,
sortable: true,
rownumbers: true,
pagerRightWidth: 150,
editurl: location_url,
afterAddRow: function () {
recreateFilterToolbar.call(this);
},
afterSetRow: function () {
recreateFilterToolbar.call(this);
},
afterDelRow: function () {
recreateFilterToolbar.call(this);
},
inlineEditing: {
keys: true
},
formEditing: {
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13]
},
loadonce: true,
caption: "RSF People",
}).jqGrid("navGrid", {add: false, edit: false, del: false, search: false, refresh: false})
.jqGrid("inlineNav", parameters)
.jqGrid("filterToolbar");
/* To make grouped headers */
$("#rsf_people").jqGrid("setGroupHeaders", {
useColSpanStyle: false,
groupHeaders: [
{startColumnName: 'duration_from', numberOfColumns: 2, titleText: 'Duration'},
]
});
And my grid looks like below,
If you look at the image I have marked the inlinenav actions like add and edit in green. So these works well and I am able to pass extra parameters using the variable parameters.
But I want to pass those same extra parameters to the edit action marked in red rectangle in the picture. How can I do that?
To put it otherwise, when I click on the "+" icon in the green bottom area it adds a new row to the grid and also a save icon to the left side of the row[the action column]. If I fill the data and click on the save icon in the same row left side it doesn't pass the extra parameters to the server. How can I achieve this? I wish to pass extra parameters when the save[exists in each row - marked in red in image] icon is clicked .
How to achieve this? please help me!
If I correctly understand your code you want to send grid=rsf_people
as extra data on saving of inline data in case of both "add" and "edit" operation. Currently you set extraparam
only for inlineNav
. So the extra data will be sent in case of usage "save" icon in navigation bar only and not in "action" formatter.
Free jqGrid supports inlineEditing
parameter (see inlineEditing: { keys: true }
in your code), which simplifies forwarding parameters to inline editing methods. I'd suggest you to use
inlineEditing: {
extraparam: { grid: "rsf_people" },
mtype: "POST",
keys: true
}
It should solve your problem. See the wiki article for more details.