MVC Grid Pageable Page Sizes - including ALL in the list along with other size values.

[Eddie]

We have a Kendo grid that can display anywhere from 10 to thousands of rows.  We want to be able to set the grid page size to several values, including ALL.

What we have now - without ALL works:

.Pageable(p => p
     .PageSizes(new[] { 100, 200, 500, 1000, 2000 })

When we run this - we see the correct values in the "Items per page" dropdown.

We want to add the "All" option to this dropdown, but the following is not working (compile error)
.Pageable(p => p
     .PageSizes(new[] { 100, 200, 500, 1000, 2000, "All" })

How do we include All along with other values in the Items per page?

 

[Eyup]

Hello Eddie,

 

Thank you for writing to us.

You can achieve this requirement using the following syntax:

Pageable(x => x.PageSizes(new List<object> { 10, 20, "all" }).Refresh(true))

More info you can find here:
https://www.telerik.com/forums/how-to-set-grid-pagesize-%27all%27-by-wrapper

Feel free to give this a try and let me know if it helps you.

 

Regards,
Eyup
Progress Telerik

[abdul]

Hi Eyup,

For me the pagination dropdown is working fine, but the screen is CSP(Content Security Policy) complaint.

When we load the grid, its throwing error in console. I believed its because of grid pagination dropdown.

.Pageable(p => p
.PageSizes(new int[] { 100, 200, 300 })

Can you please  let me know how to fix this console error.

[Eyup]

To resolve the console error related to Content Security Policy (CSP) when using the Grid, it's important to identify the exact cause of the issue. The .PageSizes configuration itself is CSP-safe, and pagination dropdowns do not use inline scripts or templates that would violate CSP. However, other features of the Grid, such as client templates or custom editor templates, can trigger CSP errors if they use restricted JavaScript patterns.

Please preview your Grid configuration for any client-side templates, inline scripts, or custom editors. Features that use eval, new Function, or inline JavaScript are blocked by strict CSP.

Common CSP Issues and Solutions:

• Client Templates: If you use client-side templates, convert them to CSP-compatible templates as described here:
  • https://docs.telerik.com/aspnet-mvc/html-helpers/helper-basics/using-client-templates#content-security-policy-csp-templates
• Editor Templates: If custom editor templates are used, avoid the AsChildComponent() method and initialize widgets via jQuery in the Grid’s Edit event.
• Strict CSP Mode: If you have enabled strict CSP, make sure to activate global deferred initialization:
  • https://docs.telerik.com/aspnet-mvc/html-helpers/helper-basics/deferred-initialization#deferring-components-globally

Also, please ensure that you are using a new version of the Kendo Scripts and Themes. Your _Layout.cshtml should have these versions:

    <link href="https://kendo.cdn.telerik.com/themes/12.0.0/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
	<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
	<script src="https://cdn.kendostatic.com/2025.3.825/js/kendo.all.min.js"></script>
	<script src="https://cdn.kendostatic.com/2025.3.825/js/kendo.aspnetmvc.min.js"></script>