Activate responsive in kanban EJ2

[Marco Antonio Gallardo]

Hi people.

Im having probles to activate en configurate de responsive in the kanban component.

in the migration table from EJ1 to EJ2, in responsive, sais that both atributes ([isResponsive], and minWidth) are not aplicable.

but de documentation sais that is posible use the responsive in kanban!

do you know wich is the way???

[Gunasekar Kuppusamy]

Hi Marco,

Greetings from Syncfusion support.

We have validated you reported queries from our end.

Yes, you can acheive EJ1 isResponsive and minWidth property funtionalities in EJ2 kanban.

1.isResponsive:

In EJ2, Kanban doesnot have a property the responsive.The Kanban 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

2.minWidth

The minWidth functionality can be acheived by using cssClass property.

Please refer the below code,

<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-bmmke5?file=app.component.css

Please check the sample and let us know if the sample meets your requirements.

Regards,

Gunasekar

[Marco Antonio Gallardo]

Thank you very much!

now I understand that de max with refers to all the kanban component and no for each column.

but now i found another problem due to the logic of my own app.

i understand that in response mode, the heigth of the kanban component is static and the heith of each colum is scrollable.

i supose that with css i can do that the behavoir would be the same when is in mobile that in desktop. i dont know if you can understand me.

 EDIT:

Ok, I can see that if I load the page in desktop mode and reduce this, its works like i do, but if i load the page in responsive mode (even with a hug res) it activate the behavoir that i dont wats 

(loaded in response mode, shows scrollbar in column and column width is 80% aprox)

(in this case is loaded in desktop mode, and responsive is working like i want, and the scrollbars are too like i want)

now the most important question is:

can i do that if i load my page in mobile, charge the same that in desktop??

thank you very muucha

[Marco Antonio Gallardo]

Every thong solved!! thanks!!!

[Indrajith Srinivasan]

Hi Marco,

Thanks for the update,

We are glad that your reported issue is resolved.

Please get back to us if you need any further assistance,

Regards,

Indrajith