Pager control does not display refresh icon

1 Answer 114 Views
Pager
Andrew
Top achievements
Rank 1
Iron
Iron
Andrew asked on 01 Nov 2023, 02:05 AM

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>


Andreas Schneider
Top achievements
Rank 1
commented on 01 Nov 2023, 05:41 PM

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 ;-)

 

 

Andreas Schneider
Top achievements
Rank 1
commented on 02 Nov 2023, 01:17 PM

According to Telerik the issue will be fixed in update from the 15th November.
Andrew
Top achievements
Rank 1
Iron
Iron
commented on 03 Nov 2023, 12:21 AM

Hello Andreas,

Thank you for the information. Do you know if there an issue tracking ticket for this that I would be able to follow?
Andrew
Top achievements
Rank 1
Iron
Iron
commented on 03 Nov 2023, 05:18 AM

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;
}

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 03 Nov 2023, 11:59 AM

Hi Andrew,

 

Yes, I confirm that this was a bug and it is already fixed. The live demo web site uses an internal build of the components which includes the fix. It will become public with the next release.

Excuse us for the inconvenience this has caused you.

 

Regards,
Eyup
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

Tags
Pager
Asked by
Andrew
Top achievements
Rank 1
Iron
Iron
Answers by
Eyup
Telerik team
Share this question
or