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.