Card background color

ASP.NET Maker General Discussion (ASP.NET Maker)
1

Is it possible to change only the background color of one card? If yes, how can I do that?

2

Use the Row_Rendered server event.

3

All cards have the same class (card). How can I give each card a different class in row_rendered?

4

It still hasn’t worked, thought it did. I’ve tried the following codes in row_rendered:This code only changes the color of the sentence inside the card, which I don’t want. I want to change the background of the card after checking the checkbox AgendaHighlightBackgroundColor.

if ((CurrentPageID() == "list") || (CurrentPageID() == "view")) {
if (Convert.ToString(AgendaHighlightBackgroundColor.CurrentValue) == "1") {
AgendaActivity.CssStyle = "background: green";
AgendaActivity.CellCssClass = "custom-card-bg-1";
}
};

I also tried this code, and when I check the checkbox AgendaHighlightBackgroundColor, all cards turn green:

if ((CurrentPageID() == "list") || (CurrentPageID() == "view")) {
if (Convert.ToString(AgendaHighlightBackgroundColor.CurrentValue) == "1") {
// Add JavaScript to change the background color of the card-body div
for (int i = 1; i <= 10; i++) { // Change the range of i to the number of cards you have
string script = $"<script>document.querySelector('#r{i}_Agenda .card').classList.add('custom-red-bg');</script>";
AgendaActivity.ViewValue += script;
}
}
}

Could you let me know how to fix this?

5

Your codes change the CssStyle / CellCssClass of the field cell only. To change the whole cell, try changing CssStyle / CssClass (without Field.) of the row.

6

We have fixed the problem with this code:

if ((CurrentPageID() == "list") || (CurrentPageID() == "view"))
{
    if (Convert.ToString(AgendaHighlightAchtergrondkleur.CurrentValue) == "1")
    {
        // Haal de huidige rij-ID op
        string rowId = "r" + Convert.ToString(RowAttrs["data-rowindex"]) + "_Agenda";
        // Voeg een script toe aan de ViewValue om de achtergrondkleur aan te passen
        string script = $"<script>document.querySelector('#{rowId} .card').classList.add('custom-green-bg');</script>";
        AgendaActiviteit.ViewValue += script;
    }
}