GridView.getRowClass doesn't work with locked columns in 1.0.1

[jheid]

Hi.

I have overwritten the function getRowClass() in ext.grid.GridView which delivers a CSS class with a colored background. This works great except in the case that a column is locked. In that case the background wasn't changed by my class.

I used the following CSS in Firefox

   .x-grid-selected-row {
      background-color: #bdc6e5  !important;
      } 

JOERN

[jack.slocum]

Why is this in the bugs forum? Is the class applied to the row? I would imagine that it is, so it does indeed work as expected.

What you need to do is inspect the element with firebug and see where the background colors are coming from and add your CSS to change those colors.

[Animal]

jheid. If you look at the HTML structure of a Grid with locked columns using Firebug, you'll see that locked columns are actually stored in a seperate table to the regular columns.

So styles applied to the regular Grid will not apply to the locked columns. The locked area is visually different from the unlocked area so that it's obvious to the user what is happening.

[jheid]

Why is this in the bugs forum? Is the class applied to the row? I would imagine that it is, so it does indeed work as expected.

What you need to do is inspect the element with firebug and see where the background colors are coming from and add your CSS to change those colors.

Why it is a bug for me? Well, for me it's a bug if something doesn't work as documented in the doc: "Override this function to apply custom css classes to rows during rendering"

Okay. In my example this isn't the result I should get, shouldn't I?

new Grid (x, {
   view: new Ext.grid.GridView ({
                                  getRowClass : function (record, index) {
                                         return 'x-grid-selected-row';
                                      }
                                  })
  }); 

I've inspected the DOM (thanks for the hint, Jack) and the only difference is the "x-grid-locked" class. Everything else (the CSS classes) are the same as the other row.

So, here's the problem:

.x-grid-locked .x-grid-body td {
    background: #FBFDFF;
    border-right: 1px solid #deecfd;
    border-bottom: 1px solid #deecfd !important;
}
.x-grid-locked .x-grid-row-alt td{
    background: #F5FAFE;
} 

As you can see, the background color is assigned to the column (td), which can't be overwritten. I've eliminated the last "td" token and it seems like this won't change the normal design but let's you overwrite the row class, too.

JOERN

[jack.slocum]

Why it is a bug for me? Well, for me it's a bug if something doesn't work as documented in the doc: "Override this function to apply custom css classes to rows during rendering"

That's why I asked, is the class on the row? If the class is applied to the row, then it's not broken, it's working perfectly. It's called getRowClass not getRowBackgroundColor.

Applying a class with a background color doesn't guarantee the background color will show through on the cells if the cells have their own background color. However, by applying the class you can use CSS to change the background color of cells as well.

.your-row-class td {
    background: yellow !important;
}

If you don't want to use !important you can use a rule with a higher specificity (e.g. an id selector).

[jheid]

Why it is a bug for me? Well, for me it's a bug if something doesn't work as documented in the doc: "Override this function to apply custom css classes to rows during rendering"

That's why I asked, is the class on the row? If the class is applied to the row, then it's not broken, it's working perfectly. It's called getRowClass not getRowBackgroundColor.

Applying a class with a background color doesn't guarantee the background color will show through on the cells if the cells have their own background color. However, by applying the class you can use CSS to change the background color of cells as well.

.your-row-class td {
    background: yellow !important;
}

If you don't want to use !important you can use a rule with a higher specificity (e.g. an id selector).

Okay, thanks, that's a much better solution.