Kanban Swimlan Responsive Mode Error on Initialization

[Hunter Malley]

Hello, I believe I have found a bug with the SfKanban component when it is rendered in the 'Swimlane Layout' Responsive Mode (ex. on an iPad) when the DataSource is an empty enumerable.

I have an SfKanan component whos DataSource property is set to a List variable that is populated with data based on user input from another component. This means that when the page with the component is first loaded, the DataSource of the SfKanban component is empty (note, it is not null). This is no issue when the component is rendered with the  'Default Layout' Responsive Mode, only the 'Swimlane Layout'. I believe the error is originating from the building of the Swimlane group list view used in the 'Swimlane Layout' Responsive Mode.

This can be reproduced with the following playground sample, here.

Reproduction with the playground sample:

1. Using the browser developer tools, simulate an iPad Mini view
   
2. Run the sample once in an iPad Mini view
3. Observe error in the console.

The error in the console is:

blazor.web.js:1 An unexpected error occurred: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

blazor.web.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

      Unhandled exception rendering component: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

   at System.Collections.Generic.List`1[[Syncfusion.Blazor.Kanban.SwimlaneSettingsModel, Syncfusion.Blazor, Version=29.2.11.0, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89]].get_Item(Int32 index)

   at Syncfusion.Blazor.Kanban.SfKanban`1[[Playground.User.__Index.TasksModel, Playground.User, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null]].UpdateSwimlaneRows()

   at Syncfusion.Blazor.Kanban.SfKanban`1.<BindDataSource>d__124[[Playground.User.__Index.TasksModel, Playground.User, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

   at Syncfusion.Blazor.Kanban.SfKanban`1.<DataProcess>d__125[[Playground.User.__Index.TasksModel, Playground.User, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

   at Syncfusion.Blazor.Kanban.SfKanban`1.<OnAfterRenderAsync>d__353[[Playground.User.__Index.TasksModel, Playground.User, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Ar @ blazor.web.js:1

(anonymous) @ dotnet.runtime.js:3

Ll @ dotnet.runtime.js:3

$func349 @ 00b2189a:0x1f99d

$func245 @ 00b2189a:0x1be44

$func238 @ 00b2189a:0xf011

$func306 @ 00b2189a:0x1e693

$func327 @ 00b2189a:0x1ee89

$func217 @ 00b2189a:0xce61

$mono_background_exec @ 00b2189a:0x44224

Go @ dotnet.runtime.js:3

callUserCallback @ dotnet.native.js:8

(anonymous) @ dotnet.native.js:8

In addition to this error, I have a question. Is there any way we can prevent the component from being rendered in the 'Swimlane Layout' Responsive Mode or at least modify the screen sizes used to determine which mode is used?

Thank you,

Hunter

[Hunter Malley]

Hello,

Just a follow up on this matter. If there is no way to disable 'Responsive Mode', are there any Templates exposed that can be used to customize the Swimlane Toolbar and is there any way we can attach event listeners and handlers to the Swimlane Menu ListView?

Best,

Hunter

[Bhuvaneshwari Thirunavukarasu]

Hi Hunter Malley,

Thank you for your patience.

We have considered the reported issue "Kanban Swimlane Layout Throws Error on Initialization with Empty DataSource in Responsive Mode" as a bug from our end. The fix will be included in our upcoming patch release, which is scheduled for the second week of July.

 

Now you can track the status of the reported issue through this feedback, 
Kanban Swimlane Layout Throws Error on Initialization with Empty DataSource in Responsive Mode in Blazor | Feedback Portal

 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

 

Regards,

Bhuvaneshwari T

[Hunter Malley]

Thank you very much for logging that bug.

In the meantime, is there any way to prevent the component from using 'Responsive Mode' on devices? If not, are there any templates exposed that can be used to customize the Swimlane Toolbar and is there any way we can attach event listeners and handlers to the Swimlane Menu ListView?

[Bhuvaneshwari Thirunavukarasu]

Hi Hunter Malley,

Thank you once again for your follow-up.

We understand your interest in disabling the responsive mode as a temporary workaround. We explored this internally to identify a feasible solution. However, due to the complexity involved in overriding the responsive behavior and customizing the internal templates, we were unable to provide a reliable workaround at this time.

As mentioned earlier, we have identified this as a bug, and the fix is scheduled to be included in our upcoming patch release in the second week of July.

We truly appreciate your understanding and patience as we work to resolve this issue.

Best regards,
Bhuvaneshwari T

[Hunter Malley]

Hello,

Thank you very much for your response.

I am actually seeking the ability to override the Responsive Mode behavior, not as a temporary workaround but, as an intended solution. I already restrict access to the component based on screen size, and can make it responsive myself, through CSS. The ability to view multiple swimlanes at once on the Kanban board is integral to my implementation and is not currently supported in Responsive Mode. 

Are there any future plans to expose configuration of the Responsive Mode behavior in the road map for the component? It is a quite an impactful behavior to be totally unconfigurable. 

Best,

Hunter

[Bhuvaneshwari Thirunavukarasu]

Hi Hunter,

Thank you for your detailed feedback and for sharing your use case with us.

We understand that the ability to view multiple swimlanes simultaneously is essential to your implementation, and that the current Responsive Mode behavior where swimlanes are rendered in a tree view on smaller screens does not align with your requirements.

To better understand your scenario and explore possible solutions, could you please share more about why you prefer to disable Responsive Mode entirely? Are you currently handling the mobile layout separately using your own CSS or logic?

Best regards,

Bhuvaneshwari T

[Hunter Malley]

Hello Bhuvaneshwari,

I have two main motivations in disabling Responsive Mode entirely.

1. Plainly, I would like the ability to show multiple swimlanes, with swimlane headers, at a time on the Kanban Board which is not supported in Responsive Mode.
   
2. I am using a separate SfTreeGrid component that holds a hierarchical listing of items. Each Item corresponds to a collections of tasks (represented by a swimlane) that get dynamically loaded into the Kanban board when they are checked. This means that in Responsive Mode, the user would check the desired TreeGrid items and then would have to select them again from the Responsive Mode Swimlane Menu to bring it onto the Kanban board. Also, it seems that Responsive Mode with swimlanes does not handle this dynamic loading very well. 

I am currently using CSS to restrict access to the feature entirely for small screen sizes (ex. mobile phones) and would use CSS to follow the same 80% / 20% First Column / Second Column sizing, that Responsive Mode uses, for tablets that are large enough.

My current work around involves my own IsDevice check, similar to that used by the SfKanban component, to determine if the client is a device. If the client is a device, and the Kanban board will be rendered in Responsive Mode, I make the TreeGrid single select only and disable swimlanes on the SfKanban component to avoid the Responsive Mode Swimlane menu, and just dynamically load the tasks for the checked TreeGrid item. 

Best,

Hunter

[Bhuvaneshwari Thirunavukarasu]

Hi Hunter,

Thank you for your detailed explanation and patience.

Query 1: "Kanban Swimlane Layout Throws Error on Initialization with Empty DataSource in Responsive Mode"

​Feedback:  Kanban Swimlane Layout Throws Error on Initialization with Empty DataSource in Responsive Mode in Blazor | Feedback Portal

We have included the fix for the issue "Kanban Swimlane Layout Throws Error on Initialization with Empty DataSource in Responsive Mode" with our package version 30.1.38. So, can you please upgrade your package to the latest to resolve the issue from your end?

Root cause: Nullcheck is not done properly for the case of isDevice mode.

Release Notes: Essential Studio for Blazor Weekly Release Release Notes

Update sample: https://blazorplayground.syncfusion.com/rDVojmhAzKcYEAXW

Query 2: Multiple Swimlanes in Responsive Mode

We understand your need to maintain multiple swimlanes on the Kanban board even in Responsive Mode. Currently, Responsive Mode converts swimlanes into a tree view for smaller screens, which doesn't align with your dynamic loading needs using the SfTreeGrid component.

While direct modifications to navigator.userAgent for device mode changes aren't feasible, we appreciate your innovative approach using CSS and custom logic. If you have additional insights or suggestions, please feel free to share them.

We apologize for any inconvenience and are committed to supporting you in finding the best solution for your needs.

Best regards,

Bhuvaneshwari T