Horizontal scroll within (inside) of grid

[Mihran]

     Hello me and my team are trying to achieve a horizontal scroll within the expanded details view of a grid. Once the user clicks on a carrot and expands to see additional details within a grid there are input boxes and dropdowns formatted in columns. The width of these columns that hold the input boxes/dropdowns stretch beyond the page view and in order to see the right side of the screen the user must scroll all the way to the bottom of the grid and use the horizontal scroll. What we want to achieve is placing a horizontal scroll inside of the expanded view so the user can scroll without having to go all the way to the bottom and then scroll to the right.

Please note I'm talking about the content inside the expanded view and not the grid.extendReadOnly feature which already comes with the horizontal scroll out of the box. Some of the things I already tried are putting overflow-x: scroll scss within the class and apply it to the form that is essentially the content in the expanded view. I also wrapped the form into another container div which didn't work either. Any ideas on how my team and I can accomplish this? Thank you.

[Georgi Denchev]

Hi Mihran,

Generally speaking applying an overflow to the div element containing the form inside the detailTemplate should do the trick. It's hard to determine what the problem might be without seeing some code first. If it's possible, please prepare a small dojo sample that contains the grid and a detail template layout similar to what you are currently working with. This way I'd be able to examine it locally and return back to you with an appropriate answer.

Here is an example of detail template content that stretches outside the grid and has a horizontal scroll. 

And another one with a table that has inputs inside it's cells.

I am looking forward to your reply.

Best Regards,
Georgi Denchev
Progress Telerik

[Lee]

I'm looking to achieve the opposite. I want the main table to scroll horizontally but the stuff in the detail cell to remain static so that it is always aligned with the left edge of the table regardless of how far to the right the user scrolls.

[Georgi Denchev]

Hi, Lee,

You should be able to achieve this by setting the overflow to 'unset', however keep in mind that this will likely lead to issues as the detail is not meant to make the Grid's scrollbar to appear. The scrollbar should be visible only if the width of the Grid columns exceeds that of the content.

Here's the above Dojo with the added change:

https://dojo.telerik.com/@gdenchev/uqARAgIT 

Best Regards,

Georgi

[Lee]

The linked dojo does not do what I was requesting. I need a table that, when it is too wide to display, scrolls horizontally. I need the dropdown arrow and first 2 columns always on the screen (locked). When the panel is expanded its content should not scroll left or right (unless it happens to overflow). The idea is that when the user opens the panel they see some details about that row (maybe a paragraph and a chart or anything).

[Georgi Denchev]

Hi, Lee,

I've left a reply in the other thread regarding the locked columns and detail template. As I mentioned there, this is not possible at the moment. The contents of a detail cannot be frozen in one place as the detail is part of the Grid itself. There's no way to keep only one row in place(while scrolling horizontally).

Best Regards,

Georgi