Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 27 Sep 2024 16:05 by Brad
Simi
Created on: 30 Jan 2023 15:40
Category: Grid
Type: Feature Request
27
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.

3 comments
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.

Create an account Log In
View
Type
Status
Category