JQGrid - how to use inline editing?

Question

When a user selects a row on the JQGrid, he should be able to edit the editable fields and then press the Enter key which will post the row to the controller method which will update the database. I cannot find how to post the updated data to do this. I want to send the businessUnitId field and the editable fields as parameters to the controller mether to do this. This is my webpage;

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Maintenance
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <fieldset>
        <legend>Maintenance of Departments and Divisions</legend>
        <p>Add, edit or delete a department or division: <%: Html.DropDownList("BusinessUnitTypes")%></p>
        <p>To amend the department or division, select the row, make the change and then press the return key.</p>
        <table id="list" class="scroll"></table>
        <div id="pager" class="scroll" style="text-align:center;font-size: 11px;"></div>
    </fieldset>
    <!-- "BusinessUnitTypeId", (SelectList)ViewData["BusinessUnitTypes"] -->
<script type="text/javascript">
    $(document).ready(function () { reloadGrid(); });

    $('#BusinessUnitTypes').change(function () {
        $("#list").trigger("reloadGrid");
    });

    function reloadGrid() {
        var lastSelectedId;

        $('#list').jqGrid({
            url: '<%: Url.Action("GetBusinessUnits", "BusinessUnit")%>',
            postData: {
                businessUnitTypeId: function () { return $("#BusinessUnitTypes option:selected").val(); }
            },
            datatype: 'json',
            mtype: 'POST',
            colNames: ['ID', 'Name', 'Fax', 'Email', "Employees"],
            colModel: [
                { name: 'BusinessUnitId', index: 'BusinessUnitId', width: 25, editable: false },
                { name: 'BusinessUnitName', index: 'BusinessUnitName', width: 200, editable: true, edittype: 'text' },
                { name: 'Fax', index: 'Fax', width: 80, align: 'right', edittype: 'text', editable: true },
                { name: 'Email', index: 'Email', width: 200, editable: true, edittype: 'text' },
                { name: 'NumberOfEmployees', index: 'NumberOfEmployees', width: 70, editable: false}],
            rowNum: 20,
            rowList: [10, 20, 30],
            pager: $('#pager'),
            sortname: 'BusinessUnitName',
            viewrecords: true,
            sortorder: "asc",
            caption: "Edit",
            height: 575,
            onSelectRow: function (id) {
                if (id && id !== lastSelectedId) {
                    $('#list').restoreRow(lastSelectedId);
                    $('#list').editRow(id, true);
                    lastSelectedId = id;
                }
            },
            editurl: '<%: Url.Action("Save", "BusinessUnit")%>'
        });
    }

</script>
</asp:Content>

Answer 1

All editable values and the rowid will be * automatically* send to the URL specified by editurl if the user save the data by pressing the Enter key.

It seems to me that BusinessUnitId is the native unique id for the grid. You don't posted any test data which you use to fill the grid. If you would fill id with the same value as BusinessUnitId has the problem can by automatically solved because the value of BusinessUnitId will be sand as id value to editurl. Alternatively you can add key: true property to the definition of BusinessUnitId in colModel.

If it will not solve your problem you can use extraparam to send additional data during saving of the row. See the answer for details.

I recommend you additionally to add gridview: true option to the grid and change pager: $('#pager') to pager: '#pager'. It will improve the performance.