Kanban: Toggle column fails with Async initialization

[François]

Hi,

I'm using Blazor Webassembly with .Net6 (6.0.10) and Syncfusion 20.3.0.56.

It seems that the toggle column doesn’t work when OnInitializedAsync is used. If I toggle a column, its title is toggled but not its content.

I attached an example and a print screen.

Do you accept it as an issue?

The problem can be avoided if the Kanban is displayed after initialization is complete. See “_initDone” boolean in my example.

Best regards,

François

Attachment: Toggle_columns_failed_ef408894.zip

[Vinitha Jeyakumar]

Hi François,

Currently, we are validating your reported query. we will update you the further details on or before 18^th November 2022.

Regards,

Vinitha

[Vinitha Jeyakumar]

Hi François,

We have validated the reported issue from our end and found that the reported issue occurs due to the delay added in the OnInitializedAsync function. During that delay, the Kanban scripts are not properly rendered and hence the issue occurred. 

So we suggest you to initiate the Kanban columns once the Kanban board is fully rendered like the way you have tried using a Boolean variable to resolve the issue.

Regards,

Vinitha

[François]

Hi Vinitha,

Thanks for your answer.

I already knew how to avoid the issue with a boolean. In fact, I was writing to the Syncfusion Team to inform you of the issue so that you can correct it. Are you going to open a support ticket for this issue? Do you want me to open one?

Best regards,

François

[Vinitha Jeyakumar]

Hi François,

We want to let you know that this is not an issue with Kanban control. The reported issue happened due to the delay added in the OnInitializedAsync function and during that delay, the Kanban scripts will take time to get complete render.

Regards,

Vinitha

[Francois]

Hi Vinitha,

On your answer, you wrote “We have validated the reported issue from our end and found that the reported issue occurs due to the delay added in the OnInitializedAsync function. During that delay, the Kanban scripts are not properly rendered and hence the issue occurred.”

It gave me the impression that the component rendering is not working properly. Shouldn’t the component render again if a column is added (even if it is after a delay)?

Regards,

François

[Vinitha Jeyakumar]

Hi François,

By default, the Kanban board will get rendered based on the columns given. In your use case scenario, the Kanban columns have defined as empty on initial rendering which caused the improper script loading in Kanban control while using with ConfigureAwait(false) before adding the columns.

So we suggest you to define a empty column on initial rendering and then dynamically add the columns in the OnInitializedAsync method to resolve the issue,

Code snippet:

<SfKanban TValue=Orders KeyField="Employee.Country" Query=_query AllowDragAndDrop=false>

      .... 

      .... 

    </SfKanban>

@code {

    

    protected override async Task OnInitializedAsync()

    {

        await Task.Delay(1000).ConfigureAwait(false);

        _kanbanColumns= new List<KanbanColumn>();

        _kanbanColumns.Add(new()

            {

                HeaderText = "UK",

                KeyField = new() { "UK" }

            });

        _kanbanColumns.Add(new()

            {

                HeaderText = "USA",

                KeyField = new() { "USA" }

            });

    }

     private List<KanbanColumn> _kanbanColumns = new List<KanbanColumn>()

    {

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

    };

}

Regards,

Vinitha

[François]

Hi Vinitha,

Thanks for your explanations. I accepted your first answer.

Regards,

François

[Vinitha Jeyakumar]

Hi François,

We are glad to assist you

Regards,

Vinitha