Adding a horizontal scroll bar when there are too many rows/fields

[Richard]

Hello everyone,

I was curious if there's a way to implement an HScrollBar to a UI when the grid gets too populated to fit on one screen. Any help would be appreciated. Thank you! 

[Alexander]

Hi Richard,

In general, the Kendo UI Grid component provides a scrolling functionality which by default is disabled. For the Kendo UI for ASP.NET Core Grid specifically, the scrolling functionality can be enabled through the .Scrollable() configuration API method.

Also, the .Scrollable() API exposes a height configuration setting that sets an optional height style for the data area. If the height is exceeded, a horizontal scrollbar will be rendered inside the Grid. For example:

@(Html.Kendo().Grid<OrderViewModel>()
    .Name("grid")
    .Scrollable(s => s.Height(400)) // Set a 400px-height style.
)

// Alternatively:

@(Html.Kendo().Grid<OrderViewModel>()
    .Name("grid")
    .Scrollable(s => s.Height("auto")) // Remove the default height.
)

With that said, you can review the following Telerik REPL example for a visual representation of the mentioned above.

Additional information and different use-cases regarding the scrolling feature can be reviewed here:

• Scrolling Documentation - https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/scrolling/overview?_ga=2.196313068.1155667005.1641134553-386205687.1640007402

I hope you find this helpful. If any other questions arise, feel free to let me know.

Regards,
Alexander
Progress Telerik

[Richard]

Thanks for the response, Alexander! I misspoke, I meant to say adding a horizontal scroll bar to the RadPivotGrid control. When it becomes too populated to fit on one screen, a horizontal scroll bar appears on the bottom, but it only affects the columns on the right side of the screen. What I meant to ask you was if there is a way to implement another scroll bar above the first one which will effect the rows that take up most of the screen. I've marked the area I'm referring to in the attached image. Hope this clears my question up!

[Alexander]

In general, the Telerik UI for ASP.NET Core has two types of Pivot Grid available at hand. The legacy PivotGrid and the new PivotGridV2 components. However, based on the provided screenshot it seems that you are either using the Telerik UI for Winforms or Telerik UI for WPF RadPivotGrid instead. In this regard, could you please clarify which product you currently are using?

[Richard]

Hi Alexander, the specific code that is being used for the Pivot Grid here is Telerik.WinControls.UI.RadPivotGrid. 

[Dess | Tech Support Engineer, Principal]

Hello, Richard,

Thank you for the provided clarification.

Indeed, RadPivotGrid from the Telerik UI for WinForms suite shows a horizontal scrollbar out of the box and it scrolls the data cells. All row descriptors are pinned and not scrollable. Hence, their width is too big that exceeds the pivot grid's width, they are not scrollable. In this case, it si suitable to use the compact mode:
https://docs.telerik.com/devtools/winforms/controls/pivotgrid/layout-settings#headers 

Please give it a try and see how it works for you.

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik