I fill cell with html mode in taskRenderer method like
taskRenderer({ cardConfig, taskRecord }) {
if (taskRecord.data.taskID) {
var attachment = [];
var tags = "";
var progressBar = "";
var count = '';
var countObject = '<div class="d-flex align-items-center mr-2"></div>';
var avatarStr = '';
if (that.wkSV.resourceAvatar) {
avatarStr = `<div class="symbol-group symbol-hover justify-content-end">
<div class="symbol symbol-24 symbol-circle">
<img src="../../../assets/demos/user/user4.jpg">
</div>
<div class="symbol symbol-24 symbol-circle">
<img src="../../../assets/demos/user/user2.jpg">
</div>
<div class="symbol symbol-24 symbol-circle">
<img src="../../../assets/demos/user/user9.jpg">
</div>
<div class="symbol symbol-24 symbol-circle symbol-light">
<span class="symbol-label">5+</span>
</div>
</div>`;
}
if (that.wkSV.countObject) {
countObject = `<div class="d-flex align-items-center mr-2">
<div class="d-flex align-items-center mr-3">
<span class="icon-mode_comment icon-18 text-dark-50 mr-1"></span>
<span class="text-dark-50">0</span>
</div>
<div class="d-flex align-items-center mr-3">
<span class="icon-check_box icon-18 text-dark-50 mr-1"></span>
<span class="text-dark-50">0</span>
</div>
<div class="d-flex align-items-center mr-3">
<span class="icon-attach_file icon-18 text-dark-50 mr-1"></span>
<span class="text-dark-50">` + attachment.length.toString() + `</span>
</div>
</div>`;
}
if (that.wkSV.progressBar) {
progressBar = `<div class="progress mt-4" style="height: 5px;">
<div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
class="progress-bar" style="width: ` + taskRecord.data.toDoPercent + `%;"></div>
</div>`;
}
if (taskRecord.data.listTags && that.wkSV.tags) {
var listTags = taskRecord.data.listTags;
for (var i = 0; i < listTags.length; i++) {
tags = tags + '<span class="status-item" style="background-color: ' + listTags[i] + '"></span>';
}
}
if (taskRecord.data.attachment != null)
attachment = taskRecord.data.attachment.split(";");
cardConfig.children.body.children.details = {
class: 'details',
html: `<div class="content-box tm-box p-3 border">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center tm-date mr-2">
<span class="icon-access_time icon-16 text-muted mr-1"></span>
<span class="text-dark-50">` + that.formatDate(taskRecord.data.createdOn) + `</span>
</div>
<div class="text-primary mr-2">` + taskRecord.data.statusText + `</div>
<span style="color: ` + taskRecord.data.statusColor + `" class="icon-flag icon-18"></span>
</div>
<div class="dropdown ml-2">
</div>
</div>
<div class="d-flex flex-column flex-grow-1 mt-3">
<div class="d-flex flex-column flex-grow-1">
<div class="text-dark font-weight-bold">` + taskRecord.data.taskName + `</div>
<div class="d-flex task-status mt-3">
` + tags + `
</div>
` + progressBar + `
</div>
<div class="d-flex justify-content-between align-items-center mt-4">
` + countObject + avatarStr + `
</div>
</div>
</div>
`
};
// Color tasks by priority
const prioColors = {
critical: 'red',
high: 'orange',
medium: 'yellow',
low: 'green'
};
cardConfig.class[`b-taskboard-color-${prioColors[taskRecord.prio] ?? 'blue'}`] = true;
}
},
So I want to refill cell with html after editing it in method
taskEdit: {
// edit task
processItems({ items, taskRecord, columnRecord, swimlaneRecord }) {
}
}
Can you give me a guide.