jQuery Grid Plugin - jqGrid

Hi,

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

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 = $('<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'
        });

 thanks a bunch in advance for your inputs.