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 » Tue Sep 10, 2019 11:56 am

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.
bryntum-kanban-board.png
Adjusted the column width based on the number of columns. Difficult to read the column name
bryntum-kanban-board.png (23.94 KiB) Viewed 279 times
kanban-with-scroll-bar.png
With a horizontal scroll bar without adjusting the column width
kanban-with-scroll-bar.png (64.68 KiB) Viewed 279 times

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

Re: Horizontal scroll bar on the Kanban Board

Post by mats » Tue Sep 10, 2019 10:55 pm

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 » Tue Sep 17, 2019 1:48 pm

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 5 times

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

Re: Horizontal scroll bar on the Kanban Board

Post by mats » Tue Sep 17, 2019 1:50 pm

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 » Tue Sep 17, 2019 3:17 pm

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 » Tue Sep 17, 2019 3:30 pm

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: 158
Joined: Thu Mar 30, 2017 9:32 am

Re: Horizontal scroll bar on the Kanban Board

Post by saki » Wed Sep 18, 2019 9:24 am

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 » Wed Sep 18, 2019 11:06 am

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 » Thu Sep 19, 2019 11:35 am

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

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

Re: Horizontal scroll bar on the Kanban Board

Post by mats » Thu Sep 19, 2019 1:37 pm

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