jqGrid inline edit functionality

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>

score 2 · Accepted Answer · edited May 23 '17 at 12:29

2

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'.

edited May 23 '17 at 12:29

Community

1
1

answered Nov 02 '12 at 12:35

Oleg

220,925
34
403
798

i made all the changes u mentioned above but still its not working, for editurl i just mentioned a sample url, as first i need to edit, than later i can think of making changes – being fab Nov 05 '12 at 05:38
@beingfab: What exactly "not working"? Is inline editing will be started at all? Do you can see in Fiddler, Firebug or Developer Tools of IE or Chrome that that the saving row request will be sent to the server? – Oleg Nov 05 '12 at 06:18
no i'm not able to get the textboxes on clicking the row for editing, is the new code correct which i have made and updated in my question – being fab Nov 05 '12 at 06:27
@beingfab: I can't see an error in your code. Do you tried to set breakpoint inside of `onSelectRow` callback? Which version of jqGrid you use? It's a little strange that you use very old jQuery version `1.4.1`. You can try use jQuery `1.7.2` and the last (4.4.1) version of jqGrid. For debugging it is more practical to use `jquery.jqGrid.src.js` instead of `jquery.jqGrid.min.js`. – Oleg Nov 05 '12 at 06:36
yes..thanks a lot, after changing the scripts its working fine now, but the problem is when i click on the 2nd row, the edit functionality for the 1st row is still the same......when i click one row the the edit functionality for other rows show disappear...note-i did not add the 4.4.1 version of jqgrid, im searching for that version to download – being fab Nov 05 '12 at 07:18
@beingfab: You should move the line `lastsel = StudentID` **below the line** with `restoreRow` (see `onSelectRow` callback in your code). You can download jqGrid from [the official download place here](http://www.trirand.com/blog/?page_id=6). – Oleg Nov 05 '12 at 07:20
thnku very much for sparing your valuable time...its working fine now...if u dont mind can u pls give tell how can i update the edited code..., i want to update into database?? – being fab Nov 05 '12 at 07:24
@beingfab: You can for example examine `ModifyGridData` Action of controller from [the project](http://www.ok-soft-gmbh.com/jqGrid/jqGridAutorefresh.zip) which I created for [the answer](http://stackoverflow.com/a/10461964/315935). – Oleg Nov 05 '12 at 08:51

jqGrid inline edit functionality

1 Answers1