Set Background Color of Nth Table Column

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

Set Background Color of Nth Table Column

Tom Saddul
Tried to tweak Custom Row Renderer but can't find a way to check column index so I thought this might be a wrong solution.

Can you give me an example of how to set the background color of Nth table column?  For example, I want the background color "red" for the 3rd column.
Reply | Threaded
Open this post in threaded view
|

Re: Set Background Color of Nth Table Column

Mustafa Sak-5
Hi Tom,

I would extend default row renderer overwrite getRowClass.

See http://tinyurl.com/kxq8xxx

Gruß
Mustafa Sak

Applications & Integration
1&1 Internet AG | Ernst-Frey-Straße 10 | 76135 Karlsruhe | Germany


-----Ursprüngliche Nachricht-----
Von: Tom Saddul [mailto:[hidden email]]
Gesendet: Montag, 16. März 2015 16:45
An: [hidden email]
Betreff: [qooxdoo-devel] Set Background Color of Nth Table Column

Tried to tweak Custom Row Renderer but can't find a way to check column index so I thought this might be a wrong solution.

Can you give me an example of how to set the background color of Nth table column?  For example, I want the background color "red" for the 3rd column.



--
View this message in context: http://qooxdoo.678.n2.nabble.com/Set-Background-Color-of-Nth-Table-Column-tp7586948.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
Dive into the World of Parallel Programming The Go Parallel Website, sponsored by Intel and developed in partnership with Slashdot Media, is your hub for all things parallel software development, from weekly thought leadership blogs to news, videos, case studies, tutorials and more. Take a look and join the conversation now. http://goparallel.sourceforge.net/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
Dive into the World of Parallel Programming The Go Parallel Website, sponsored
by Intel and developed in partnership with Slashdot Media, is your hub for all
things parallel software development, from weekly thought leadership blogs to
news, videos, case studies, tutorials and more. Take a look and join the
conversation now. http://goparallel.sourceforge.net/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Set Background Color of Nth Table Column

Tom Saddul
This post was updated on .
Thank you for your response.  In the getRowClass

    getRowClass : function(rowInfo)
    {
      var cssClasses = this.base(arguments, rowInfo);
     
      return !(rowInfo.row % 4) ? cssClasses + " red" : cssClasses;
    }

The rowInfo.row property is present, I can't see rowInfo.col in debug which could be easily translated to:

    getRowClass : function(rowInfo)
    {
      var cssClasses = this.base(arguments, rowInfo);
     
      return (rowInfo.col === 4) ? cssClasses + " red" : cssClasses;
    }

Sorry I'm not an HTML/CSS guy.
Reply | Threaded
Open this post in threaded view
|

Re: Set Background Color of Nth Table Column

Mustafa Sak-5

Hi Tom,

the row renderer is just responsible to render the row.

If you want to customize columns extending a cell renderer does the trick.

I am sure you will find many examples in the net. Or just take look on framework cell renderer classes.
 

Gruß
Mustafa Sak

Applications & Integration

1&1 Internet AG | Ernst-Frey-Straße 10 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: [hidden email] | Web: www.1und1.de

Hauptsitz Montabaur, Amtsgericht Montabaur, HRB 6484

Vorstand: Frank Einhellinger, Robert Hoffmann, Markus Huhn, Hans-Henning Kettler, Uwe Lamnek
Aufsichtsratsvorsitzender: Michael Scheeren

Member of United Internet



-------- Ursprüngliche Nachricht --------
Von: Tom Saddul <[hidden email]>
Gesendet: Tuesday, March 17, 2015 07:46 AM
An: [hidden email]
Betreff: Re: [qooxdoo-devel] Set Background Color of Nth Table Column

Thank you for your response.  In the getRowClass

    getRowClass : function(rowInfo)
    {
      var cssClasses = this.base(arguments, rowInfo);
     
      return !(rowInfo.row % 4) ? cssClasses + " red" : cssClasses;
    }

The *rowInfo.row* property is present, I can't see *rowInfo.col* in debug
which could be easily translated to:

    getRowClass : function(rowInfo)
    {
      var cssClasses = this.base(arguments, rowInfo);
     
      return (rowInfo.col === 4) ? cssClasses + " red" : cssClasses;
    }

Sorry I'm not an HTML/CSS guy.



--
View this message in context: http://qooxdoo.678.n2.nabble.com/Set-Background-Color-of-Nth-Table-Column-tp7586948p7586952.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
Dive into the World of Parallel Programming The Go Parallel Website, sponsored
by Intel and developed in partnership with Slashdot Media, is your hub for all
things parallel software development, from weekly thought leadership blogs to
news, videos, case studies, tutorials and more. Take a look and join the
conversation now. http://goparallel.sourceforge.net/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
Dive into the World of Parallel Programming The Go Parallel Website, sponsored
by Intel and developed in partnership with Slashdot Media, is your hub for all
things parallel software development, from weekly thought leadership blogs to
news, videos, case studies, tutorials and more. Take a look and join the
conversation now. http://goparallel.sourceforge.net/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Set Background Color of Nth Table Column

