JQgrid: During modal initialization, how would I d

Question

I've got a case when i need to provide a different source id based on if the user is editing or adding. My initial idea was to set a hidden field's value using the beforeShowForm hook, but it seems that the components get initialized before the hook's function is called. Thus I'm unable to determine what model is being created at that stage of initialization.

[A]

//initLoadNoEdit gets called... (At this point I need to know if its going to be an add/edit.)
initLoadNoEdit = function (elem) {
    if ($('#curr_action').val() == 'add') {
        createLoadNumberWidget(elem, "#Date", 'some_url');
    } else {
        createLoadNumberWidget(elem, "#modal_date", 'some_url');
    }
}

var colModel = [
        { name: 'FI_ID', index: 'FI_ID', key: true, editable: false, hidden: true, search: false },     
        { name: 'LILBP_ID', index: 'LILBP_ID', editrules: { required: true }, editoptions: { dataInit: initLoadNoEdit } }
];

//...before this gets called
var addBeforeShowOptions = function (form) {
    $('#curr_action').val('add');
}

//...or this
var editBeforeShowOptions = function (form) {
    $('#curr_action').val('edit');
}

I then tried to add an on click event on the button add/edit click of the grid, i tried .live(), .delegate(), and just a normal .click(). but had no results, the pager renders as follows..

[B]

   <td id="pager_left" align="left">
      <table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table navtable" style="float:left;table-layout:auto;">
       <tbody>
        <tr>
          <td class="ui-pg-button ui-corner-all" title="Add new row" id="add_theGrid">
              <div class="ui-pg-div">
                 <span class="ui-icon ui-icon-plus"></span>
              </div>
          </td>
        </tr>
       </tbody>
      </table>
    </td>

so i tried something like

 $('#add_theGrid').live('click', function () { $('#curr_action').val('add'); }); 

 //and

 $('#pager_left').delegate('#add_theGrid','click', function () { $('#curr_action').val('add'); });

that being said... i don't think that passing a value into a variable is the best way to go about this, as I'm sure there should be a way of me to determine from the modal, what type of modal it is? I just haven't been able to find it yet..

Answer 1

The form's title text should be different between Add and Edit:

jQuery('.ui-jqdialog-title').text()

Then you can check the front of it for "Add" or "Edit". Obviously this is not an ideal solution but it is a simple way to use data that is already on the form. I think it is a bit of a hack, though.

---

A better solution is to use the jqGridAddEditBeforeInitData event that is fired before dataInit. This is one of the new triggered events in 4.3.2. Documentation is a bit sparse but if you look at the code in grid.formedit.js you can see that a frmoper parameter is passed which indicates whether the form is in "add" or "edit" mode (I added line breaks to make it easier to read):

showFrm = $($t).triggerHandler(
            "jqGridAddEditBeforeInitData", 
            [$("#"+frmgr), frmoper]);

According to the jQuery docs for triggerHandler, the second parameter is a list of extra parameters. You can then use bind to add your own event handler:

grid.bind('jqGridAddEditBeforeInitData', function(e, form, oper) {
    alert ("Before dataInit, operation is " + oper);
    // Your code here...
});

Does that help?

Answer 2

If you were using the jqGrid Navigator you could easily do that with the addfunc, editfunc and delfunc options. This way you could assignate a custom function on every actions and for inline editing well you know already it's not add because you are inline.

check : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator

if you need an example please post a jsfiddle i could edit.