Enabling Horizontal Mousepad Scrolling with FrozenColumnCount in UI for ASP.NET AJAX Grid

Environment

Product	Grid for UI for ASP.NET AJAX
Version	All

Description

When using the Grid with the FrozenColumnCount property set, native horizontal scrolling with a laptop trackpad or gestures becomes unavailable. This limitation arises because the Grid applies overflow: hidden to its scrollable container and uses a "fake" scrollbar to manage frozen columns. Users are typically restricted to using the grid's built-in scrollbars for scrolling.

There is no official solution to enable native horizontal scrolling in this scenario. However, a custom JavaScript workaround can allow trackpad or gesture-based scrolling by intercepting wheel or touch events and manually adjusting the scroll position.

This knowledge base article also answers the following questions:

• How to scroll horizontally in ASP.NET AJAX Grid with FrozenColumnCount enabled?
• Is there a workaround for trackpad scrolling in ASP.NET AJAX Grid frozen columns?
• How to enable gesture-based scrolling for frozen columns in ASP.NET AJAX Grid?

Solution

To enable scrolling using a laptop trackpad or gestures, use the following JavaScript workaround to adjust the scroll position of the container based on the deltaX value from the event.

ASP.NET

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
        <Columns>
            ...
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnGridCreated="onGridCreated" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" FrozenColumnsCount="1" />
    </ClientSettings>
</telerik:RadGrid>

JavaScript

function onGridCreated(sender, args) {
    let gridScrollableDiv = sender.get_element().querySelector(".rgDataDiv");  // Find the scrollable container of the grid.

    gridScrollableDiv.addEventListener('wheel', function (e) {    // Add a wheel event listener to enable trackpad scrolling.
        if (e.deltaX !== 0) {
            gridScrollableDiv.scrollLeft += e.deltaX; // Adjust scroll position.
            e.preventDefault(); // Prevent default behavior.
        }
    }, { passive: false });
}

Limitations:

• This workaround does not update the position of the horizontal scrollbar visually.
• It is not officially supported by Telerik and may require adjustments depending on your implementation.

See Also

• RadGrid
• Wheel Event Documentation - MDN