SFC Template Example
Hi, I'm looking for an equivalent for Vue 3 of how I could use SFC templates in the Kanban control in Vue2.
Previously I would have a TaskCard.vue file, and in my main kanban file I would have:
Can you provide a sample of how this is achieved in Vue 3 with the Syncfusion controls? All of the examples available in the documentation only cover templates as strings instead of SFC pattern.
I found a codesandbox that attempted to replicate: https://codesandbox.io/s/vue-template-forked-tlp1p?file=/src/App.vue But wasn't able to get the KanbanCardTemplate to load
HI - sorry just for clarity, I'm looking for an example of how I do this in Vue 3, equivalent to how it is done in Vue 2, i.e. I have it working in Vue 2 but Vue 3 is proving problematic and the template not loading properly/not all data passed.
Are you able to provide a sample for Vue 3 not Vue 2?
Good day to you,
We are currently validating your reported query, and will update you with further details in two business days.
Regards,
Indrajith
All of that documentation is via templates within the file, not SFC templates.
Is it possible to update https://codesandbox.io/s/vue-template-forked-tlp1p?file=/src/App.vue (which was built by a Syncfusion staff member from what I can see (Vinita Jeyakumar) to work with a SFC card? I have uncommented the code but it never renders, which is the problem I'm facing.
Alternatively if you provide documentation that shows how to use a template defined in an SFC outside of the Kanban code I can use that.
Is it possible to get an update to this? I never received a working sample and its stopping me from using any of the products
We want to let you know that we have provided the slot template support to our Vue components from the V20.1.47. You can use this support by using nested template tag with slot name. You can refer to more details about the slot support in the documentation link.
https://ej2.syncfusion.com/vue/documentation/common/template/#slots
Release notes: https://ej2.syncfusion.com/vue/documentation/release-notes/20.1.47/?type=all#common
We have also prepared a sample for your reference,
You will be able to provide a column, card, and swimlane template using the slot. In the below sample, we have rendered the Kanban component inside the About page. Please find the below code and sample for your reference.
Code snippet:
<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
Please let us know if you have any concerns.
Regards,
Vinitha
