[Solved] loosing pagination when clicking next page

[Gerard Eikelboom]

Hello,

i have a problem with my page and paging settings.
When I go back to my DB to get the data and bind it to the grid (see code below)

$.ajax({

type:

 

"POST",

 

url:

 

"/GeplaatsteBestellingen/GetOrderOverview",

 

data: ({

 

'VanafDatum': FormatteVanafDatum, 'TotDatum': FormatteTotDatum, 'IsOrderPickupDate': OrderPickupDate

 

}),

dataType:

 

"json",

 

success:

 

function (newOrderOverviewData) {

 

 

 

var grid = $('#OrderOverzichtGrid').data('tGrid');

 

 

grid.total = newOrderOverviewData.data.length;

grid.updatePager();

grid.dataBind(newOrderOverviewData.data);

},

error:

 

function (req, status, error) {

 

alert(

 

"something went wrong with purchasing the order overview, please try again or contact your administrator");

 

}

It is showing the data in the correct way (see initial screen.gif)
But when I click on page 2 it is losing al its settings and also data (see page 2 click).

How can i solve this problem?

Below my shortened grid:

<%= Html.Telerik().Grid<Fleura.Feelflorist.Models.ViewModels.OrderViewModel>()
           .Name("OrderOverzichtGrid")
           .ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
           .ClientEvents(events => events.OnDataBinding("onDataBinding"))
           .Columns(columns =>
           {
               columns.Bound(o => o.TypeWebshopOrder).Width(50)
                  .HeaderHtmlAttributes(new { title = "Order type" });
           })
           .DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxDataBinding", "GeplaatsteBestellingen"))
           .Sortable(sorting => sorting
               .OrderBy(sortOrder => sortOrder.Add(o => o.Omschrijving).Descending()))
           .Pageable(settings => settings.PageSize((int)ViewData["PageSize"]))
           .Scrollable(sc=>sc.Height(365))
       %>

Regards,
Gerard

[Atanas Korchev]

Hello Gerard Eikelboom,

Could you attach a sample project showing the problem? I am not currently sure when is the $.ajax code executed and how this interferes with the grid.

Regards,
Atanas Korchev
the Telerik team

[Gerard Eikelboom]

Hello Atanas,
I think I solved this problem because it is showing me the good page (total) numbers.
But now when I click on the 2 (eg next page) it comes in my onDataBinding() function.
But is is not showing the next page. It stays on the first page. I send you my onDataBinding code

function onDataBinding(e) {
        var grid = $("#OrderOverzichtGrid").data('tGrid');
        $('.t-status .t-icon', grid.element).addClass('t-loading');
        var VanafDatepicker = $('#VanafDatum').data('tDatePicker');
        var VanafDatum = VanafDatepicker.value();
        var FormatteVanafDatum = $.telerik.formatString('{0:d}', VanafDatum);
        if (FormatteVanafDatum == "0") {
            var curVanAfDateVar = new Date();
            var curDate = (curVanAfDateVar.getMonth() + 1) + "/" + curVanAfDateVar.getDate() + "/" + curVanAfDateVar.getFullYear();
            FormatteVanafDatum = curDate;
        }
        var TotDatepicker = $('#TotDatum').data('tDatePicker');
        var TotDatum = TotDatepicker.value();
        var FormatteTotDatum = $.telerik.formatString('{0:d}', TotDatum);
        if (FormatteTotDatum == "0") {
            var curTotDateVar = new Date();
            var curDate = (curTotDateVar.getMonth() + 1) + "/" + curTotDateVar.getDate() + "/" + curTotDateVar.getFullYear();
            FormatteTotDatum = curDate;
        }
        var OrderPickupDate = $("input[name='OrderPickDate']:checked").val(); //true = PickupDate; false = OrderDate.

        $.ajax({
            type: "POST",
            url: "/GeplaatsteBestellingen/GetOrderOverview",
            data: ({ 'VanafDatum': FormatteVanafDatum, 'TotDatum': FormatteTotDatum, 'IsOrderPickupDate': OrderPickupDate
            }),
            dataType: "json",
            success: function (newOrderOverviewData) {
                grid.total = newOrderOverviewData.data.length;
                grid.updatePager();
                //grid.dataBind(newOrderOverviewData.data);
                $('.t-status .t-icon', grid.element).removeClass('t-loading');

            },
            error: function (req, status, error) {
                alert("something went wrong with purchasing the order overview, please try again or contact your administrator");
            }
        });
        return false;
    }

Here is my controller class:

[GridAction]
        public ActionResult GetOrderOverview(DateTime VanafDatum, DateTime TotDatum, bool IsOrderPickupDate)
        {
            OrderViewModel myOrders = new OrderViewModel();
            IEnumerable<OrderViewModel> OrderCollection = new List<OrderViewModel>();
            try
            {
                if (Session["UserID"].ToString() != null)
                {
                    string UserID = Session["UserID"].ToString();
                    string WebshopID = Session["StandaardWebshopID"].ToString();
                    bool IsPickupOrderDate = true;

                    OrderViewModel myOrderViewModel = new OrderViewModel();
                    IEnumerable<OrderViewModel> myOrdercollection = new List<OrderViewModel>();
                    myOrdercollection = myOrderViewModel.getOrderOverzicht(VanafDatum, UserID, WebshopID, IsPickupOrderDate, TotDatum);
                    return View(new GridModel(myOrdercollection));
                }

Thanks in advance,
Gerard

[Atanas Korchev]

Hi Gerard Eikelboom,

You don't seem to update the currentPage of the grid. Perhaps this is the problem. If you need further assistance - please provide a sample project so we can troubleshoot it.

Regards,
Atanas Korchev
the Telerik team

[Gerard Eikelboom]

Hi Atanas,
Ehh what do you need from me?
If I give you the View, controller , model en repository class, is that what you need?

Regards,
Gerard

[Atanas Korchev]

Hi Gerard Eikelboom,

 No, we need a sample project which we can run locally. The controller view and repository won't be enough.

Regards,
Atanas Korchev
the Telerik team

[Gerard Eikelboom]

Hello Atanas,
You wrote that I probaly don't update the currentPage of the grid . How do you do that?
For this grid I am building i am using the Twitter example on your site.

The  $.ajax code is executed on initial of the view.
When I hit the search button  $.ajax code  is hit so it is filled with data and also showing the pager settings correctly.
When I click on page 2 from pager the  $.ajax code is hit again.
The 2 at the bottom is also selected. (See picture), but the data is from page 1 unfortunatly.
Below my adjusted $.ajax call
In newOrderOverviewData is my collection data.

$.ajax({
            type: "POST",
            url: "/GeplaatsteBestellingen/_GetOrderOverview",
            data: ({ 'VanafDatum': FormatteVanafDatum, 'IsOrderPickupDate': OrderPickupDate, 'ShowFutureDate': ShowFutureDates, 'TotDatum': FormatteTotDatum
            }),
            dataType: "json",
            success: function (newOrderOverviewData) {
                grid.total = newOrderOverviewData.total;
                grid.updatePager();
                grid.dataBind(newOrderOverviewData.data);
                $('.t-status .t-icon', grid.element).removeClass('t-loading');

            },
            error: function (req, status, error) {
                alert("FOUC something went wrong with purchasing the order overview, please try again or contact your administrator");
            }
        });

I hope this is a little bit more clear to you.

Regards,

Gerard

[Atanas Korchev]

Hello Gerard Eikelboom,

 Our Twitter example does not have paging enabled and that's why I asked you for a sample project. The grid may not support out of the box what you are trying to accomplish so you may need to use undocumented API.

In order to help could you please post a sample project or answer the following questions:

1. Why aren't you using the built-in Ajax binding? What are the requirements which it does not meet? If you only need to pass custom data to your action method you can do so like this:
   function onDataBinding(e) {
         e.data = { foo:'bar' };
   }
   Will that enable you to use the built-in ajax binding?
2. Do you request and return all data or are you paging the data server side? What code are you using? Are you returning correct "total" count? If you are returning all the data the grid won't be able to handle it out of the box.
3. Why are you calling the undocumented updatePager method? The dataBind method calls it internally when it must.

Regards,
Atanas Korchev
the Telerik team

[Gerard Eikelboom]

Atanas,
 What am I glad you are working @t Telerik.
This was the solution.

Use ajax binding.

.ClientEvents(events => events.OnDataBinding(

 

"onDataBinding"))

 

function

 

 

onDataBinding(e) {

 

 

e.data={foo:'bar'};

That's it.
It works perfect.

Thank you.
All that other code I got from other topics and thought I needed it. But I can through it away.
Thanks again.

Regards,
Gerard