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

element.setStyle()

Expand Messages
  • 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 1 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 2 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 3 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 4 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 5 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 6 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 7 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.