如何根据屏幕尺寸动态调整Kendo MVC Grid的PageSize？

Absolutely, this is totally feasible! Here are a couple of practical solutions to dynamically adjust the PageSize of your Kendo MVC Grid based on screen size, matching your requirement of defaulting to 10 rows and showing 20/30 on larger screens:

This method directly checks the screen width on the client, sets the appropriate PageSize on grid initialization, and updates it when the window is resized.

Step 1: Set Up the Grid in Razor #

First, define your Kendo Grid with basic pagination enabled (optional, but lets users manually select page sizes too):

@(Html.Kendo().Grid<YourDataModel>()
    .Name("responsiveGrid")
    .Pageable(pager => pager
        .PageSizes(new[] { 10, 20, 30 }) // Optional: Let users override auto-set size
        .Refresh(true)
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10) // Default fallback for small screens
        .Read(read => read.Action("GetGridData", "YourController"))
        // Add other data source config (sort, filter, etc.) here
    )
    // Define your grid columns and additional settings
)

Step 2: Add Client-Side Script for Responsive PageSize #

Add this JavaScript to handle screen size detection and grid updates:

$(document).ready(function() {
    // Initialize grid with the correct PageSize on load
    updateGridPageSize();

    // Listen for window resize (with debounce to avoid excessive refreshes)
    $(window).resize(function() {
        clearTimeout(window.resizeDebounce);
        window.resizeDebounce = setTimeout(updateGridPageSize, 250);
    });
});

function updateGridPageSize() {
    const grid = $("#responsiveGrid").data("kendoGrid");
    if (!grid) return;

    const screenWidth = $(window).width();
    let newPageSize = 10; // Default for small screens

    // Adjust based on your project's responsive breakpoints
    if (screenWidth >= 1200) {
        newPageSize = 30; // Large screens (desktops)
    } else if (screenWidth >= 992) {
        newPageSize = 20; // Medium/large screens (tablets, small desktops)
    }

    // Only update if PageSize changed to avoid unnecessary data calls
    if (grid.dataSource.pageSize() !== newPageSize) {
        grid.dataSource.pageSize(newPageSize);
        grid.dataSource.page(1); // Reset to first page to prevent out-of-range errors
    }
}

If you prefer handling PageSize logic on the server (e.g., for custom data filtering), you can pass the screen-based PageSize as a parameter to your data endpoint.

Step 1: Modify the Server Action #

Update your controller action to accept and use a pageSize parameter:

public ActionResult GetGridData([DataSourceRequest] DataSourceRequest request, int? pageSize)
{
    // Override the request's PageSize if a valid value is provided
    if (pageSize.HasValue && new[] {10,20,30}.Contains(pageSize.Value))
    {
        request.PageSize = pageSize.Value;
    }

    // Fetch your data and return it as a DataSourceResult
    var data = YourDataService.GetPaginatedData();
    return Json(data.ToDataSourceResult(request));
}

Step 2: Pass PageSize from Client to Server #

Update the grid's data source to send the screen-based PageSize on each read:

function getCurrentPageSize() {
    const screenWidth = $(window).width();
    if (screenWidth >= 1200) return 30;
    else if (screenWidth >= 992) return 20;
    return 10;
}

$(document).ready(function() {
    const grid = $("#responsiveGrid").data("kendoGrid");
    
    // Attach dynamic PageSize to all read requests
    grid.dataSource.transport.options.read.data = function() {
        return { pageSize: getCurrentPageSize() };
    };

    // Refresh grid on window resize to apply new PageSize
    $(window).resize(function() {
        clearTimeout(window.resizeDebounce);
        window.resizeDebounce = setTimeout(() => grid.dataSource.read(), 250);
    });
});

• Debounce Resize Events: The timeout in the resize handler prevents the grid from refreshing repeatedly as the user adjusts the window size.
• Reset to First Page: Changing PageSize can make the current page number invalid (e.g., if you had page 3 with 10 rows, switching to 30 rows might only have 1 total page), so resetting to page 1 avoids errors.
• Customize Breakpoints: Adjust the screen width thresholds (1200px, 992px) to match your project's responsive design guidelines.

内容的提问来源于stack exchange，提问作者saulyasar