When using autoFitColumn all other columns are reduced to their width size instead of filling the available space

1 Answer 12 Views
Grid ScrollView Styling
Noah
Top achievements
Rank 1
Noah asked on 30 Jun 2021, 05:01 PM

The autoFitColum method sizes the chosen column to the correct size, but it also reduces all other columns to their width property as shown below. 

I created some examples to show what I'm talking about by editing autoFitColumn - API Reference - Kendo UI Grid | Kendo UI for jQuery (telerik.com)

This behavior works out in cases where the auto fit column exceeds the grid width (see figure 1), but not in cases where the the data is Smaller than the grid (see figure 2). 

The desired behavior, for me, would be for the autoFitColumn method to act like setting the width manually (see figure 3 or dojo example). I need scrollable to be true and grid width to be auto to work on any screen width. Allowing the rows to text-wrap doesn't work for scrolling large data tables.

Is figure 2 the intended behavior, and is there a way to achieve my desired behavior?

 

<div id="grid"></div><script> $("#grid").kendoGrid({ columns: [ { field: "name", width: 100 }, { field: "age", width : 50 }, { field: "quote" } ], dataSource: [ { name: "Jane Doe", age: 30, quote: "I like Pi." }, { name: "John Doe", age: 33, quote: "The FitnessGramâ„¢ Pacer Test ... ding" } ], scrollable: true, width: 'auto' }); var grid = $("#grid").data("kendoGrid"); grid.autoFitColumn("quote"); </script>

figure 1: behavior of autoFitColumn if data is longer than grid is wide.


<div id="grid"></div><script> $("#grid").kendoGrid({ columns: [ { field: "name", width: 100 }, { field: "age", width : 50 }, { field: "quote", } ], dataSource: [ { name: "Jane Doe", age: 30, quote: "I like Pi." }, { name: "John Doe", age: 33, quote: "I like Pi too." } ], scrollable: true, width: 'auto' }); var grid = $("#grid").data("kendoGrid"); grid.autoFitColumn("quote"); </script>

firuge 2: behavior of autoFitColumn if data is shorter than grid is wide


<div id="grid"></div><hr/><div id="grid2"></div><script> $("#grid").kendoGrid({ columns: [ { field: "name", width: 100 }, { field: "age", width : 50 }, { field: "quote", width : 3272 } //this width should be set by autoFitColumn instead of manually ], dataSource: [ { name: "Jane Doe", age: 30, quote: "I like Pi." }, { name: "John Doe", age: 33, quote: "The FitnessGramâ„¢ Pacer Test ... ding" } ], scrollable: true, width: 'auto' }); $("#grid2").kendoGrid({ columns: [ { field: "name", width: 100 }, { field: "age", width : 50 }, { field: "quote", width: 93 }//this width should be set by autoFitColumn instead of manually ], dataSource: [ { name: "Jane Doe", age: 30, quote: "I like Pi." }, { name: "John Doe", age: 33, quote: "I like Pi too" } ], scrollable: true, width: 'auto' }); //I left this code in a comment to make switching back and forth between my desired and actual behavior easier /*var grid = $("#grid").data("kendoGrid"); var grid2 = $("#grid2").data("kendoGrid"); grid.autoFitColumn("quote"); grid2.autoFitColumn("quote");*/ </script>

figure 3: desired visual result, but the width should be set using autoFitColumn, not manualy

 

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 05 Jul 2021, 10:40 AM

Hi Noah,

The autoFitColumn applies the minimum possible width for the specified column. I would suggest you use the following style in order to adjust the width of the Grid:

  <style>
    #grid {
        display: inline-block;
        width: auto;
    }
 
    #grid table {
        width: auto;
    }
</style>

Here you will find a Dojo example based on one of the provided snippets.

You could also take a look at the following articles:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-autofit-all-columns-width

https://docs.telerik.com/kendo-ui/controls/data-management/grid/columns/widths

I hope you will find the provided information helpful.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid ScrollView Styling
Asked by
Noah
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or