I would like to check any validation dose fire or not before clicking on button

Question

I have JQGrid with in-place editing enabled. Database field First Name (required) Last Name (not required)

following are the scenario:

1. grid with Edit and Delete button.
2. clicking on Edit then (Edit, Delete will be hide) and (Save,Cancel will be display).
3. I have cleared value from FirstName textbox.
4. I pressed submit button then it will display message like "First Name: Field is required" this is correct
5. but behind this my button (Save, Cancel will replace with Edit,Delete this is wrong)

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 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');
        }
    }

score 0 · Answer 1 · edited May 23 '17 at 12:19

The inline editing (not in-place editing) method like editRow has much more as one parameter. The additional parameters allows you to make different actions in case of successful and not successful data validation or the data saving.

Which version of jqGrid you use? Why you continue to use such parameter as imgpath? Why you not use just formatter:'actions'? It seems to do exactly what you need. Additionally it is unclear from your code how and when the inplaceSave will be called.

Moreover the code of editFmatter which you posted as the solution in one of your previous question seems wrong. It can work for some spatial contain of the Edit column which you send from the server and which you not included in the text of your questions. The custom formatter has cell common text as the input. The expression $(el) in the code function editFmatter(el, cellval, opts) {...;$(el).html(finalHTML) has no sense. The parameters of the custom formatter are (cellvalue, options, rowObject). Probably you want to use custom editing and not custom formatting, but it should be used in another way: edittype:'custom', editoptions:{custom_element: editFmatter,....

imdadhusen · Accepted Answer · 2011-07-14T07:27:24.163

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

Here is the updated code.

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

Thanks,
Imdadhusen

I would like to check any validation dose fire or not before clicking on button

2 Answers2