[Solved] ASP.NET MVC Kendo Grid Server Paging

[Khaled Chebat]

Hello,

Using the Custom ajax binding, I'm able to select a grid page from the controller but the grid pager is showing that the first page is selected.

The page displayed in the grid does not match the page number highlighted in the pager.

Thank You. 

[Alexander Popov]

Hi Khaled,

This could happen in case the client request one page, but the server provides different one. Would you mind sharing both the client and server side implementation, so we can examine what exactly causes the behavior you described?

Regards,
Alexander Popov
Telerik

 

 

[Khaled Chebat]

Hi Alexander Popov ,

Thank you for the reply.
I will post my grid client code and the read function from controller and the Data parameter for the Read function in client side.

Main Grid:
@(Html.Kendo().Grid(Model)
    .Name("dgvReservations")
    .EnableCustomBinding(true)
    .HtmlAttributes(new { @class = "df-grid-external" })
    .Columns(columns =>
    {
        columns.Bound(p => p.Id)
               .Visible(false)
               .Title("Id");
        columns.Bound(p => p.AdmissionRequestId)
               .Visible(false)
               .Title("AdmissionRequestId");
        columns.ForeignKey(p => p.AdmissionType, (@EnumHelper.ToSelectList<Common.Enums.AdmissionType>()))
               .HeaderHtmlAttributes(new { @style = "font-weight:bold;text-align:center" })
               .Width(50)
               .Filterable(fltr => fltr.Extra(true)
                                     .Operators(ops => ops.ForEnums(str => str.Clear()
                                                                            .IsEqualTo("Is equal to"))))
               .Title("Type");
        columns.Bound(p => p.SequenceString)
              .HeaderHtmlAttributes(new { @style = "font-weight:bold;text-align:center;white-space:normal;" })
              .Width(50)
              .Filterable(fltr => fltr.Extra(true)
                                     .Operators(ops => ops.ForString(str => str.Clear()
                                                                           .Contains("Contains")
                                                                           .StartsWith("Starts with")
                                                                           .EndsWith("Ends with")
                                                                           .IsEqualTo("Is equal to"))))
              .Title("Reservation<br>Number");

        columns.Bound(p => p.ExpectedAdmissionDateTime)
               .Format(System.Configuration.ConfigurationManager.AppSettings["GridDateFormat"].ToString())
               .ClientTemplate(@"#= dateFormat(kendo.parseDate(ExpectedAdmissionDateTime),'" + System.Configuration.ConfigurationManager.AppSettings["GridDateFormat"].ToString() + "')#")
               .HeaderHtmlAttributes(new { @style = "font-weight:bold;text-align:center" })
               .Width(50)
               .Filterable(fltr => fltr.Extra(true))
               .Title("Expected<br>Admission Date");
        columns.Bound(p => p.PatientId)
               .Hidden(true);

        columns.Bound(p => p.PatientIdString)
               .HeaderHtmlAttributes(new { @style = "font-weight:bold;text-align:center" })
               .Width(60)
               .Filterable(fltr => fltr.Extra(true)
                                     .Operators(ops => ops.ForString(str => str.Clear()
                                                                            .StartsWith("Starts with")
                                                                            .IsEqualTo("Is equal to")
                                                                            .EndsWith("Ends with")
                                                                            .Contains("Contains"))))
               .Title("Patient<br>No");
        columns.ForeignKey(p => p.Status, (@EnumHelper.ToSelectList<Common.Enums.ReservationStatus>()))
               .HeaderHtmlAttributes(new { @style = "font-weight:bold;text-align:center" })
               .Width(100)
               .Filterable(fltr => fltr.Extra(true)
                                     .Operators(ops => ops.ForEnums(str => str.Clear()
                                                                            .IsEqualTo("Is equal to"))))
               .Title("Status");
    })
    .Pageable(pageable => pageable
                 .Refresh(true)
)
    .Sortable()
    .Selectable()
    .Filterable()
    .Events(ev => ev.DataBound("OnDataBound_GlobalReservationData"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(12)
            .Model(model =>
            {
                model.Id(o => o.Id);
            })
        .Create(update => update.Action("Create", "Reservation"))
        .Read(read => read.Action("Read", "Reservation").Data("GetLimitDates"))
        .Filter(flt => flt.Add(o => o.Status).IsEqualTo((int)Common.Enums.ReservationStatus.Pending).Or().IsEqualTo((int)Common.Enums.ReservationStatus.Confirmed))
        .Update(update => update.Action("Edit", "Reservation"))
        .ServerOperation(true)

    )
)



Read Function (Controller):

public JsonResult Read([DataSourceRequest] DataSourceRequest request, string fromDate, string toDate,string reservationId)
        {
            request.PageSize = 12;
            var serialiser = new JavaScriptSerializer();
            List<DataContract.ReservationInfo> reservationList = new List<DataContract.ReservationInfo>();
            DateTime FromDate;
            DateTime ToDate;
            if ((fromDate != "null") && (toDate != "null"))
            {
                FromDate = new JavaScriptSerializer().Deserialize<DateTime>(fromDate);
                ToDate = new JavaScriptSerializer().Deserialize<DateTime>(toDate); 
                reservationList = AdmissionService.GetAllReservations(FromDate, ToDate, null);
            }

            var total = reservationList.Count();

            if ((reservationId != "") && (reservationId != "0") && (reservationId != null))
            {
                Int64 indexP = reservationList.IndexOf(reservationList.Where(p => p.Id == Convert.ToInt64(reservationId)).FirstOrDefault()) + 1;
                Int64 pageNb = Convert.ToInt64(indexP / 12);
                if (indexP % 12 != 0)
                   pageNb = pageNb + 1;

                request.Page = (Int32)pageNb;
            }

            if (request.Page > 0)
            {
                reservationList = reservationList.Skip((request.Page - 1) * request.PageSize).ToList();
            }

            reservationList = reservationList.Take(request.PageSize).ToList();

            var result = new DataSourceResult()
            {
                Data = reservationList, // Process data (paging and sorting applied)
                Total = total // Total number of records
            };
            
            return Json(result);
        }

GetLimitDates (Data for the Read function Client Side):

function GetLimitDates() {
    var fromDate = $("#dtpFromDate").data("kendoDatePicker").value();
    var toDate = $("#dtpToDate").data("kendoDatePicker").value();

    return {
        fromDate: JSON.stringify(fromDate), toDate: JSON.stringify(toDate),reservationId : GlobalReservationId
    }
}

In Plus i am using the Databound event just to select newly inserted row and edited row , and to remain in the correct page.
Here is my DataBound Code:

function OnDataBound_GlobalReservationData() {
if (SelectRowInGlobalGridReservationFlag) { //SelectRowInGlobalGridReservationFlag flag set true when save function succeeds
        var dataItem = dgvReservations().dataSource.get(GlobalReservationId);
        if (dataItem != null) {
            dgvReservations().select(dgvReservations().table.find("tr[data-uid='" + dataItem.uid + "']"));
            if (dgvReservations().dataSource.total() > 12) {
                dgvReservations().dataSource.page(Math.ceil(dgvReservations().dataSource.total() / 12));
                dgvReservations().select(dgvReservations().table.find("tr[data-uid='" + dataItem.uid + "']"));
            }
            else {
                dgvReservations().dataSource.page(1);
            }
        }
        SelectRowInGlobalGridReservationFlag = false;
    }
}

[Alexander Popov]

Hi Khaled,

Thank you for the provided code snippets. I reviewed them and I am still unsure what the expected behavior should be and what the end goal is, however I noticed that in certain cases the request's Page property is modified on the server. Keep in mind that these changes are not passed back to the client-side, and that the Grid's pager will display the page that was requested from the client. 

Regards,
Alexander Popov
Telerik