PDA

View Full Version : [CLOSED] GetRowClass and Selection



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



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


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?

{Edit}

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



.x-grid-row-selected


So, assuming that I am adding a class name



.not-updated


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?

Thanks!

PTR

ptrourke
Oct 09, 2013, 5: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.