Card background color
Is it possible to change only the background color of one card? If yes, how can I do that?
Is it possible to change only the background color of one card? If yes, how can I do that?
All cards have the same class (card). How can I give each card a different class in row_rendered?
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?
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.
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;
}
}