how to use jqgrid extraParam parameter of saveRow

Question

where in one cell edittype is select with key value pair like below.

 colModel: [
            {name: 'Code', index: 'Code', width: '16%', editable: true, sortable: true },
            { name: 'ABC', index: 'ABC', width: '16%', editable: true, edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT"} },
            { name: 'Emailid', index: 'Emailid', width: '16%', editable: true, sortable: true },
            ],

Now while adding new row if i selected the FedEx for ABC column it will send the FE to EditURL Link not FedEX so i want to send the FEDEX using extraParam to EditURL.

So please anyone let me know how to implement it.

For this my code is below

UPDATED CODE

var grid = jQuery("#list5").jqGrid({
        url: '/home1/GetUserData',
        datatype: "json",
        mtype: "POST",
        colNames: ['Code', 'LoginID', 'Emailid'],
        colModel: [
                        {name: 'Code', index: 'Code', width: '16%', editable: true, sortable: true },
                        { name: 'LoginID', index: 'LoginID', width: '16%', editable: true, sortable: true },
                        { name: 'Emailid', index: 'Emailid', width: '16%', editable: true, edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT"} },
                      ],
        rowNum: 10,
        autowidth: true,
        height: '100%',
        rowList: 10,
        pager: $("#pager2"),
        editurl: "/home1/EditUserData",
        onSelectRow: function (id) {
            if (id && id !== lastsel2) {
                if (id == "new_row") {
                    grid.setGridParam({ editurl: "/home1/InsertUserData" });
                }
                else {
                    grid.setGridParam({ editurl: "/home1/EditUserData" });
                }
                jQuery('#list5').restoreRow(lastsel2);
                jQuery('#list5').jqGrid('editRow', id, true, pickdates);
                $("#list5_ilsave").addClass("ui-state-disabled");
                $("#list5_ilcancel").addClass("ui-state-disabled");
                $("#list5_iladd").removeClass("ui-state-disabled");
                $("#list5_iledit").removeClass("ui-state-disabled");
                lastsel2 = id;
            }
        },
        caption: "Simple data manipulation"
    });
    jQuery("#list5").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: true, search: false, refresh: false }, {}, {}, { url: '/home1/DeleteUserData' });
    jQuery('#list5').jqGrid('inlineNav', '#pager2', { edit: true, add: true, editParams: {extraparam: XYZ()}});
});

function XYZ()
{
  // from here i want to return the text of combo of selected row.
}

Update code of Oleg

var grid = jQuery("#list5"),
    editingRowId,
    myEditParam = {
        keys: true,
        oneditfunc: function (id) {
            editingRowId = id;
        },
        afterrestorefunc: function (id) {
            editingRowId = undefined;
        },
        extraparam: 
            // we get the text of selected option from the column
            // 'Emailid' and include the data as additional
            // parameter 'EmailidText'
           // EmailidText: function () {
             //   return $("#" + editingRowId + "_Emailid>option:selected").text();
            //}
// **my changes here bind ABC Function which return key , value pair of object** IS THIS POSSIBLE
           function () {
               ABC(); 
            }

    };

grid.jqGrid({
    url: '/home1/GetUserData',
    datatype: "json",
    ...
    onSelectRow: function (id) {
        var $this = $(this), gridIdSelector = '#' + $.jgrid.jqID(this.id);
        $this.jqGrid('setGridParam', {
            editurl: (id === "new_row" ?
                          "/home1/InsertUserData" :
                          "/home1/EditUserData")
        });
        if (editingRowId !== id) {
            $(gridIdSelector + "_iledit").click();
        }
    }
});
$grid.jqGrid('navGrid', '#pager',
    { edit: false, add: false, search: false, refresh: false},
    {}, {}, { url: '/home1/DeleteUserData' });

// inlineNav has restoreAfterSelect: true per default so we don't need to call
// restoreRow explicitly
$grid.jqGrid('inlineNav', '#pager',
    { edit: true, add: true, editParams: myEditParam,
        addParams: {addRowParams: myEditParam } });

To be able to help you It is very important to know *how you use inline editing?*. Do you use `formatter: 'actions'` or you use `inlineNav` or you call `saveRow` directly. In all the cases you will have a little another implementation. — Oleg, May 01 '12 at 09:01
Oleg i have updated my code, anyways i am using inline editing. — Meraj, May 01 '12 at 09:15

score 6 · Accepted Answer · answered May 01 '12 at 10:51

6

The code could be about the following

var grid = jQuery("#list5"),
    editingRowId,
    myEditParam = {
        keys: true,
        oneditfunc: function (id) {
            editingRowId = id;
        },
        afterrestorefunc: function (id) {
            editingRowId = undefined;
        },
        extraparam: {
            // we get the text of selected option from the column
            // 'Emailid' and include the data as additional
            // parameter 'EmailidText'
            EmailidText: function () {
                return $("#" + editingRowId + "_Emailid>option:selected").text();
            }
        }
    };

