How to collapse swimlanes on initial rendering in a Blazor Kanban Board?

When implementing a Blazor kanban Board in a web application, it’s often necessary to control the initial state of the swimlanes. In some cases, you may want to start with all swimlanes collapsed to provide a cleaner and more manageable view. This article will guide you through the process of collapsing all swimlanes on initial rendering using Blazor’s JsInterop.

Prerequisites

Ensure you have a Blazor project set up with Syncfusion Blazor Kanban component.

Implementation Steps

To achieve the collapse of all swimlanes when the Kanban board is first rendered, follow the steps below:

Define the Kanban component in your Razor file with the necessary configurations:

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanEvents TValue="TasksModel"></KanbanEvents>
    <KanbanColumns>
        <!-- Define your columns here -->
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Id" ContentField="Summary"></KanbanCardSettings>
    <KanbanSwimlaneSettings KeyField="Assignee"></KanbanSwimlaneSettings>
</SfKanban>

Inject the IJSRuntime interface to enable JavaScript interop calls:

@code {
    [Inject]
    IJSRuntime jsRuntime { get; set; }
}

Implement the OnAfterRenderAsync method to invoke a JavaScript function after the component has rendered for the first time:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await jsRuntime.InvokeAsync<object>("collapseSwimlanes");
    }
}

Define the JavaScript function that will collapse all swimlanes. Add this script to your Layout.cshtml or an external JavaScript file:

function collapseSwimlanes() {  
    var swimlaneHeaders = document.querySelectorAll('.e-swimlane-header .e-item-count');
    for (var i = 0; i < swimlaneHeaders.length; i++) {
        swimlaneHeaders[i].querySelector('.e-icons').click();
    }
}

This JavaScript function selects all swimlane headers and simulates a click on the collapse icon for each one.

Additional Notes

Ensure that the JavaScript function name matches the string passed to InvokeAsync in the OnAfterRenderAsync method.
The JavaScript function should be defined in a location that is accessible after the Blazor component has been rendered.

References

By following these steps, you can set up your Kanban board to start with all swimlanes collapsed, providing a streamlined view for users.

Conclusion

I hope you enjoyed learning how to collapse swimlanes on initial rendering in a Blazor Kanban Board.

You can refer to our Blazor kanban Board feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor kanban example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)