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?
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.
Please feel free to contact me if you have any further questions regarding this matter.
Hello,
I have cloned the pager but the combox of pager not working above.
Can I clone the pager with combobox?
Has anyone been able to clone the pager with combobox? I too am looking for a solution to this, thanks.