Click here to Skip to main content
11,430,274 members (77,204 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery JQGrid
Hi
Experts,

I have created JQGrid with inline editing feature.
I have to fields
Fist Name : required
Last Name : not required

I am using following step to update my existing record.
  • Grid with Edit and Delete button.
  • Clicking on Edit then (Edit, Delete will be hide) and (Save,Cancel will be display).
  • I have cleared value from FirstName textbox.
  • I pressed submit button then it will display message like "First Name: Field is required" this is correct
  • But behind this my button (Save, Cancel will replace with Edit,Delete this is wrong)

  • Code snippet:
    I would like to put check point in the following function
    function inplaceSave(id) {
            //Check point is required for Any Validation violation or unsuccessful save
            jQuery('#list').saveRow(id);
            //if it is success then following method should called else couldn't
            changeActionState('save', id);
        }

    Following is complete code:
    jQuery(document).ready(function () {
            //$.jgrid.defaults.loadtext = '';
            jQuery("#list").jqGrid({
                url: '@Url.Action("JQGridGetGridData", "TabMaster")',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['col ID', 'First Name', 'Last Name', ''],
                colModel: [
                          { name: 'colID', index: 'colID', width: 100, align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
                          { name: 'FirstName', index: 'FirstName', width: 150, align: 'left', editable: true, editrules: { required: true, number: true, minValue: 40, maxValue: 100} },
                          { name: 'LastName', index: 'LastName', width: 150, align: 'left', editable: true },
                          { name: 'Edit', index: 'Edit', width: 70, align: 'center', editable: false, formatter: editFmatter, unformat: unformatEdit }
                        ],
                pager: jQuery('#pager'),
                hidegrid: false,
                rowNum: 100,
                rowList: [10, 50, 100, 150],
                sortname: 'colID',
                sortorder: "asc",
                viewrecords: true,
                multiselect: false,
                //rownumbers: true,
                imgpath: '@Url.Content("~/Scripts/themes/steel/images")',
                caption: 'Tab Master Information',
                editurl: '@Url.Action("JQGridEdit", "TabMaster")'
            }).navGrid('#pager', { edit: false, add: false, del: false, search: false, refresh: false });
        });
    function inplaceEdit(id) {
            jQuery('#list').editRow(id);
            changeActionState('edit', id);
        }
        function inplaceCancel(id) {
            jQuery('#list').restoreRow(id);
            changeActionState('cancel', id);
        }
        function inplaceSave(id) {
            jQuery('#list').saveRow(id);
            changeActionState('save', id);
        }
     function changeActionState(action, id) {
            if (action == 'edit') {
                jQuery('#action_edit_' + id).css('display', 'none');
                jQuery('#action_delete_' + id).css('display', 'none');
                jQuery('#action_save_' + id).css('display', 'block');
                jQuery('#action_cancel_' + id).css('display', 'block');
            }
            else {
                jQuery('#action_edit_' + id).css('display', 'block');
                jQuery('#action_delete_' + id).css('display', 'block');
                jQuery('#action_save_' + id).css('display', 'none');
                jQuery('#action_cancel_' + id).css('display', 'none');
            }
        }


    I have also posted this problem here[^].

    Please provide me help if you have.

    Thanks,
    Imdadhusen
Posted 12-Jul-11 3:47am
Edited 12-Jul-11 21:25pm
v2

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hi,

I have solved this problem my self, Using modified function inplaceSave and added new function checkSave.

Here is the updated code.

var rowid;
   function inplaceSave(id) {
       rowid = id;
       jQuery('#list').saveRow(id, checkSave);
   }
   function checkSave(result) {
       if (result.responseText.toLowerCase() == 'success') {
           changeActionState('save', rowid);
           refreshGrid();
       }
   }

Thanks,
Imdadhusen
  Permalink  
Comments
saralak1986 at 16-Nov-11 2:42am
   
hi how to do inline edit using jqgris

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web04 | 2.8.150428.2 | Last Updated 13 Jul 2011
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100