Question

I want to to assign inline edit feature to my jqGrid, i.e when the cuser clicks a particular row, he should be able to edit..

I am following this url for the jQuery code but its not working, I am not able get edit also

http://www.trirand.com/blog/jqgrid/jqgrid.html#

This is my view

<table id="list"></table>
</table>

JavaScript code:

  <script type="text/javascript">
    $(function () {
        var lastsel;
        jQuery("#list").jqGrid({
            url: '/Home/GetStudents/',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['StudentID', 'FirstName', 'LastName', 'Email'],
            colModel: [
      { name: 'StudentID',sortable: false,key:true },
      { name: 'FirstName' },
      { name: 'LastName', sortable: false},
      { name: 'Email', width: 200,  sortable: false}],
      cmTemplate: {align: 'center', editable: true},
            pager: '#pager',
            width: 750,
            rowNum: 15,
            rowList: [5, 10, 20, 50],
            sortname: 'StudentID',
            sortorder: "asc",
            viewrecords: true,
            caption: ' My First JQgrid',
            onSelectRow: function (StudentID) {


                if (StudentID != lastsel) {

                    lastsel = StudentID;   
                    jQuery('#list').jqGrid('restoreRow', lastsel);
                    jQuery('#list').jqGrid('editRow', StudentID, true);


                }

            },

            editurl: '/Home/GetStudents/',
            caption: "Using events example"

        });
        jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: false });
    });

</script>

These are my scripts, I added

<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
<script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/Scripts/rowedex3.js" type="text/javascript"></script>

Answer 1

First of all you have to define editurl option of jqGrid which will be responsible for processing of saving of row on the server side.

Next problem: you should define lastsel variable to use if in onSelectRow callback.

I recommend you additionally default property of colModel items like width: 150 or sortable: true (see the documentation). If you need redefine some default settings for columns of the grid you can use cmTemplate (see here) for additional information. You can reduce colModel from your grid to the following

colModel: [
        { name: 'StudentID', sortable: false, key: true },
        { name: 'FirstName' },
        { name: 'LastName', sortable: false },
        { name: 'Email', width: 200, sortable: false}],
cmTemplate: {align: 'center', editable: true}

Such changes will make the code more readable and easy to maintain. I added key: true to be sure that jqGrid use the vale from the column as the rowid. Depend on the format of JSON data which you return it could be not required, but it makes the code in my opinion also more readable and easier to maintain.

You can additionally remove all attributes of <table> element used for the grid.

Additionally because of performance reason I would recommend you always use gridview: true option of jqGrid and replace pager: jQuery('#pager') to pager: '#pager'.