How to get current page number - MVC

6 posts, 1 answers
  1. Nirav
    Nirav avatar
    17 posts
    Member since:
    Mar 2013

    Posted 02 Apr 2013 Link to this post

    Hi,

    I want to get current page number of Kendo Grid.
    Please can you show me the way for model in view and controller?

    Thanks,
    Nirav
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 02 Apr 2013 Link to this post

    Hello Nirav,


    To get the current page on the client side you could use the page method of the dataSource.
    E.g.
    var grid = $("#Grid").data("kendoGrid");
    var currentPage = grid.dataSource.page();

    To get the current page in the controller, you could use the Page property of the DataSourceRequest object.
    E.g.
    public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
    {
       int currentPage = request.Page;
       ...
    }

     

    Greetings,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Nirav
    Nirav avatar
    17 posts
    Member since:
    Mar 2013

    Posted 03 Apr 2013 Link to this post

    Thanks for reply. 

    How can I pass the current page number in the kendo grid column?
    I have a situation to attach the current page number as a parameter in grid column. Means I want to pass the current page number in my below pageNumber param.

    columns.Bound(r => r.Name).ClientTemplate("<a href=\"" + Url.Action("Details", new { Id = "#=Id#", pageNumber = ???}) + "\">#=Name#</a>").Width(200);

    Regards,
    Nirav
  4. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 03 Apr 2013 Link to this post

    Hi Nirav,


    To achieve this you could use a JavaScript function in the ClientTemplate and move the custom logic there. A sample approach, that I could suggest you is to use some kind of placeholders in the Url.Action method and then replace them with the corresponding values.
    E.g.
    columns.Bound(p => p.ProductID).ClientTemplate("#= myTemplate(data) #").Width(140);

    <script>
    function myTemplate(data) {
        var grid = $("#Grid").data("kendoGrid");
        var currentPage = grid.dataSource.page();
        var html = "<a href='" + "@Html.Raw(Url.Action("Details", new { Id = "__id__", pageNumber = "__pageNum__" }))" + "'>" + data.ProductName + "</a>";
        html = html.replace("__id__", data.ProductID);
        html = html.replace("__pageNum__", currentPage);
        return html;
    }
    </script>

    I hope this approach will work in the current scenario.

     

    Greetings,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Syed Salman
    Syed Salman avatar
    1 posts
    Member since:
    Nov 2020

    Posted 16 Nov 2020 in reply to Dimiter Madjarov Link to this post

    how to get current page number of grid in Kendo Angular?
  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 17 Nov 2020 Link to this post

    Hello, Syed,

    This forum is intended for the jQuery Grid and is applicable to the  MVC, ASP.NET Core, JSP and PHP wrappers as well. The Kendo Angular Grid on the other hand is a completely different suite, not based on jQuery but purely developed from the ground with Angular.

    It is best to post questions regarding the Kendo Angular Grid in the respective forum:

    https://www.telerik.com/forums/kendo-angular-ui/grid

    Nonetheless, I had a look at the Kendo Angular documentation and the paging example that they have:

    https://www.telerik.com/kendo-angular-ui/components/grid/paging/

    You can create your own variable page and interpolate its value as part of the template:

    https://stackblitz.com/edit/angular-z1f2s9?file=app%2Fapp.component.ts

    public page = 1;
    
    private loadItems(): void {
        this.gridView = {
          data: this.items.slice(this.skip, this.skip + this.pageSize),
          total: this.items.length
        };
        this.page = this.skip / this.pageSize + 1;
      }

    <ng-template kendoGridCellTemplate let-dataItem>
              Page: {{ page }} /
              <strong>{{ dataItem.ProductName }}</strong>
     </ng-template> </kendo-grid-column>

    However, please consult with the Kendo Angular team in the forum I shared with you for further questions.

    Thank you in advance for your understanding.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top