Kanban: onBeforeCellRender in AngularJS

Asked by Richard
8 years ago.

Hi,

I'm trying to add a button to the first column of each swim lane. I am well aware of the online example that demonstrates how to do this in JavaScript, but I'm struggling to get it right with AngularJS. This is what I've done thus far:

HTML:

<daypilot-kanban config="vm.config" on-before-cell-render="vm.onBeforeCellRender(args)"></daypilot-kanban>

AngularJS:

        vm.onBeforeCellRender = function(args) {
            if (args.cell.column.data.id === '1') {
                args.cell.areas = [
                    {
                        right: 5,
                        bottom: 5,
                        width: 100,
                        height: 30,
                        html: 'Add',
                        cssClass: 'mst-add-button',
                        action: 'JavaScript',
                        js: function (arg) { addMilestoneTask(arg); }
                    }
                ];
            }
        }

So the button is being created, but not in the very first row, only from the second on wards. And this is after I receive an Angular error:

https://s21.postimg.org/hlizxdrav/Capture.png

Error: [$rootScope:inprog] http://errors.angularjs.org/1.5.8/$rootScope/inprog?p0=NaNigest

My config setup looks like:

            vm.config = {
                cellMarginBottom: 40,
                cardDeleteHandling: 'Update',
                columns: [
                    { name: 'New', id: '1', areas: [{ right: 5, top: 1, bottom: 1, width: 18, html: '+', cssClass: 'ms-add-button', action: 'JavaScript', js: function (args) { addMilestone(args); } }] }
                    //{ name: 'In Progress', id: '2' },
                    //{ name: 'Completed', id: '3' }
                ],
                cards: _.flatten(_.map(vm.selectedProject.ProjectMilestones,
                    function (ms) {
                        return _.map(ms.ProjectMilestoneTasks,
                            function (mst) {
                                return {
                                    id: mst.Id,
                                    name: mst.TaskDescription,
                                    column: '1',
                                    text: mst.TaskDescription,
                                    swimlane: ms.Id,
                                    barColor: '#1155CC'
                                };
                            });
                    })),
                swimlanes: _.map(vm.selectedProject.ProjectMilestones,
                    function (item) {
                        return { name: item.Description, id: item.Id }
                    })
            }

Any assistance would be appreciated!

Kind regards,
Richard Bailey

capture.png

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

This happens because event handlers specified using on-* attributes automatically wrap the code in an $appy() block - to make the behavior consistent with the standard AngularJS behavior. This isn't correct in case of rendering event handlers.

This doesn't happen for event handlers which are defined using the "config" object like this:

vm.config = {
  // ...
  onBeforeCellRender: function(args) {
            if (args.cell.column.data.id === '1') {
                args.cell.areas = [
                    {
                        right: 5,
                        bottom: 5,
                        width: 100,
                        height: 30,
                        html: 'Add',
                        cssClass: 'mst-add-button',
                        action: 'JavaScript',
                        js: function (arg) { addMilestoneTask(arg); }
                    }
                ];
            }
        }
}

It's fixed now in build 2383:
http://javascript.daypilot.org/sandbox/

Let me know if the problem perists.

Comment posted by Richard
8 years ago.

Thanks again Dan! Seems to be working now. Would the delete work in the same way?

            vm.config = {
                // ......
                cardDeleteHandling: 'Update',
                onCardDeleted: function(args) {
                    
                },
                onCardDelete: function(args) {

                }
            }

Regards,

Comment posted by Richard
8 years ago.

Dan,

Something strange that I'm experiencing, is a difficulty to delete the cards. It's as if there is a flickering on the delete, which makes it very difficult to click - I've made a video to demonstrate:

https://youtu.be/Ml-finxH35E

Regards,

Comment posted by Richard
8 years ago.

Hi Dan,

Perhaps any feedback that you can provide?

Thanks,
Richard

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

Kanban: onBeforeCellRender in AngularJS

Products

Learn

Get Support

DayPilot Pro