thanks a bunch in advance for your inputs.

Hi,

I tried integrating the tinymce RTE on the JQGrid for inline editing. I’m currently an issue of refresh when the user click on textarea column (it first loads the textarea and then shows the tinymce RTE control) which is very annoying for our users. I was wondering if i can bind the tnymce RTE control in some other event or change some other options to make it seamless.

I also want to customize the options on tinymce control to only few buttons like bold, italic, underline etc. I was wondering if that is possible.

I’m attaching my code for reference and thanks a bunch in advance for your inputs.

function buildgrid() {
        var grid = jQuery(“#Northwinds”);
        var gridData;
        grid.jqGrid({
            url: ‘/sites/cats/_vti_bin/listdata.svc/TSCMaster’,
            datatype: ‘json’,
            sortable: true,
            rownumbers: false,
            jsonReader: {
                root: “d.results”,
                repeatitems: false
            },
               success: function(data){
            var $self = $(this);
                    setTimeout(function () {
                    $self.trigger(“reloadGrid”);
                    }, 50);
        },
        afterSubmit: function () {
                $(this).jqGrid(“setGridParam”, {datatype: ‘json’});
                return [true];
        },
            colNames: [” “, “Script Page”, “Scene #”, “Item Description”, “Comments/Restrictions”,”url”,”etag”],
            colModel: [
        {name: ‘myac’, width:80, fixed:true, sortable:false, resize:false, formatter:’actions’,
            formatoptions:{keys:true}},
        {
                name: ‘ScriptPage’,
                editable: true,
                sortable: true,
                index: ‘ScriptPage’,
            search: false,
                width: 75},
            {
                name: ‘SceneNumber’,
                editable: true,
                sortable: true,
            search: false,
                index: ‘SceneNumber’,
                width: 75},
            {
                name: ‘ItemDescription’,
                editable: true,
                sortable: true,
                index: ‘ItemDescription’,
                width: 300},
        {
            name:’CommentsRestrictions’,
              index:’CommentsRestrictions’,
            editable:true,
            width :600,
                    edittype:’custom’,
            editoptions:{custom_element:function( value , options) {
                var elm = $(‘‘);
                elm.val( value );
                // give the editor time to initialize
                setTimeout( function() {
                    tinymce.init({selector: “textarea#” + options.id
            });
                }, 0);
                return elm;
                  },
                  custom_value:function( element, oper, gridval) {
            var id = element[0].id;
                    if(oper === ‘get’) {
                    return tinymce.get(id).getContent({format: ‘row’});
                    } else if( oper === ‘set’) {
                    if(tinymce.get(id)) {
                        tinymce.get(id).setContent( gridval );
                           }
                        }
              }
            }
              },
                {   
            name: ‘__metadata.uri’,  
            editable: false,
            hidden: true,
            width: 400},
                {   
            name: ‘__metadata.etag’,  
            editable: false,width: 100,
            hidden: true}],
            onSelectRow: function(id) {
 
                    var rowData = $(“#Northwinds”).getRowData(id);
                    var newUrl = rowData;
                    $(this).setGridParam({
                    ‘editurl’: newUrl
                });
                if (id && id !== lastSel) {
                    $(“#Northwinds”).restoreRow(lastSel);
 
                    lastSel = id;
                }
                $(“#Northwinds”).editRow(id, true, null, null);
        
            },
        
        serializeRowData: function(postdata) { //USED ON EDIT
                    var x = JSON.stringify(postdata);
                    return x;
            },
            ajaxRowOptions: { // USED ON EDIT
                    contentType: ‘application/json; charset=utf-8’,
                    datatype: ‘json’,
                    mtype: ‘POST’,
                    async: true,
                beforeSend: function(jqXHR, settings) {
                    grid = $(“#Northwinds”).jqGrid(); // get the selected row
                    this.selectedRow = grid.jqGrid(‘getGridParam’, ‘selrow’); // add the selected row to the ajax object so we can get at in in the callback
                    var etag = grid.jqGrid(‘getCell’, this.selectedRow, ‘__metadata.etag’);
                    jqXHR.setRequestHeader(“X-HTTP-Method”, “MERGE”);
                    jqXHR.setRequestHeader(“If-Match”, etag);
 
                    var postdata = $.parseJSON(settings.data);
                    delete postdata; // dont send operation to the server
                    delete postdata; // dont send operation to the server
                    delete postdata[“__metadata.etag”];
                    delete postdata[“__metadata.uri”];
 
                    settings.data = JSON.stringify(postdata);
 
                },  
        success: function(data, textStatus, jqXHR) {
                    // requery the resource to get the new etag // this is due to a bug in ie that drops all headers associated with an h204
                    var selectedRow = this.selectedRow;
                    $.ajax({
                            beforeSend: function(jqXHR, settings) { // need to pass the selectedRow to the second (nested callback)
                                this.selectedRow = selectedRow;
                        },
                        async: false,
                        contentType: ‘application/json; charset=utf-8’,
                        datatype: ‘json’,
                        url: this.url,
                        success: function(data, textStatus, jqXHR) {
                            var etag = jqXHR.getResponseHeader(“ETag”);
                            $(“#Northwinds”).jqGrid(“setCell”, this.selectedRow, “__metadata.etag”, etag); // update the etag on the selected row
                            }
                    })
          }
                },
        loadComplete: function (data) {
               //setSearchSelect(grid, griddata, ‘Category’, ‘eq’);         
            },
        pager: “#pager”,    
            rowNum: 1000,
        rowList: [10, 50, 100, 500, ‘All’],
        height: ‘auto’,
        loadonce:true,
        reloadAfterSubmit: true,
        viewrecords: true,
        gridview: true, // insert all the data at once (speedy)
        caption: ‘Theatrical Clearance List’
        });

Thanks a lot it did work! i accidentally missed out one change. Is it possible to  alter the behavior or “Enter” for the text area for new line as it is used by my JQGrid for saving contents

Thanks a lot for your help!

Hello,

Thanks for your response, I integrated the code but it seems it is not adding the custom element of type textarea to the JQGrid.

Do you think i might be missing anything in terms of required code?

Thanks in advance