Dynamically generated e-card.footer CSS background-image

[Jeff Baxter]

I'm able to get the example working from
https://blazor.syncfusion.com/documentation/kanban/cards#custom-class

However, this requires the program to know the url to the background-image for each user ahead of time.  My program will be querying the image URLs on page load.

Is there a way to pass the KanbanCardSettings a custom footer CSS that can be dynamically created at runtime? Rather than being something static in a .css file like:

.e-kanban .e-card .e-card-footer .e-card-footer-css.e-robert {
        background-image: url(https://ej2.syncfusion.com/demos/src/kanban/images/Robert%20King.png);
    }

[Vinitha Jeyakumar]

Hi Jeff Baxter,

Your requirement to dynamically assign the image URL to the footer CSS field can be achieved by using the JsInterop in the OnAfterRenderAsync function like below,

code snippet:

Index.razor

 <SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">

    <KanbanEvents TValue="TasksModel" Created ="created"></KanbanEvents>

    <KanbanColumns>

         ....

           ......

    </KanbanColumns>

    <KanbanCardSettings HeaderField="Id" ContentField="Summary" FooterCssField="ClassName"></KanbanCardSettings>

</SfKanban>

protected override async Task OnAfterRenderAsync(bool firstRender)

{

    if (firstRender)

    {

        await jsRuntime.InvokeAsync<object>("accessDOMElement");

    }

}

Host.cshtml:

 function accessDOMElement() {    

     

     document.getElementsByClassName("e-nancy")[0].style.backgroundImage = "url(https://ej2.syncfusion.com/demos/src/kanban/images/Nancy%20Davloio.png)";

     document.getElementsByClassName("e-andrew")[0].style.backgroundImage = "url(https://ej2.syncfusion.com/demos/src/kanban/images/Andrew%20Fuller.png)";

     document.getElementsByClassName("e-janet")[0].style.backgroundImage = "url(https://ej2.syncfusion.com/demos/src/kanban/images/Janet%20Leverling.png)";

     document.getElementsByClassName("e-steven")[0].style.backgroundImage = "url(https://ej2.syncfusion.com/demos/src/kanban/images/Steven%20walker.png)";

     

 }

Regards,

Vinitha