Hi,
I want to apply different colors for each cell in each Kanban Swimlane.
For example, the top swimlane will contains only Red cards
the second will contain only orange,
and the last will contain only yellow.
Picture below for demonstration:
How do I achieve this?
Thank y
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await jsRuntime.InvokeAsync<object>("accessDOMElement");
}
}
} |
<script>
function accessDOMElement() {
var elem = document.getElementsByClassName("e-content-cells e-drag e-drop e-droppable");
for (var i = 0; i < elem.length; i++) {
if (i < 4) {
elem[i].style.border = "5px solid red";
}
else if (i > 3 && i < 8) {
elem[i].style.border = "5px solid orange";
}
else if (i > 7 && i < 12) {
elem[i].style.border = "5px solid pink";
}
else if (i > 11 && i < 16) {
elem[i].style.border = "5px solid yellow";
}
else {
elem[i].style.border = "5px solid moccasin";
}
}
}
</script> |
Hi,
Thank you for your help.
However, this does not fully satisfy the condition for keeping each swimlane their own colors.
For example, if the colors for each swimlane were:
- "Andrew Fuller" = red
- "Janet Leverling" = orange
- "Margaret hamilt" = pink
- "Nancy Davloio" = yellow
- "Steven Walker" = moccasin
However, if all records with "Assignee = Andrew Fuller" are removed, then the swimlane colors shift down by one:
- "Janet Leverling" = red
- "Margaret hamilt" = orange
- "Nancy Davloio" = pink
- "Steven Walker" = yellow
I want the swimlane colors to be consistent, so Andrew Fuller will have a color red no matter what, Janet Leverling will always be orange, Margaret hamilt is always pink, and so on.
I have attached the modified sample project demonstrating this issue.
<script>
function accessDOMElement() {
var janet = document.querySelectorAll('[data-key="Janet Leverling"]')[0].nextElementSibling;
var margeret = document.querySelectorAll('[data-key="Margaret hamilt"]')[0].nextElementSibling;
var elem1 = janet.getElementsByClassName("e-content-cells e-drag e-drop e-droppable");
var elem2 = margeret.getElementsByClassName("e-content-cells e-drag e-drop e-droppable");
var nancy = document.querySelectorAll('[data-key="Nancy Davloio"]')[0].nextElementSibling;
var elem3 = nancy.getElementsByClassName("e-content-cells e-drag e-drop e-droppable");
var steven = document.querySelectorAll('[data-key="Steven walker"]')[0].nextElementSibling;
var elem4 = steven.getElementsByClassName("e-content-cells e-drag e-drop e-droppable");
for (var i = 0; i < elem1.length; i++) {
elem1[i].style.border = "5px solid red";
}
for (var i = 0; i < elem2.length; i++) {
elem2[i].style.border = "5px solid orange";
}
for (var i = 0; i < elem3.length; i++) {
elem3[i].style.border = "5px solid pink";
}
for (var i = 0; i < elem4.length; i++) {
elem4[i].style.border = "5px solid yellow";
}
}
</script> |