RadGrid mobile render

[Jay]

New user to Telerik, here. Main question is, I have a radgrid that is about 20 columns wide w/ the ability to hide columns. In mobile render, if you attempt to hide columns using the context menu, the buttons are really wide. If you want to hide a column, you have to scroll way over uncheck it. Then you can't see what the other column names are without scrolling way back over and viewing the names.

Is there any way to set the width of the context menu so it automatically adjusts to the screen size? I did do a lot of searching on this and came up empty handed.

2) Also, in grouping, everything groups and works exactly like I would think it would, but if you ungroup anything, it throws an "Object reference not set to an instance of an object." error. It's kind of cryptic and searching for this error didn't lead me anywhere.

3) Mobile render seems a little buggy on my phone using FireFox or Chrome. Sometimes hitting the context menu icons, it will open up, group the column, and then close without me ever touching anything.

I finally got so fed up with grouping issues that I turned it off.

Outside of that, the hiding the column feature seems to work well and is at least something for a mobile user to cut down on the size of a big table.

Thanks,

Jay

 

 

 

[Attila Antal]

Hi Jay,

I wish you a Happy New Year 2021!

Indeed the Grid has these problems with the Mobile RenderMode and they have been reported already. The bug reports contain a temporary workaround that can be used until the problems are resolved.

Problem with Un-Grouping:

• Un-Grouping RadGrid with Mobile RenderMode throws exception Object reference not set to an instance of an object

Problem with Sorting:

• When RadGrid is in Mobile RenderMode, sorting through the HeaderContextMenu is sorting by the UniqueName of the columns and not by the DataField (nor the SortExpression)

 

If you would like to shrink the buttons you can always use CSS and override the built-in styles accordingly. 

Example:

.RadGrid .rgMobileForm .rgColumnItem {
    width: 200px;
}

 

About the problem with Firefox and Chrom when the buttons seem buggy, I would need more details to be able to replicate the issue and see what causes it. It would be helpful if you could share the complete Grid declaration. Also, I would need to know the steps/actions that will replicate this behavior. That will help me identify the issue and find a solution for it.

I look forward to hearing from you.

Regards,
Attila Antal
Progress Telerik

[Jay]

Ok, thanks on the CSS. I will try that. I didn't know if there was a declarative way to do it in the control markup or not.

I just turned off grouping. I don't think many of our users would use it, anyway.

The buggy buttons is hard to explain, but here is one to look for. I had a test grid with the ability to hide columns and group. When I hit the column button, it also unselected the column that just happened to be directly under the icon you click to bring up the menu to hide columns.

Not a huge deal, but if you weren't paying attention, it could hide a column you didn't want hidden.

I was just trying it on a different grid. It's not doing it on this grid. Must just do it when everything lines up perfectly.

Thanks,

 

 

 

 

 

[Attila Antal]

Hi Jay,

We have a few ideas of why this could happen, but since you only experience this in one of more Grids, I am thinking it might be something specific. 

It would be helpful if you could share the Grid declaration and any CSS style or JavaScript code you use to manipulate it. I will then try to replicate the problem on my end.

I look forward to hearing from you.

Regards,
Attila Antal
Progress Telerik

[Jay]

For future reference, I came up with this, too:

 .RadGrid .rgMobileForm .rgColumns {
         width: 200px;
         }

It pulls the dropdown icon thing ">" over so that it is visible without scrolling over.

 

 

 

 

 

[Attila Antal]

Hi Jay,

Is this fixing the issue?

If not, would you please share the complete declaration of the Grid along with the CSS, JavaScripts you have to control it? I will then try to replicate the issue locally and share my findings.

Regards,
Attila Antal
Progress Telerik