Dynamically add columns sample

[Devinitely]

Hi,

I believe the Blazor Kanban control has been updated to allow adding columns dynamically at runtime? If this is possible, would you please be able to provide a sample demonstrating this?

Many thanks!

[Gunasekar Kuppusamy]

Hi Claire,

Greetings from Syncfusion support.

Yes, you can add the Kanban Columns dynamically using the AddColumnAsync public method. We have prepared a sample for your reference.

Code snippets:

<button class="e-btn e-outline" @onclick="@addColumn">AddColumnbutton>

<br />

<SfKanban @ref="kanbanObj" KeyField="Status" DataSource="Tasks">

<KanbanColumns>

@foreach (ColumnModel item in columnData)

{

<KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField" AllowToggle=true IsExpanded=true>

KanbanColumn>}

KanbanColumns>

<KanbanCardSettings ShowHeader=true HeaderField="Id" ContentField="Summary" SelectionType="@SelectionType.Multiple">KanbanCardSettings>

SfKanban>

@code {

SfKanban<KanbanDataModel> kanbanObj;

private List<KanbanDataModel> Tasks = new KanbanDataModel().GetTasks();

private List<ColumnModel> columnData = new List<ColumnModel>()

{

new ColumnModel(){ HeaderText= "Backlog", KeyField= new List<string>(){"Open" } },

new ColumnModel(){ HeaderText= "In Progress", KeyField= new List<string>(){"InProgress" } },

new ColumnModel(){ HeaderText= "Testing", KeyField= new List<string>(){"Testing" } },

new ColumnModel(){ HeaderText= "Done", KeyField= new List<string>(){"Close" } }

};

public async Task addColumn()

{

await this.kanbanObj.AddColumnAsync(new ColumnModel() { HeaderText = "Review", KeyField = new List<string>() { "Review" } }, 1);

}

}

Sample: https://www.syncfusion.com/downloads/support/forum/168884/ze/Kanban_Blazor_App1971817695

Please check the sample and let us know if the sample helps,

Regards,

Gunasekar

[Dave Beland]

The provided code snippet above is full of typos and should be corrected. As well, formatting the code would make it much easier to read and understand.

[Vinitha Jeyakumar]

Hi Dave Beland,

We would like to inform you that the AddColumn method is deprecated and will no longer be used from our release V18.3.35. Hereafter, use the property binding to add column dynamically like below,

Please refer to the release notes below,

https://blazor.syncfusion.com/documentation/release-notes/18.3.35?type=all#kanban

Code snippet:

  <SfKanban KeyField="Status" DataSource="@Tasks">

        <KanbanColumns>

            @foreach (ColumnModel item in columnData)

            {

<KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField" AllowAdding="true"></KanbanColumn>

}

        </KanbanColumns>

    

    </SfKanban>

 private List<ColumnModel> columnData = new List<ColumnModel>() {

       ....

           .....

    };

Refer to the sample code added in the below documentation for more reference,

https://blazor.syncfusion.com/documentation/kanban/data-binding#expandoobject-binding

Regards,

Vinitha