Paging in the grid on top & bottom

8 posts, 0 answers
  1. Sang
    Sang avatar
    25 posts
    Member since:
    Oct 2011

    Posted 01 Oct 2013 Link to this post

    is it possible to have the pagination on top and bottom of the grid?  today it always sits at the bottom but on our case where the list is big, it would be nice to have it on top so use don't have to navigate to the bottom for pagination.  Thanks.
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 02 Oct 2013 Link to this post

    Hi Sang,


    Please take a look at the following forum topic, where this is discussed in detail with examples.

    I wish you a great day!

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 20 May 2015 in reply to Dimiter Madjarov Link to this post

    Dimiter,

    The forum post you point to doesn't really resolve the question of how to add pagination on top and bottom of a grid using the mvc helpers as opposed to using straight-up kendoui. What I see is Dimo's response:

    Copying the pager behavior in the MVC Grid is not straightforward,
    because the implementation is different. You can clone the HTML markup
    in a similar way, however, then you will need to attach custom event
    handlers that will execute paging actions using the client API.
    Modifying the cloned pager markup manually (or cloning the pager again)
    in the Grid's dataBound / load event will also be required.

    Is there anyone at Telerik who could provide a clearer explanation of how to implement this using wrappers? It seems there are several people out there who would like to do this.

     Also, is this on the list of things to be added to the mvc grid?

    Thanks.

    Laurie

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 21 May 2015 Link to this post

    Hello Laurie,

    The linked forum post is very old and my colleague Dimo is referring to the MVC Grid from the Telerik MVC Extensions, which is discontinued at the moment. If the UI for ASP.NET MVC Grid is used in the current case, the desired task could be achieved by only adding the JavaScript code, showed in the following post, depending on whether the Grid is scrollable or not.

    Regarding the second question, adding this as a built in feature is not in our development plans.

    I hope this clarifies the case. Have a nice day!

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 21 May 2015 in reply to Dimiter Madjarov Link to this post

    Thanks, Dimiter, that worked perfectly!
  7. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 21 May 2015 Link to this post

    One additional question: when I first go to the page, the pager is at top and bottom. When I click on the pager to go to the next page, an additional pager appears at the top.

     ​

     Here's the relevant code in my VIew and I'm attaching a pic of what it looks like. Any ideas?

    @(Html.Kendo().Grid<BFRDP.Models.OrganizationViewModel>()
            .Name("grid")
            .Pageable()
            .Filterable()
            .Sortable()
            .Columns(columns =>
                {
                    columns.Bound(p => p.OrganizationName).Title("Organization");
                    columns.Bound(p => p.Website).Title("Website");
                    columns.Bound(p => p.CityState).Title("City, State");              
                })
                .Events(events => events.DataBound("onDataBound"))
                .DataSource(datasource => datasource
                .Ajax()
                    .Model(model => model.Id(m => m.OrganizationName))
                    .Read(read => read.Url(@Url.HttpRouteUrl("DefaultAPI", new { controller = "OrganizationAPI", action = "GetAllOrganizations" })).Type(HttpVerbs.Get))
                .PageSize(10)
                .ServerOperation(true)               
                .Sort(sort =>
                    {
                        sort.Add(p => p.OrganizationName);
                    })
                    )
    )
    <script>
     
        function onDataBound(e) {
            var grid = $('#grid').data('kendoGrid');
            var wrapper = $('<div class="k-pager-wrap k-grid-pager pagerTop"/>').insertBefore(grid.element.children("table"));
            grid.pagerTop = new kendo.ui.Pager(wrapper, $.extend({}, grid.options.pageable, { dataSource: grid.dataSource }));
            grid.element.height("").find(".pagerTop").css("border-width", "0 0 1px 0");
        }
    </script>

  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 22 May 2015 Link to this post

    Hello Laurie,

    The dataBound event is fired each time the Grid is bound to a new set of data e.g. when going to the next page. This is why the code for adding the second pager should be executed on document.ready only, not in the dataBound event handler.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 22 May 2015 in reply to Dimiter Madjarov Link to this post

    Yes, perfect!  Many thanks!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready