Feature: DataGrid as responsible (without fix row numbers/PageSize)


could you please create a possibility to configure a DataGrid as responsible?
So the size should automatically fit to (full-)screen of a specific height of Desktop, Tablet and Mobile.

Currently it's required to set up a fix number for the PageSize(Rows),
but it would be much more convenient if the PageSize would be automatically calculate by the height of the DataGrid.

At the moment my pages fits good for FHD, but the screens with a higher resolution are much unused.

Hi @radzenuser,

I am not sure what you are suggesting. Can you clarify?

Hi @korchev

I wish that the DataGrid use the available space and grow/shrink automatically especially to the height.

Currently it's necessary to set up a fix PageSize, which match only to a specific resolution.

But if a user have an other (smaller/bigger) resolution than me while the design time, the DataGrid doesn't use the available space.
So the DataGrid should not stay fixed at 10 rows, although the display is big enough to show e.g. 25 rows.

You can probably use percentage height for the DataGrid or even vh units. Calculating the page size based on the visible height is problematic though as it would require JavaScript calculations.

Hello korchev,

yes, the height of the DataGrid can easily defined by pixel and works well.

But the problems with the DataGrid are:

  • a height as percentage will be ignored and
  • required explicit a fix number for the property "PageSize" (number of visible rows) - at least inside of Radzen IDE.

So if a DataGrid height is defined as 100%, the number of visible rows should depends on the size|resolution of the Browser-Window (e.g. 8 rows on mobile phone and 40 rows for 4k display; like in this picture).

But actually neither a percentage based DataGrid height nor a matching dynamic numbers of visible rows (fullscreen) are possible (all devices shows a fix number of rows and the grid is empty below).

I see what you mean however I don't think we can implement such a feature easily. There are things as browser zoom which also affect the size of rows. Still you can try calculating the page size dynamically based on the browser height. You can use JS interop to get it.

Would it be possible to implement formulas for height and width of all components?
For example: 100vh-200px

Attempting formulas like this currently results in the component displaying in its original unmodified size parameters.

A formula like this would allow for taking into account static page components while resizing the subject component for the remaining viewable height.

Currently, only single qualifying units can be used, IE: 100%, 100px, 100vh

It is possible but not from the Radzen IDE property grid. You would have to either set style as a custom attribute or edit the JSON of the Radzen page.

Have you tried:

calc(100vh - 100px) etc

@korchev, Thanks! I will play around with styles


Please let us know, if you find out a possibility that a grid get a truly responsive behaiver with

  1. use all the available space (variable resolutions/browser size) and
  2. dynamically fill up the whole grid with (non fixed count) rows too
1 Like