jQuery Grid Plugin - jqGrid

/**
 * we want to use CKEDITOR, then we need to replace it field before form edit shown
 */
function ab_afterShowForm(ids)
{
    if( CKEDITOR.instances.keterangan )
    {
        try {
            CKEDITOR.instances.keterangan.destroy();
        } catch(e) {
            CKEDITOR.remove( 'keterangan' );
        }
        //CKEDITOR.instances.keterangan = null;
    }
    CKEDITOR.replace( 'keterangan',
    {
        height: 80,
        toolbar:
        [
            ['Bold','Italic','Underline','Strike','-','Subscript','Superscript']
        ],
        removePlugins : 'maximize,resize,scayt'
    });
    // JQGrid
    // we need to get selected row in case currently we are in Edit Mode
    selID = $('#catdnd').getGridParam('selrow'); // get selected row
    // I don't know how to get the current mode is, in Editing or Add new?
    // then let's find out if
    //navigational buttons are hidden for both of it and selID == null <– Add mode ^0^
    if( !($('a#pData').is(':hidden') || $('a#nData').is(':hidden') && selID==null))
    { // then it must be edit?
        va = $('#catdnd').getRowData(selID);
        CKEDITOR.instances.keterangan.setData( va['keterangan'] );
    }
};

/**
 * CKEDITOR didn't automaticaly replace our 'keterangan' value then it need to set manually
 */
function ab_beforeSubmit(data)
{
    data['keterangan'] = CKEDITOR.instances.keterangan.getData();
    return [true];
};
/**
 * What if currently in edit mode and user click navigational button?
 */
function ab_afterclickPgButtons(whichbutton, formid, rowid)
{
    //$('#catdnd').getRowData(rowid);
    va = $('#catdnd').getRowData(rowid);
    CKEDITOR.instances.keterangan.setData( va['keterangan'] );
    //return [true];
}

[ snif ... snif ... ]
$(jqg_ID).jqGrid({
    [ snif ... snif ... ]
        colModel:
        [
            [ snif ... snif ... ],
            {name:'keterangan',
            editable:true,
            edittype:"textarea",
            editoptions:{size:80,rows:"2",cols:"10"},
            editrules:{edithidden:true}},
            [ snif ... snif ... ]
        ],
    [ snif .. snif ... ]
}).navGrid('#pagerdnd',
    {edit:true,add:true,del:true},
    {height:350, width:731,reloadAfterSubmit:false,
        afterSubmit: your_after_submit_edit,
        afterclickPgButtons: ab_afterclickPgButtons,
        beforeSubmit: ab_beforeSubmit,
        afterShowForm: ab_afterShowForm
    }, // update data
    {height:350, width:731,reloadAfterSubmit:false,
        afterSubmit: your_after_submit_add,
        beforeSubmit: ab_beforeSubmit,
        afterShowForm: ab_afterShowForm
    }, // insert data
    {height:120, width:300,reloadAfterSubmit:false,
        afterSubmit: your_after_submit_delete
    } // delete data
);
[ snif ... snif ... ]