Hello,
I'm currently using Vue 3 with Kendo UI Grid for Vue (version 4.3.3).
My grid has Multiple columns and Multi-headers.
However, when I scroll horizontally, the data columns are not displayed correctly.
They either appear misaligned or are not rendered properly.
Could you please advise how to resolve this issue?
Any help would be greatly appreciated.
<template style="table-layout: fixed;">
<div class="row">
<div class="col m-3">
<Button @click="loadItems">Load 100 000 items</Button>
</div>
</div>
<div class="row">
<div class="col m-3">
Virtual Scrolling
<Switch @change="handleSwitchChange" :on-label="''" :off-label="''" />
Paging
</div>
</div>
<Grid
:key="isPagingOn"
:style="{ height: '440px' }"
:scrollable="isPagingOn ? 'scrollable' : 'virtual'"
:column-virtualization="true"
:skip="skip"
:take="take"
:total="numberOfRows"
:data-items="items"
:columns="columns"
:row-height="27"
:pageable="isPagingOn ? pagerSettings : false"
@pagechange="pageChange"
:sortable="true"
@sortchange="sortChange"
:sort="sort"
@cellclick="cellClick"
@rowclick="rowClick"
:page-size="10"
:edit-field="'inEdit'"
:data-item-key="'id'"
@itemchange="itemChange"
>
</Grid>
</template>
<script>
import { orderBy } from '@progress/kendo-data-query';
import { Button } from '@progress/kendo-vue-buttons';
import { Grid } from '@progress/kendo-vue-grid';
import { Switch } from '@progress/kendo-vue-inputs';
export default {
components: {
Grid,
Button,
Switch,
},
data: function () {
return {
dataItems: [],
data: [],
numberOfColumns: 100,
numberOfRows: 100000,
pagerSettings: {
info: true,
type: 'input',
previousNext: true,
},
columns: [],
expandColumn: 'expanded',
expandField: 'expanded',
skip: 0,
take: 20,
isPagingOn: false,
sort: [],
items: [],
};
},
created: function () {
this.columns = this.createColumns();
this.data = this.getData();
},
methods: {
itemChange: function (e) {
e.dataItem[e.field] = e.value;
},
cellClick: function (e) {
if (e.dataItem.inEdit && e.field === this.editField) {
return;
}
this.editField = e.field;
e.dataItem.inEdit = e.field;
},
rowClick: function (e) {
this.items.forEach((d) => {
if (d.inEdit) {
if (e.dataItem !== d) {
d.inEdit = undefined;
}
}
});
},
loadItems() {
this.dataItems = this.data;
this.items = this.dataItems.slice(this.skip, this.skip + this.take);
},
createColumns() {
const columns = [
{
field: 'id',
width: '150px',
},
{
field: 'Field-1',
width: '150px',
},
{
title: 'test',
children: [
{
field: 'Field-2',
width: '150px',
},
{
field: 'Field-3',
width: '150px',
},
{
field: 'Field-4',
width: '150px',
},
{
field: 'Field-5',
width: '150px',
},
{
field: 'Field-6',
width: '150px',
},
{
field: 'Field-7',
width: '150px',
},
{
field: 'Field-8',
width: '150px',
},
{
field: 'Field-9',
width: '150px',
},
{
field: 'Field-10',
width: '150px',
},
{
field: 'Field-11',
width: '150px',
},
{
field: 'Field-12',
width: '150px',
},
{
field: 'Field-13',
width: '150px',
},
{
field: 'Field-14',
width: '150px',
},
{
field: 'Field-15',
width: '150px',
},
]
}
];
/* for (let c = 1; c <= this.numberOfColumns; c++) {
columns.push({
field: 'Field-' + c.toString(),
width: '150px',
});
} */
return columns;
},
pageChange(event) {
this.skip = event.page.skip;
this.take = event.page.take;
this.items = this.dataItems.slice(this.skip, this.skip + this.take);
},
handleSwitchChange(e) {
this.isPagingOn = e.value;
},
sortChange(e) {
this.dataItems = orderBy(this.data, e.sort);
this.items = this.dataItems.slice(this.skip, this.skip + this.take);
this.sort = e.sort;
},
getData() {
const page = [];
for (let r = 1; r <= this.numberOfRows; r++) {
const row = {
id: r,
};
for (let c = 1; c <= this.numberOfColumns; c++) {
row['Field-' + c] = 'R' + r + ':C' + c;
}
page.push(row);
}
return page;
},
},
};
</script>
Thank you.
Hello, Yu.
Thank you for the details about the scenario in which you use the Grid. The reported behavior was a bug that had already been fixed.
Here is a StackBlitz example demonstrating how the shared code behaves when using the latest version of Kendo UI for Vue(v.6.4.1).
The solution I can suggest to you is to update the components in your project to the latest version of Kendo UI for Vue.
I hope the above details will help you implement what you need in the application you are wokring on.
Hi Petar,
First of all, thank you very much for answering my question.
However, it seems that the bug still persists.
I checked the example you provided, but the header and data columns are still not aligned properly.
When scrolling horizontally, I noticed that the misalignment occurs especially when passing the second column (Field-3) which uses a multi-level header. At that point, the header and data columns become visibly out of sync.
I've attached a screenshot to show the issue.
Thank you again for your support.
1) normal
2) column misalignment
Hi, yu,
Thanks a lot for the provided additional details. I researched the issue further and it turned out to be related to another known bug with very low priority. I updated the item to increase its priority as needed, you can track its progress here:
Apologies for the faced inconveniences.
Hello, Vessy.
Thank you for your response.
I’ll keep an eye on the progress.
Much appreciated!