Conditional CSS in each card

[desmond]

I would like to format each card uniquely, i.e. having unique css for each card's header, content. Is there a way to do so? For example, cards that have "underline=true" in the database will have texts with underline decoration.

[Revanth Krishnan]

Hi Desmond, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “I would like to format each card uniquely, i.e. having unique CSS for each card's header, content. Is there a way to do so? For example, cards that have "underline=true" in the database will have texts with underline decoration.” 

 

Your requirement to format each card uniquely can be achieved by using the card template. We have prepared a sample where based on the data field in the card the class is added which is then styled using CSS. 

 

Code Snippet: 

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

    . . . 

    <KanbanCardSettings HeaderField="Id" ContentField="Summary"> 

        <Template> 

            @{ 

                TasksModel data = (TasksModel)context; 

                <div class="e-card-content"> 

                    <table class="card-template-wrap"> 

                        <tbody> 

                            . . . 

                            <tr class="details @( @data.Underline ? "contentUnderline" : "content")"> 

                                <td class="CardHeader">Summary:</td> 

                                <td>@data.Summary</td> 

                            </tr> 

                        </tbody> 

                    </table> 

                </div> 

            } 

        </Template> 

    </KanbanCardSettings> 

</SfKanban> 

 

<style type="text/css"> 

    .contentUnderline { 

        text-decoration: underline; 

        text-decoration-color: red; 

        text-decoration-style: double; 

    } 

 

    . . . 

</style> 

 

@code { 

    public class TasksModel 

    { 

        public bool Underline { get; set; } 

        public string Id { get; set; } 

        public string Title { get; set; } 

        public string Status { get; set; } 

        public string Summary { get; set; } 

        public string Type { get; set; } 

        public string Priority { get; set; } 

        public string Assignee { get; set; } 

    } 

 

    public List<TasksModel> Tasks = new List<TasksModel>() 

   { 

        new TasksModel { Underline = true, Id = "Task 1", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Assignee = "Nancy Davloio", Type = "Story", Priority = "Low" }, 

        new TasksModel { Underline = true, Id = "Task 2", Title = "BLAZ-29002", Status = "InProgress", Summary = "Improve application performance", Assignee = "Andrew Fuller", Type = "Improvement", Priority = "Normal" }, 

         

    }; 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170324/ze/Kanban_Blazor_App370563094 

 

Card Template Documentation: https://blazor.syncfusion.com/documentation/kanban/cards#template 

 

Please check the above code snippet, documentation, and sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[desmond]

Yes, you are right, thanks for the tip.

[Indrajith Srinivasan]

Hi Desmond,

Welcome,

Please get back to us if you need any further assistance.

Regards,
Indrajith