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

Leek

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. – Bobwhite

Oleg i have updated my code, anyways i am using inline editing. – Leek

Answer 1

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

Bobwhite

Oleg: great solution, exactly this is what i want. many thanks for saving my day. – Leek

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. – Leek

@Meraj: Sorry, but I don't understand what you mean. Could you reformulate your question to describe more clear what you want? – Bobwhite

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. – Leek

@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 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. – Bobwhite

:@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; } – Leek

@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. – Bobwhite

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. – Leek

@Oleg: is it possibl to send the postData in the extraparam? – Moriahmoriarty

@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? – Bobwhite

@Oleg: I need to add the postData to be sent along with some params in the extraparam. How to do that? – Moriahmoriarty

@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? – Bobwhite

@Oleg: Now i got the point. Let me work on this completely and let you know if anything is needed. Thanks. – Moriahmoriarty

@Oleg: Can you please look into this? #27438842 – Moriahmoriarty

@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. 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. – Bobwhite

@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? – Moriahmoriarty

@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. – Bobwhite