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.
We have used this approach and found that after resetting the data source the number of records does not show the correct number.
$("#FeedRecordsgrid").igGrid("dataSourceObject", filteredrecords).igGrid("dataBind");
Please feel free to contact me if you have any further questions regarding this matter.