View Full Version : Need to Remove Row Highlighting on Select

9 May 2007, 6:53 AM
I understand that the .x-grid-row-selected td style is responsible for setting the color and background color of the row on select. While I can override the style, I was hoping to avoid changing the style at all on the select event. Any ideas?

9 May 2007, 7:58 AM
You can override onRowSelect or onCellSelect (undocumented private) methods of grid modelling your custom methods per original code.

This way you can do it selective grid-per-grid not for all grids globally as with overriding style.

9 May 2007, 9:51 AM
If you just want to affect the selected row styling for a single grid, add a CSS entry x-grid-row-selected that's qualified with the grid id.

9 May 2007, 10:19 AM
Thanks for your responses. The behavior that I seek is straightforward (I hope). Namely, when selected, a row's style should be unaffected (I do not want the default row color and background color to change). The default CSS uses alternate background colors for even and odd rows. If I add a CSS entry for x-grid-row-selected, then I am not sure how to specify the default row color and background color as it may be an even or odd row. In effect, I suspect I'm looking for the equivalent of removing the x-grid-row-selected CSS for this grid (if this is even possible).

I am using the grid mainly as a glorified table listing, taking advantage of the fantastic column header sorting, toolbar navigation, et cetera. However, row selection does not provide any meaningful use in this particular application of the grid.

9 May 2007, 12:29 PM
There are a couple things you can try.
1) You can add a css entry to stop the color change when you select a row. Probably need to override all the x-grid-row-selected and x-grid-cell-selected entries with {}

2) You can also add stripeRows:false and trackMouseOver:false to your grid config to turn off striping and color change on mouseover

10 May 2007, 7:05 AM
Thanks Tim. I added the following entries to my jsp:

.x-grid-row-selected span, .x-grid-row-selected b, .x-grid-row-selected div, .x-grid-row-selected strong, .x-grid-row-selected i{}
.x-grid-locked .x-grid-row-selected td {}
.x-grid-row-selected .x-grid-cell-text {}

Unfortunately, no dice. Not sure if I missed an entry (using ext-all.css and y-theme-vista.css from ext 1.0). If I remove these CSS entries from ext-all and y-theme-vista, the desired effect is achieved. In this application, all grids should behave this way so it's not a terrible solution, just not that elegant (not a fan of changing any core ext js or css).

Thanks again for your time!

10 May 2007, 7:42 AM
Regarding the suggestion made by jsakalos, I tried extending the GridView using the following code:

Ext.SpmiGridView = function(config){
Ext.SpmiGridView.superclass.constructor.call(this, config);

Ext.extend(Ext.SpmiGridView, Ext.grid.GridView, {
onRowSelect : function(rowIndex) {
onRowDeselect : function(rowIndex){

And then passing to the Grid constructor:

var grid = new Ext.grid.Grid('page-grid', {
The: Ext.SpmiGridView,
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),

Not sure if I missed something here, but I'm not seeing the alerts noted above in the overridden methods... It behaves as if I haven't changed the GridView.

10 May 2007, 8:17 AM
You're css overrides should be in your main page after ext-all.css and the theme css (if any). If you're trying to pull css entries via an ajax request to another jsp, it's not going to work.

Look at the rendered HTM and CSS tab in Firebug - you'll see whether your overrides got picked up. Firebug displays them in order of precedence from top down as you click on any html element. You'll be able to tell if an override occurred b/c the original entry will have a strike-thru.