Horizontal scroll bar on the Kanban Board

Our Kanban Task Board for easy management of tasks and agile workflows
User avatar
pramod.jaiswal
Posts: 35
Joined: Fri Nov 01, 2013 12:00 pm

Horizontal scroll bar on the Kanban Board

Post by pramod.jaiswal »

If we add several columns on the kanban board view, the column names are truncated and it is very difficult to understand the column name. As there is no horizontal scroll bar, all the column's width is adjusted to display in the limited area that we have. Instead of adjusting the column width based on the number of columns, could we add a horizontal scroll bar on the board view?

Here are two samples attached for your reference.
Adjusted the column width based on the number of columns. Difficult to read the column name
Adjusted the column width based on the number of columns. Difficult to read the column name
bryntum-kanban-board.png (23.94 KiB) Viewed 1409 times
With a horizontal scroll bar without adjusting the column width
With a horizontal scroll bar without adjusting the column width
kanban-with-scroll-bar.png (64.68 KiB) Viewed 1409 times

User avatar
mats
Core Developer
Core Developer
Posts: 15913
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Horizontal scroll bar on the Kanban Board

Post by mats »

Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
pramod.jaiswal
Posts: 35
Joined: Fri Nov 01, 2013 12:00 pm

Re: Horizontal scroll bar on the Kanban Board

Post by pramod.jaiswal »

We were able to achieve what we wanted but have just one minor issue. If we attempt to drag an item from one of the visible lanes to a lane hidden by the scrollbar using the mouse then the browser does not scroll automatically to show the hidden columns. However, this works if using the touchpad. Any idea what we can do?
I have copied the advanced example and made a sample. Just unzip the file inside the examples directory of Taskboard and access advanced2
Attachments
advanced2.zip
(62.57 KiB) Downloaded 27 times

User avatar
mats
Core Developer
Core Developer
Posts: 15913
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Horizontal scroll bar on the Kanban Board

Post by mats »

This is a bit outside the support I'm afraid, but I would recommend you to get familiar with the DragZone class which has the capabilities you need. https://docs.sencha.com/extjs/6.7.0/classic/Ext.dd.DragZone.html
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
pramod.jaiswal
Posts: 35
Joined: Fri Nov 01, 2013 12:00 pm

Re: Horizontal scroll bar on the Kanban Board

Post by pramod.jaiswal »

Thanks for your support on this. I read up on DragZone and seems like I should be setting containerScroll to true. But I can't see a way to get the handle of the dragZone in the TaskBoard. Would appreciate if you can tell me how to get it.

User avatar
pramod.jaiswal
Posts: 35
Joined: Fri Nov 01, 2013 12:00 pm

Re: Horizontal scroll bar on the Kanban Board

Post by pramod.jaiswal »

I was able to get a handle to dragZone in the afterrender callback. I then called dragZone.setConfig("containerScroll", true) as it was false by default. But this didn't help. Would really appreciate if you can point me in the right direction.

User avatar
saki
Core Developer
Core Developer
Posts: 594
Joined: Thu Mar 30, 2017 9:32 am

Re: Horizontal scroll bar on the Kanban Board

Post by saki »

There are some config options that can only be set at component instantiation and changing them at runtime has no effect. Consult please the Ext documentation to find out if this could be the case.

User avatar
pramod.jaiswal
Posts: 35
Joined: Fri Nov 01, 2013 12:00 pm

Re: Horizontal scroll bar on the Kanban Board

Post by pramod.jaiswal »

Not sure if my implementation is the best approach but I had to override containerScroll to true in Kanban.dd.DragZone and also change the call in setupDragDrop to this.dragZone = new Kanban.dd.DragZone(this.getEl().down(".x-autocontainer-innerCt")
This is because the innerCt is scrollable in my case

What will it cost if we wanted you to custom develop this for us?

Also, does Taskboard support copy-paste?
May be copy-paste is a safer bet

User avatar
pramod.jaiswal
Posts: 35
Joined: Fri Nov 01, 2013 12:00 pm

Re: Horizontal scroll bar on the Kanban Board

Post by pramod.jaiswal »

Could you please update on this. This is important for us.

User avatar
mats
Core Developer
Core Developer
Posts: 15913
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Horizontal scroll bar on the Kanban Board

Post by mats »

Please always email sales@bryntum.com for a quote on Professional Services.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

Post Reply