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, May 21 '15 at 13:17
@Oleg my question was updated with my code for your reference. Kindly help me on this.. — BaluJagua, May 22 '15 at 04:41

score 0 · Accepted Answer · answered May 22 '15 at 05:24

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

thanks Oleg this is what i need..but somehow can we pass whole rowobject to controller? — BaluJagua, May 22 '15 at 10:47
@BaluJagua: You are welcome! I'm not sure that I correctly understand you, but you can define `serializeRowData` callback in jqGrid (not as `inlineEditOptions` or `inlineEdit`). The callback gives you the last chanse to change the data which will be sent to the server. You can use for example `serializeRowData: function (postdata) { return $.extend({}, postdata, myObject); }` In the way the standard parameters (the properties of `postdata`) will be combined with the properties of your custom object `myObject`. — Oleg, May 22 '15 at 11:01
Hi Oleg, is there any possible solution to get all the rows of jqgrid in controller? for example here is my code in wiindows applicaion `For Each row In Me.PriceListHeadersGrid.Rows If CInt(row.Cells("Sort").Value) <> row.Index Then row.Cells("Sort").Value = row.Index End If Next` The same thing i can achieve this in controller.. — BaluJagua, May 25 '15 at 06:28
@BaluJagua: Sorry, but I don't understand you. Why you could need to get all rows during inline editing of *one row*? Moreover the data in the grid come *from controller*. Why you need to send the same data back? Do you need probably the list of filtered and sorted ids of the data? If you use `loadonce: true` then it's possible, but the implementation depend on version of jqGrid which you use. Free jqGrid have `lastSelectedData` parameter which you can get by `getGridParam`. See [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/GetFilteredData.htm). — Oleg, May 25 '15 at 08:31

pass data to the controller in jqgrid inline editing

1 Answers1