Horizontal scroll within (inside) of grid

2 posts, 0 answers
  1. Mihran
    Mihran avatar
    1 posts
    Member since:
    Dec 2020

    Posted 06 Jan Link to this post

         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.

  2. Georgi Denchev
    Admin
    Georgi Denchev avatar
    111 posts

    Posted 08 Jan Link to this post

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

Back to Top