Kendo UI Grid Cannot Preserve Grid Page Number

0 Answers 320 Views
Grid ModalView Pager
Moshele
Top achievements
Rank 1
Moshele asked on 14 Feb 2023, 05:46 AM

Hi Guys,

 

I have JQuery, KendoUI ASPNET MVC 5 which has two pages Index and View Details Page each has a dedicated js file and want to return to the previous Grid page number when a button in View Details is clicked:

  • In the first page I search Customer details which populates a table with Customer details { Name, Occupation and Title, a link to the view details} and has pageSize of 10 and multiple pages, depending on the customers stored.
  • What I want to achieve is to be able to return to the previous page results that was selected when and <a> to view details was clicked. For Instance I click <a> element on page number 20, I want to return to page 20 when I click save.

This is what I have tried so far:

  • I used the standard way of saving the page grid in a sessionStorage , retrieving the saved page and assigning it to the current page when save or cancel button is clicked, and assigning the saved grid page number using this method:    kendoGrid.dataSource.page(savedPage).
    • Results:  Returns to the first of results, irrespective of the current save page in the session storage.

    I then attempted to fix the issue by trying to set the page number using the jquery.

    ViewDetails.js

    $(document).ready(function () {

      $("button.isa-button-back, button.isa-button-save").click(function (e) {
        localStorage.setItem("depositButtonClicked", true);
      });
    });

    Index.js

    $(document).ready(function () {
      var filterNumber = $("span.k-state-selected").text();
      localStorage.setItem("filterNumber", filterNumber);
      if (localStorage.getItem("depositButtonClicked") === "true") {
        var storedValue = localStorage.getItem("filterNumber");
        $($("ul.k-pager-numbers li span.k-state-selected")).removeClass(
          "k-state-selected"
        );
        $("ul.k-pager-numbers li span")
          .filter(function () {
            return $(this).text() == parseInt(storedValue);
          })
          .addClass("k-state-selected");
        localStorage.removeItem("storedValue");
        localStorage.removeItem("depositButtonClicked");
      }
    });

    Results: Internal Server Error 500, when I click save or back button in the detailsPage

    Another way that I tried was to use this function in the  CustomerController's method:

             
        public ActionResult Back()
        {

            SetScriptModuleOptions("IndexModule", new { RestoreGrid = true });
            SetScriptModuleOptions("IsaSearchGrid", new { PreserveGridState = GridStatePreservation.All });

            return RedirectToAction("Index");
        }

Georgi Denchev
Telerik team
commented on 16 Feb 2023, 04:01 PM

Hi, Moshele,

Thank you for the provided details.

The idea about using the dataSource.page() method sounds good to me, I suspect there could be some sort of a timing issue for it to not work.

Here's what I can suggest you try:

1. Attach a click event to the <a> element.

2. In the click event prevent the default behavior - e.preventDefault();

3. Save the current page in your session/local storage - currentPage = dataSource.page()

4. Once that is done navigate to the Details page manually by using Javascript.

5. When you return back to the initial page retrieve the page number from the local/session storage and call the dataSource.page() method with the number as a parameter.

If No. 5 still doesn't work, could you try using the Browser console to invoke the method and see if it has any effect at all?

// In the browser console

let grid = $("#grid-selector").data('kendoGrid');

// try to navigate to the third page of the Grid.
grid.dataSource.page(3);

Best Regards,

Georgi

No answers yet. Maybe you can help?

Tags
Grid ModalView Pager
Asked by
Moshele
Top achievements
Rank 1
Share this question
or