Kanban Swimlane Cell Colors

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


3 Replies

VJ Vinitha Jeyakumar Syncfusion Team September 23, 2021 03:23 PM UTC

Hi Kenney, 
 
 
Greetings from Syncfusion support 
 
 
We have validated your query “I want to apply different colors for each cell in each Kanban Swimlane 
 
Your requirement can be achieved by dynamically applying styles to the swimlane cells using the class name and which can be done using jsInterop in OnAfterRenderAsync method. Please check the below code, 
 
Code snippet: 
Index.razor 
@code { 
    protected override async Task OnAfterRenderAsync(bool firstRender) 
    { 
        if (firstRender) 
        { 
            await jsRuntime.InvokeAsync<object>("accessDOMElement"); 
        } 
    } 
} 
 
Host.csHtml 
<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> 
 
 
Please check the above sample and code snippet and let us know if it satisfies your requirement. 
 
Regards, 
Vinitha 



KP Kenney Phan September 23, 2021 05:33 PM UTC

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.


Attachment: SfSpinner_OnInit1675393321_bcf38ccb.zip


VJ Vinitha Jeyakumar Syncfusion Team September 24, 2021 03:27 PM UTC

Hi Kenney, 
 
 
Good day to you 
 
 
We have further validated your query “I want the swimlane colors to be consistent 
 
Your requirement to get consistent colors to the swimlane rows can be achieved by getting the element using the attribute name. please check the below code, 
 
Code snippet: 
<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> 
 
 
Please check the sample and code snippet and let us know if it satisfies your requirement. 
 
Regards, 
Vinitha 


Loader.
Up arrow icon