Why are kendo grid pager controls getting duplicated? - asp.net-mvc

Question

I have a very wired problem.
My kendo grid pager controls are getting rendered twice after I updated kendo files.
Someone knows something about this. I'm using Kendo for ASP.NET MVC.Here you have an image of the grid
The second group of buttons are the ones that works. Buttons to the right and left of the pagination numbers are blocked.
#(Html.Kendo().Grid<Monibyte.Arquitectura.Presentacion.Transaccional.Dto.Tarjetas.PocMovimientosTarjeta>()
.Name("Grid")
.Filterable()
.Groupable()
.ColumnMenu()
.AutoBind(false)
.Events(e => e.DataBound("OndataBound"))
.Events(e => e.DataBinding("OnDataBinding"))
.Reorderable(reorderable => reorderable.Columns(true))
.Pageable(pager => pager.PageSizes(Html.DefaultPageSizes()))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Sortable(sortable => sortable.AllowUnsort(true).SortMode(GridSortMode.MultipleColumn))
.Columns(columns =>
{
columns.Bound(p => p.IdMovimiento).Title("").Sortable(false).Filterable(false).Width(50)
.HtmlAttributes(new { #class = "detAdic_ListMov" }).IncludeInMenu(false)
.HeaderTemplate(Html.GridCheckAll()).ClientTemplate(Html.GridCheck() +
Html.GenericGridBtn("IncluirDetalleMovimiento", "ConsultaMovimientos", null,
altText: #RecEtiquetas.App_AgregarMovimiento,
jsparams: new
{
targetId = "detalleMovimiento",
dataFunc = "editarDataFunc",
callback = "editarCallback"
},
imageUrl: "imagenes/iconos/list(16).png",
authorizeFunc: "validaSegregar").ToHtmlString())
.HtmlAttributes(new { #class = "detAdic_ListMov", #title = #RecEtiquetas.App_AgregarMovimiento });
columns.Bound(p => p.NumTarjeta).Title(RecEtiquetas.Mod_NumTarjeta).Hidden(true).Width(50)
.ClientGroupHeaderTemplate("#= templateDescripcionTarjeta(value) #")
.HtmlAttributes(new { #title = #RecEtiquetas.Mod_NumTarjeta });
columns.Bound(p => p.NumReferencia).Title(RecEtiquetas.App_Referencia).Width(30)
.HtmlAttributes(new { #title = #RecEtiquetas.App_Referencia });
columns.Bound(p => p.FecMovimiento).Title(RecEtiquetas.App_FechaMovimiento).Width(40)
.ClientTemplate("#:$monibyte.formatDate(FecMovimiento)#")
.HtmlAttributes(new { #title = #RecEtiquetas.App_FechaMovimiento });
columns.Bound(p => p.FecTransaccion).Title(RecEtiquetas.App_FecConsumo).Hidden(true).Width(40)
.ClientTemplate("#:$monibyte.formatDate(FecTransaccion)#")
.HtmlAttributes(new { #title = #RecEtiquetas.App_FecConsumo });
columns.Bound(p => p.Descripcion).Title(RecEtiquetas.App_DescripcionMovimiento).Width(250)
.HtmlAttributes(new { #title = #RecEtiquetas.App_Descripcion });
columns.Bound(p => p.MonDebLocal).Title(Html.EtiquetasCompania("RecGlobalizacion", "App_DebitoMonedaLocal").ToString()).Width(40)
.ClientTemplate("#:SimboloMonedaLocal# #:$monibyte.formatNumber(MonDebLocal)#")
.ClientGroupFooterTemplate("#:templateMontoDebLocal(data)#")
.FooterHtmlAttributes(new { #class = "alinearDerecha" })
.HtmlAttributes(new { #class = "alinearDerecha monto-grid", #title = Html.EtiquetasCompania("RecGlobalizacion", "App_DebitoMonedaLocal") });
columns.Bound(p => p.MonCredLocal).Title(Html.EtiquetasCompania("RecGlobalizacion", "App_CreditoMonedaLocal").ToString()).Width(40)
.ClientTemplate("#:SimboloMonedaLocal# #:$monibyte.formatNumber(MonCredLocal)#")
.ClientGroupFooterTemplate("#:templateMontoCredLocal(data)#")
.FooterHtmlAttributes(new { #class = "alinearDerecha" })
.HtmlAttributes(new { #class = "alinearDerecha monto-grid", #title = Html.EtiquetasCompania("RecGlobalizacion", "App_CreditoMonedaLocal") });
columns.Bound(p => p.MonDebInter).Title(RecEtiquetas.App_DebitoDolares).Width(40)
.ClientTemplate("#:SimboloMonedaInter# #:$monibyte.formatNumber(MonDebInter)#")
.ClientGroupFooterTemplate("#:templateMontoDebInter(data)#")
.FooterHtmlAttributes(new { #class = "alinearDerecha" })
.HtmlAttributes(new { #class = "alinearDerecha monto-grid", #title = #RecEtiquetas.App_DebitoDolares });
columns.Bound(p => p.MonCredInter).Title(RecEtiquetas.App_CreditoDolares).Width(40)
.ClientTemplate("#:SimboloMonedaInter# #:$monibyte.formatNumber(MonCredInter)#")
.ClientGroupFooterTemplate("#:templateMontoCredInter(data)#")
.FooterHtmlAttributes(new { #class = "alinearDerecha" })
.HtmlAttributes(new { #class = "alinearDerecha monto-grid", #title = #RecEtiquetas.App_CreditoDolares });
columns.Bound(p => p.DescripcionMoneda).Title(RecEtiquetas.App_Moneda).Hidden(true).Width(40)
.ClientGroupHeaderTemplate(RecEtiquetas.App_TotalRegistros + " #=value# = #=count#")
.HtmlAttributes(new { #title = #RecEtiquetas.App_Moneda });
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(Html.DefaultPageSize())
.Sort(sort => sort.Add(p => p.FecMovimiento).Descending())
.Aggregates(aggregates =>
{
aggregates.Add(p => p.MonCredLocal).Sum();
aggregates.Add(p => p.MonDebLocal).Sum();
aggregates.Add(p => p.MonCredInter).Sum();
aggregates.Add(p => p.MonDebInter).Sum();
aggregates.Add(p => p.DescripcionMoneda).Count();
aggregates.Add(p => p.SimboloMonedaLocal).Min();
aggregates.Add(p => p.SimboloMonedaInter).Min();
})
.Group(groups => groups.Add(p => p.DescripcionMoneda))
.Read(read => read.Action("FiltrarMovimientos", "ConsultaMovimientos"))
))

Answer 1

I contacted Progress Telerik support and this is the answer they gave.
We had reports about such an issue recently. The customers who encountered it had updated UI for ASP.NET MVC to the latest version
but forgot to update the Kendo UI script and CSS files, or vice versa.
Could you double check if you updated both the DLL and the JS and CSS
files? To check the current Kendo UI scripts version in your page, you
can call:
console.log(kendo.version);
To check the DLL version, open the References folder in your project,
right-click Kendo.Mvc and select Properties.
The two versions have to match in order to have the widgets working
correctly
So check your dll and js/css versions match.

Answer 2

Had the same issue with kendo 2018.1.221. The issue was fixed when the jquery is loaded after the kendo javascript bundle
#Styles.Render("~/Content/kendo/2018.1.221/css")
#Scripts.Render("~/bundles/kendo/2018.1.221/kendoscripts")
//jquery needs to be loaded after kendo scripts
#Scripts.Render("~/bundles/jquery")

Answer 3

The reason why I was getting duplicate paging was because the Kendo.MVC.dll in the project did not match the Kendo css & scripts version used by the bundles.
Remove the Kendo.Mvc dll in your project and re-add from the local path. eg.
\Telerik UI for ASP.NET MVC R2 2018\wrappers\aspnetmvc\Binaries\Mvc4Kendo.Mvc.dll
(Same answer as Steven Anderson)