v-for in e-column (kanban) not working

[João Víctor Fernandes]

I currently have a kanban component in which its columns are generated dynamically, that is, there can be 1 column or 10 columns.

I'm trying to use a v-for in the e-column like the example below and it's not working, it ends up returning random errors in the console.

How to proceed with this situation?

[Vinothkumar Yuvaraj]

Hi João Víctor Fernandes,

We have validated your reported query, and we have created a sample using `v-for` in the Kanban column to dynamically generate the columns. Please refer to the following code and sample for your reference.

Code snippet:

<template>

<div>

    <div class="col-md-12 control-section">

      <div class="content-wrapper">

        <ejs-kanban cssClass="kanban-card-default" id="kanban" keyField="Status" :dataSource="kanbanData"

        :cardSettings="cardSettings">

          <e-columns> 

            <e-column v-for="etapa in columns" :headerText="etapa.headerText" :keyField="etapa.keyField" :template="'columnsTemplate'">

             <template v-slot:columnsTemplate="{data}">

             <div class="header-template-wrap">

                 <div class="header-text">{{data.headerText}}</div>

                 <div class="e-item-count">{{data.count}} - items</div>

               </div>

             </template>

            </e-column>

          </e-columns>

        </ejs-kanban>

      </div>

      </div>

</div>

</template>

<script>

import { extend } from "@syncfusion/ej2-base";

import { KanbanComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-kanban";

import { kanbanData } from "./datasource";

 

export default {

  components: {

    'ejs-kanban': KanbanComponent,

    'e-column': ColumnDirective,

    'e-columns': ColumnsDirective

  },  

  data: function() {

    return {

      kanbanData: extend([], kanbanData, null, true),

      cardSettings: {….. },

    columns: [

      { headerText: 'To Do', keyField: 'Open', allowToggle: true },

      { headerText: 'In Progress', keyField: 'InProgress', allowToggle: true },

      { headerText: 'In Review', keyField: 'Review', allowToggle: true },

      { headerText: 'Done', keyField: 'Close', allowToggle: true }

    ]

    };

  },

  provide: {

    kanban: []

  }

}

</script>

Sample : https://stackblitz.com/edit/4qxpiy-nqa8t1?file=src%2FApp.vue

Please let us know if you have any further questions or concerns.

Regards,

Vinothkumar