Question about styling dojo grid

[igoberman]

Hello, I have a question about styling dojo grid.
I have defined a cell formatter to set some custom cell styles for my grid. The problem is that when selection is made or mouse moves over the row, the selection background is overridden by my custom styles. I want selection or "row mouse over" style to override my custom styles. Is it possible and what is the best way to accomplish it?

I have tried to detect the selected index and not set custom style, but no luck:

        // dojo grid formatter
        function dojoGridFormatter(val, rowIdx, cell) {
            var selectedIndex = dojoGrid.selection ? dojoGrid.selection.selectedIndex : -1;

            if (selectedIndex != rowIdx) {
                cell.customStyles.push('background-color:#ff0000;');
            }
       }

Thanks 

________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[Evan]

It's better to use css class for overriding since it's more intuitive for controlling the priorities, following may be relative when overwriting the row styles:

.{theme} .dojoxGridRow{
     /* my styles */
}

.{theme} .dojoxGridRowOver{
     /* copy the default styles? */
}

or

.{theme} .dojoxGridRowOver .dojoxGridCell{
     /* or use this for a higher matching priority */
}

[igoberman]

Evan, maybe I did not make myself clear. I have tried to put these overrides in a separate file, but thy did not take. It has been a really painfull process changing the deafult styles.
I am trying to add grid lines now without luck. I would think it is a common task, but no luck so far?
 

> Date: Tue, 5 Jul 2011 21:26:21 -0700

> From: [hidden email]
> To: [hidden email]
> Subject: Re: [Dojo-interest] Question about styling dojo grid
>
> It's better to use css class for overriding since it's more intuitive for
> controlling the priorities, following may be relative when overwriting the
> row styles:
>
> .{theme} .dojoxGridRow{
> /* my styles */
> }
>
> .{theme} .dojoxGridRowOver{
> /* copy the default styles? */
> }
>
> or
>
> .{theme} .dojoxGridRowOver .dojoxGridCell{
> /* or use this for a higher matching priority */
> }
>
>
> --
> View this message in context: http://dojo-toolkit.33424.n3.nabble.com/Question-about-styling-dojo-grid-tp3141595p3143455.html
> Sent from the Dojo Toolkit mailing list archive at Nabble.com.
> ________________________________________________________
> Dojotoolkit: http://dojotoolkit.org
> Reference Guide: http://dojotoolkit.org/reference-guide
> API Documentation: http://dojotoolkit.org/api
> Tutorials: http://dojotoolkit.org/documentation
>
> [hidden email]
> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[Karl Tiedt]

For all CSS issues you have to remember highest specificity wins the race.

so if for example (from Evans email - using Claro theme)

.claro .dojoxGridRowOver .dojoxGridCell{
    /* or use this for a higher matching priority */
}

if Grid *already* uses this selector to style .dojoxGridCell you would
have to go 1 level higher and say

.claro .myGridClassAppliedToGridDotDomNode .dojoxGridRowOver .dojoxGridCell {
}



-Karl Tiedt



On Wed, Jul 6, 2011 at 07:01, ilya goberman <[hidden email]> wrote:
> Evan, maybe I did not make myself clear. I have tried to put these overrides
> in a separate file, but thy did not take. It has been a really painfull
> process changing the deafult styles.
> I am trying to add grid lines now without luck. I would think it is a common
> task, but no luck so far?
>
________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[igoberman]

Karl,
Thanks, it was helpful. I think I finally figured out how to add grid lines to the grid. It would be nice to enhance the DataGrid to add a method to hide/ show grid lines.

.claro .myDojoGridClass .dojoxGridCell {
    border-right:1px solid #ACA899;
    border-bottom:1px solid #ACA899;
}

.claro .myDojoGridClass .dojoxGridRowSelected .dojoxGridCell {
    background: #cee6fa;
    border:1px solid transparent;
    border-right:1px solid #ACA899;
    border-bottom:1px solid #ACA899;
}

.claro .myDojoGridClass .dojoxGridRowOver .dojoxGridCell {
    background: #ABD6FF;
    border:1px solid transparent;
    border-right:1px solid #ACA899;
    border-bottom:1px solid #ACA899;
}

> Date: Wed, 6 Jul 2011 10:10:21 -0500

> From: [hidden email]
> To: [hidden email]
> Subject: Re: [Dojo-interest] Question about styling dojo grid
>
> For all CSS issues you have to remember highest specificity wins the race.
>
> so if for example (from Evans email - using Claro theme)
>
> .claro .dojoxGridRowOver .dojoxGridCell{
> /* or use this for a higher matching priority */
> }
>
> if Grid *already* uses this selector to style .dojoxGridCell you would
> have to go 1 level higher and say
>
> .claro .myGridClassAppliedToGridDotDomNode .dojoxGridRowOver .dojoxGridCell {
> }
>
>
>
> -Karl Tiedt
>
>
>
> On Wed, Jul 6, 2011 at 07:01, ilya goberman <[hidden email]> wrote:
> > Evan, maybe I did not make myself clear. I have tried to put these overrides
> > in a separate file, but thy did not take. It has been a really painfull
> > process changing the deafult styles.
> > I am trying to add grid lines now without luck. I would think it is a common
> > task, but no luck so far?
> >
> ________________________________________________________
> Dojotoolkit: http://dojotoolkit.org
> Reference Guide: http://dojotoolkit.org/reference-guide
> API Documentation: http://dojotoolkit.org/api
> Tutorials: http://dojotoolkit.org/documentation
>
> [hidden email]
> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest