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>

I'm using a k-grid with an items per page dropdown, it initially loads correctly but when a new value is selected then the pager elements are hidden. 

I display grids with a page size control. In one page within my project it still looks fine - and this is where I create the grid using kendo ui for JQuery.

In the instances when I create it using MVC, there are styling errors. (See in the image how the number "10" is truncated.)

After much drilling into the HTML, I found the difference in how the Razor library creates the HTML elements, as opposed to how the JQuery creates the HTML elements.

JQuery generates the following element structure. Note that the k-pager-sizes element comes after the k-pager-numbers-wrap element

<div class="k-pager k-grid-pager k-pager-md"> <!-- The pager bar -->
     <div class="k-pager-numbers-wrap">
             <!-- ... -->
     </div>
     <span class="k-pager-sizes k-label">
            <!-- The page-size picker goes here -->
     </span>
</div>

In contrast, the Kendo Razor libraries generates the following element structure, where the k-pager-sizes element falls inside the k-pager-numbers-wrap element:

<div class="k-pager k-grid-pager k-pager-md"> <!-- The pager bar -->

     <div class="k-pager-numbers-wrap">
             <!-- ... -->
            <span class="k-pager-sizes k-label">
                  <!-- The page-size picker goes here -->
             </span>
     </div>

</div>

