Using locking and resizing at the same time on Grid

1 Answer 15 Views
Grid
fingate
Top achievements
Rank 1
Iron
fingate asked on 17 Apr 2024, 01:44 AM

Hi, kendo

 

I used the grid for reference "https://www.telerik.com/kendo-vue-ui/components/grid/columns/locked/"
At the same time, I added resizable props.

like this,

<template>
  <grid
    :style="{ height: '400px', width: '500px' }"
    :data-items="products"
    :reorderable="true"
    @columnreorder="columnReorder"
    :columns="columns"
    :resizable="true"
  >
  </grid>
</template>
<script>
import { Grid } from '@progress/kendo-vue-grid';
import { products } from './products';
export default {
  components: {
    grid: Grid,
  },
  data: function () {
    return {
      products: this.createRandomData(),
      columns: [
        { field: 'ProductID'title: 'ID'width: '45px'locked: true },
        { field: 'ProductName'title: 'Name'width: '250px'locked: true },
        {
          field: 'Category.CategoryName',
          title: 'CategoryName',
          width: '150px',
          locked: true,
        },
        { field: 'UnitPrice'title: 'Price'width: '90px' },
        { field: 'UnitsInStock'title: 'In stock'width: '90px' },
        { field: 'UnitsOnOrder'title: 'On order'width: '90px' },
        { field: 'Discontinued'locked: truewidth: '120px' },
        {
          field: 'QuantityPerUnit',
          title: 'Additional details',
          width: '250px',
        },
      ],
    };
  },
  methods: {
    columnReorder: function (options) {
      this.columns = options.columns;
    },
    createRandomData() {
      return products;
    },
  },
};
</script>

 

I resized "Name" column, then I could see the bug that a gap has occurred between Name and CategoryName.

Can I fix it?

 

Filip
Telerik team
commented on 19 Apr 2024, 01:37 PM

Hello,

I used the provided code to create an example to test the behavior and I did notice that the Price column was dragged before the CategoryName, however, I did not observe a gap, I have attached a video of the test, can you please confirm if this is the encountered undesired behavior? Here is the tested example:

https://stackblitz.com/edit/52lzxd?file=src%2Fmain.vue

In case this is not what you are encountering on your end can you please share the correct steps so that I can reproduce it?

Regards,
Filip

fingate
Top achievements
Rank 1
Iron
commented on 24 Apr 2024, 01:29 AM

Hello,

I checked the video and code you sent me.
You are not wrong.
But the result I want is as shown in the image below.


Filip
Telerik team
commented on 26 Apr 2024, 07:13 PM

Hello,

Thank you for the provided clarification. I will need more time to reach out to the dev team to see if the gap was intended because of the width of the columns and them being locked, or if it is an issue with the component I will get back to you once I have more information on this matter.

Regards,
Filip

1 Answer, 1 is accepted

Sort by
0
Filip
Telerik team
answered on 10 May 2024, 09:01 AM

Hello,

After further research and testing this is an issue with the Grid component and I have logged it as such in our public repo where it can be tracked and monitored:

https://github.com/telerik/kendo-vue/issues/573

Apologies for any inconvenience this might have caused you. Currently there is no known workaround, if one is found or the issue is fixed the GitHub item will be updated accordingly. As a small token of gratitude for bringing this to our attention I have granted you some Telerik points.

Regards,
Filip
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources

Tags
Grid
Asked by
fingate
Top achievements
Rank 1
Iron
Answers by
Filip
Telerik team
Share this question
or