jQuery Grid Plugin - jqGrid

I have spent the day trying to get TinyMce to work and found some more things that may be of intrest.

An event like onShow would also help in the base system, Mainly for the view dialog as there is no hooks that I could find to modify the data that is shown.

Using the method outlined in the previous post I added an onShow event after the viewModal() functions are called. This was helpful so I could run jquery on elements in the view dialog.

A major issue I found is, that the view and edit dialog boxes are two seperate dialog instances but they have duplicate id values on the data. This creates havoc when you are looking for a form element by id and receive a td element because you viewed the data before editing the data.

However I added to this line in the view code (around line 870:grid.fomedit.js):

$(”td:eq(”+(cp-1)+”)”,trdata[0]).append(”<span style='position:absolute;float:left'>”+tmp+”</span>”).attr(”id”, 'v_' + nm);

Unfortunatly this stops the elements updating when using the next and previous buttons.

So adding the following into fillData() makes it work:

              function fillData(rowid,obj){
                var nm, hc,cnt=0,tmp, opt;
                $('#'+rowid+' td',obj.grid.bDiv).each( function(i) {
                    nm = 'v_' + obj.p.colModel[i].name;
                    ...

Just keep in mind it can be bad prictice to have multiple id values in any web app.

So at the end of it all, to implement TinyMCE I added an array of fields that I want the editor to attach to:

var mceList = ['comment'];

Then in the edit/add options objects I put somthing like this:

{
          width: 600,
          reloadAfterSubmit: false,
          closeAfterEdit: true,
          afterShowForm: function (form) {
              jQuery('#pData, #nData').hide();
              // Initalise MCE fields
              for (y=0; y < mceList.length; y++) {
                  tinyMCE.execCommand('mceAddControl', false, mceList[y]);
              }
          },
          onclickSubmit : function(eparams) {
              var retarr = {};
              // Grab the MCE editor content for posting
              for (y=0; y < mceList.length; y++) {
                  if (tinyMCE.getInstanceById(mceList[y])) {
                      eval('retarr.' + mceList[y] + ' = tinyMCE.getInstanceById(mceList[y]).getContent()');
                  }
              }
              return retarr;
          },
          onClose: function(sel, o) {  // <– NEW CALL
              // Clean up MCE before hide
              for (y=0; y < mceList.length; y++) {
                if (tinyMCE.getInstanceById(mceList[y])) {
                    tinyMCE.execCommand('mceFocus', false, mceList[y]);                   
                    tinyMCE.execCommand('mceRemoveControl', false, mceList[y]);
                }
              }
          },
          afterSubmit: function (response, postData) {
              return [true, ''];
          }
   
        }, // edit options

With these couple of additions, TinyMCE can be inserted without changing any of its base code. And hopefully if the onClose event is added no changes to the grid codebase would be required either.

Hope this info is useful.

Cheers

Mick

That's fantastic news.

I look forward to the 3.5 release.