jQuery Grid Plugin - jqGrid - Topic: Integrating CKEditor and JqGrid http://www.trirand.com/blog/?page_id=393/discussion/integrating-ckeditor-and-jqgrid Simple:Press Version 5.7.5.3 wang19851121 on Integrating CKEditor and JqGrid http://www.trirand.com/blog/?page_id=393/discussion/integrating-ckeditor-and-jqgrid#p29555 Discussion http://www.trirand.com/blog/?page_id=393/discussion/integrating-ckeditor-and-jqgrid#p29555 Hello,

Thank you very much for this code.

Show error msg  "The editor instance "xxx" is already attached to the provided element." , when i used ckeditor in ckeditor v4.2 .

But  i used this code in ckeditor v3.5.3 , it's OK.

Armstrong

]]> Fri, 27 Sep 2013 05:39:05 +0300 apostolix on Integrating CKEditor and JqGrid http://www.trirand.com/blog/?page_id=393/discussion/integrating-ckeditor-and-jqgrid#p28352 Discussion http://www.trirand.com/blog/?page_id=393/discussion/integrating-ckeditor-and-jqgrid#p28352 Can someone please provide a full example of this code because I am a little confused about how to integrate this code in my grid script!

Thank you

]]> Thu, 28 Feb 2013 19:40:08 +0200 tony on Integrating CKEditor and JqGrid http://www.trirand.com/blog/?page_id=393/discussion/integrating-ckeditor-and-jqgrid#p19177 Discussion http://www.trirand.com/blog/?page_id=393/discussion/integrating-ckeditor-and-jqgrid#p19177 Hello,

Thank you very much for this code. I hope it will be a usefull for a lot of people.

Kind Regards

Tony

]]> Tue, 17 Aug 2010 23:15:03 +0300 tonier on Integrating CKEditor and JqGrid http://www.trirand.com/blog/?page_id=393/discussion/integrating-ckeditor-and-jqgrid#p18972 Discussion http://www.trirand.com/blog/?page_id=393/discussion/integrating-ckeditor-and-jqgrid#p18972 Last night (GMT+7) I have tried to load CKEditor as the WYSIWYG editor when I need to add or editing data with form editing features of JqGrid. Maybe someone out there can learn from what I have learnt that night, at least, you do not need to fell headache Embarassed as much as I do (I am newbie with less experiences with JqGrid Cool).

NB: I assume the field name that need to edit with CKEditor is 'keterangan'

/**
 * 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];
}

Then like commonly rules, attach that function into our JqGrid …

[ 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 ... ]

That's it Cool

(My apologies for bad English)

]]> Thu, 05 Aug 2010 07:04:18 +0300