Kanban card template issue
29 Replies
Hi Somsubhra,
Thanks for the update.
We have validated your SharedLink at our end and we are able to replicate the issue on our side and in that, we have made the data function as an empty function that could be the reason for the reported problem. And for that, we will modify our UG sample and it will be reflected in our upcoming release, and in the meantime, we suggest you please use the below-modified code snippet to overcome this issue.
Code snippet:
|
Old snippet |
Modified snippet |
|
template: function() {
return {
template: Vue.component('cardTemplate', {
template: `<div class='e-card-content'>
<table class="card-template-wrap">
<tbody>
<tr>
<td class="CardHeader">Id:</td>
<td>{{data.Id}}</td>
</tr>
<tr>
<td class="CardHeader">Type:</td>
<td>{{data.Type}}</td>
</tr>
<tr>
<td class="CardHeader">Priority:</td>
<td>{{data.Priority}}</td>
</tr>
<tr>
<td class="CardHeader">Summary:</td>
<td>{{data.Summary}}</td>
</tr>
</tbody>
</table>
</div>`,
data() { }
})
}
} |
template: function() {
return { template: Vue.component('cardTemplate', {
template: `<div class='e-card-content'>
<table class="card-template-wrap">
<tbody>
<tr>
<td class="CardHeader">Id:</td>
<td>{{data.Id}}</td>
</tr>
<tr>
<td class="CardHeader">Type:</td>
<td>{{data.Type}}</td>
</tr>
<tr>
<td class="CardHeader">Priority:</td>
<td>{{data.Priority}}</td>
</tr>
<tr>
<td class="CardHeader">Summary:</td>
<td>{{data.Summary}}</td>
</tr>
</tbody>
</table>
</div>`,
data() {
return {
data: {}
};
}
}) };
} |
And for further reference, kindly refer the below Vue documentation,
And for that, we have taken the screenshot of the above rendered sample,
Kindly try the above sample and get back to us if you need any further assistance.
Regards,
Hareesh
Hi Somsubhra,
Thanks for the update.
We have validated your shared image at our end. And for that, we suspect that you have not included the CSS property for the Kanban sample that could be the reason for the reported problem. And also kindly include our previously updated solution in the Card template function. We can able to replicate your issue in our previously updated sample as per your shared image, kindly refer the below differentiated table for further reference,
Code snippet:
|
Code snippets |
Issue replicating image |
Shared sample image |
|
<head>
<meta charset="utf-8">
<title>EJ2 VueJS Kanban</title>
<link rel="shortcut icon" rel='nofollow' href="./src/assets/logo.png" />
<link rel='nofollow' href="http://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
</head>
In CradTemplate:
data() {
return {
data: {}
};
} |
 |
 |
And the same sample can be downloaded from the following link,
Kindly try the above solution and if the issue still persists at your end kindly share the below details to serve you better?
- Replicate the issue in the above sample
- Share the issue replicating sample (if possible)
Regards,
Hareesh
Hi Alex,
Thanks for the update.
We have prepared a sample to reproduce your reported issue “contents are not rendering inside the Kanban template ” unfortunately, we were unable to reproduce your reported problem and the sample can be downloaded from the following link. We have tried the following ways to replicate the issue at our end.
- We have ensured the Kanban cards are properly rendering with and without cardTemplate.
- Also we have ensured the below sample in different browser like Chrome, Edge, Firefox and it is rendering properly in it.
|
template: function() {
return { template: Vue.component('cardTemplate', {
template: `<div class='e-card-content'>
<table class="card-template-wrap">
<tbody>
<tr>
<td class="CardHeader">Id:</td>
<td>{{data.Id}}</td>
</tr>
<tr>
<td class="CardHeader">Type:</td>
<td>{{data.Type}}</td>
</tr>
<tr>
<td class="CardHeader">Priority:</td>
<td>{{data.Priority}}</td>
</tr>
<tr>
<td class="CardHeader">Summary:</td>
<td>{{data.Summary}}</td>
</tr>
</tbody>
</table>
</div>`,
data() {
return {
data: {}
};
}
}) }; |
Note: Kindly follow the same structure to render the card template of the Kanban component.
And for the same, we have taken a screenshot of the above sample,
Kindly refer to the above sample, also share the below details to validate your reported issue and serve you better.
- Kindly confirm whether our updated sample is working properly or not at your side?
- Kindly confirm whether the issue is related to the cardTemplate or some other issues ?
- If possible, replicate the issue in the above sample.
- Share the issue replicating sample (if possible) in order to validate further at our end.
We will be happy to assist you..!
Regards,
Hareesh
Alright so, I managed to get blank cards to render under the headers, but I still can't get content to show. I looked at the docs, and the cardSettings template field is expected to be a string.
https://ej2.syncfusion.com/vue/documentation/api/kanban/cardSettingsModel/#template
I changed it to
https://ej2.syncfusion.com/vue/documentation/api/kanban/cardSettingsModel/#template
I changed it to
cardSettings: {
headerField: "Id",
template: `<template><div style="color: black">Test</div></template>`,
}
and that renders a list of blank cards with no content.
Also why can't I upload a local image anymore to these RTEs?
SIGN IN To post a reply.
