jqgrid inline edit only on selected cell, not the row

12,401

It seems that you use wrong editing mode. jqGrid supports tree editing modes which can be additionally used in many variations.

The description of your requirements looks that you should use cell editing instead of inline editing which you use currently.

Share:
12,401

Related videos on Youtube

colors bright
Author by

colors bright

Updated on September 15, 2022

Comments

  • colors bright
    colors bright over 1 year

    i have a jqgrid in my application, which is working fine but its slight different from my requirement, when in click on a particular cell, the whole row is getting selected but i want only that particular cell to be selected...the next one is im able to update the row values on hitting the 'Enter' key, but i want the cell value to be updated as soon as the user leaves that particular cell

    this is my jquery 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', key: true },
          { name: 'LastName', sortable: false, key: true },
          { name: 'Email', width: 200, sortable: false, key: true}],
                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) {
    
    
                        jQuery('#list').jqGrid('restoreRow', lastsel);
                        jQuery('#list').jqGrid('editRow', StudentID, true);
    
                        lastsel = StudentID;
    
                    }
    
                },
    
                editurl: '/Home/About/',
    
                caption: "jQgrid Sample"
    
            });
    
            jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: false });
        });
    
    </script>