search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Kanban: Active Column in AngularJS

Asked by Richard
8 years ago.

Hi,

I'm trying to create an active column area by making use of AngularJS. I followed the JS example by adding an area:

areas: [ {right: 5, top: 1, bottom: 1, width: 18, html: "+", cssClass: "add-button", action: "JavaScript", js: function(args) { console.log(args); add();}} ]

Which basically causes the following error:

[ng:cpws] http://errors.angularjs.org/1.5.8/ng/cpws

AngularJS Code:

vm.config = {
columns: [
{ name: 'Analysis', id: '1', barColor: '#f9ba25', areas: [{ right: 5, top: 1, bottom: 1, width: 18, html: '+', cssClass: 'add-button', action: 'JavaScript', js: function (args) { vm.add(args); } }] },
{ name: 'Draft', id: '2' },
{ name: 'Testing', id: '3' }
],
cards: [
{ id: 1, "name": 'Task 1', column: '1', text: 'This is a description of task #1.' },
{ id: 2, "name": 'Task 2', column: '1', text: 'This is a description of task #2.', barColor: '#1155CC' },
{ id: 3, "name": 'Task 3', column: '1', text: 'This is a description of task #3.', barColor: '#999' },
{ id: 4, "name": 'Task 4', column: '1', text: 'This is a description of task #4.', barColor: '#6AA84F' },
{ id: 5, "name": 'Task 5', column: '2', text: 'This is a description of task #5.', barColor: '#F6B26B' }
]
};

Is this possible? If so, what am I doing wrong?

Thanks in advance!

Answer posted by Dan Letecky [DayPilot]
8 years ago.

There was a bug - the Kanban control made some direct changes to the column.areas array during an update which triggered another update...

It should be fixed now in the latest sandbox build (8.2.2375):

http://javascript.daypilot.org/sandbox/

Let me know if the problem persists.

Comment posted by Richard
8 years ago.

Hi Dan,

Thanks for the reply. We bought the Saas Pro version (DayPilotProJavaScript-8.2.2278) this morning and to be honest I'm struggling to get things going. Any chance that the angular documentation is going to be updated or perhaps more examples will be available?

I'm making use of lodash to configure the data and update the config, which is bound to the <daypilot-kanban config="vm.config"></daypilot-kanban> control.

This is the result: https://s17.postimg.org/p1ii4s19b/Capture.png - it's almost as if an update / refresh is required.

Lastly, the collapse functionality on the swim lanes. Is it suppose to collapse all the tasks, or only the tasks associated with a swim lane? It can be simulated here: http://javascript.daypilot.org/demo/kanban/swimlanecollapsing.html

Thanks again!
Kind regards,

Comment posted by Dan Letecky [DayPilot]
8 years ago.

> Any chance that the angular documentation is going to be updated or perhaps more examples will be available?

The Angular plugin is a wrapper around the pure JavaScript core and you should be able to use the standard docs for the config (you just apply it through the config object instead of direct properties).

Let me know if you are missing an example for anything specific, it should be no problem to add it.

> This is the result: https://s17.postimg.org/p1ii4s19b/Capture.png - it's almost as if an update / refresh is required.

This looks like a bug of the refresh. I've tried to reproduce the issue by replacing the whole config object and there turned out to be some problems (if swimlanes/cards/columns is null in the new object the previous state was used). These issues should be fixed now in the latest sandbox build (8.2.2378):

http://javascript.daypilot.org/sandbox/kanban/angularjs.html

You'll find two buttons below the Kanban control that assign different objects to the config.

You can download the latest build in the sandbox and give it a try with your setup - let me know if the problem persists.

> Lastly, the collapse functionality on the swim lanes. Is it suppose to collapse all the tasks, or only the tasks associated with a swim lane? It can be simulated here: http://javascript.daypilot.org/demo/kanban/swimlanecollapsing.html

It's supposed to work like in this demo (the sandbox version), i.e. it should hide the cards only from the selected swimlane:

http://javascript.daypilot.org/sandbox/kanban/swimlanecollapsing.html

Comment posted by Richard
8 years ago.

First things firsts, awesome support Dan! Thanks!

Since we have a paid version, how would a sandbox release impact us? Will it show as a demo or trail?

Thanks again!!

Comment posted by Dan Letecky [DayPilot]
8 years ago.

I'm happy to help. ;-)

> Will it show as a demo or trail?

Yes, it will show the "DEMO" label. I suggest to give it a try to see if the bugs are fixed. Then you can wait for an official release or I can send you the full build directly.

Comment posted by Richard
8 years ago.

Will do - thanks Dan!

Comment posted by Richard
8 years ago.

Hi Dan,

So I download version 8.2.2378, but I'm still experiencing the same problem. But the reason to the problem is a strange one. If you use the kanban in a tab and the tab is the first and active page all it well:

Code:

            <uib-tabset>
                <uib-tab index="0" active="active">
                    <uib-tab-heading>
                        <i class="fa fa-cubes"></i> Foo
                    </uib-tab-heading>
                    <div ng-include="'app/features/projects/manage/partials/manage-project-milestone-tasks.tmpl.html'"></div>
                </uib-tab>
                <uib-tab index="1">
                    <uib-tab-heading>
                        <i class="fa fa-columns"></i> Bar
                    </uib-tab-heading>
                    
                </uib-tab>
            </uib-tabset>

Result:
https://s12.postimg.org/cu8cgb63h/Capture.png

But as soon as you place it inside a non active tab, which isn't the first to display:

Code:

            <uib-tabset>
                <uib-tab index="0" active="active">
                    <uib-tab-heading>
                        <i class="fa fa-cubes"></i> Foo
                    </uib-tab-heading>
                    
                </uib-tab>
                <uib-tab index="1">
                    <uib-tab-heading>
                        <i class="fa fa-columns"></i> Bar
                    </uib-tab-heading>
                    <div ng-include="'app/features/projects/manage/partials/manage-project-milestone-tasks.tmpl.html'"></div>
                </uib-tab>
            </uib-tabset>

Result:
https://s22.postimg.org/rxv09214x/Capture.png

Any suggestions? Thanks again!

Richard Bailey

Comment posted by Richard
8 years ago.

Code formatting by the site caused the example code to be in shambles.... Here's some images:

First code snippet:
https://s9.postimg.org/76z2gk9fz/Capture.png

Second code snippet:
https://s15.postimg.org/mvu646i7v/Capture.png

Comment posted by Dan Letecky [DayPilot]
8 years ago.

Hi Richard,

Thanks for the update, that helps. The Kanban control does some position calculations and adjustments on init that require the control to be visible. This fails if the control is hidden during initialization.

This issue should be fixed now in build 2382:
http://javascript.daypilot.org/sandbox/

Let me know if it doesn't help.

Comment posted by Richard
8 years ago.

Hi Dan...

Booom, like a boss - thanks, that's fixed it!

Regards,
Richard

Comment posted by Dan Letecky [DayPilot]
8 years ago.

Great, thanks for the update!

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.