Dynamically add Kanban Column

[Weng Keong Lan]

Hi Support Team,

I have a question related to the Kanban and kindly need your advice related to it:

1. How to add Kanban column dynamically.
2. How to bind Kanban header template to the column based on no 1.
   

Looking forward for your reply. 

Thank you

[Vinitha Jeyakumar]

Hi Weng, 

 

 

Greetings from Syncfusion support, 

 

 

We have validated your queries, 

 

Query 1. “How to add Kanban column dynamically” 

 

You can add the Kanban columns dynamically using the addColumn public method of Kanban control.  

 

Query 2. “How to bind Kanban header template to the column based on no 1.” 

 

You can directly pass the headerText and keyField value to the addColumn method and also it allows to define the column number to be inserted. Please check the code below, 

 

Code snippet: 

<ejs-button id="normalbtn" content="Open"></ejs-button> 

 

<ejs-kanban id="Kanban" keyField="Status" dataSource="@ViewBag.data" created="onCreate"> 

    <e-kanban-columns> 

      . . . 

       . . . 

    </e-kanban-columns> 

    <e-kanban-cardsettings headerField="Id" contentField="Summary"></e-kanban-cardsettings> 

</ejs-kanban> 

 

<script> 

    var kanbanObj; 

    function onCreate() { 

        kanbanObj = this; 

    } 

    var btnElement = document.getElementById("normalbtn"); 

    btnElement.addEventListener('click', function () { 

        let column = { headerText: "Pre Check-List", keyField: "CheckList" }; 

        kanbanObj.addColumn(column, 0); 

        btnElement.style.display = "none"; 

    }); 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169408/ze/Kanban_ColDyn-1476688437 

 

Please check the sample and code snippet and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha 

[Weng Keong Lan]

Hi Support Team,

Thank you for the solution that had been provided. The first query satisfies my requirement but for the second query, I think I should be giving you more details what I’m required and there are also several issues that I need to ask.

1. How to retrieve the specific Kanban column index.
2. How to append the Kanban header custom template to the new Kanban column. For example, if user click add new column, the custom header template should be appended to the new generated column. The new added column needs to be added dynamically as you shown in the Code snippet above. You can see the sample of the code as below:



1. How to delete specific column. For example, we have a button to delete column in the custom header template, then when user click on that button, the column of that button will be deleted. The delete button should represent that particular column.

Looking forward for your reply.

Thank you

[Vinitha Jeyakumar]

Hi Weng, 

 

Good day to you. 

 

We have further validated your queries. 

 

Query 1: How to retrieve the specific Kanban column index. 

 

You can get the particular column index by using the Column keyField value. Refer to the below code snippets to get the particular column key. 

 

In this sample, we got the Testing field column index. 

 

Code Snippets: 

btnElement.addEventListener('click', function () { 

        var columnKeyField = "Testing"; 

        for (var i = 0; i < kanbanObj.columns.length; i++) { 

            if (columnKeyField === kanbanObj.columns[i].keyField) { 

                alert(i); 

            } 

        } 

    }); 

Sample: https://www.syncfusion.com/downloads/support/forum/169408/ze/Kanban_Core_App1389341244

Query 2: How to append the Kanban header custom template to the new Kanban column. For example, if user click add new column, the custom header template should be appended to the new generated column. 

 

You can add the custom header template for the dynamically added columns by adding template property in the addColumn method. 

 

Code Snippets: 

kanbanObj.addColumn({ keyField: key, headerText: text, showItemCount: true, template:"#headerTemplate" }, index); 

 

Query 3: How to delete specific column. For example, we have a button to delete column in the custom header template, then when user click on that button, the column of that button will be deleted. The delete button should represent that particular column.

You can delete the Kanban particular column by passing the column index in the deleteColumn public method. 

 

Code snippets: 

 kanbanObj.deleteColumn(index); 

 

Demo: https://ej2.syncfusion.com/aspnetcore/Kanban/Api#/bootstrap5 

Please check the solution and let us know if you have any concerns. 

 

Regards, 

Vinitha 

[Weng Keong Lan]

Hi Support Team,

Thank you for the solution that have been provided. I'm able to solve my issues based on the solution given.
Nevertheless, there are some more issues that need to be ask.

1. How to make kanban content to have same value as the first column. For example, the first column is "Testing" with card "{task 1, task 2, task 3 }" so,
when adding new column using the "Testing" keyfield, the card should be able to show the same value = "{task 1, task 2, task 3 }".

2. As following the solution of the given before, I'm able to add the new column and deleting the column based on the column index, but I'm facing some problem when I deleting
all the column and then I try to add the new column it will show an error like this:

it's refer to this line of code:

[Vinitha Jeyakumar]

Hi Weng, 

 

 

We have validated your queries, 

 

Query 1. ” How to make kanban content to have same value as the first column” 

 

We want to let you know that we cannot add a duplicate column for the already existing one and it is not applicable. We can either create a same headerText, but not the same keyField for the Kanban Columns. 

 

Query 2. “when I deleting all the column and then I try to add the new column it will show an error” 

 

We can able to reproduce the issue at our end and we have considered the issue “When dynamically adding new column after deleting all the columns from Kanban throws console error” as a bug from our end and the fix for the issue will be included with our upcoming patch release on 19^th October 2021. 

 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/29453/when-dynamically-adding-new-column-after-deleting-all-the-columns-from-kanban 

 

Regards, 

Vinitha 

[Vinitha Jeyakumar]

Hi Weng, 

 

 

We have included the fix for the issue “When dynamically adding new column after deleting all the columns from Kanban throws console error” with our release version 19.3.46. So please upgrade your package to the latest to resolve the issue from your end. 

 

Release notes: https://ej2.syncfusion.com/documentation/release-notes/19.3.46/?type=all#kanban 

 

We appreciate your patience in waiting for this patch release. Please get back to us if you need any further assistance. 

 

Regards, 

Vinitha