Hello,
The grid paging header and grid caption both take up huge strips of screen space. Since real estate is always at a premium I'd like to combined the two into one row. I thin kit will also look a lot better than having the paging header way above the actual grid. Can this be done?
Thank you
Hello C J,
Thank you for your feedback and your notes.
If I can provide further assistance with this matter, do not hesitate to contact me.
Regards,
Tsanna
OK, I got it to work with the above code with 2 notes :
$("#myGrid_container .ui-iggrid-pagesizedropdowncontainerabove").append("<div>My title</div>");
Thank you for your help.
Hi C J,
In this case instead of table element with caption, you can append div element and it will position on the same row as the 'Show xx results' div, for instance:
$(".ui-iggrid-pagesizedropdowncontainerabove").append("<div id='caption'>Caption</div>"); Giving it 'id' attribute you can use it for styling per your requirement. If you need further assistance, please let me know.
While technically your code above did add the caption to the 'paging' bar, its on another 'row' below the 'Show xx records' row, and this doesn't save any space. There is a lot of whitespace directly to the left of the "Show xx records" , and that's where I'd like to put the Caption. This way you get an extra row or two of actual grid data visible. Can this be done?
Thank you for the clarification.
In order to achieve combining grid caption with the top paging bar, I would suggest you to remove the caption option of the grid and manually insert the table with the caption to the div that holds the top paging container. This could be achieved using 'pagingdropdownrendered' event, for instance:
pagingdropdownrendered: function(evt, ui){ $(".ui-iggrid-pagesizedropdowncontainerabove").append("<table style='width: 100%; margin: 0px;'><caption id='grid_caption'>Caption</caption></table>"); }
I'm attaching also a sample for your reference. If you have any further questions, please let me know.