0

I have two jqGrids on a page. The idea is to display a confirmation dialog when a drop down value is updated and when the user presses enter to save the record both jqGrids get reloaded.

Here's my column model:

{
    key: false, name: 'InterestedValue', index: 'InterestedValue', editable: true,
    sortable: false, formatter: 'select', width: '120px', search: false,
    edittype: 'select',
    editoptions: {
        value: InterestedStatusList,
        //afterSaveCell: function (rowid, cellname, value, iRow, iCol) {
        //    alert("after savecell" + rowid + " cellname= " + cellname);
        //    //$(this).trigger('reloadGrid');
        //},
        successfunc: function (response) {
            alert("success");
            //FLAG = true;
            $(this).trigger('reloadGrid')
            return true;
        }

    }
},

And event,

serializeRowData: function (postdata) {
   var response = JSON.stringify(postdata);
   var s = '';
   $(postdata).each(function (index, data) {
       //s += '<option value="' + index + '">' + data + '</option>';
       $.each(data, function (k, v) {
           if(k=="InterestedValue")
            s += v;//'<option value="' + k + '">' + v + '</option>';
       });

   });
   //
   if (s == "2_1") {
       if (confirm('Are you sure you want to deactivate this record? ')) {
           // do things if OK
           return postdata;
       }
       else
           return false;
   }
   return postdata;
},

I am able to get the edit action method called with data after the serializeRowData event. But I can't figure out how to trigger the reload of the Grids after the update is done successfully. So please tell me which event gets fired after the serializeRowData. I tried the successfunc in the column as well, but this is fired as soon as the I click the row and it goes into Edit-mode.

Oleg
  • 220,925
  • 34
  • 403
  • 798
A.K
  • 505
  • 1
  • 12
  • 30

2 Answers2

0

You can consider to display the confirmation dialog if the user choose the "dangerous" value and before the value will be sent to the server. To implement this you can use

{
    name: 'InterestedValue', ...
    edittype: 'select',
    editoptions: {
        value: InterestedStatusList,
        dataEvents: [
            {
                type: 'change',
                fn: function () {
                    var newValue = $(this).val();
                    if (newValue === "2_1" && !confirm('Are you sure you want to deactivate this record?')) {
                        $(this).val("2_0"); // set some another value
                    }
                }
            }
        ]
    }
}

Alternatively you can use beforeEditRow callback of inline editing, but the exact place where you should specify it depends on how you use inline editing (direct call of editRow, usage of inlineNav, usage of formatter: "actions" or some other) and from the version of jqGrid (till the version 4.7), free jqGrid (see readme and wiki) or Guriddo jqGrid JS which you use.

Oleg
  • 220,925
  • 34
  • 403
  • 798
0

Thanks for the details @Oleg.

The serializeRowData method I posted earlier was able to put up the JavaScript confirmation dialog for the user before deactivation of the record. Here's how I managed to reload the jqGrids after the update was done on the server.

I used the editRow

$(gridId).jqGrid("editRow", 'kkk', true, '', '', '', '', reload)

And in the reload method, I triggered the reloading of jqGrids as

function reload(rowid, result) {
var s = '';
var o = false;
var postdata = JSON.stringify(result);
$(jQuery.parseJSON(postdata)).each(function (index, data) {
    $.each(data, function (k, v) {
        s += k + ":" + v + " --- ";
        if (k == "responseText")
        {
            if (v.indexOf("Deactivated") != -1)
                o = true;
        }
        s += k + ":" + v + " --- ";
    });

});

if (o ==true) {
    //reload both grids
    $("#grid1").trigger("reloadGrid");
    $("#grid2").trigger("reloadGrid");
}  }

Hope that helps.

A.K
  • 505
  • 1
  • 12
  • 30