Customizing Syncfusion Angular Kanban ( Adding a Footer Button to Each Column)

[Buddhi - BLUE LOTUS 360]

Hello Syncfusion Support  Team,

I am currently working on a project that integrates the Syncfusion Angular Kanban component into our internal application. We have encountered a customization issue that we need assistance with.

Issue:

We need to add a button called "AddTask" to the footer of each Kanban column. This button should allow users to add new tasks to the Kanban board directly within the column where the button is located. Unfortunately, we couldn't find detailed documentation or examples on how to achieve this customization.

Details:

1. Component: Syncfusion Angular Kanban
2. Requirement: Add a custom button ("AddTask") to the footer of each column.
3. Functionality: When clicking the button, a new task should be added to the respective Kanban column.

Attachments:

1. A working sample of the Kanban board on StackBlitz (link)
   https://stackblitz.com/edit/stackblitz-starters-gvsvff?file=src%2Fdata%2Funits.ts
   
2. A screenshot of the desired Kanban board layout with the "AddTask" button visible in each column footer

Additional Information:

Our company plans to use the Kanban component for internal task management, so having this feature is crucial for our implementation.

Any guidance or examples on how to achieve this customization would be greatly appreciated.

Thank you in advance for your support!

Best Regards,
Buddhi

[Vinothkumar Yuvaraj]

Hi Buddhi - BLUE LOTUS 360,

We have reviewed your query and have achieved your requirement by utilizing the dataBound event of the Kanban component. In this event, we added a button element at the end of each column. When the button is clicked, we used the addCard method to add a card to the corresponding column. Please see the following sample and code for your reference.

app.component.html

 <ejs-kanban #kanbanObj keyField='Status' [dataSource]='kanbanData' (dataBound)="OnDataBound($event)">

            <e-columns>

                ……….

            </e-columns>

        </ejs-kanban>

 

app.component.ts

export class AppComponent {

    @ViewChild('kanbanObj') kanbanObj: KanbanComponent;

    public kanbanData: Object[] = extend([], kanbanData, null, true) as Object[];

    public firstRender = true;

    public OnDataBound(args): void {

        if (this.firstRender) {

          this.kanbanObj.element.querySelectorAll('.e-content-row').forEach((contentRow: HTMLElement) => {

              if (!contentRow.classList.contains('e-swimlane-row')) {

                [].slice

                  .call(contentRow.children)

                  .forEach((cell: HTMLElement, index: number) => {

                    const element: HTMLElement = createElement('div', {className: 'e-custom-create'});

                    element.style.position="absolute";

                    element.style.bottom="0px";

                    const button = createElement('button', {className: 'e-btn e-lib'});

                    button.innerHTML = "Add Task";

                    button.addEventListener("click",this.addCards.bind(this))

                    element.appendChild(button);

                    cell.style.position="relative";

                    cell.appendChild(element);

                    const element2: HTMLElement = createElement('div');

                    element2.style.height="60px";

                    cell.appendChild(element2);

                  });

              }

            });

          this.firstRender = false;

        }

      }

      public cardCount = 10;

      public tittlecount = 29010;

      public addCards(args): void {

        this.cardCount+=1;

        this.tittlecount+=1;

        const row = args.currentTarget.closest(".e-content-cells").getAttribute("data-key");

        const cardDatas =     {

            'Id': 'Task '+this.cardCount,

            'Title': 'Task - '+(this.tittlecount),

            'Status': row,

            ………..

          }

        this.kanbanObj.addCard(cardDatas);

      }

}

Screenshot:

Sample : https://stackblitz.com/edit/angular-wngtze-wjsusb?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fdata.ts

API Link:

https://ej2.syncfusion.com/angular/documentation/api/kanban/#addcard

https://ej2.syncfusion.com/angular/documentation/api/kanban/#databound

Regards,

Vinothkumar