Header Template

[Christian DAquino]

How do I apply a custom header template when dynamically setting the columns?

I'm trying the below, but the 'header-template' component is not being applied.

<ejs-kanban
  id='kanban'
  ref='kanban'
  :allow-drag-and-drop='true'
  :card-click='cardClick'
  :card-double-click='cardDoubleClick'
  :card-settings='cardSettings'
  :data-bound='dataBound'
  :data-source='board.data'
  :drag-stop='dragStop'
  :enable-persistence='false'
  key-field='station_name'
  :sort-settings='sortSettings'
>
  <template v-slot:headerSlot='{ data: headerData }'>
    <header-template :data='headerData' :stations='board.stations' />
  </template>
  <template v-slot:cardSlot='{ data: cardData }'>
    <card-template
      :data='cardData'
      @updated='onCardUpdated'
    />
  </template>
  <e-columns>
    <e-column
      v-for='column in board.stations'
      :key='column.id'
      :header-text='column.name'
      :key-field='column.name'
    />
  </e-columns>
</ejs-kanban>

[Yohapuja Selvakumaran]

Hi Christian DAquino

Thank you for reaching out to us. We have reviewed your requirement and created a sample demonstrating how to apply a header for the Kanban component.

  <e-column headerText="To Do" keyField="Open"  :template="'columnsTemplate'">
            <template v-slot:columnsTemplate="{data}">
            <div class="header-template-wrap">
                <div :class="getClassName(data)"></div>
                <div class="header-text">{{data.headerText}}</div>
              </div>
            </template>
            </e-column>

You can check out the sample here:

Sample: 6hxcgkib (forked) - StackBlitz

For more details, you may also refer to the following demo:

Demo: Kanban · Header Template · Syncfusion Vue UI Components

Please let us know if you need any further assistance.

Regards,

Yohapuja S