Grid View for ASP.NET MVC - How to replace default browser scrollbars with the dxScrollView widget

This example demonstrates how to apply the dxScrollView widget to the grid to configure the grid's scrolling capability.

Overview

Set the grid's HorizontalScrollBarMode and VerticalScrollBarMode properties to Auto to enable horizontal and vertical scrolling. To display a vertical scrollbar, specify the grid's VerticalScrollableHeight property.

var grid = Html.DevExpress().GridView(settings => {
    <!-- ... -->
    settings.Settings.HorizontalScrollBarMode = ScrollBarMode.Auto;
    settings.Settings.VerticalScrollBarMode = ScrollBarMode.Auto;
    settings.Settings.VerticalScrollableHeight = 200;
    <!-- ... -->
});

Apply the dxScrollView widget to the dxgvCSD element on the first grid load and after a callback:

unction InitializeScrollView() {
    GetScrollableElement().dxScrollView({
        showScrollbar: 'always',
        direction: 'both',
        scrollByContent: IsScrollByContent.GetChecked(),
        showScrollbar: ShowScrollBar.GetValue(),
        onScroll: function (e) {
            $('.dxgvHSDC .dxgvTable_DevEx').css('transform', 'translateX(' + (-e.scrollOffset.left) + 'px)');
        }
    });
    AdjustHeaderElement();
}

function GetScrollableElement() {
    return $('.dxgvCSD', GridView.GetMainElement());
}
function AdjustHeaderElement() {
    $('.dxgvHSDC')[0].style.paddingRight = '';
    var headerScrollElement = $('.dxgvHSDC > div')[0];
    headerScrollElement.style.width = (GridView.GetMainElement().offsetWidth - 2) + 'px';
}

function OnGridViewInit(s, e) {
    InitializeScrollView();
}

function OnGridViewEndCallback(s, e) {
    InitializeScrollView();
}

Files to Review

• scripts.js (VB: scripts.js)
• _GridViewPartial.cshtml

Documentation

• Vertical Scrolling
• Horizontal Scrolling

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)