I would like the option to (or know how I can) combine the 'caption' bar with the top 'paging' bar. As it stands now, the top paging bar + caption bar, + column header bar + bottom paging bar combined take up a lot of room on the page. If the 2 at the top could be combined, that would help the user see more real data in the grid.

http://jsfiddle.net/63pakzxr/

Hello C J,

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.

Regards,

Tsanna

Hello,

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

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.

Regards,

Tsanna

OK, I got it to work with the above code with 2 notes :

• Setting this MUST go in the 'render' event otherwise the grid doesn't exist yet (even if the grid initialization jQuery code already ran)
• This will globally set EVERY grid on the page to this name, so you have to specify your grid name in the selector as this :

$("#myGrid_container .ui-iggrid-pagesizedropdowncontainerabove").append("<div>My title</div>");

Thank you for your help.

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