Native Grid AutoFitColumn

[Ken]

I can't seem to find anything in the docs about how to make the columns auto-fit the width of the container. In the grid wrapper, I've found https://docs.telerik.com/kendo-ui/knowledge-base/grid-autofit-all-columns-width and can use the dataBound event to access the autoFitColumn method. However, I just can't find anything similar in the docs for the native grid.

Thanks for any help I can get!!

[Plamen]

Hi Ken,

Yes indeed there is not such built in functionality in Kendo Native Vue Grid so far. 

Basically in order to achieve such behavior we have to loop through all the rendered items and calculate the width of the column depending on the length of the text in the "longest" cell. I have created a sample stackblitz example where I have implemented such behavior with a dummy data and length formula for the width. Please review it and let me know if it is something close to what you are expecting or if your scenario is somehow different.

Regards,
Plamen
Progress Telerik

[balazs]

The biggest issue is, how they have all the setup in the native, you can't even use table auto-layout and width 100% neither...

We're looking for a new tool and seems TELERIK won't be our choice for VUEJS.

1. no way to set up columns in the template (not to mention nested columns)

2. no way to auto adjust columns to content

3. no way to utilize pure CSS to do the same

4. no way to use other units as px or %

 

Ohh and seems no answer from telerik for  the last 5 years...

Actually, I remember it took them so much to realize that they had an issue in reporting (after I did a ticket on that).

Interesting thing to know: the Angular components and their support there was awesome.

[Vessy]

Hello, balazs,

Thank you for taking the time to share your feedback. I’m sorry to hear that your experience with our Vue components hasn’t met your expectations, and I appreciate the opportunity to address your concerns.

I’d like to clarify some of the points you raised:

1. Setting up columns in the template (including nested columns): This feature is fully supported in our Vue Grid. We provide APIs and examples for defining both regular and nested columns using templates, you can refer some of them here: 
   - https://www.telerik.com/kendo-vue-ui/components/grid/custom-rendering/custom-cells/ 
   - https://www.telerik.com/kendo-vue-ui/components/grid/custom-rendering/custom-cells-grouping/ 
   - https://www.telerik.com/kendo-vue-ui/components/grid/custom-rendering/hierarchy/ 
2. Auto-adjusting columns to content: This functionality is indeed not available as a built-in feature (and we do not have a feature request for it) but can be easily achieved as demonstrated in my colleague Plamen's reply above. Here is an up-to-date version of the same - https://stackblitz.com/edit/x3u58hsz-biktd53l?file=src%2Fmain.vue 
3. Using pure CSS for layout control: While the Grid relies on its own layout logic for performance and responsiveness, many CSS-based customizations can still be applied. You can also customize the built-in styling of the Grid nad/or the other Kendo UI for Vue components. If there’s a specific styling requirement you’d like to achieve, please let us know—we’d be happy to explore options with you.
4. Supporting other units like % or px: The Grid supports flexible sizing, including percentage-based and pixel-based widths and other units. You can see a sample demonstrating this below:
   

   <template>
     <Grid :data-items="gridData" :height="400">
       <GridColumn field="name" title="Name" :width="'50%'" />
       <GridColumn field="age" title="Age" :width="'50%'" />
     </Grid>
   </template>

As for the statement that "no answer from telerik for  the last 5 years" I am not entirely sure what this pertains to as I can see that my collegue Plamen answered to the initial post of this thread with a sample solution just several days after it has been submitted. 

Please let us know if there are any specific use cases or challenges you’re facing with the Kendo UI for Vue Grid that we haven’t addressed and we would be glad to help you with them as well.

Regards,
Vessy
Progress Telerik

[balazs]

1. NOPE, that's not setting up the grid in the template, you're still using the column[], it's nothing like: https://www.telerik.com/kendo-angular-ui/components/grid
2. Using magic values, additional calculation is not the proper way to set up column sizes!
3. Nope, setting up width via CSS just won't work as the header, content, and footer are 3 separate tables!
4. Again, I said other than px and %, then you provide me with a sample that uses a % - not really helpful!

The point is: that issues 2, 3, and 4 could be easily "solved" (well, just rendered for most cases invisible) if the grid would provide an autoAdjust setting in general and/or for cols.