pass data to the controller in jqgrid inline editing

Question

I need to pass data from inline grid to the controller

I have two columns in jqgrid and used an editurl property

but I don't know how to use exactly

This is my JqGrid code

jQuery(document).ready(function () {
        var pageWidth = $(window).width();
        var lastSel;
        $("#sortrows").setGridWidth(pageWidth);
        $('#sortrows').jqGrid('GridUnload');
        jQuery("#sortrows").jqGrid({            
            datatype: "local",
            mtype: "GET",
            hoverrows: false,
            jsonReader: { repeatitems: false, id: "Code" },
            ajaxGridOptions: { timeout: 30000 },
            colNames: PricelistHeaderColName,
            colModel: PricelistHeaderModel,
            id: 'Code',
            localReader: { id: 'Code' },
            prmNames: { id: "Code" },
            rowNum: 10,            
            rowList: [10, 20, 30],
            hidegrid: false,
            rownumbers: true,
            viewrecords: true,
            height: 'auto',
            width: pageWidth,
            scrollOffset: 0,
            gridview: true,
            autowidth:true,
            shrinkToFit: true,
            pager: '#psortrows',
            sortname: 'Description',
            autoencode: true,
            loadonce: true,
            ignoreCase: true,
            multiselect: false,
            viewrecords: true,
            sortorder: "asc",
            caption: "PriceList Headers",
            editurl: "../Header/Save",                   
        });

        $('#sortrows').jqGrid('setLabel', 'Description', "Description", { 'text-align': 'left' });

        jQuery("#sortrows").jqGrid('navGrid', '#psortrows',
            {
                edit: false,
                add: false,
                del: false,

            });



        jQuery("#sortrows").jqGrid('inlineNav', '#psortrows',
            {
                add: true,
                addtext: "Add",
                addicon:"ui-icon-plus",
                edit: true,
                editicon: "ui-icon-pencil",
                edittext: "Edit",
                save: true,
                saveicon: "ui-icon-disk",
                savetext:"Save",
                cancel: true,
                cancelicon: "ui-icon-cancel",
                canceltext: "Cancel",
                search: true,
                searchtext: "Seaech",                
            });
 jQuery("#sortrows").jqGrid('sortableRows', { items: '.jqgrow:not(.unsortable)' });

        $('#sortrows').jqGrid('filterToolbar', { searchOnEnter: false, enableClear: false, defaultSearch: "cn", stringResult: true });

        //var myData = $('#sortrows').jqGrid('getDataIDs');        
        for (var i = 0; i < myData.length; i++) {            
            //jQuery("#sortrows").addRowData(myData[i].Code, myData[i]);
            $("#sortrows").jqGrid('addRowData', i + 1, myData[i]);

        }

    });

This is my HTMl Page:

<div>
        <label class="col span_1_of_2lbl">
            <span style="font-family:'Segoe UI';font-size:13px;font-weight:bold;color:white ;">Environment</span>
        </label>
        <div class="drg_drop_one">
            <div style="padding-top: 13px;">
                @Html.DropDownListFor(model => model.Environment, environmentList, new SelectListItem { Value = Model.EnvironmentCode })
            </div>
        </div>
    </div>

<div style="margin-top:40px;">
        <table id="sortrows" RequestURL="@Url.Action("LoadPriceListHeadersGrid", "Header")"></table>
        <div id="psortrows"></div>
    </div>

Do we have any methods to get the edited row properties and append dropdown UI values with that edit row object?.

Or we can define any ajax methods in the editrow event?

Please help me on this

How you use inline editing? Do you call editRow directly or you use inlineNav or you use formatter: "actions"? Which version and which fork of jqGrid you use? The possibilities are a little different and the form of specifying of additional parameters are different too. — Oleg
@Oleg my question was updated with my code for your reference. Kindly help me on this.. — BaluJagua
What about your previous answer? You didn't post any comments and didn't "accepted" the answer. Is the problem solved now something is still unclear? — Oleg

Oleg Oleg · Accepted Answer · 2015-05-22T05:24:39

Basis methods used in inline editing is editRow, saveRow and restoreRow. The method addRow uses editRow internally. To send additional data one should specify extraparam option of saveRow or editRow. The problem is that the methods addRow, editRow and saveRow will be called indirectly in case of usage inlineNav. Thus you have to specify the corresponding additional parameters.

In case of usage free jqGrid you can just add the option to jqGrid and all inline editing methods will use the options automatically. See the wiki article for details. The additional jqGrid options will be look as

inlineEdit: {
    extraparam: {
        environment: function () {
            return $(".drg_drop_one select").val();
        }
    }
}

In case of usage more old version of jqGrid the code should be like below

var inlineEditOptions = {
        extraparam: {
            environment: function () {
                return $(".drg_drop_one select").val();
            }
        }
    };

jQuery("#sortrows").jqGrid('inlineNav', '#psortrows', {
    add: true,
    addtext: "Add",
    addicon:"ui-icon-plus",
    edit: true,
    editicon: "ui-icon-pencil",
    edittext: "Edit",
    save: true,
    saveicon: "ui-icon-disk",
    savetext:"Save",
    cancel: true,
    cancelicon: "ui-icon-cancel",
    canceltext: "Cancel",
    search: true,
    searchtext: "Seaech",                
    // additional parameters below:
    editParams: inlineEditOptions,
    addRowParams: {addParams: inlineEditOptions }
});

pass data to the controller in jqgrid inline editing

1 Answers