Kanban columns with remote data not working

Hi,

I need to use Kanban control with remote data for cards as well as for columns.  However, I am not able to initiatize the data from the OnInitializedAsync method.  Only way is as per the sample on your website ie: to populate the column data upon variable initiatlization.  If I set the columndata in the  OnInitializedAsync, I simply get nothing showing.  Given this, I can't see how I could get the data (using a WASM).

Thanks for your help,

ma


<SfKanban KeyField="Phase" TValue="InitiativeCheckListTemplate" >
    <SfDataManager Url="api/checklisttemplate" Adaptor="@Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>
    <KanbanColumns>
        @foreach (Syncfusion.Blazor.Kanban.ColumnModel item in columnData)
        {
            <KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField"></KanbanColumn>
        }
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Id" ContentField="Name"></KanbanCardSettings>
</SfKanban>

     // This one is working
@code {
    private List<Syncfusion.Blazor.Kanban.ColumnModel> columnData = new List<Syncfusion.Blazor.Kanban.ColumnModel>() {
    new Syncfusion.Blazor.Kanban.ColumnModel(){ HeaderText= "To Do", KeyField= new List<string>() { "0" } },
    new Syncfusion.Blazor.Kanban.ColumnModel() { HeaderText = "In Progress", KeyField = new List<string>() { "1" } },
    new Syncfusion.Blazor.Kanban.ColumnModel() { HeaderText = "Testing", KeyField = new List<string>() { "2" } },
    new Syncfusion.Blazor.Kanban.ColumnModel() { HeaderText = "Done", KeyField = new List<string>() { "3" } }};
}

//Not working
@code {
private List<Syncfusion.Blazor.Kanban.ColumnModel> columnData = new List<Syncfusion.Blazor.Kanban.ColumnModel>();

protected override async Task OnInitializedAsync()
    {
        columnData = new List<Syncfusion.Blazor.Kanban.ColumnModel>() {
        new Syncfusion.Blazor.Kanban.ColumnModel(){ HeaderText= "To Do", KeyField= new List<string>() { "0" } },
         new Syncfusion.Blazor.Kanban.ColumnModel() { HeaderText = "In Progress", KeyField = new List<string>() { "1" } },
        new Syncfusion.Blazor.Kanban.ColumnModel() { HeaderText = "Testing", KeyField = new List<string>() { "2" } },
        new Syncfusion.Blazor.Kanban.ColumnModel() { HeaderText = "Done", KeyField = new List<string>() { "3" } } };
    }
}

1 Reply 1 reply marked as answer

BS Balasubramanian Sattanathan Syncfusion Team January 19, 2021 01:13 PM UTC

Hi Martin, 
 
Greetings from Syncfusion Support. 
 
We have validated your reported scenario at our end and let you know that the Kanban columns are rendered properly when we assigned the data for the column in the OnInitializedAsync method. We have prepared a client-side sample(WASM) for your reference that can be downloaded from the below link. 
 
<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks"> 
    <KanbanColumns> 
        @foreach (ColumnModel item in columnData) 
        { 
            <KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField"></KanbanColumn> 
        } 
    </KanbanColumns> 
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings> 
</SfKanban> 
 
private List<ColumnModel> columnData = new List<ColumnModel>(); 
 
protected override async Task OnInitializedAsync() 
{ 
    columnData = new List<ColumnModel>() { 
        new ColumnModel(){ HeaderText= "To Do", 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" } } 
    }; 
} 
 
 
Kindly refer to the above sample and let us know the below details if the problem is not resolved. 
  • Try to upgrade the latest NuGet and check whether the problem is resolved or not.
  • Try to replicate your problem in the above shared sample or
  • Share an issue replication sample with steps that would help us to provide a prompt solution.
 
Regards, 
Balasubramanian S

Marked as answer
Loader.
Up arrow icon