jqueryfree-jqgrid

How to pass extra parameters for in row edit/save action in free-jqgrid?


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,

overall grid

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 .

rowwise save

How to achieve this? please help me!


Solution

  • 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.