You are wellcome!

 

Regards

 thanks a bunch in advance for your inputs.

 

Your questions are related to tinymce editor.

I think you should ask these questions in another forum

 

Regards

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 = $('<textarea rows=4 cols=100></textarea>');
                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['__metadata.uri'];
                    $(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['oper']; // dont send operation to the server
                    delete postdata['id']; // 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'
        });

 

Your problem is here:

editoptions:{custom_element:function( value , options) {
var elm = $('<textarea rows=10 cols=100></textarea>');
elm.val( value );
// give the editor time to initialize
setTimeout( function() {
tinymce.init({selector: "textarea#CommentsRestrictions"});
}, 100);

 

Please look all my code carfully.

Change this to

editoptions:{custom_element:function( value , options) {
var elm = $('<textarea rows=10 cols=100></textarea>');
elm.val( value );
// give the editor time to initialize
setTimeout( function() {
tinymce.init({selector: "textarea#" + options.id});
}, 100);

 

Regards

Thanks a lot for your help!

 

I see where is the problem. - the id of editable cell is not the same as in form edit.

Below is the modified code, which works for me:

Regards

Did you have included the tinymce javascrip files. I'm going to test this.

 

Regards

I was missing editable:true hence it didn't show the text area editable, but now it showing up. However i still don't see TinyMice edit tool bar on my inline editing on JQGrid. It is just showing like normal text area 

Your feedback is appreciated.

 

Thanks

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

 

We have successfully use tinymce with custom element and custom value function.

 

Here is a fragment which work fine in form edit. Just try it in inline edit:

 

Try it and let me know if this work in inline edit.

 

Regards

     

I was wondering if JQGrid supports or can integrate RTE functionality while using Inline editing so would appreciate any help in regards to the functinality.

 

Thanks in advance for your feedback!