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: true, width: '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?
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
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.
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