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