jqGrid addRowData does not fire afterInsertRow

Question

I'm upgrading my jqGrid from 4.7.1 to 4.14

This is my script for initializing the grid

jQuery("#detFlex62_1").jqGrid({
    url: root + mod + '/detaillistview',
    datatype: "local",
    colNames:[' ', '<?=lang("users_company_code")?>', '<?=lang("users_company_name")?>', ' ', ' '],
    colModel:[
        {name:'myac', width:50, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true, editbutton : false, delbutton : false, delOptions: {reloadAfterSubmit:false},editOptions: {reloadAfterSubmit:false}}},
        {name:'company_code',index:'company_code', width:100},
        {name:'company_name',index:'company_name', width:100},
        {name:'company_id',index:'company_id', width:100,hidden:true},
        {name:'company_access_id',index:'company_access_id', width:100,hidden:true}
        ],
    width: $('.body').width()-40,
    height: 120,
    pager: '#pagerFlex62_1',
    sortname: 'user_id',
    sortorder: "desc",
    editurl: root + mod + '/detailpost',
    caption:"<?=lang("users_title")?>",
    onSelectRow: function(id){
        activedf = "#detFlex62_1";
    },
    afterInsertRow: function (rowid) {
        var grid = $(this),
        iCol = getColumnIndexByName(grid,'myac'); // 'act' - name of the actions column
        grid.find(">tbody>tr[id=" + rowid + "].jqgrow>td:nth-child(" + (iCol + 1) + ")")
        .each(function() {
            $("<div>",
                {
                    title: "Edit",
                    mouseover: function() {
                        $(this).addClass('ui-state-hover');
                    },
                    mouseout: function() {
                        $(this).removeClass('ui-state-hover');
                    },
                    click: function(e) {
                      df_edit_1($(e.target).closest("tr.jqgrow").attr("id"));
                        /*alert("'Custom' button is clicked in the rowis="+
                              $(e.target).closest("tr.jqgrow").attr("id") +" !");*/
                    }
                }
              ).css({float:"left"})
               .addClass("ui-pg-div ui-inline-edit")
               .append('<span class="ui-icon ui-icon-pencil"></span>')
               .prependTo($(this).children("div"));

            $("<div>",
                {
                    title: "Delete",
                    mouseover: function() {
                        $(this).addClass('ui-state-hover');
                    },
                    mouseout: function() {
                        $(this).removeClass('ui-state-hover');
                    },
                    click: function(e) {
                      df_delete_1($(e.target).closest("tr.jqgrow").attr("id"));
                        /*alert("'Custom' button is clicked in the rowis="+
                              $(e.target).closest("tr.jqgrow").attr("id") +" !");*/
                    }
                }
              ).css({float:"left"})
               .addClass("ui-pg-div ui-inline-edit")
               .append('<span class="ui-icon ui-icon-trash"></span>')
               .prependTo($(this).children("div"));

        });
    }
});

jQuery("#detFlex62_1").jqGrid('navGrid','#pagerFlex62_1',{edit:false,del:false,search:false, addfunc: df_add_1, editfunc: df_edit_1});

And here is where I add new row into the grid

function df_addToJSON_1(form)
{
    var idx = $('input[name=index]',form).val();
    var id = $('input[name=id]',form).val();

    var totalRows = jQuery("#detFlex62_1").jqGrid('getGridParam', 'records');
    var data = {
        company_code: $('input[name=company_code]',form).val(),
        company_name: $('input[name=company_name]',form).val(),
        company_id: $('input[name=company_id]',form).val(),
        company_access_id: $('input[name=company_access_id]',form).val()
    };

    if (idx=='')
    {
        idx = getMaxRowId($('#detFlex62_1'));
        $('#detFlex62_1').jqGrid("addRowData", idx + 1, data, "last");
    }
    else
    {
        $('#detFlex62_1').jqGrid("setRowData", idx, data);
    }

    //pCheckShow();
    return false;
}

The new row is added, but without triggering the afterInsertRow event. Why is this happening? Is there a mistake in my code?

Answer 1

Free jqGrid supports afterAddRow, afterSetRow and afterDelRow callbacks, which will be called at the end of addRowData, setRowData and delRowData methods. The most new callbacks introduced by free jqGrid has one parameter (options, for example), which properties contains additional information. It allows to use only the properties, which one need, without require to insert unneeded first parameters if you need to use only the last parameter of old-style callback. Additionally, the new-style of callback parameters allows easy to extend the options in the future release of free jqGrid.

Thus you can, for example, change afterInsertRow: function (rowid) { to afterAddRow: function (options) { var rowid = options.rowid;

In general I would recommend you to make more changes in your code. What you do inside of afterInsertRow is creating custom action button. Your code is long and slow because jqGrid 4.7 had no simple way to create custom action button. Free jqGrid do supports the feature. I recommend you to read the wiki article, to examine the code of the demo, this one and the demos included in the answer. You will see that creating action buttons is very easy. You will have full control over onClick callback.