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>

[abdul]

Hi Eyup,

Thanks for your response.

I have verified everything looks good, but when I commented the below line then I don't get the console error.

But the issue is pagination dropdown won't work after commenting the below line.

.PageSizes(new int[] { 100, 200, 300 })

 

I find this below observation:

Inside the .cshtml file i have one ClientTemplate which is creating a dropdown in the toolbar, is this the real issue?
If yes can you please let me know how to create this kendo dropdown in the toolbar without this ClientTemplate.

.ToolBar(toolbar =>
{
toolbar.Custom().ClientTemplate(
@Html.Kendo().Template()
.AddComponent(c => c
.DropDownList().Size(ComponentSize.Small)
.Name("ddl_grid1")
.DataTextField("Text")
.DataValueField("Value")
.Events(e => e.Change("dropdownChange"))
.BindTo(new List<SelectListItem>()
{
new SelectListItem() {
Text = "Select", Value ="0"
},
new SelectListItem() {
Text = "Export Data", Value ="1"
},
new SelectListItem() {
Text = "Import Excel", Value ="2"
}
}
)));

Thanks,

Abdul Ashad

[Eyup]

Hi Abdul,

Based on your description, the issue is related to initializing a Kendo DropDownList inside a ClientTemplate within the Grid’s toolbar. ClientTemplates are designed for rendering static HTML and do not support direct initialization of Kendo widgets. This approach can lead to JavaScript errors and may interfere with other Grid features due to these potential js errors.

Recommended Approach: Initialize DropDownList Outside of ClientTemplate

To add a Kendo DropDownList to the toolbar in a CSP-compliant way, follow these steps:

---

1. Add a Placeholder in the Toolbar

Inside the ClientTemplate or a more general toolbar Template, you can initialize the DropDownList by adding a simple HTML placeholder (e.g., <input>) to the toolbar:

.ToolBar(toolbar =>
{
    toolbar.Template("<input id='ddl_grid1' style='width:150px;' />");
})

---

2. Initialize the DropDownList with jQuery

In your JavaScript (preferably after the Grid is initialized), use jQuery to turn the placeholder into a Kendo DropDownList:

$(function() {
    $("#ddl_grid1").kendoDropDownList({
        dataTextField: "Text",
        dataValueField: "Value",
        dataSource: [
            { Text: "Select", Value: "0" },
            { Text: "Export Data", Value: "1" },
            { Text: "Import Excel", Value: "2" }
        ],
        change: dropdownChange // reference to your change event handler
    });
});

---

This approach should resolve the console error and allow both your custom toolbar DropDownList and the Grid’s pagination dropdown to work as expected.