This is a migrated thread and some comments may be shown as answers.

Horizontal scroll within (inside) of grid

1 Answer 1066 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mihran
Top achievements
Rank 1
Mihran asked on 06 Jan 2021, 04:45 PM

     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.

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 08 Jan 2021, 10:33 AM

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

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/.

Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 03 Aug 2023, 08:24 PM | edited

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
Telerik team
commented on 07 Aug 2023, 09:30 AM

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
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 07 Aug 2023, 11:23 AM

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
Telerik team
commented on 09 Aug 2023, 07:59 AM

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

Tags
Grid
Asked by
Mihran
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or