Cannot set Column Header template when enablePersistence=true

[Laurin S]

Hi, I'm using the Kanban component in my React Typescript environment. Unfortunately, when setting the enablePersistence property on true, the template for column header's is not getting applied. See code below:

const columnHeaderTemplate = (args) => {

  return (

    <div className="e-header-wrap">

      <div className="e-header-text">{args.headerText} - Test</div>

    </div>

  );

};

return (

  <KanbanComponent enablePersistence={true} keyField="progress"> {/* problem is enablePersistence=true */}

    <ColumnsDirective>

      <ColumnDirective

        headerText="To Do"

        keyField="todo"

        allowToggle={true}

        template={columnHeaderTemplate}

      />

    </ColumnsDirective>

  </KanbanComponent>

);

In addition, I wanted to ask the following questions:

1. How can do I handle foreign keys (Swimlane, Card, Dialog)?

2. Is there a possibility to add a ContextMenu to the Kanban?

[Balasubramanian Sattanathan]

Hi Laurin, 

Greetings from Syncfusion Support. 

Query 1: 

We have analyzed your reported problem at our end and checked by preparing the below sample. Since the column header templates are applied properly when enablePersistence is true. Kindly refer to the below attached sample. 

Sample: https://stackblitz.com/edit/react-kanban-column-template?file=index.js 

Query 2: 

We have analyzed your query at our end and we would suggest you to refer the below UG links to know more details about the Kanban swimlane, card and dialog. 

 

Swimlane: https://ej2.syncfusion.com/react/documentation/kanban/swimlane/ 

Card: https://ej2.syncfusion.com/react/documentation/kanban/cards/ 

Dialog: https://ej2.syncfusion.com/react/documentation/kanban/dialog/ 

Query 3: 

We have analyzed your requirement at our end and let you know that we can achieve the context menu on Kanban by making use of the below code snippets. 

onOpen(args) { 

  if (args.event.target.classList[0].includes('e-card', 0)) { 

    this.currentCard = this.kanbanObj.getCardDetails(args.event.path[1]); 

  } else { 

    args.cancel = true; 

  } 

} 

onSelect(args) { 

  if (args.item.text === "Delete") { 

    this.kanbanObj.deleteCard(this.currentCard); 

  } 

} 

 

<ContextMenuComponent target="#kanban" ref={cmenuObj => this.cmenuObj = cmenuObj} items={this.menuItems} 

           beforeOpen={this.onOpen.bind(this)} select={this.onSelect.bind(this)} /> 

Sample: https://stackblitz.com/edit/react-kanban-column-template-with-context-menu?file=index.js 

Kindly refer to the above solution, let us know if you need further assistance. 

Regards, 

Balasubramanian S