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,
Steve
I am having the same issue with the page controls being cloned successfully but when there are more than 10 pages the page dropdown control is displayed and when it is clicked it fires the original control's event handler (below the grid) and scrolls the page down to the original control. Is there a way to prevent this behavior so that the new, cloned control's event handler is assigned to itself and doesn't activate the original?
This code works good, with the exception of the page index dropdown events. Once this is all cloned, the top page index dropdown will load the bottom one when you click it. Has anyone found a resolution to this?
How to move the pager records label to top left?
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)
$('#table1').igGrid({ 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() { $(".ui-iggrid-pagesizedropdowncontainerabove")[0].appendChild($(".ui-iggrid-pager>.ui-iggrid-paging")[0]); if($(".ui-iggrid-pagesizedropdowncontainerabove").length > 0) { clearInterval(waitForPageHeader); } }, 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. Cheers,Borislav