We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Vue3 and Card Template

Hi,

Can I please get a sample on how to use the Kanban component with a Card Template using v-slot on Vue 3?


1 Reply 1 reply marked as answer

VJ Vinitha Jeyakumar Syncfusion Team November 17, 2022 06:08 AM UTC

Hi Christian,

We have prepared a sample as per your requirement to use v-slot on Vue 3 for card template in Kanban. please check the code and sample below,

Kanban/Overview.vue

<template>

  <ejs-kanban :cardSettings="cardSettings" :swimlaneSettings="swimlaneSettings">

    <e-columns>

      <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>

   ……………………

   </e-columns>

   <template v-slot:swimlaneTemplate={data}>

      <div class='swimlane-template e-swimlane-template-table'>

        <div class="e-swimlane-row-text"><img :src="image(data)" :alt="data.keyField" />

          <span>{{data.textField}}</span>

        </div>

      </div>

    </template>

    <template v-slot:cardsTemplate={data}>

      <div class="card-template">

        <div class="e-card-header">

          <div class="e-card-header-caption">

            <div class="e-card-header-title e-tooltip-text">{{data.Title}}</div>

          </div>

        </div>

        <div class="e-card-content e-tooltip-text">

          <div class="e-text">{{data.Summary}}</div>

        </div>

        <div class="e-card-custom-footer" v-html="getCardFooter(data)"></div>

      </div>

  </template>

 </ejs-kanban>

</template>

<script>

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

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

export default {

  components: {

    "ejs-kanban": KanbanComponent,

    "e-columns": ColumnsDirective,

    "e-column": ColumnDirective,

  },

  data() {

    return {

      swimlaneSettings: {

        keyField: "Assignee",

        template: "swimlaneTemplate"

      },

      cardSettings: {

        headerField: "Title",

        template: "cardsTemplate",

     },

    };

  },

  methods: {

    getClassName: function(data) {

      return "header-icon e-icons " + data.keyField;

    },

    image: function(data) {

        return 'source/kanban/images/' + data.keyField + '.png';

      },

      getString: function(name) {

      return name.match(/\b(\w)/g).join("").toUpperCase();

    },

    getCardFooter: function(data) {

      let tagDiv = "";

      let tags = data.Tags.split(",");

      for (let tag of tags) {

        tagDiv += "<div class='e-card-tag-field e-tooltip-text'>" + tag + "</div>";

      }

      tagDiv += "<div class='e-card-avatar'>" + this.getString(data.Assignee) + "</div>";

      return tagDiv;

    }

  },

};

</script>


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Kanban-slot-vue3-838899458


Documentation: https://ej2.syncfusion.com/vue/documentation/kanban/cards/#template


If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,
Vinitha

Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon