View Full Version : [CLOSED] GetRowClass and Selection

Oct 09, 2013, 4:20 PM
I have a GridPanel with the following selection model and View:

<ext:RowSelectionModel ID="TypeSelectionModel" runat="server" Mode="Multi">
<SelectionChange Fn="TypeSelector.SelectionChange" />
<ext:GridView runat="server" LoadingText="Loading type data" StripeRows="true" TrackOver="true">
<GetRowClass Fn="getRowClass" />

TypeSelector.SelectionChange does not change the CSS class of the row.

Before I added the "GetRowClass" item to the GridView, all selected rows changed color.

getRowClass changes the background color of a row to yellow if it hasn't been updated (if it is marked "not updated").

var getRowClass = function(record) {
var notUpdated = record.get('NotUpdated");
if (notUpdated) {return "not-updated";}

Now, those rows that have a background color of yellow are not highlighted in any way if they are selected. Is there something I can add to the GridView to ensure that selected rows are highlighted a different shade of yellow from unhighlighted rows?


Looking at it carefully, I get that it has something to do with the CSS .x- class selectors, e.g.,


So, assuming that I am adding a class name


in my getRowClass function if the NotUpdated field value is true, and that I have added the class

.not-updated .x-grid-cell, .not-updated .x-grid-rowwrap-div
background-color: #FFFDD8 !important;

to my style sheet, what class selectors would I need to add background-color styling information to for selected rows and hovered rows in a gridpanel?



Oct 09, 2013, 6:52 PM
With some guidance from Chris (including a pointer to one of his Ext.NET 1.0 forum postings), a little work with the "Inspect Element" feature in the Chrome debugger, and a little remedial reading on CSS class selectors, I figured this out:

.not-updated .x-grid-cell, .is-updated .x-grid-rowwrap.div
{ background-color: #FFFDD8 !important;}

.not-updated.x-grid-row-selected .x-grid-cell
{ background-color: #FFFDD8 !important;}

.not-updated.x-grid-row-over .x-grid-cell
{ background-color: #D8FFFD !important;}

The key is to make sure that two classes that are assigned to the same element do NOT have a space between them -
.not-updated.x-grid-row-selected, NOT
.not-updated .x-grid-row-selected . Need to update my CSS skills some more.

Thanks, please mark CLOSED.