Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
igGrid Pager at Top of Grid

I'm using a jQuery igGrid using ASP.NET MVC 3 Razor and would like to be able to have a copy of the pager elements (next/previous/first/last/page) at the top of the grid as well as the bottom.  When you're moving from page to page looking for something it's very tedious to have to scroll to the bottom before you can select a different page.  If there's a way to do this currently I would appreciate someone showing me the way to do it.

Kind regards,


  • 6279
    Suggested Answer

    Hi Steve,

    I'm afraid that there isn't an option that allows changing the position of the pager elements (analogous to the pageSizeDropDownLocation option).

    However, here's a solution that I can recommend: simply move the pager elements from the footer to the header using appendChild and replaceChild in order to keep all of the attached JavaScript objects and events attached to those elements.
    There are 2 tricky parts to this solution:
    1. You need to wait for the page header to be rendered (sorry - no event available for this)
    2. The pager is re-rendered each time you change the page size or page index so you have to move it each time.

    Luckily, these can be handled inside the appropriate events of the igGrid and igGridPaging like so:
    (Here's are instructions on how to attach events to an igGrid configured via MVC

        virtualization: false,
        autoGenerateColumns: false,
        width: '500px',
        height: '500px',
        columns: [
            { headerText: "Product ID", key: "ProductID", width: "100px", dataType: "number" },
            { headerText: "Units in Stock", key: "UnitsInStock", width: "150px", dataType: "number" },
            { headerText: "Product Description", key: "ProductDescription", width: "150px", dataType: "string" },
            { headerText: "Unit Price", key: "UnitPrice", width: "100px", dataType: "string" }
        dataSource: namedData,
        primaryKey: "ProductID",
        features: [
                name: "Paging",
                pageSizeChanged: function(ui, evt) {
                    $(".ui-iggrid-pagesizedropdowncontainerabove")[0].replaceChild($(".ui-iggrid-pager>.ui-iggrid-paging")[0], $(".ui-iggrid-pagesizedropdowncontainerabove>.ui-iggrid-paging")[0]);
                pageIndexChanged: function(ui, evt) {
                    $(".ui-iggrid-pagesizedropdowncontainerabove")[0].replaceChild($(".ui-iggrid-pager>.ui-iggrid-paging")[0], $(".ui-iggrid-pagesizedropdowncontainerabove>.ui-iggrid-paging")[0]);
        rendered: function(ui, evt) {
            var waitForPageHeader = setInterval(function() {
                if($(".ui-iggrid-pagesizedropdowncontainerabove").length > 0) {
            }, 10);

    I'm attaching a working sample so you can see this in action.
    PS: Unfortunately you have to use JavaScript for this solution - there's no way to perform it using the MVC View.  

Reply Children
No Data