How to switch to Responsive Mode?

[Adrien Pech]

Hello Syncfusionteam,

in my project I use your kanban component similar to your documentation (https://ej2.syncfusion.com/angular/documentation/kanban/swimlane/#render-swimlane-row ). Now I'm wondering how to switch to Responsive Mode (https://ej2.syncfusion.com/angular/documentation/kanban/responsive-mode/#swimlane-layout ) when the individual columns become too small when the width of the browser window is changed.

Best Regards, Adrien P.

[Gunasekar Kuppusamy]

Hi Adrien,

Greetings from Syncfusion support

We have validated your reported query from our end.

The Kanban swimlane cards are automatically changed  by default depending on the device mode. This functionality does not require any configuration.

We have prepared a sample and video reference for your reference,

Sample: https://stackblitz.com/edit/angular-46y7wo?file=app.component.html

Video reference: 

https://www.syncfusion.com/downloads/support/forum/169214/ze/Video-1342277592

Please check the above sample and let us know if you have faced any issues on any particular device or layout.

Regards,

Gunasekar

[Adrien Pech]

Hello,

I know that this functionality takes effect depending on the end device. But my question is if for example a customer wants to use only half of his screen or in an extreme case you have 15+ columns, how to display this possible vividly. As the attached video shows, once you reach a certain width you can't work with Kanban at all. Is there any support regarding Responsive for this use case regardless of the device?

Best Regards, Adrien P.

Attachment: Kanban_Responsive_551eeeee.zip

[Gunasekar Kuppusamy]

Hi Adrien,

Goo day to you.

We have validated your reported query from our end. For this scenario, we suggest you set the min-width to the Kanban component. Once you reached minimum width ,then scrollbar is added to the page. So, the cards have proper width.

We have prepared a sample for your reference.

Code Snippets:

<ejs-kanban #kanbanObj cssClass="e-width" keyField="Status" [dataSource]="kanbanData"

    [cardSettings]="cardSettings" [swimlaneSettings]="swimlaneSettings" height="500px">

    <e-columns>

    <e-column headerText="To Do" keyField="Open"></e-column>

    <e-column headerText="In Progress" keyField="InProgress"></e-column>

    <e-column headerText="Done" keyField="Close"></e-column>

    </e-columns>

</ejs-kanban>

<style>

.e-kanban.e-width {

  min-width: 500px;

}

</style>

Sample:https://stackblitz.com/edit/angular-46y7wo-drz5gq?file=app.component.html

Please check the sample and let us know if you have any concerns,

Regards,

Gunasekar