Custom header functionality does not apply to the newly created Columns.

Question

WhatI have integrated this Header Template code with the Adding new Columns code available on your Demos page. After that when I try to add the new Columns, the new Columns are adding but with the default Layout i.e The newly created columns do not have the same custom Header template.Here is the code:-https://react-ilafbn.stackblitz.ioNote: In adding the Column form code, I have removed "key" field". Instead, I have used uuid npm package in the  "onAdd" function for assigning a unique key for the newly added Column. And it works without any error. Below is a code snippet screenshot of onAdd function of adding new Columns:-WhyI want to implement this in one of my products. So I am testing Syncfustion Kanban component w.r.t to business requirements before actually start using this in my production code.And one of the requirements states that the "Newly added Column to have the same header format as the existing one".

Gunasekar Kuppusamy · Answer

Hi Parag,

Greeting from Synfusion support.

We have validated your reported query "Custom header functionality does not apply to the newly created Columns."

To get the template for newly added columns, you need to pass the template value in the addColumn public method. We have modified the sample for your reference.

Code Snippets:




this.kanbanObj.addColumn( 
  {
    keyField: key,
    headerText: text,
    showItemCount: true,
    template: this.columnTemplate.bind(this),
  },
  index);Sample: https://stackblitz.com/edit/react-tcaptq?file=index.js

Please check the sample and let us know if the solution meets your requirements.

Regards,
Gunasekar

parag sharma · Answer

The solution works absolutely. Thanks!Parag

Gunasekar Kuppusamy · Answer

Hi Parag,Greetings from Syncfusion support.

Thanks for the update.

We are glad that the provided solution resolved the issue. Please let us know if you need further assistance. 

  
Regards,  
Gunasekar