How to display multiple ContentField in Kanban Control ?

[chandradev]

Hi Team,

Could you please give me the syntax for displaying multiple ContentField  on  Kanban Control ?

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
<KanbanColumns>
    <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
    <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
    <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing"})"></KanbanColumn>
    <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
</KanbanColumns>
<KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
<KanbanSwimlaneSettings KeyField="Assignee"></KanbanSwimlaneSettings>
</SfKanban>

in the below code if I have bind multiple field on  below line, how can we do ?

<KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>

[Revanth Krishnan]

Hi Chandradev, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “How to display multiple ContentField in Kanban component. Could you please give me the syntax for displaying multiple ContentField  on  Kanban Control ?” 

 

This can be achieved by using the Template of the KanbanCardSettings, where the multiple data can be displayed in the Kanban cards. We have prepared a sample based on the shared code snippet for your reference, 

 

Code Snippet: 

 

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

    <Template> 

        @{ 

            TasksModel data = (TasksModel)context; 

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

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

                    <tbody> 

                        <tr> 

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

                            <td>@data.Id</td> 

                        </tr> 

                        <tr> 

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

                            <td>@data.Title</td> 

                        </tr> 

                        <tr> 

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

                            <td>@data.Status</td> 

                        </tr> 

                        <tr> 

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

                            <td>@data.Summary</td> 

                        </tr> 

                    </tbody> 

                </table> 

            </div> 

        } 

    </Template> 

</KanbanCardSettings> 

  

Sample: https://www.syncfusion.com/downloads/support/forum/164046/ze/Kanban_Blazor_App2045710542 

 

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

 

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

 

Regards, 

Revanth 

[chandradev]

Thanks for giving me exact code.

[Revanth Krishnan]

Hi Chandradev, 

 

Thanks for the update. 

 

We are glad that the provided solution satisfied your requirement, please let us know if you need any further assistance. 

 

Regards, 

Revanth