Last Updated: 13 Apr 2023 14:10 by ADMIN
Created on: 12 Apr 2023 16:59
Category: Grid
Type: Feature Request
Grid with no initial items has its width permanently set to 0px

If the Grid is initialized with no items, the first call to resetTableWidth as part of the initialization sets the width style on the k-grid-table to 0px.

If any items are added afterwards this style remains, even though the autogenerated columns have a greater width. This leads to the grid not being visible until its size is set manually.

Sample (Grid demo with column definitions removed and changed load the data after mount instead of after creation): https://codesandbox.io/s/late-hill-rkdhc5?file=/src/Grid.vue

1 comment
Posted on: 13 Apr 2023 14:10


Thank you for the shared details related to the Native Grid's behavior when there are no columns defined for the component. This issue is a known one and its public thread can be checked on this link to our public repository. As the Grid requires either columns definition or data before its initialization, we don't thread the discussed behavior as a bug but as a feature enhancement. 

As the scenario is not listed in the Feedback portal of Kendo UI for Vue internally related your report with the feature enhancement in our public repository. I also raised the priority of the enhancement. 

The solution you can use to load the data that is fetched in the mounted hook of a Vue component, we can use the approach demonstrated in this StackBlitz example. In this example, we use a dummy object to define the variable passed to the columns property of the Grid. 

columns: [{ field: "ProductID" }],

Once the mounted function is triggered, we reset the columns prop value and after that assign the Grid's data.

mounted: function () {
  this.columns = [];
  this.gridData = this.getData(this.employees);

Please check the above example and try the suggested approach in your application. If you have any questions related to the provided solution or need furhter assistance with the current ticket, we will be happy to help you.

Looking forward to your reply.

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.