Responsive / adaptive Grid for mobile devices

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 25 Apr 2025 14:06 by ADMIN

Simi

Created on: 30 Jan 2023 15:40

Category: Grid

Type: Feature Request

Responsive / adaptive Grid for mobile devices

Hello,

Please consider a Grid feature that changes the component layout on mobile devices or narrow screens. The idea is to switch the column layout to a card layout or anything similar to this example: https://css-tricks.com/responsive-data-tables/

It is possible to implement a similar behavior with the Telerik Blazor Grid and MediaQuery components, but it requires reusing the column titles in the CSS code: https://blazorrepl.telerik.com/GnYPmHFR176Jg5Yg02

===

Telerik Blazor team: Everyone who is interested in this feature, please vote for it to help us prioritize. Also, share your opinion about which Grid features you strictly need in the "mobile" layout and which ones you are ready to sacrifice. Some features don't make sense in a card / listview layout anyway, but still, the mobile-friendly Grid may require completely different HTML markup and UX, so some features may need to be completely revamped.

7 comments

ADMIN

Dimo

Posted on: 25 Apr 2025 14:06

@Francis

An easier option to calculate the PageSize is to measure only the height of the Grid content area. In this way the presence of toolbars and footers no longer matters:

https://blazorrepl.telerik.com/czuSmTkC20wzTCLC57

I know that we showed you this feature request in a private ticket, but on second thought, an "automatic" page size should better not be part of the Grid's adaptive story. There are a lot of considerations and outright problems that may not be immediately obvious:

Changing the PageSize can reset the Page index to 1 or completely change the visible rows if the user is not on the first page. Users will not expect the Grid to do that simply because it resized.
A user may try to edit a row, which will display the virtual keyboard, which will shrink the viewport, which will reduce the PageSize, which can remove this very row from the UI.
The Grid may resize as a result of UI changes that are not related to viewport resizing. Such changes are harder to detect.
The potential enhancement is not applicable for virtual scrolling scenarios, which always require scrolling.
Some developers may not like the fact that the Grid causes additional database requests on resize.
An automatic page size relies on the assumption that users prefer to page repetitively and see a very small number of rows, rather than scroll the Grid as they normally would, or scroll the whole page while the Grid itself has no Height and is non-scrollable. The latter is not a problem with data items that show as cards, because there is no longer a need for always-visible headers.

Regards,
Dimo
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.

Francis

Posted on: 21 Apr 2025 12:09

Here is what I am commented about: look at the white space following the grid and up to the footer:

Francis

Posted on: 21 Apr 2025 11:47

My use case is different. All the examples and suggestions are for when the screen real estate expands horizontally. Mine is in the vertical direction.

Most of the pages I work with have a heading and on grid control. There is an example to resize the grid when the screen is bigger and it involves computing how much to exclude for the grid, and then compute the page size. For the page size computation, the example had to determine the actual content size first and it subtracted the toolbar or the paging control height. Besides toolbar, there are other controls like grouping that needs to be considered. And these have to be done on every page, every application the grid control is used. It would be beneficial to have this feature provided by the control itself as it is aware of the classes and controls activated in the instance. Should the Telerik team, in the future, decide to change the class names or adopt a different strategy to render, existing code won't break.

Mohamad Javad

Posted on: 07 Jan 2025 18:14

Hello
The best solution in my opinion is to automatically scroll the Grid horizontally when displaying it on other devices.
See the link below. And by pressing the F12 button, the Grid is fully Responsive.
Please include this feature in the Telerik Grid:

https://demos.devexpress.com/blazor/Grid

Brad

Posted on: 27 Sep 2024 16:05

Please add this feature! We are having to use Razden instead of Telerik because this isn't implemented.

Andrew

Posted on: 16 Sep 2024 15:30

see how these guys are doing it https://blazor.syncfusion.com/demos/datagrid/adaptive-rendering?theme=bootstrap5

Sheraz

Posted on: 20 Aug 2024 07:36

Hi there,

For this feature, the closest example comes to mind is the DataTables where as soon as you start reducing the page size the columns start getting collapsed one by one into a row and an Expand/Collapse button shows up in the first column where you can click and see the collapsed columns' data.

With the above approach, whatever the cell contains, shows up in a cell in collapsed section. It can be simple text or an image or a Button or any other control but the content renders as is what was shown in the fully expanded grid.

Or there is another example found in the Syncfusion controls where you can choose the Grid Render Mode and set it to be horizontal or vertical. Where vertical can be used for mobile devices or smaller screens.

Thank you very much and hope to see this feature coming into shape sooner rather than later.