Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] DataTable Cell Editor for HTML-formatted data

Expand Messages
  • Satyam
    I think the Date Editor would be the perfect model for your RTE editor since it uses the Calendar Control, which has quite a complex markup, as its editing
    Message 1 of 9 , Dec 28, 2009
    • 0 Attachment
      I think the Date Editor would be the perfect model for your RTE editor since it uses the Calendar Control, which has quite a complex markup, as its editing control.   You won't need to care much for any formatting since the plain formatter does nothing but insert whatever comes in the record field into the innerHTML of the cell, thus, no formatting is lost.  However, you might have to work a little bit with the default cell styles, thus, formatting would be more of a CSS issue than of code.  Alternatively, you might want to use a ToolTip to show the fully expanded text when the cursor is over a cell.  This will spare you from having cells too big or having scroll bars.  I have an example for that at: http://www.satyam.com.ar/yui/2.6.0/tooltips.html

      Also, remember that you are free to add extra options to the constructor, just like the dropdown, radio or checkbox cell editors do, so you can pass any configuration option from the constructor of the cell editor instance straight to the RTE, plus, you might want to add some of your own such as number of lines or width or whatever.  The RTE won't complain if it gets more configuration options than it needs, just make sure you don't use the same names so as not to confuse one set of options with the other.   Another feature you might want to add is to place the Save button in the toolbar of the RTE.  Drawing the cell editor buttons is a separate method which you may override to use your own way of doing it.

      You might have to work a little with the move method, which positions the cell editor over the cell.  You will probably don't want the RTE to have the same width as the column and, with columns close to the right border, you might want to align the top-right corner of the RTE to the cell.  If you don't give it enough width, the toolbar will flow into the next line and it won't look nice. 

      I think the textarea cell editor needs some reworking, it is not flexible enough in size and location.  There is no need for you to look into that one.  After all, the RTE uses a textarea as its basis so that a user without JavaScript enabled can still do some editing.  That is not your case, if the user has no JS, there won't be any DataTable or cell editor anyway so  you shouldn't concern yourself with sizing your base textarea to use it as such, you should go straight to formatting the RTE and don't care about having a decent textarea.

      There is a non-trivial issue with sizing and positioning.  By the time the cell editor move method is called, the editor is still invisible.  That means that some browsers will refuse to report position or size information about it.   You might have to force it to become visible so you can get proper measurements.  Do use the methods from the Dom utility, otherwise you will go crazy trying to compensate for different ways of measuring things.  Try it out without making it visible, you will probably be fine, but just make a note that this might be an issue if you see something funny happening there.

      Satyam

      El 28/12/2009 14:56, Brian McCullough escribió:
      I am working on converting an application that has a button that brings up an RTE to edit a text field that may ( probably will ) contain HTML-formatted text.  So far, so good.
      
      However, the next step is to convert this into a DataTable where there are a list of these Notes fields, using Cell Editors to edit them.  The issue is that the DataTable formatters and Cell Editors seem to deal only with plain text fields, displaying the HTML tags as well as the "printable" text.
      
      I suspect that I am going to have to manually manipulate both the displayed text and replace the Cell Editor to make this application best show the contents of the fields.  Dav Glass suggests that if I find a way to make the RTE work as a Cell Editor, he would like to see what I come up with.  Has anybody else encountered this sort of issue, or have any suggestions for accomplishing it?
      
      
      Incidentally, I also am having some problems with column widths here.  Setting "width:" in the Column Definitions doesn't seem to have any effect for the columns with the Textarea Cell Editor.  I can add the "resizable" property and change the width manually, but the default width is very small, creating scroll bars for even a short piece of text.
      
      
      Satyam,
      
      I have looked at your DataGrid application, and see how this can help, but it only works with data types that are "known" to the existing Cell Editors, such as plain text fields.  I suspect that if I sort of reverse the "meta_" code, so that I extract the data from the column and somehow pass it to the RTE.  However, the RTE is looking for a "textarea" HTML tag to use, and I don't think that the DataTable is providing that, or is it?  Am I actually talking myself into the solution?
      
      
      Thanks,
      Brian
      
      
      
      
      ------------------------------------
      
      Yahoo! Groups Links
      
      <*> To visit your group on the web, go to:
          http://groups.yahoo.com/group/ydn-javascript/
      
      <*> Your email settings:
          Individual Email | Traditional
      
      <*> To change settings online go to:
          http://groups.yahoo.com/group/ydn-javascript/join
          (Yahoo! ID required)
      
      <*> To change settings via email:
          ydn-javascript-digest@yahoogroups.com 
          ydn-javascript-fullfeatured@yahoogroups.com
      
      <*> To unsubscribe from this group, send an email to:
          ydn-javascript-unsubscribe@yahoogroups.com
      
      <*> Your use of Yahoo! Groups is subject to:
          http://docs.yahoo.com/info/terms/
        
      No virus found in this incoming message. Checked by AVG - www.avg.com Version: 9.0.722 / Virus Database: 270.14.121/2589 - Release Date: 12/27/09 10:18:00
    • Brian McCullough
      On Mon, Dec 28, 2009 at 03:51:08PM +0100, Satyam wrote: Thank you for the long response, Satyam. So far, I have implemented the ToolTip idea, after seeing that
      Message 2 of 9 , Dec 28, 2009
      • 0 Attachment
        On Mon, Dec 28, 2009 at 03:51:08PM +0100, Satyam wrote:

        Thank you for the long response, Satyam.

        So far, I have implemented the ToolTip idea, after seeing that if I removed all formatters from the column definition for the Notes, I was able to see that field properly.

        The next step is to use your suggestion of using the Date Editor to assist me with the RTE part.


        As I work on this, I suspect that I will have more questions.

        Brian
      • Brian McCullough
        ... Satyam ( and anybody else ), As I predicted, I have come up with a question. Following your suggestion, I copied the DateCellEditor code out of
        Message 3 of 9 , Dec 29, 2009
        • 0 Attachment
          On Mon, Dec 28, 2009 at 07:50:16PM -0800, Brian McCullough wrote:
          > On Mon, Dec 28, 2009 at 03:51:08PM +0100, Satyam wrote:
          >
          > The next step is to use your suggestion of using the Date Editor to assist me with the RTE part.

          Satyam ( and anybody else ),

          As I predicted, I have come up with a question.

          Following your suggestion, I copied the DateCellEditor code out of CellEditor.js ( in the API Documentation ), into a file in my own directory-space, and made what seemed to me to be appropriate changes. ( I tried to do nothing major to start with, just get a basic RTE rendered. ) I copied the "shortcut" var definitions from the beginning of the file, and the whole definition of DateCellEditor.


          So I started with:

          widget.DateCellEditor = function(oConfigs) {
          this._sId = "yui-dateceditor" + YAHOO.widget.BaseCellEditor._nCount++;
          widget.DateCellEditor.superclass.constructor.call(this, "date", oConfigs);
          };

          and changed it to:

          widget.RTECellEditor = function(oConfigs) {
          this._sId = "yui-rteceditor" + YAHOO.widget.BaseCellEditor._nCount++;
          widget.RTECellEditor.superclass.constructor.call(this, "rte", oConfigs);
          };


          I also compared the DateCellEditor to the TextareaCellEditor where I was unsure.


          At this point, I am getting an error complaining that "widget.RTECellEditor.superclass" is not defined. Is there something else that I need to copy from the CellEditor.js file that will help to define this, or is it not actually necessary?

          Since both DateCellEditor and TextareaCellEditor use the same construct, I don't think that I have acually mis-spelled anything, and my understanding is that the BaseCellEditor should be the superclass, but I would suspect that the RTECellEditor might need to be known to the BaseCellEditor, or in some other way properly included with that class.

          I do have the line:

          lang.extend(widget.RTECellEditor, BCE, {

          Just after the above, as it is for the other Cell Editors, but that obviously doesn't really do the trick.


          Thanks,
          Brian
        • Satyam
          Are you including this file after including the DataTable source file? Does BCE exist at all? Have you made it an alias of BaseCellEditor? I say this because
          Message 4 of 9 , Dec 29, 2009
          • 0 Attachment
            Are you including this file after including the DataTable source file?  Does BCE exist at all? Have you made it an alias of BaseCellEditor?  I say this because you are using the alias BCE in the extend but not in the constructor.  If you are running it with the debugger to break on all errors, lang.extend should have failed. 

            Also, run JSLint and make sure you don't have any more globals than you should nor that you have any unused variables, that usually indicates some misspelling and possibly a fatal typo.

            Satyam

            El 29/12/2009 20:38, Brian McCullough escribió:
            On Mon, Dec 28, 2009 at 07:50:16PM -0800, Brian McCullough wrote:
              
            On Mon, Dec 28, 2009 at 03:51:08PM +0100, Satyam wrote:
            
            The next step is to use your suggestion of using the Date Editor to assist me with the RTE part.
                
            Satyam ( and anybody else ),
            
            As I predicted, I have come up with a question.
            
            Following your suggestion, I copied the DateCellEditor code out of CellEditor.js ( in the API Documentation ), into a file in my own directory-space, and made what seemed to me to be appropriate changes. ( I tried to do nothing major to start with, just get a basic RTE rendered. )  I copied the "shortcut" var definitions from the beginning of the file, and the whole definition of DateCellEditor.
            
            
            So I started with:
            
            widget.DateCellEditor = function(oConfigs) {
                this._sId = "yui-dateceditor" + YAHOO.widget.BaseCellEditor._nCount++;
                widget.DateCellEditor.superclass.constructor.call(this, "date", oConfigs); 
            };
            
            and changed it to:
            
            widget.RTECellEditor = function(oConfigs) {
            this._sId = "yui-rteceditor" + YAHOO.widget.BaseCellEditor._nCount++;
            widget.RTECellEditor.superclass.constructor.call(this, "rte", oConfigs); 
            };
            
            
            I also compared the DateCellEditor to the TextareaCellEditor where I was unsure.
            
            
            At this point, I am getting an error complaining that "widget.RTECellEditor.superclass" is not defined.  Is there something else that I need to copy from the CellEditor.js file that will help to define this, or is it not actually necessary?
            
            Since both DateCellEditor and TextareaCellEditor use the same construct, I don't think that I have acually mis-spelled anything, and my understanding is that the BaseCellEditor should be the superclass, but I would suspect that the RTECellEditor might need to be known to the BaseCellEditor, or in some other way properly included with that class.
            
            I do have the line:
            
            lang.extend(widget.RTECellEditor, BCE, {
            
            Just after the above, as it is for the other Cell Editors, but that obviously doesn't really do the trick.
            
            
            Thanks,
            Brian
            
            
            
            
            ------------------------------------
            
            Yahoo! Groups Links
            
            <*> To visit your group on the web, go to:
                http://groups.yahoo.com/group/ydn-javascript/
            
            <*> Your email settings:
                Individual Email | Traditional
            
            <*> To change settings online go to:
                http://groups.yahoo.com/group/ydn-javascript/join
                (Yahoo! ID required)
            
            <*> To change settings via email:
                ydn-javascript-digest@yahoogroups.com 
                ydn-javascript-fullfeatured@yahoogroups.com
            
            <*> To unsubscribe from this group, send an email to:
                ydn-javascript-unsubscribe@yahoogroups.com
            
            <*> Your use of Yahoo! Groups is subject to:
                http://docs.yahoo.com/info/terms/
              
            No virus found in this incoming message. Checked by AVG - www.avg.com Version: 9.0.722 / Virus Database: 270.14.123/2592 - Release Date: 12/29/09 08:47:00
          • Brian McCullough
            ... Yes. ... I used the set of shortcut variable definitions that were in CellEditor.js: var lang = YAHOO.lang, util = YAHOO.util, widget = YAHOO.widget,
            Message 5 of 9 , Dec 29, 2009
            • 0 Attachment
              On Tue, Dec 29, 2009 at 09:44:26PM +0100, Satyam wrote:
              > Are you including this file after including the DataTable source file?

              Yes.


              > Does BCE exist at all? Have you made it an alias of BaseCellEditor? I
              > say this because you are using the alias BCE in the extend but not in
              > the constructor.

              I used the set of shortcut variable definitions that were in CellEditor.js:

              var lang = YAHOO.lang,
              util = YAHOO.util,
              widget = YAHOO.widget,
              ua = YAHOO.env.ua,

              Dom = util.Dom,
              Ev = util.Event;

              var BCE = widget.BaseCellEditor;


              > If you are running it with the debugger to break on
              > all errors, lang.extend should have failed.

              Actually, it doesn't seem to be failing any more ( at least, not that way ). I have the DataTable displaying, the ToolTips are displaying, and the Cell Editor box is popping up, but it is definitely not the Rich Text Editor. I know that the constructor is getting called, because I can put a breakpoint in there and have it fire. Getting closer.


              > Also, run JSLint and make sure you don't have any more globals than you
              > should nor that you have any unused variables, that usually indicates
              > some misspelling and possibly a fatal typo.

              I had already run JSLint on the "rtecelleditor.js" file alone, with no errors.




              > Satyam

              Brian
            • Brian McCullough
              Satyam, So near and yet so far. I am now able to do everything that I need to do, up to the point where the Editor window opens. It is a valid RTE window, but
              Message 6 of 9 , Dec 30, 2009
              • 0 Attachment
                Satyam,

                So near and yet so far.

                I am now able to do everything that I need to do, up to the point where the Editor window opens. It is a valid RTE window, but just does not have any content.

                This is understandable, since I don't think that the cell has any content at the point where the Editor is rendered. However, at the point where it is opened and shown to the user, I need to inform the Editor about the content. This is handled in "normal" RTE code by having "editor.setEditorHTML( content of textarea )" in cases where you want to dynamically change the content of the Editor.

                I thought of using showEvent, but found that there are many different showEvents.

                I now have "this.subscribe( "showEvent", function( oArgs ){ rte.setEditorHTML( this.textarea.value ); }); " inside the render() method of the RTECellEditor, but that doesn't seem to work. I am sure that I am missing something obvious, so I would appreciate a kick in the right direction.


                Thank you,
                Brian
              • Satyam
                You should place the code to fill the editor with the value to edit in method resetForm. You might also need to override method focus to set the focus in the
                Message 7 of 9 , Dec 30, 2009
                • 0 Attachment
                  You should place the code to fill the editor with the value to edit in method resetForm.  You might also need to override method focus to set the focus in the editing window of the RTE if it doesn't show there already.

                  RTE is not really my strong point so don't address questions on that to me because I will probably be unable to help you.

                  Satyam

                  El 30/12/2009 20:39, Brian McCullough escribió:
                  Satyam,
                  
                  So near and yet so far.
                  
                  I am now able to do everything that I need to do, up to the point where the Editor window opens.  It is a valid RTE window, but just does not have any content.
                  
                  This is understandable, since I don't think that the cell has any content at the point where the Editor is rendered.  However, at the point where it is opened and shown to the user, I need to inform the Editor about the content.  This is handled in "normal" RTE code by having "editor.setEditorHTML( content of textarea )" in cases where you want to dynamically change the content of the Editor.
                  
                  I thought of using showEvent, but found that there are many different showEvents.
                  
                  I now have "this.subscribe( "showEvent", function( oArgs ){ rte.setEditorHTML( this.textarea.value ); }); " inside the render() method of the RTECellEditor, but that doesn't seem to work.  I am sure that I am missing something obvious, so I would appreciate a kick in the right direction.
                  
                  
                  Thank you,
                  Brian
                  
                  
                  
                  ------------------------------------
                  
                  Yahoo! Groups Links
                  
                  <*> To visit your group on the web, go to:
                      http://groups.yahoo.com/group/ydn-javascript/
                  
                  <*> Your email settings:
                      Individual Email | Traditional
                  
                  <*> To change settings online go to:
                      http://groups.yahoo.com/group/ydn-javascript/join
                      (Yahoo! ID required)
                  
                  <*> To change settings via email:
                      ydn-javascript-digest@yahoogroups.com 
                      ydn-javascript-fullfeatured@yahoogroups.com
                  
                  <*> To unsubscribe from this group, send an email to:
                      ydn-javascript-unsubscribe@yahoogroups.com
                  
                  <*> Your use of Yahoo! Groups is subject to:
                      http://docs.yahoo.com/info/terms/
                    
                  No virus found in this incoming message. Checked by AVG - www.avg.com Version: 9.0.722 / Virus Database: 270.14.123/2594 - Release Date: 12/30/09 08:27:00
                • Brian McCullough
                  ... Thank you. That was exactly the cue that I needed. It Lives! ... Thanks, I will keep that in mind. At the moment, I don t think it is necessary. ... I
                  Message 8 of 9 , Dec 30, 2009
                  • 0 Attachment
                    On Wed, Dec 30, 2009 at 09:24:43PM +0100, Satyam wrote:
                    > You should place the code to fill the editor with the value to edit in
                    > method resetForm.

                    Thank you. That was exactly the cue that I needed. It Lives!


                    > You might also need to override method focus to set
                    > the focus in the editing window of the RTE if it doesn't show there
                    > already.

                    Thanks, I will keep that in mind. At the moment, I don't think it is necessary.



                    > RTE is not really my strong point so don't address questions on that to
                    > me because I will probably be unable to help you.

                    I understand that. That's why I was focusing on how to use the Cell Editor.



                    > Satyam


                    Brian
                  Your message has been successfully submitted and would be delivered to recipients shortly.