Kendo Grid分页控件重复渲染问题求助（ASP.NET MVC环境）

Hey Diego, sorry to hear you're stuck with this weird duplicate pagination issue after updating Kendo—let's walk through the most common fixes that usually sort this out:

1. Check for Duplicate Kendo Script/Style References #

This is the #1 culprit for duplicate controls. When updating Kendo, it's easy to accidentally double-up on references:

• Make sure you're only loading kendo.all.min.js (or the specific module scripts) once across your layout and views.
• Same goes for Kendo CSS files like kendo.common.min.css and your theme's CSS—duplicate loads will trigger double initialization of components.
• Check both your _Layout.cshtml and the view containing the Grid for redundant script/style tags.

2. Avoid Dual Initialization of the Grid #

Kendo Grid can be initialized either via the ASP.NET MVC Helper (Html.Kendo().Grid()) or pure JavaScript ($("#Grid").kendoGrid()). Doing both will cause the control to render twice:

• Stick to one initialization method. If you're using the MVC Helper, make sure there's no extra JS code re-initializing the Grid later (like in a document ready callback or AJAX success handler).
• Also check if the Grid's dataBound or other events are accidentally triggering a re-initialization.

3. Ensure Version Compatibility Between Wrapper and Frontend Library #

Mismatched versions between the ASP.NET MVC Kendo wrapper (NuGet package) and the frontend Kendo UI library will cause all sorts of rendering bugs:

• Verify that your Telerik.UI.for.AspNet.Mvc NuGet package version exactly matches the version of the Kendo frontend files you're using (e.g., if you have 2023.3.1010 in your script URLs, your NuGet package should be the same version).
• Update both to the same version if they're out of sync—this fixes most post-update glitches.

4. Temporary Fix: Remove Duplicate Pager Elements #

If you need a quick workaround while hunting for the root cause, you can clean up the duplicate pagination controls in the Grid's dataBound event:
First, add the event handler to your Grid helper:

@(Html.Kendo().Grid<Monibyte.Arquitectura.Presentacion.Transaccional.Dto.Tarjetas.PocMovimientosTarjeta>()
    .Name("Grid")
    .Filterable()
    .Groupable()
    .Events(events => events.DataBound("onGridDataBound"))
    // ... rest of your Grid configuration
)

Then add this JavaScript function to your view:

function onGridDataBound() {
    const pagerWrappers = $(".k-pager-wrap");
    if (pagerWrappers.length > 1) {
        // Keep the last pager (the one that works) and remove the duplicates
        pagerWrappers.slice(0, -1).remove();
    }
}

Note: This is a band-aid—focus on fixing the root cause first!

5. Check for Custom CSS Conflicts #

Sometimes custom styles can mess up the Grid's layout, making it look like pagination is duplicated when it's just overlapping:

• Temporarily disable all custom CSS in your page and see if the issue disappears.
• If it does, narrow down which style rule is causing the problem (look for rules targeting .k-pager-wrap, .k-pager-numbers, or related classes).

Start with the first three steps—they resolve 90% of duplicate pagination cases. Let me know if any of these work for you!

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