Forums Ignite UI for jQuery
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
Close
YannisPs
20
igGrid Pager location
posted

I followed a number of articles and I have moved the pager above of the grid. (IgniteUI 2013.2 version).

At this stage the pager is right aligned.

I have a request to place the Records Laves from bottom-left to top-left.

The pager style should not change between drop-down and page numbers and I need to make a permanent 'page numbers' only display at the center of the page (central horizontal alignment).

At a later stage I will need to duplicate the pager at the bottom of the table as well.

I attach a sample layout of what we try to achieve.  What advice can you give?

Parents
  • 49378
    Suggested Answer
    posted

    Hello YannisPs,

    I am assuming that you have used the approach described by my colleague Boris for displaying the pager on top in igGrid:

    http://ko.infragistics.com/community/forums/t/72561.aspx

    I have modified this approach in order to clone, instead of move, the pager so it is displayed both on top and bottom in the igGrid. In addition to that, left alignment is achieved by applying some css on the pager elements:

     $(function () {
                $('#table1').igGrid({
                    virtualization: false,
                    autoGenerateColumns: false,
                    width: '1500px',
                    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-pagerrecordslabel").css("margin-right", "5px");
 
                                $(".ui-iggrid-pagesizedropdowncontainerabove")[0].replaceChild($(".ui-iggrid-pager>.ui-iggrid-paging").css("float", "left").clone(true)[0], $(".ui-iggrid-pagesizedropdowncontainerabove>.ui-iggrid-paging")[0]);
                                $(".ui-iggrid-pagesizedropdowncontainerabove")[0].replaceChild($(".ui-iggrid-pager>.ui-iggrid-pagerrecordslabel").css("float", "left").clone(true)[0], $(".ui-iggrid-pagesizedropdowncontainerabove>.ui-iggrid-pagerrecordslabel")[0]);
                            },
                            pageIndexChanged: function (ui, evt) {
                                $(".ui-iggrid-pagerrecordslabel").css("margin-right", "5px");
 
                                $(".ui-iggrid-pagesizedropdowncontainerabove")[0].replaceChild($(".ui-iggrid-pager>.ui-iggrid-paging").css("float", "left").clone(true)[0], $(".ui-iggrid-pagesizedropdowncontainerabove>.ui-iggrid-paging")[0]);
                                $(".ui-iggrid-pagesizedropdowncontainerabove")[0].replaceChild($(".ui-iggrid-pager>.ui-iggrid-pagerrecordslabel").css("float", "left").clone(true)[0], $(".ui-iggrid-pagesizedropdowncontainerabove>.ui-iggrid-pagerrecordslabel")[0]);
                            }
                        }
                    ],
                    rendered: function (ui, evt) {
                        var waitForPageHeader = setInterval(function () {
                            $(".ui-iggrid-pagerrecordslabel").css("margin-right", "5px");
 
                            $(".ui-iggrid-pagesizedropdowncontainerabove")[0].appendChild($(".ui-iggrid-pagerrecordslabel").css("float", "left").clone(true)[0]);
                            $(".ui-iggrid-pagesizedropdowncontainerabove")[0].appendChild($(".ui-iggrid-pager>.ui-iggrid-paging").css("float", "left").clone(true)[0]);
 
                            if ($(".ui-iggrid-pagesizedropdowncontainerabove").length > 0) {
                                clearInterval(waitForPageHeader);
                            }
                        }, 10);
                    }
                });
            });

    Hope this helps. Please feel free to contact me if you have any questions.
    iggridmovepagerontop.zip
Reply Children