This breaks the styling. There is styling rule that imposes a minimum width on all buttons under .k-pager-numbers-wrap. This makes the drop-down arrow too wide, which causes the page size number to truncate.

    @each $size, $size-props in $kendo-pager-sizes {
        $_padding-x: k-map-get($size-props, padding-x);
        $_padding-y: k-map-get($size-props, padding-y);
        $_item-group-spacing: k-map-get($size-props, item-group-spacing);
        $_item-min-width: k-map-get($size-props, item-min-width);
        $_pager-dropdown-width: k-map-get($size-props, pager-dropdown-width);

        .k-pager-#{$size} {
            padding-inline: $_padding-x;
            padding-block: $_padding-y;
            gap: $_item-group-spacing;

            .k-pager-numbers-wrap {
                .k-button {
                    min-width: $_item-min-width;
                }

After writing this, I realize it might be more appropriate as a logged defect, which I've done here:

https://feedback.telerik.com/aspnet-mvc/1621268-kendo-razor-controls-renders-grid-pager-differently-to-kendoui-for-jquery-breaks-styling

i have a kendo grid which has .pageable.pageSizes(new[] {20,50,100,250})

when i try and select a page size from the drop down list i get an error:

this is the code that sets up the grid

as a result of the error the page size isnt updated.

NOTE: THIS HAS BEEN FIXED, IT WAS AN ISSUE WITH A HEAD SCRIPT

I have an issue with my page where everything works fine except it will not go to pages 3, 5, and 11.  My datasource is a list of an object in my model.  I can add, save, anything except go to those pages.  Below is my code from the page. I am using Kendo 2020.3.1118 (don't have a license for anything newer).  If I click on the 3, nothing happens if I am on page 2 and click the next page arrow, nothing happens. If I am on page 4 and click the next page arrow nothing happens.  But if I am on page 6 and click it, I go to 7, then 8, etc. until I get to 10.  It only refuses those 3 pages out of the 12 that it creates for my data.  The counter on the bottom right works fine.  And if I take out the pageable ability, my dropdown quits working.  I have only been using Kendo for about a week or so.  Once I get this figured out, this project will actually be complete.  It is the last issue I have to solve.  Any help would be greatly appreciated.  

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?

Hello,

I am working on Kendo Grid and wants to perform all operation server side.

For now, everything is working, except, when I call Read action and find the correct page number, and set it on the DataSourceResult, the object is found on the Grid, Selected and Highlighted as expected,
but the UI Pager value always shows 1/set to 1, no matter what Page value I have set in the DataSourceResult.

Below is my cshtml code:

@(Html.Kendo().Grid<dynamic>()
      .Name($"Grid_{Model.Name}")
      .Columns("Some Columns")
      .Pageable(Model.Pager)
      .Filterable(ftb => ftb
         .Mode(GridFilterMode.Row)
      )
      .DataSource(dataSource => dataSource
         .Ajax()
         .Read(read => read.Action("GetBrowseResults", Model.Controller, new { area = string.Format("Module/{0}", Model.Controller), theTypeToBrowse = Model.TypeToBrowse, theGroupObj = Model.IsGroupType }))
         .PageSize(Model.IsTouchDevice ? 20 : 100)
      .ServerOperation(true)
      )
      .Events(events => events.Change("LibraryRecordSelected").DataBound("LibraryDataBound"))
)

And here is the C# code:

public ActionResult GetBrowseResults([DataSourceRequest] DataSourceRequest theRequest, string theTypeToBrowse, string theGroupId, bool theGroupObj)
      {
         var browseResult = GetBrowseResults(theTypeToBrowse, theGroupId, theGroupObj);

         if (browseResult != null)
         {
            var ret = FilterBrowseModel(browseResult, theRequest);
            var result = Json(ret.Item1.ToDataSourceResult(ret.Item2));
            result.MaxJsonLength = int.MaxValue;
            return result;
         }
      }
          
public (List<BrowseModel>, DataSourceRequest) FilterBrowseModel(IEnumerable<BrowseModel> theBrowseModel, DataSourceRequest theDataSourceRequest)
      {
         var ret = new List<BrowseModel>();
         int total = theBrowseModel?.Count() ?? 0;

         if (total > 0)
         {
            bool reset = true;

            if (theDataSourceRequest.Page > 0 && theDataSourceRequest.PageSize > 0)
            {
                  var objectData = GetObjectData(HttpContext.Request.RequestContext.RouteData.Values["controller"].ToString());
                  if (objectData?.ObjectTxt != null)
                     theDataSourceRequest.Page = (theBrowseModel.ToList().FindIndex(x => x.ObjectTxt == objectData.ObjectTxt)) / theDataSourceRequest.PageSize + 1;
            }

            if (reset)
               ret.AddRange(theBrowseModel);
         }

         return (ret, theDataSourceRequest);
      }

I am upgrading my application to Telerik UI for AspNet.Core v2021.2.616.  I got the grid to display data, but the grid pager component shows 0 as the current page and the pager navigation controls are disabled

Here is the view

<text>

<kendo-grid name="usersGrid" on-data-bound="UserMaintenance.onDataBound" selectable="true">

	<datasource type="DataSourceTagHelperType.Ajax" page-size="5">
		<transport>
			<read url="@Url.Action("GetUsers", "User", new { Area = "Admin" })" type="post" />
		</transport>
		<schema data="data">
		</schema>
	</datasource>
	<columns>
		<column field="userId" title="User Id" width="1" visible="false" html-attributes='new Dictionary<string, object>{ ["class"] = "primary-key" }' />
		<column field="userName" title="User Name" />
		<column field="stateUserId" title="State User Identifier" />
		<column field="email" title="Email" />
		<column field="isActive" title="Active" template="#= isActive ? 'Yes' : 'No' #" width="100" />
		<column title="Actions">
			<commands>
				<column-command text="Edit" id="edit" name="edit" click="function(e){UserMaintenance.onOpenEditUserModal(e, 'UserId')}" />
				<column-command text="Deactivate" id="deactivate" name="deactivate" click="function(e){UserMaintenance.onOpenDeleteUserModal(e, 'UserId')}" />
				<column-command text="Activate" id="activate" name="activate" click="function(e){UserMaintenance.onOpenActivateUserModal(e, 'UserId')}" />
			</commands>
		</column>
	</columns>
 
	<toolbar>
		<toolbar-button text="Add User" name="Add" template="UserMaintenance.userCustomTemplate" />
	</toolbar>
 
	<scrollable enabled="true" />
	<groupable enabled="true" />
	<sortable enabled="true" />
	<pageable enabled="true" responsive="false" button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }"></pageable>
	<filterable enabled="true" />
</kendo-grid>

</text>

Here is the controller method

public ActionResult GetUsers([DataSourceRequest] DataSourceRequest request, string userSearch)
{
    var users = _uow.UserRepository.GetAll()
        .AsNoTracking()
        .OrderBy(u => u.UserName);
 
    var result = users.ToDataSourceResult(request);
 
    return Json(result);
}