This problem was introduced when I upgraded to 2023.3.1010
The grid control renders it's pager like this:
<a aria-label="Refresh" class="k-pager-refresh k-link" href="/Home/Paging_Orders" title="Refresh">
<span class="k-icon k-i-arrow-rotate-cw"></span>
</a>
Note the icon. If it was using FONT icons, it should have the class k-icon-font as well as the other classes.
If it was using SVG icons, it should have an embedded SVG inside it.
But it has neither, so there is nothing displayed at all.
I went to the online demonstration page https://demos.telerik.com/aspnet-mvc/grid/paging. Once you click the checkbox to display the refresh button, it renders the button correctly as an SVG icon.
<span class="k-icon k-svg-icon k-svg-i-arrow-rotate-cw k-button-icon">
<svg aria-hidden="true" focusable="false" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M480 288c0 123.7-100.3 224-224 224S32 411.7 32 288 132.3 64 256 64V0l160 96-160 96v-64c-88.2 0-160 71.8-160 160s71.8 160 160 160 160-71.8 160-160c0-29.1-7.8-56.4-21.5-80l55.5-32c19.1 32.9 30 71.2 30 112z"></path></svg>
</span>
I do not understand what this demo is doing that my code is not.
Here is how I am creating the grid:
@(
Html.Kendo().Grid<FromAspnetFrameworkTemplate.Models.OrderViewModel>()
.Name("Grid")
.Columns(
columns =>
{
columns.Bound(o => o.OrderID);
columns.Bound(o => o.ContactName);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.OrderDate).Format("{0:d}");
columns.Bound(o => o.ShipCountry);
}
).Pageable(
pager => pager.PageSizes(new[] { 10, 20, 30 }).Refresh(true).Responsive(false)
).DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Paging_Orders", "Home"))
)
)
I am using the following Nuget packages:
- Telerik.UI.for.AspNet.Mvc5, 2023.3.1010
- Telerik.FontIcons, 2.0.0
- Telerik.SvgIcons, 2.0.0
I am including the styles and scripts like so:
<link href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-main.css" rel="stylesheet" />
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/kendo/2023.3.1010/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2023.3.1010/kendo.aspnetmvc.min.js"></script>
Same issue for my project after upgrade to 2023.3.1010, Font and SVG to 2.0.0
So I created a new ASP.NET MVC project with the "Create new Telerik project" option, copyied the settings from the ASP.NET MVC demo resulting to:
<div class="row"> <div class="col-12"> @(Html.Kendo().Grid<TelerikMvcApp4.Models.OrderViewModel>() .Name("grid") .Columns(columns => { columns.Bound(p => p.OrderID).Filterable(false); columns.Bound(p => p.Freight); columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.ShipName); columns.Bound(p => p.ShipCity); }) .Pageable(pager => pager .Input(true) .Numeric(true) .Info(true) .PreviousNext(true) .Refresh(true) .PageSizes(true) ) .Sortable() .Scrollable() .Filterable() .HtmlAttributes(new { style = "height:550px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Orders_Read", "Grid")) ) ) </div> </div>
Result: No Refresh button
Maybe the demo is loading something different ;-)
Thank you for the information. Do you know if there an issue tracking ticket for this that I would be able to follow?
Incidentally, here is my current workaround.
In one of my SASS files I added this:
.k-icon.k-i-arrow-rotate-cw { @extend .k-font-icon; }