Applicare selettivamente CSS a una riga in una visualizzazione griglia

Question

Sto cercando un modo per applicare selettivamente una classe CSS a singole righe in un GridView basato su una proprietà dell'elemento associato ai dati.

per esempio:.

L'origine dati di GridView è un elenco generico di SummaryItems e SummaryItem ha una proprietà ShouldHighlight . Quando ShouldHighlight == true il CSS per la riga associata deve essere impostato su highlighted

qualche idea?

Answer 1

molto facile

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        DataRowView drv = e.Row.DataItem as DataRowView;
        if (drv["ShouldHighlight"].ToString().ToLower() == "true")
            e.Row.CssClass = "highlighted";
    }
}

il codice sopra funziona se usi una DataTable come DataSource

cambia in:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        myClass drv = (myClass)e.Row.DataItem;
        if (drv.ShouldHighlight)
            e.Row.CssClass = "highlighted";
    }
}

solo per l'esempio sopra quando si usano generics:

public class myClass
{ 
    public Boolean ShouldHighlight
    { get; set; }
}

se lavori con Generici (Elenco, Dizionario, ecc.)

tieni presente:

e.Row.dataItem

restituisce sempre l'intero oggetto con cui stai popolando la riga, quindi è facile da qui manipolare l'aspetto dei dati nella pagina web.

dovresti usare l'evento RowDataBound che si innescherà dopo che i dati sono stati collegati all'oggetto riga ma non ancora scritto il codice HTML nella pagina, in questo modo puoi controllare il valore ShouldHighlight (ho convertito in una stringa perché non conosci il tipo, puoi cambiarlo se sai che è un valore booleano).

questo codice funziona molto più velocemente del codice megakemp perché non stai creando un oggetto Elenco e popolato con l'intera origine dati per ogni riga ...

P.S. dai uno guarda questo sito web , puoi trovare diversi tutorial per il tuo progetto usando l'oggetto GridView

Answer 2

Una cosa da tenere a mente è che l'impostazione della proprietà Row.CssClass nei gestori di eventi RowCreated o RowDataBound avrà la precedenza su tutti gli stili predefiniti eventualmente applicati a livello di griglia. GridView ti dà un facile accesso agli stili di riga tramite proprietà come:

gvGrid.AlternatingRowStyle.CssClass = ALTROW_CSSCLASS
gvGrid.RowStyle.CssClass = ROW_CSSCLASS

Tuttavia, quando si assegna un valore CssClass a una riga specifica, come richiesto in questo caso, l'assegnazione ha la precedenza su qualsiasi assegnazione di livello superiore a livello di griglia. I compiti non saranno "a cascata". come vorremmo che facessero. Quindi, se si desidera preservare l'assegnazione della classe di livello superiore e sovrapporre anche il proprio, più specifico, quindi è necessario controllare rowState per vedere con che tipo di riga si ha a che fare e concatenare i nomi delle classi di conseguenza

If(item.ShouldHighlight)
 {
    If(e.Row.RowState == DataControlRowState.Alternate)
    {
        e.Row.CssClass = String.Format("{0} {1}", "highlight", ALTROW_CSSCLASS)
    }
    else
    {
        e.Row.CssClass = String.Format("{0} {1}", "highlight", ROW_CSSCLASS)
    }


}