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

CSS in Datatable for row select not working?

Expand Messages
  • wizard_files3
    Hi. I am trying to override CSS for a row which is selected in Datatable as it is shown in YUI example. Can you please tell me why row is still displayed as
    Message 1 of 12 , Jan 14, 2010
    • 0 Attachment
      Hi. I am trying to override CSS for a row which is selected in Datatable as it is shown in YUI example. Can you please tell me why row is still displayed as default YUI when selected?

      In .CSS file :
      .yui-skin-sam .yui-dt-liner { white-space:nowrap; }
      #myDataTable3 .yui-dt-selected {
      background-color: yellow;
      color: black;
      }
      //p.s. .yui-dt-selected{ackground-color: yellow;} does not work either


      In Javascript:
      this.myDataTable3 = new YAHOO.widget.DataTable("procMarkup", myColumnDefs3, this.myDataSource3,
      {sortedBy:{key:"uuid", dir:YAHOO.widget.DataTable.CLASS_DESC}
      }
      );
      this.myDataTable3.subscribe("rowMouseoverEvent", this.myDataTable3.onEventHighlightRow);
      this.myDataTable3.subscribe("rowMouseoutEvent", this.myDataTable3.onEventUnhighlightRow);
      this.myDataTable3.subscribe("rowClickEvent", this.myDataTable3.onEventSelectRow);
      };
    • Satyam
      See: http://www.satyam.com.ar/yui/widgetstyles.html ... See: http://www.satyam.com.ar/yui/widgetstyles.html El 14/01/2010 19:31, wizard_files3 escribi: Hi. I
      Message 2 of 12 , Jan 14, 2010
      • 0 Attachment
        See:

        http://www.satyam.com.ar/yui/widgetstyles.html

        El 14/01/2010 19:31, wizard_files3 escribió:
        Hi. I am trying to override CSS for a row which is selected in Datatable as it is shown in YUI example. Can you please tell me why row is still displayed as default YUI when selected?
        
        In .CSS file :
        .yui-skin-sam .yui-dt-liner { white-space:nowrap; }
        #myDataTable3 .yui-dt-selected {
            background-color: yellow;
            color: black;
        }
        //p.s. .yui-dt-selected{ackground-color: yellow;} does not work either
        
        
        In Javascript:
                this.myDataTable3 = new YAHOO.widget.DataTable("procMarkup", myColumnDefs3, this.myDataSource3,
                        {sortedBy:{key:"uuid", dir:YAHOO.widget.DataTable.CLASS_DESC}
                            }
                );
                this.myDataTable3.subscribe("rowMouseoverEvent", this.myDataTable3.onEventHighlightRow);
                this.myDataTable3.subscribe("rowMouseoutEvent", this.myDataTable3.onEventUnhighlightRow);
                this.myDataTable3.subscribe("rowClickEvent", this.myDataTable3.onEventSelectRow);
            };
        
        
        
        ------------------------------------
        
        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.725 / Virus Database: 270.14.140/2621 - Release Date: 01/14/10 13:39:00
      • wizard_files3
        Hi Satyam. Thank you for the link - it is definitely useful! It still does not work for me, as I already did steps which you describe in that document. Do you
        Message 3 of 12 , Jan 14, 2010
        • 0 Attachment
          Hi Satyam. Thank you for the link - it is definitely useful!
          It still does not work for me, as I already did steps which you describe in that document.
          Do you have an advise on why that may be true?

          --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
          >
          > See:
          >
          > http://www.satyam.com.ar/yui/widgetstyles.html
          >
          > El 14/01/2010 19:31, wizard_files3 escribió:
          > > Hi. I am trying to override CSS for a row which is selected in Datatable as it is shown in YUI example. Can you please tell me why row is still displayed as default YUI when selected?
          > >
          > > In .CSS file :
          > > .yui-skin-sam .yui-dt-liner { white-space:nowrap; }
          > > #myDataTable3 .yui-dt-selected {
          > > background-color: yellow;
          > > color: black;
          > > }
          > > //p.s. .yui-dt-selected{ackground-color: yellow;} does not work either
          > >
          > >
          > > In Javascript:
          > > this.myDataTable3 = new YAHOO.widget.DataTable("procMarkup", myColumnDefs3, this.myDataSource3,
          > > {sortedBy:{key:"uuid", dir:YAHOO.widget.DataTable.CLASS_DESC}
          > > }
          > > );
          > > this.myDataTable3.subscribe("rowMouseoverEvent", this.myDataTable3.onEventHighlightRow);
          > > this.myDataTable3.subscribe("rowMouseoutEvent", this.myDataTable3.onEventUnhighlightRow);
          > > this.myDataTable3.subscribe("rowClickEvent", this.myDataTable3.onEventSelectRow);
          > > };
          > >
          > >
          > >
          > > ------------------------------------
          > >
          > > Yahoo! Groups Links
          > >
          > >
          > >
          > >
          > >
          > >
          > > No virus found in this incoming message.
          > > Checked by AVG - www.avg.com
          > > Version: 9.0.725 / Virus Database: 270.14.140/2621 - Release Date: 01/14/10 13:39:00
          > >
          > >
          >
        • Satyam
          I would assume this should work: .yui-skin-sam #myDataTable3 tr.yui-dt-selected td, .yui-skin-sam #myDataTable3 tr.yui-dt-selected td.yui-dt-asc, .yui-skin-sam
          Message 4 of 12 , Jan 14, 2010
          • 0 Attachment
            I would assume this should work:

            .yui-skin-sam #myDataTable3 tr.yui-dt-selected td,
            .yui-skin-sam #myDataTable3 tr.yui-dt-selected td.yui-dt-asc,
            .yui-skin-sam
            #myDataTable3 tr.yui-dt-selected td.yui-dt-desc {
                background-color: green;
                color: red;
            }



            El 14/01/2010 22:08, wizard_files3 escribió:
            Hi Satyam. Thank you for the link - it is definitely useful!
            It still does not work for me, as I already did steps which you describe in that document.
            Do you have an advise on why that may be true?
            
            --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
              
            See:
            
            http://www.satyam.com.ar/yui/widgetstyles.html
            
            El 14/01/2010 19:31, wizard_files3 escribió:
                
            Hi. I am trying to override CSS for a row which is selected in Datatable as it is shown in YUI example. Can you please tell me why row is still displayed as default YUI when selected?
            
            In .CSS file :
            .yui-skin-sam .yui-dt-liner { white-space:nowrap; }
            #myDataTable3 .yui-dt-selected {
                 background-color: yellow;
                 color: black;
            }
            //p.s. .yui-dt-selected{ackground-color: yellow;} does not work either
            
            
            In Javascript:
                     this.myDataTable3 = new YAHOO.widget.DataTable("procMarkup", myColumnDefs3, this.myDataSource3,
                             {sortedBy:{key:"uuid", dir:YAHOO.widget.DataTable.CLASS_DESC}
                                 }
                     );
                     this.myDataTable3.subscribe("rowMouseoverEvent", this.myDataTable3.onEventHighlightRow);
                     this.myDataTable3.subscribe("rowMouseoutEvent", this.myDataTable3.onEventUnhighlightRow);
                     this.myDataTable3.subscribe("rowClickEvent", this.myDataTable3.onEventSelectRow);
                 };
            
            
            
            ------------------------------------
            
            Yahoo! Groups Links
            
            
            
            
            
            
            No virus found in this incoming message.
            Checked by AVG - www.avg.com
            Version: 9.0.725 / Virus Database: 270.14.140/2621 - Release Date: 01/14/10 13:39:00
            
            
                  
                
            
            
            
            ------------------------------------
            
            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.725 / Virus Database: 270.14.140/2621 - Release Date: 01/14/10 13:39:00
          • wizard_files3
            Interesting...it still does not work. Here is what I ve tried in my .css file: .yui-skin-sam .yui-dt-liner { white-space:nowrap; } .yui-skin-sam #myDataTable3
            Message 5 of 12 , Jan 14, 2010
            • 0 Attachment
              Interesting...it still does not work. Here is what I've tried in my .css file:
              .yui-skin-sam .yui-dt-liner { white-space:nowrap; }
              .yui-skin-sam #myDataTable3 tr.yui-dt-selected td,
              .yui-skin-sam #myDataTable3 tr.yui-dt-selected td.yui-dt-asc,
              .yui-skin-sam #myDataTable3 tr.yui-dt-selected td.yui-dt-desc {
              background-color: green;
              color: red;
              }

              and plain
              .yui-skin-sam #myDataTable3 tr.yui-dt-selected td.yui-dt-desc {
              background-color: green;
              color: red;
              }


              --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
              >
              > I would assume this should work:
              >
              > .yui-skin-sam #myDataTable3 tr.yui-dt-selected td,
              > .yui-skin-sam #myDataTable3 tr.yui-dt-selected td.yui-dt-asc,
              > .yui-skin-sam #myDataTable3 tr.yui-dt-selected td.yui-dt-desc {
              > background-color: green;
              > color: red;
              > }
              >
              >
              >
              > El 14/01/2010 22:08, wizard_files3 escribió:
              > > Hi Satyam. Thank you for the link - it is definitely useful!
              > > It still does not work for me, as I already did steps which you describe in that document.
              > > Do you have an advise on why that may be true?
              > >
              > > --- In ydn-javascript@yahoogroups.com, Satyam<satyam@> wrote:
              > >
              > >> See:
              > >>
              > >> http://www.satyam.com.ar/yui/widgetstyles.html
              > >>
              > >> El 14/01/2010 19:31, wizard_files3 escribió:
              > >>
              > >>> Hi. I am trying to override CSS for a row which is selected in Datatable as it is shown in YUI example. Can you please tell me why row is still displayed as default YUI when selected?
              > >>>
              > >>> In .CSS file :
              > >>> .yui-skin-sam .yui-dt-liner { white-space:nowrap; }
              > >>> #myDataTable3 .yui-dt-selected {
              > >>> background-color: yellow;
              > >>> color: black;
              > >>> }
              > >>> //p.s. .yui-dt-selected{ackground-color: yellow;} does not work either
              > >>>
              > >>>
              > >>> In Javascript:
              > >>> this.myDataTable3 = new YAHOO.widget.DataTable("procMarkup", myColumnDefs3, this.myDataSource3,
              > >>> {sortedBy:{key:"uuid", dir:YAHOO.widget.DataTable.CLASS_DESC}
              > >>> }
              > >>> );
              > >>> this.myDataTable3.subscribe("rowMouseoverEvent", this.myDataTable3.onEventHighlightRow);
              > >>> this.myDataTable3.subscribe("rowMouseoutEvent", this.myDataTable3.onEventUnhighlightRow);
              > >>> this.myDataTable3.subscribe("rowClickEvent", this.myDataTable3.onEventSelectRow);
              > >>> };
              > >>>
              > >>>
              > >>>
              > >>> ------------------------------------
              > >>>
              > >>> Yahoo! Groups Links
              > >>>
              > >>>
              > >>>
              > >>>
              > >>>
              > >>>
              > >>> No virus found in this incoming message.
              > >>> Checked by AVG - www.avg.com
              > >>> Version: 9.0.725 / Virus Database: 270.14.140/2621 - Release Date: 01/14/10 13:39:00
              > >>>
              > >>>
              > >>>
              > >>
              > >
              > >
              > >
              > > ------------------------------------
              > >
              > > Yahoo! Groups Links
              > >
              > >
              > >
              > >
              > >
              > >
              > > No virus found in this incoming message.
              > > Checked by AVG - www.avg.com
              > > Version: 9.0.725 / Virus Database: 270.14.140/2621 - Release Date: 01/14/10 13:39:00
              > >
              > >
              >
            • Eric Cire
              Hi Group, I need to set the background color, text color, bold, italics of a specific YUI dataTable cell using Element.setStyle(). When I do the following, all
              Message 6 of 12 , Jan 15, 2010
              • 0 Attachment
                Hi Group,

                I need to set the background color, text color, bold, italics of a specific YUI dataTable cell using Element.setStyle(). When I do the following, all work except the foreground color/text color... any suggestions?

                for each record:
                      // determine which column/cell I need
                      var cellAccessor = tableRow.getElementsByClassName( 'yui-dt-col-' + columnName );
                     
                      // create new YAHOO element for that specific cell
                      var cell = new YAHOO.util.Element( cellAccessor );
                       
                      // do the coloring and bold/italics
                      cell.setStyle( 'backgroundColor', 'blue');    // works
                      cell.setStyle( 'textColor', 'red');                   // does NOT work
                      cell.setStyle( 'fontWeight', 'bold');               // works
                      cell.setStyle( 'fontStyle', 'italic');                  // works

                I have also tried using foregroundColor instead of textColor, same thing - does not work.

                Thanks!

              • Satyam
                There is no textColor or foregroundColor property so that simply will not work, YUI or not YUI. You don t create an instance of Element just to set a few
                Message 7 of 12 , Jan 15, 2010
                • 0 Attachment
                  There is no textColor or foregroundColor property so that simply will not work, YUI or not YUI.

                  You don't create an instance of Element just to set a few properties on a series of elements, the methods on the DOM utility can do that very easily and faster.

                  If you want to set a whole column to a particular color, you don't set it on each individual cell.  You already know that all cells in a column share a classname made of yui-dt-col- plus the column name.  Simply define a CSS style for that column.  Otherwise, you can assign an additional className to a column which you can use to assign attributes.

                  If not all rows should have that column colored, use a cell formatter to assign a coloring class name for each cell.

                  El 15/01/2010 15:54, Eric Cire escribió:
                  Hi Group,

                  I need to set the background color, text color, bold, italics of a specific YUI dataTable cell using Element.setStyle(). When I do the following, all work except the foreground color/text color... any suggestions?

                  for each record:
                        // determine which column/cell I need
                        var cellAccessor = tableRow.getElementsByClassName( 'yui-dt-col-' + columnName );
                       
                        // create new YAHOO element for that specific cell
                        var cell = new YAHOO.util.Element( cellAccessor );
                         
                        // do the coloring and bold/italics
                        cell.setStyle( 'backgroundColor', 'blue');    // works
                        cell.setStyle( 'textColor', 'red');                   // does NOT work
                        cell.setStyle( 'fontWeight', 'bold');               // works
                        cell.setStyle( 'fontStyle', 'italic');                  // works

                  I have also tried using foregroundColor instead of textColor, same thing - does not work.

                  Thanks!

                  No virus found in this incoming message. Checked by AVG - www.avg.com Version: 9.0.725 / Virus Database: 270.14.141/2622 - Release Date: 01/14/10 20:35:00
                • Eric Cire
                  I can not use CSS because I am basing the colors off of values stored in a DB and I do not have CSS variables. Before I was using this: elTr.style.color =
                  Message 8 of 12 , Jan 18, 2010
                  • 0 Attachment
                    I can not use CSS because I am basing the colors off of values stored in a DB and I do not have CSS variables. Before I was using this: elTr.style.color = "yellow"; and it works - sets text color to yellow for each row.

                    I create a YAHOO element TH (table header) and wanted to do something simliar, but not albe to. What are my options, without using CSS, to color text in in headers? It seems a bit surprising that I can set font weight (bold) and style (italics) but not text color.

                    What do you suggest?

                    Thank you.



                    From: Satyam <satyam@...>
                    To: ydn-javascript@yahoogroups.com
                    Sent: Fri, January 15, 2010 3:28:45 PM
                    Subject: Re: [ydn-javascript] element.setStyle()

                     

                    There is no textColor or foregroundColor property so that simply will not work, YUI or not YUI.

                    You don't create an instance of Element just to set a few properties on a series of elements, the methods on the DOM utility can do that very easily and faster.

                    If you want to set a whole column to a particular color, you don't set it on each individual cell.  You already know that all cells in a column share a classname made of yui-dt-col- plus the column name.  Simply define a CSS style for that column.  Otherwise, you can assign an additional className to a column which you can use to assign attributes.

                    If not all rows should have that column colored, use a cell formatter to assign a coloring class name for each cell.

                    El 15/01/2010 15:54, Eric Cire escribió:

                    Hi Group,

                    I need to set the background color, text color, bold, italics of a specific YUI dataTable cell using Element.setStyle( ). When I do the following, all work except the foreground color/text color... any suggestions?

                    for each record:
                          // determine which column/cell I need
                          var cellAccessor = tableRow.getElement sByClassName( 'yui-dt-col- ' + columnName );
                         
                          // create new YAHOO element for that specific cell
                          var cell = new YAHOO.util.Element( cellAccessor );
                           
                          // do the coloring and bold/italics
                          cell.setStyle( 'backgroundColor' , 'blue');    // works
                          cell.setStyle( 'textColor', 'red');                   // does NOT work
                          cell.setStyle( 'fontWeight' , 'bold');               // works
                          cell.setStyle( 'fontStyle', 'italic');                  // works

                    I have also tried using foregroundColor instead of textColor, same thing - does not work.

                    Thanks!

                    No virus found in this incoming message. Checked by AVG - www.avg.com
                    Version: 9.0.725 / Virus Database: 270.14.141/2622 - Release Date: 01/14/10 20:35:00


                  • Dav Glass
                    There is no CSS property called textColor, it s color just like the code snippet you just provided: elTr.style.color = yellow ; cell.setStyle( color ,
                    Message 9 of 12 , Jan 18, 2010
                    • 0 Attachment
                      There is no CSS property called textColor, it's "color" just like the code snippet you just provided:

                      elTr.style.color = "yellow";

                      cell.setStyle( 'color', 'red');


                      --
                      Dav Glass
                      davglass@...
                      blog.davglass.com


                      + Windows: n. - The most successful computer virus, ever. +
                      + A computer without a Microsoft operating system is like a dog
                         without bricks tied to its head +
                      + A Microsoft Certified Systems Engineer is to computing what a
                        McDonalds Certified Food Specialist is to fine cuisine  +


                      On Mon, Jan 18, 2010 at 8:57 AM, Eric Cire <codedude11@...> wrote:
                       

                      I can not use CSS because I am basing the colors off of values stored in a DB and I do not have CSS variables. Before I was using this: elTr.style.color = "yellow"; and it works - sets text color to yellow for each row.

                      I create a YAHOO element TH (table header) and wanted to do something simliar, but not albe to. What are my options, without using CSS, to color text in in headers? It seems a bit surprising that I can set font weight (bold) and style (italics) but not text color.

                      What do you suggest?

                      Thank you.



                      From: Satyam <satyam@...>
                      To: ydn-javascript@yahoogroups.com
                      Sent: Fri, January 15, 2010 3:28:45 PM
                      Subject: Re: [ydn-javascript] element.setStyle()

                       

                      There is no textColor or foregroundColor property so that simply will not work, YUI or not YUI.

                      You don't create an instance of Element just to set a few properties on a series of elements, the methods on the DOM utility can do that very easily and faster.

                      If you want to set a whole column to a particular color, you don't set it on each individual cell.  You already know that all cells in a column share a classname made of yui-dt-col- plus the column name.  Simply define a CSS style for that column.  Otherwise, you can assign an additional className to a column which you can use to assign attributes.

                      If not all rows should have that column colored, use a cell formatter to assign a coloring class name for each cell.

                      El 15/01/2010 15:54, Eric Cire escribió:

                      Hi Group,

                      I need to set the background color, text color, bold, italics of a specific YUI dataTable cell using Element.setStyle( ). When I do the following, all work except the foreground color/text color... any suggestions?

                      for each record:
                            // determine which column/cell I need
                            var cellAccessor = tableRow.getElement sByClassName( 'yui-dt-col- ' + columnName );

                           
                            // create new YAHOO element for that specific cell
                            var cell = new YAHOO.util.Element( cellAccessor );
                             
                            // do the coloring and bold/italics
                            cell.setStyle( 'backgroundColor' , 'blue');    // works
                            cell.setStyle( 'textColor', 'red');                   // does NOT work
                            cell.setStyle( 'fontWeight' , 'bold');               // works
                            cell.setStyle( 'fontStyle', 'italic');                  // works

                      I have also tried using foregroundColor instead of textColor, same thing - does not work.

                      Thanks!

                      No virus found in this incoming message. Checked by AVG - www.avg.com
                      Version: 9.0.725 / Virus Database: 270.14.141/2622 - Release Date: 01/14/10 20:35:00



                    • Eric Cire
                      Hi Group, I am creating a DataTable and I need to add a ContextMenu to a header, not the body of the table. I have a table contextMenu working fine, but not
                      Message 10 of 12 , Feb 18, 2010
                      • 0 Attachment
                        Hi Group,

                        I am creating a DataTable and I need to add a ContextMenu to a header, not the body of the table. I have a table contextMenu working fine, but not sure how to link it to the header. Any ideas? The code is below.

                        Using YUI 2.7.0.

                        Thank you !

                        Code:

                            var onContextMenuClick = function( p_sType, p_aArgs ){
                                    var task = p_aArgs[1];
                                    if(task) {
                                       
                                        switch(task.index) {
                                            case 0: ExportFile(); return;
                                            case 1: printTable(); return;
                                            case 2: alert("You clicked for a message. This is a message.");
                                        }
                                    }
                                }
                               
                                // Function to add Menu controls.
                                function registerMenus(){
                               
                                    YAHOO.util.Event.onContentReady(self.containerDiv, function () {
                               
                                        var contextMenu = new YAHOO.widget.ContextMenu("contextmenu",{trigger:self.dataTable.getTbodyEl()});
                                        contextMenu.addItem("Export File");
                                        contextMenu.addItem("Print Page");
                                        contextMenu.addItem("Click for message!");
                                        contextMenu.render(self.containerDiv);
                                        contextMenu.clickEvent.subscribe(onContextMenuClick, self.dataTable);
                               
                                    });
                                }

                      • Matt
                        Hi Eric, In your context menu config you ve got trigger: self.dataTable.getTbodyEl() which will attach it to the body of the table. Replace with trigger:
                        Message 11 of 12 , Feb 19, 2010
                        • 0 Attachment
                          Hi Eric,

                          In your context menu config you've got
                          trigger: self.dataTable.getTbodyEl()
                          which will attach it to the body of the table. Replace with
                          trigger: self.dataTable.getTheadEl()

                          and it'll attach to the head.

                          I've just done an extension to datatable to do exactly this, it's at
                          http://github.com/mattparker/Yui-DataTable-extension---column-chooser

                          if you want to take a look.

                          Matt


                          --- In ydn-javascript@yahoogroups.com, Eric Cire <codedude11@...> wrote:
                          >
                          > Hi Group,
                          >
                          > I am creating a DataTable and I need to add a ContextMenu to a header, not the body of the table. I have a table contextMenu working fine, but not sure how to link it to the header. Any ideas? The code is below.
                          >
                          > Using YUI 2.7.0.
                          >
                          > Thank you !
                          >
                          > Code:
                          >
                          > var onContextMenuClick = function( p_sType, p_aArgs ){
                          > var task = p_aArgs[1];
                          > if(task) {
                          >
                          > switch(task.index) {
                          > case 0: ExportFile(); return;
                          > case 1: printTable(); return;
                          > case 2: alert("You clicked for a message. This is a message.");
                          > }
                          > }
                          > }
                          >
                          > // Function to add Menu controls.
                          > function registerMenus(){
                          >
                          > YAHOO.util.Event.onContentReady(self.containerDiv, function () {
                          >
                          > var contextMenu = new YAHOO.widget.ContextMenu("contextmenu",{trigger:self.dataTable.getTbodyEl()});
                          > contextMenu.addItem("Export File");
                          > contextMenu.addItem("Print Page");
                          > contextMenu.addItem("Click for message!");
                          > contextMenu.render(self.containerDiv);
                          > contextMenu.clickEvent.subscribe(onContextMenuClick, self.dataTable);
                          >
                          > });
                          > }
                          >
                        • Eric Cire
                          Hi Group, Is there a way to alert the column name of a DataTable column I am in when I right click and bring up a ContextMenu? I want to have different context
                          Message 12 of 12 , Feb 25, 2010
                          • 0 Attachment
                            Hi Group,

                            Is there a way to alert the column name of a DataTable column I am in when I right click and bring up a ContextMenu? I want to have different context menus based on which column I am in, and was not able to get it working.

                            I am using YUI 2.7.0 and the code I am working on is below.

                            Thank you.

                            Code:

                                function registerBodyMenus(ColumnDefs){

                                        YAHOO.util.Event.onContentReady(self.containerDiv, function () {

                                            var bodyContextMenu = new YAHOO.widget.ContextMenu("bodycontextmenu", {
                                                trigger: self.dataTable.getTbodyEl()
                                            });

                                            bodyContextMenu.addItem("Click To Get Column Name");
                                            bodyContextMenu.render( self.containerDiv );
                                            alert(ColumnDefs);  // Gives me array [object Object]... for each column I have
                                            bodyContextMenu.clickEvent.subscribe( onBodyMenuClick, self.dataTable );

                                        });
                                    }

                                    var onBodyMenuClick = function( p_sType, p_aArgs, ColumnDefs ){
                                        var task = p_aArgs[1];
                                        if( task ) {
                                           
                                            switch( task.index ) {
                                                case 0:
                                                    alert(ColumnDefs);  // Gives me: DataTable instance yui-dt0
                                                    alert(ColumnDefs.getKey());  // Does not alert
                                                    return;
                                            }
                                        }
                                    }

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