Kendo React Grid Missing Responsive Design Options For Mobile Phones

Progress® KendoReact Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Planned

Last Updated: 14 Apr 2023 15:03 by ADMIN

Alex

Created on: 23 Jun 2021 13:56

Category: Data Grid

Type: Feature Request

Kendo React Grid Missing Responsive Design Options For Mobile Phones

Hello,
I am looking to start using the Kendo React grid control, but I need the grid to be responsive to support viewing on a phone. I noticed that your Angular grid has this functionality, but it is missing from your React grid.
I would like to have rows turn into individual cards when viewed on a phone. The closest thing I see in the react documentation involves hiding columns, which is undesirable. Is there a way to add this behavior to the React grid? If not, when will that be implemented?
Thank you,
Alex

10 comments

ADMIN

Konstantin Dikov

Posted on: 24 Jul 2022 18:07

Hi,

I just wanted to share a possible solution with the current implementation of the Grid, which takes advantage of the cellRender and rowRender options of the Grid to provide different rendering if the width of the Grid is smaller than a given threshold:

https://stackblitz.com/edit/react-ienznt?file=app%2Fmain.tsx,index.html

In the example, if you resize the iframe with the Grid you will notice that the rendering is changed, which can be used as a rendering for mobile devices.

Currently, the example is setting isMobile based on the width of the Grid, but it can be changed to be set based on if the app is opened on mobile or desktop device.

Regards,
Konstantin Dikov
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/.

ADMIN

Stefan

Posted on: 24 Feb 2022 07:17

Hello, Wojtek,

Thank you for sharing your feedback. We agree that this will be a valuable feature and will plan it accordingly.

Regards,
Stefan
Progress Telerik

Wojciech

Posted on: 23 Feb 2022 15:49

Hello,

I'd like to add to this thread. This feature is really needed.
You already have it implemented in angular grid so I guess it should not be necessary to "reinvent the wheel".

Hope that you can manage to squeze it into your development program :)

Best,
Wojtek

ADMIN

Stefan

Posted on: 17 Feb 2022 14:38

Hello,

That depends on many factors, and there is no specific number of votes.

It depends on how requested and how complex the item is. Also, if there are possible alternatives or workarounds. We receive requests inside the tickets, GitHub, company interviews, and other factors.

Based on all of that information, our Product Manager and Engineering Manager make our roadmap:

https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap

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

Antonio

Posted on: 17 Feb 2022 14:30

Thank you Stefan.

How many votes does a feature need to get picked up? There are features with a single vote that were developed already.

ADMIN

Stefan

Posted on: 17 Feb 2022 14:23

Hello, Antonio,

Thank you for the honest feedback we will take it into account when planning the next features.

You can vote for any request by clicking the Vote button:

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

Antonio

Posted on: 17 Feb 2022 14:21

I second's Alex's opinion. In today's day and age a grid is no use if it can't handle all screen sizes gracefully. We are also considering if we made the right choice for our UI framework. On the surface KendoReact appears to be fully feature but when you start to combine features you start to realise its limitations. Some of which should be obvious features.

Where may I vote on this feature?

ADMIN

Stefan

Posted on: 13 Jul 2021 06:31

Hello, Jason,

I'm sorry to hear that missing this feature is very disappointing.

I want to say that the Grid itself is responsive and will resize based on the avaialbe space. We also have different options all of which are shown here:

https://www.telerik.com/kendo-react-ui/components/grid/columns/width/

The feature request discussed here will further improve the responsive options of the Grid.

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

Jason

Posted on: 12 Jul 2021 17:40

This is a huge disappointment and making me wonder if I made the right decision to go with KendoReact. Now we are going to have to figure out how to hack it into the grid as responsive design in 2021 is a given.

ADMIN

Stefan

Posted on: 24 Jun 2021 04:41

Hello, Alex,

I have transferred this to an official feature request for the same options as in the Kendo UI for Angular Grid. The feature requests are how we determine what will be added next based on the KendoReact community interest.

We will monitor the interest and plan it accordingly.

I have also already added your vote for convenience

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