Issue with Data Columns Not Displaying Properly During Horizontal Scrolling (Vue 3)

0 Answers 49 Views
Grid
yu
Top achievements
Rank 1
yu asked on 12 May 2025, 08:35 AM | edited on 09 Jun 2025, 01:26 AM

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.

 

Petar
Telerik team
commented on 06 Jun 2025, 07:30 AM

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.

yu
Top achievements
Rank 1
commented on 09 Jun 2025, 01:04 AM

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

 

Vessy
Telerik team
commented on 11 Jun 2025, 04:56 PM

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.

yu
Top achievements
Rank 1
commented on 13 Jun 2025, 01:11 AM

Hello, Vessy.

Thank you for your response.

I’ll keep an eye on the progress.

Much appreciated!

Vessy
Telerik team
commented on 13 Jun 2025, 06:30 AM

You are most welcome, yu!

No answers yet. Maybe you can help?

Tags
Grid
Asked by
yu
Top achievements
Rank 1
Share this question
or