grid.jqGrid({
    url: '/home1/GetUserData',
    datatype: "json",
    ...
    onSelectRow: function (id) {
        var $this = $(this), gridIdSelector = '#' + $.jgrid.jqID(this.id);
        $this.jqGrid('setGridParam', {
            editurl: (id === "new_row" ?
                          "/home1/InsertUserData" :
                          "/home1/EditUserData")
        });
        if (editingRowId !== id) {
            $(gridIdSelector + "_iledit").click();
        }
    }
});
$grid.jqGrid('navGrid', '#pager',
    { edit: false, add: false, search: false, refresh: false},
    {}, {}, { url: '/home1/DeleteUserData' });

// inlineNav has restoreAfterSelect: true per default so we don't need to call
// restoreRow explicitly
$grid.jqGrid('inlineNav', '#pager',
    { edit: true, add: true, editParams: myEditParam,
        addParams: {addRowParams: myEditParam } });

answered May 01 '12 at 10:51

Oleg

220,925
34
403
798

Oleg: great solution, exactly this is what i want. many thanks for saving my day. – Meraj May 01 '12 at 12:37
Oleg: in this we are binding function to EmailidText, cant we bind a function to extraparam of myEditParam object, so dynamically it will return list of key, value pairof object. – Meraj May 03 '12 at 05:45
@Meraj: Sorry, but I don't understand what you mean. Could you reformulate your question to describe more clear what you want? – Oleg May 03 '12 at 05:52
oleg: sorry for ambigeous question, i have updated the code what u have provided to me, wether it is possible or not. i have tried but its not working out, so is there any alternate way or not. – Meraj May 03 '12 at 06:09
@Meraj: I am not sure that I understand the origin of the "key , value pair" which you want return by `extraparam`. If you have some form with named controls you can use `$.serializeArray`: `extraparam: { formData: function () { return $("#myForm").serializeArray(); } }`. [Another answer](http://stackoverflow.com/a/8568113/315935) shows ho the data returned from `serializeArray` can be reformatted before posting. The idea you can use to reformat `extraparam` in the same way like I shown it for `postData`. I hope it's what you asked. – Oleg May 03 '12 at 06:24
:@Oleg: thanks, but can we do something like this `extraparam : function(){ ABC();}` here ABC will be defined like `function ABC(){ var result{}; result["A"] = "aaaaa"; return result; }` – Meraj May 03 '12 at 06:34
@Meraj: The `extraparam` have to be *object*. You can define some properties of the object as functions. In any way the functions have to return values. The function call like `function(){ ABC();}` has no sense. The callback `serializeRowData` can be probably helpful too. If my answer will still not solve your problem you should open new question and describe on one detailed example what you want to do. You should include the HTML fragment which contains the controls and describe the format of data which should be sent to the server. – Oleg May 03 '12 at 06:43
thanks alot, ur suggestion solved my problem partially, i will do some R&D to solve it if not able to solve then i will post my question in detail. – Meraj May 03 '12 at 06:46
@Oleg: is it possibl to send the postData in the extraparam? – A Coder Dec 08 '14 at 11:38
@SanthoshKumar: The goal of `extraparam` is providing the possibility to extend the data which will be send during inline editing. The `extraparam` for inline editing plays the same rolw like `postData` plays for filling the grid. What you exactly want to do? – Oleg Dec 08 '14 at 11:41
@Oleg: I need to add the postData to be sent along with some params in the extraparam. How to do that? – A Coder Dec 08 '14 at 11:56
@SanthoshKumar: You should specify what you mean under "the postData". The parameter "extraparam" is "the postData" in case of inline editing. So what you **exactly want** to do? – Oleg Dec 08 '14 at 12:02
@Oleg: Now i got the point. Let me work on this completely and let you know if anything is needed. Thanks. – A Coder Dec 08 '14 at 12:11
@Oleg: Can you please look into this? http://stackoverflow.com/questions/27438342/jqgrid-inline-edit-serializerowdata – A Coder Dec 13 '14 at 08:19
@SanthoshKumar: Sorry, but what is your question in the post? The callbacks with the name `serializeXXX` should just **return an object or a string which will be used in Ajax request which jqGrid will send for you**. You can find an example of usage `serializeDelData` for example in [the answer](http://stackoverflow.com/a/27103567/315935). If you ignore the standard processing and will make Ajax call inside of `serializeXXX` callbacks you will have to write many code which typically do jqGrid for you. – Oleg Dec 13 '14 at 08:35
@Oleg: I have used the serializeRowData in a wrong way. Need to knwo how to correct that. Where should i write the function for add and edit? – A Coder Dec 15 '14 at 06:10
@SanthoshKumar: You should for example define `errorfunc` callback inside of `myEditParam` used in `inlineNav` as `editParams: myEditParam, addParams: {addRowParams: myEditParam }` and to use `extraparam` to extend the data sent to the server. The most important is that you should do no `$.ajax` call inside of `serializeRowData`. – Oleg Dec 15 '14 at 06:30

how to use jqgrid extraParam parameter of saveRow

1 Answers1

Linked