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

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

Expand Messages
  • 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 1 of 12 , Jan 15, 2010
      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 2 of 12 , Jan 18, 2010
        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 3 of 12 , Jan 18, 2010
          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 4 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 5 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 6 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.