Adding Horizontal Scrollbar to the Top of the Kendo UI for Angular Grid

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

I am using the Kendo UI for Angular Grid and need to have scrollbars at both the top and bottom parts of the component.

This Knowledge Base article also answers the following questions:

• How can I add a scrollbar to the top of the Kendo UI for Angular Grid?
• Is there a way to have scrollbars at both ends of the Kendo UI for Angular Grid?
• Can I customize the Kendo UI for Angular Grid to show horizontal scrollbar at the top?

Solution

To display horizontal scrollbars at both the top and bottom of the Kendo UI for Angular Grid, use the .k-grid .k-grid-header-wrap CSS selector and adjust the overflow-x and padding-bottom properties together with the value set to the encapsulation meta data:

css

.k-grid .k-grid-header-wrap {
    overflow-x: scroll;
    padding-bottom: 6px;
}

The following example demonstrates the suggested approach in action:

Change Theme

Theme

Loading ...

See Also

• Kendo UI for Angular Grid Overview
• API Reference of the Grid
• Custom Styles for Kendo UI Components