Card background color

aiden · Post by **aiden** » Sat Jun 08, 2024 1:39 am

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

MichaelG · Post by **MichaelG** » Sat Jun 08, 2024 6:40 am

Use the Row_Rendered server event.

aiden · Post by **aiden** » Mon Jun 10, 2024 3:36 pm

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

aiden · Post by **aiden** » Mon Jun 10, 2024 9:57 pm

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?

MichaelG · Post by **MichaelG** » Tue Jun 11, 2024 7:32 am

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.

aiden · Post by **aiden** » Tue Jun 11, 2024 4:24 pm

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;
    }
}