Thanks for the reply and code.

I have included the rendered: hook and I can (via logging/breakpoints) confirm that the code is being executed but the new html is not being displayed.

When I inspect the elements I see the following structure

<div class="ui-widget ui-helper-clearfix ui-iggrid-pagesizedropdowncontainerabove ui-iggrid-toolbar ui-widget-header and ui-corner-top" title="Choose number of records per page"><div class="ui-iggrid-results"><span class="ui-iggrid-pagesizelabel">Show </span><span id="igGrid_vv3_editor" class="ui-iggrid-pagesizedropdown ui-igedit ui-state-default ui-widget ui-corner-all ui-igedit-container" style="width: 68px;"><span class="ui-igedit-button ui-igedit-buttondefault ui-state-default" title="Show list" style="height: 18px;"><span class="ui-igedit-buttonimage ui-icon-triangle-1-s ui-icon" style="margin-top: 1px;"></span></span><input readonly="" class="ui-igedit-field" style="text-align: left; width: 47px; height: 18px;"></span><span class="ui-iggrid-pagesizelabel">records</span></div></div>

Aidan

Hi Aidan,

Actually the Paging Header is not located inside the <table> element where the grid is initialized, so using ui.table.find will not help finding the corresponding html element for the paging header.

The Paging Header is a <div> element which is the first child of the <div> element that contains both the paging header and footer and the grid. You can insert your html content there as following:

$($(".ui-iggrid-pagesizedropdowncontainerabove")[0]).prepend(htmlString);

as you can see in the attached sample, where htmlString is a variable that contains html markup for a group of checkboxes like in the image you have posted.

Selecting any of these checkboxes will trigger a function that filters the grid based on the checkbox data..

I hope this answers your question. Could you please review the attached sample and see if it meets your requirements. Please feel free to let me know if you have any other questions.

The previous post seems to have dropped the image that I pasted.

Trying again. See attachment

If it gets cut again, the image contained the default page header with Show XXX Records where XXX is a drop down list.

Aligned to the left of this is a group of check boxes representing data that the grid can be quickly filtered on.

Regards

Aidan

Hi

I am thinking of adding some controls like shown:

and when the user toggles these values the filtering is executed.

From your link are you suggesting I add this by using ui.table.find from within a handler for the headerRendered event?

Regards

Aidan