Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
JQGrid textarea column with Rich Text editing
17/08/2014
15:16
Avatar
lalitmj
Member
Members
Forum Posts: 10
Member Since:
17/08/2014
sp_UserOfflineSmall Offline

I was recently working on setting inline editing for my SharePoint list and wanted to enable rich text editing for one of my list columns. I've utilized JQGrid inline editing and every thing is working fine except i couldn't enable RTE (rich text editing) for my textarea column. I tried integrating CKEditor MiceEdit and other controls to convert my textarea with RTE functionality but nothing seems to work. 

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!

18/08/2014
11:41
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

 

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:

 

{ "name":"ShipAddress",
  "index":"ShipAddress",
  "edittype":"custom",
  "editoptions":{
      "custom_element":function( value  }, options) {
        var elm = $('<textarea></textarea>');
        elm.val( value );
        // give the editor time to initialize
        setTimeout( function() {
            tinymce.init({selector: "textarea#ShipAddress"});
        }, 100);
        return elm;
      },
      "custom_value":function( element, oper, gridval) {
            if(oper === 'get') {
                return tinymce.get('ShipAddress').getContent({format: 'row'});
            } else if( oper === 'set') {
                if(tinymce.get('ShipAddress')) {
                    tinymce.get('ShipAddress').setContent( gridval );
                }
            }
      }

 

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

 

Regards

     

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

19/08/2014
06:00
Avatar
lalitmj
Member
Members
Forum Posts: 10
Member Since:
17/08/2014
sp_UserOfflineSmall Offline

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

19/08/2014
06:38
Avatar
lalitmj
Member
Members
Forum Posts: 10
Member Since:
17/08/2014
sp_UserOfflineSmall Offline

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

20/08/2014
12:47
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

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

 

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

20/08/2014
13:02
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

 

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:

 

{ "name":"ShipAddress",
  "index":"ShipAddress",
  "edittype":"custom",
  "editoptions":{
      "custom_element":function( value  }, options) {
        var elm = $('<textarea></textarea>');
        elm.val( value );
        // give the editor time to initialize
        setTimeout( function() {
            tinymce.init({selector: "textarea#" + options.id});
        }, 100);
        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 );
                }
            }
      }

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

20/08/2014
13:28
Avatar
lalitmj
Member
Members
Forum Posts: 10
Member Since:
17/08/2014
sp_UserOfflineSmall Offline

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!

20/08/2014
13:32
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

 

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

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

20/08/2014
13:42
Avatar
lalitmj
Member
Members
Forum Posts: 10
Member Since:
17/08/2014
sp_UserOfflineSmall Offline

Another question i have is regarding the saved behavior of JQGrid. I want to show the saved values refreshed on the last row when he clicks another row which is not happening right now.

28/08/2014
02:11
Avatar
lalitmj
Member
Members
Forum Posts: 10
Member Since:
17/08/2014
sp_UserOfflineSmall Offline

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

29/08/2014
11:03
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

HEllo,

 

Your questions are related to tinymce editor.

I think you should ask these questions in another forum

 

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

03/09/2014
07:08
Avatar
lalitmj
Member
Members
Forum Posts: 10
Member Since:
17/08/2014
sp_UserOfflineSmall Offline

 thanks a bunch in advance for your inputs.

08/09/2014
15:34
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

You are wellcome!

 

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

Forum Timezone: Europe/Sofia

Most Users Ever Online: 496

Currently Online:
29 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information