First of all - just wanted to take a brief second and commend Bryntum on making great products. Keep up the good work.
A glitch has recently been brought to my attention when rendering a Vue component within the cells of a column. I'm experiencing the content of the cell being repeated within the same cell. This could very well be something I'm doing wrong. Below, I've whittled down the code to the most basic form I could that demonstrates the problem.
Bryntum Version: Vue2 5.5.0 (also tried with 5.6.7)
Chrome 122, Firefox 95 (doesn't seem to be a browser specifc issue)
No console errors
This problem happens when scrolling up or down, and seems to only happen on larger data sets where there are at least a couple hundred rows. Continuing to scroll up or down until the rows are not visible, then scrolling them back into view resolves it temporarily. It seems like the renderer is having a difficult time keeping up with the scrolling rows.
It seems to be fairly random, and I'm unable to pinpoint the culprit. Within our fully configured Gantt, fiddling around with changing the height, rowHeight, and even adding/removing the tbar seems to have a bit of an effect on how prevalent the glitchiness is. Strangely, when using this most basic example below, different height settings seem to have no affect (or lesser) and the repeated content is somewhat more consistent. It also is not restricted to the percentDone column, but has similar unpredictability on any column where a vue component is rendered.
I have followed the Bryntum example found here:
https://bryntum.com/products/gantt/docs/guide/Gantt/integration/vue/guide#implement-column-renderer
Code sample to reproduce:
<template>
<div>
<bryntum-gantt
ref="gantt"
:columns="columns"
:height="800"
:tasks="tasks"
v-bind="ganttConfig"
/>
</div>
</template>
<script>
import { BryntumGantt } from '@bryntum/gantt-vue';
import "@bryntum/gantt/gantt.classic-dark.css";
export default {
components: {
BryntumGantt,
},
data() {
let tasks = [];
for (let i=1; i < 300; i++) {
tasks.push(
{ id : i, name : `Task #${i}`, percentDone: 100 },
);
}
return {
tasks : tasks,
columns : [
{
align : 'center',
field : 'percentDone',
vue : true,
renderer({ record, value, isExport }) {
return {
is : 'progress-circle',
record,
value: record._data.percentDone,
};
}
},
],
}
},
}
</script>
Screenshot:
It may also be important to note that it seems the content of the component is irrelevant. It could be as simple as a basic template-only component that returns a single character, and the chracter will be repeated as well.
Component:
<template>
<div>
x
</div>
</template>
Screenshot:
I'm at a loss here. Any help would be greatly appreciated.
Thanks!
