Issue with Kendo Paging (Shows always 1) when Ajax binding and Server Operation

[Ammad]

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

[Yanislav]

Hello Ammad

I would suggest checking the browser's dev tools console for any JS exceptions. They can prevent the pager from displaying the proper value.

Other than that, ensure that the response contains information about the total amount of records. For example your page size might be 10, and you are returning only 10 records from the server back to the client, but the response should contain information about the total number of records. Here's an exemplary response:

{
   "Data":[
      {
         "CustomerID":"ALFKI",
         "CompanyName":"Alfreds Futterkiste",
         "ContactName":"Maria Anders",
         "ContactTitle":"Sales Representative",
         "Address":"Obere Str. 57",
         "City":"Berlin",
         "Region":null,
         "PostalCode":"12209",
         "Country":"Germany",
         "Phone":"030-0074321",
         "Fax":"030-0076545",
         "Bool":null
      },
      {
         "CustomerID":"ANATR",
         "CompanyName":"Ana Trujillo Emparedados y helados",
         "ContactName":"Ana Trujillo",
         "ContactTitle":"Owner",
         "Address":"Avda. de la Constitución 2222",
         "City":"México D.F.",
         "Region":null,
         "PostalCode":"05021",
         "Country":"Mexico",
         "Phone":"(5) 555-4729",
         "Fax":"(5) 555-3745",
         "Bool":null
      },
      {
         "CustomerID":"ANTON",
         "CompanyName":"Antonio Moreno Taquería",
         "ContactName":"Antonio Moreno",
         "ContactTitle":"Owner",
         "Address":"Mataderos  2312",
         "City":"México D.F.",
         "Region":null,
         "PostalCode":"05023",
         "Country":"Mexico",
         "Phone":"(5) 555-3932",
         "Fax":null,
         "Bool":true
      }
   ],
   "Total":91,
   "AggregateResults":null,
   "Errors":null
}

In case there are no JS exceptions at your end and the response contains the Total property, may I ask you to reproduce the problem in a sample project and send it for further review?

[Ammad]

Hello Yanislav,

Thank you for your reply.

I have checked both points suggested by you, but that is not the case for me. The total is correctly set and there is no DevTools exception.

I have reproduced the same issue, in this case, I am not looking for any row but rather just changing the Page of the DataSourceRequest manually, and by this Kendo UI is navigating to the record of that Page number but the Page is not selected/changed by K-Pager.

I have uploaded the project and I am using the Northwind database for testing purposes, below is the link for that.

https://drive.google.com/file/d/1-cp7pUy52z6ZUqXZsTtEwCAlehYhKJ-k/view?usp=sharing

[Ammad]

Hello Yanislav,

Any suggestion/solution regarding this issue yet?