Responsive design for ScrollView

[Benjamin]

would like to check if it is possible to change the paging size of scrollview using local datasource?

Desktop/Tablet to show 3 per page

Mobile to show 2 per page

[Neli]

Hello,

The Kendo UI ScrollView does not support changing the pageSize dynamically after initialization through a direct API. The pageSize option, which controls how many items appear per page, is set only during widget initialization. However, you can achieve responsive behavior by re-initializing the ScrollView when the screen size changes.

Recommended Approach

• Detect the device type or screen width using JavaScript.
• Destroy and re-initialize the ScrollView with the appropriate pageSize for the current device. You can destroy and recreate the component only on certain screen dimensions. 

Sample Implementation

function getPageSize() {
    // Adjust breakpoint as needed
    return window.innerWidth <= 768 ? 2 : 3;
}

function initializeScrollView() {
    var scrollView = $("#scrollView").data("kendoScrollView");
    if (scrollView) {
        scrollView.destroy();
        $("#scrollView").empty();
    }

    $("#scrollView").kendoScrollView({
        dataSource: yourLocalDataSource, // Replace with your local data source
        contentHeight: "auto",
        pageSize: getPageSize()
    });
}

// Initialize on page load
initializeScrollView();

// Re-initialize on window resize
$(window).resize(function() {
    initializeScrollView();
});

Here you will find a link to the article regarding destroying Kendo widgets - https://www.telerik.com/kendo-jquery-ui/documentation/intro/widget-basics/destroy.

I hope this helps. 

Regards,
Neli
Progress Telerik