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

Re: [ydn-javascript] element.setStyle()

Expand Messages
  • 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 1 of 12 , Jan 18 8:57 AM
      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 2 of 12 , Jan 18 11:06 AM
        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 3 of 12 , Feb 18, 2010
          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 4 of 12 , Feb 19, 2010
            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 5 of 12 , Feb 25, 2010
              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.