Tom Saddul
This post was updated on .
Thank you!  This has solved it (cellrenderer.png).  I created my custom cell renderer based on qx.ui.table.cellrenderer.Conditional by adding "background-color" in the attributes and modifying the some parameters.  I could have inherited but I can use Javascript.

It would be nice if the original cellrenderer.Conditional itself be improved to also add "background-color" attribute as in the following:

               construct: function (align, color, bkColor, style, weight) {
                    this.base(arguments);

                    this.numericAllowed = ["==", "!=", ">", "<", ">=", "<="];
                    this.betweenAllowed = ["between", "!between"];
                    this.conditions = [];

                    this.__defaultTextAlign = align || "";
                    this.__defaultColor = color || "";
                    this.__defaultBkColor = bkColor || "";
                    this.__defaultFontStyle = style || "";
                    this.__defaultFontWeight = weight || "";
                },

                members:
                {
                    __defaultTextAlign: null,
                    __defaultColor: null,
                    __defaultBkColor: null,
                    __defaultFontStyle: null,
                    __defaultFontWeight: null,


                    /**
                     * Applies the cell styles to the style map.
                     * @param condition {Array} The matched condition
                     * @param style {Map} map of already applied styles.
                     */
                    __applyFormatting: function (condition, style) {
                        if (condition[1] != null) {
                            style["text-align"] = condition[1];
                        }

                        if (condition[2] != null) {
                            style["color"] = condition[2];
                        }

                        if (condition[3] != null) {
                            style[" background-color"] = condition[3];
                        }

                        if (condition[4] != null) {
                            style["font-style"] = condition[4];
                        }

                        if (condition[5] != null) {
                            style["font-weight"] = condition[5];
                        }
                    },

                    addNumericCondition: function (condition, value1, align, color, bkColor, style, weight, target) {
                        var temp = null;

                        if (qx.lang.Array.contains(this.numericAllowed, condition)) {
                            if (value1 != null) {
                                temp = [condition, align, color, bkColor, style, weight, value1, target];
                            }
                        }

                        if (temp != null) {
                            this.conditions.push(temp);
                        } else {
                            throw new Error("Condition not recognized or value is null!");
                        }
                    },

                    addBetweenCondition: function (condition, value1, value2, align, color, bkColor, style, weight, target) {
                        if (qx.lang.Array.contains(this.betweenAllowed, condition)) {
                            if (value1 != null && value2 != null) {
                                var temp = [condition, align, color, bkColor, style, weight, value1, value2, target];
                            }
                        }

                        if (temp != null) {
                            this.conditions.push(temp);
                        } else {
                            throw new Error("Condition not recognized or value1/value2 is null!");
                        }
                    },

                    addRegex: function (regex, align, color, bkColor, style, weight, target) {
                        if (regex != null) {
                            var temp = ["regex", align, color, bkColor, style, weight, regex, target];
                        }

                        if (temp != null) {
                            this.conditions.push(temp);
                        } else {
                            throw new Error("regex cannot be null!");
                        }
                    },


                    _getCellStyle: function (cellInfo) {
                        var tableModel = cellInfo.table.getTableModel();
                        var i;
                        var cond_test;
                        var compareValue;

                        var style =
                            {
                                "text-align": this.__defaultTextAlign,
                                "color": this.__defaultColor,
                                "background-color": this.__defaultBkColor,
                                "font-style": this.__defaultFontStyle,
                                "font-weight": this.__defaultFontWeight
                            };

Reply | Threaded
Open this post in threaded view
|

Re: Set Background Color of Nth Table Column

Larry K Blische
In reply to this post by Tom Saddul
Not quite what you wanted but maybe instructive anyway, I used this in something I wrote a few years ago to alter the background of the cells in a particular table column.

It overrides the _getCellStyle() member function of the qx.ui.table.cellrenderer.Default class:

qx.Class.define('rainmaker.StateCellRenderer',
    {
    extend : qx.ui.table.cellrenderer.Default,

    members :
        {
        // overridden
        _getCellStyle : function(cellInfo)
            {
            var style = this.base(arguments, cellInfo);
            var state = cellInfo.rowData[cellInfo.table.getTableModel().getColumnIndexById('state')];
            return style + ((state == 'on') ? 'color:white; background-color:green;' : '');
            }
        }
    });

In my case the color is based on the value of the cell which is in the 'state' column.

Larry Blische
Larry Blische * Senior Analyst
The Kravis Center for the Performing Arts
701 Okeechobee Boulevard * West Palm Beach, FL 33401 USA
561.651.4379 * mailto:blische@kravis.org
Reply | Threaded
Open this post in threaded view
|

Re: Set Background Color of Nth Table Column

Tom Saddul
Thank you.  This gave me the idea that simply overriding _getCellStyle() can do the trick.
Reply | Threaded
Open this post in threaded view
|

Re: Set Background Color of Nth Table Column

Tom Saddul
In reply to this post by Tom Saddul
Here is now the result of my experimentation of using CellRenderer. class-scheduler.wmv

Thank you qooxdoo team for a very powerful framework!