Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 30 Sep 2021 16:19 by ADMIN
Stefan
Created on: 23 Sep 2021 22:57
Category: Grid
Type: Feature Request
0
Grid column auto-width to fill remaining horizontal space.

It is impractical to set the grid columns to fixed width. I'll explain with example:

I have grid with 4 columns. The grid should have width 100%.

- Column 1: short text, 10-15 characters. I need this one to auto width to content.

- Column 2: checkbox, also auto-width to header title.

- Column 3: free text that may wrap on multiple lines. I need this column to use all available horizontal space so it will push the 4th column to the very right.

- Column 4: button. auto-width to either header title or button width, whichever is wider.

 

The auto-width feature is already requested: Autofit column widths on data load (telerik.com) but I don't see a feature request to handle the Column 3 scenario.

5 comments
ADMIN
Marin Bratanov
Posted on: 30 Sep 2021 16:19

Hi Stefan,

I am happy to see you moving forward.

Our components are designed to plug into an existing layout, we do not aim to compete with bootstrap or to create complete layouts or design systems. The layout-type components we have tend to aim at providing functionality that is hard to get with CSS alone (say, resizing panes in a splitter with the mouse) or is otherwise a tad tricky in Blazor for a certain audience (say, basic grid or flexbox layouts for people coming from desktop development, and there are many such people using Blazor).

That said, building layouts with a certain CSS framework like Bootstrap is a very valid approach, and our components can go in and fill in functionality and user interaction.

Regards,
Marin Bratanov
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.

Stefan
Posted on: 30 Sep 2021 15:20

I'm converting Silverlight application to Blazor and finding it easier to build the layout with bootstrap than with Telerik layout components. And Yes, I ended up creating a <table> with @foreach loop because I just couldn't use the Telerik Grid component.

ADMIN
Marin Bratanov
Posted on: 29 Sep 2021 17:22

Hello Stefan,

Pehaps for such a task it would be easier for you to just create a <table> in your own code and do a @foreach loop for the rows. For things like sorting, filtering and paging we offer the Telerik.DataSource as a standalone package so it does not depend on the grid (see more here), and in the future there will also be a standalone Filter component (if you are interested in that, click the Vote and Follow buttons).

Regards,
Marin Bratanov
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.

Stefan
Posted on: 29 Sep 2021 14:42
Would you consider adding new component GridLight or GridAuto that is implemented as single HTML table with table-layout: auto and a subset of the features of the current Grid component? As opposed to the the current design with 2 HTML tables, one for the header and another for the body. 
ADMIN
Marin Bratanov
Posted on: 28 Sep 2021 19:13

Hi Stefan,

Once all columns have widths in pixels, the last column that has no explicit width will take up the available space, this is the standard <table> behavior of browsers that you can read more about here: https://docs.telerik.com/blazor-ui/components/grid/columns/width.

I am going to have to mark this as "declined" however, because it is not something that the grid can choose to do on its own - such behavior is not deterministc (read, heuristic, and we can't have unpredictable/heuristic behavior). Here are a few reasons why:

  • For such a thing to happen, the total column widths must not exceed the main grid width. This cannot be guaranteed with widths calculated at runtime based on data.
    • This is the most important reason.
  • If the grid will perform an auto-size on all columns, it will do so on all columns, and if you want special exceptions, those would need to be handled through explicit application code (e.g., having a method to invoke the autosizing for a column, and calling it only for columns you want).

 

Regards,
Marin Bratanov
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.

Create an account Log In
View
Type
Status
Category