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

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.

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

Hello Aidan,

This is the default html markup that is generated when initializing a grid with paging feature enabled. Could you please provide me with your sample so I can further investigate your issue ?

Hi Hristo,

Yes, that was my point that the html hadn't changed.

However, in preparing to reply to you, I spotted what is going on.

I have tabs on this page, each with their own grid.

The new filter html is being applied to one of the grids, for each tab. So if I have 3 tabs, then 1 grid is getting the new html prepended 3 times.

I am guessing now that the jquery selector has to be more specific. If you have a suggestion as to how to narrow it done cleanly, please suggest.

Other then that, thanks for your help on this

Regards

Aidan

Hi Aida,

Thank you for additional information. The sample I have provided uses the following to insert the html:

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

where [0] grabs only the first element of this class. Using

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

will insert the content to every element of the selected class.

I would like to note that since it is possible to select only one checkbox it is not necessary to get the index of the checked input (as it is shown in my previous sample), it is possible to get the value of the checked input directly by using $(".city:checked").val();

Please see the attached sample for this simpler solution. I will be happy to assist you if you have any further questions regarding this issue.

Hi Hristo

I thought I had verified a reply as the answer yesterday.

Yes, I got the new html appearing, I haven't completed the work yet, but this issue has been resolved.

Thanks

Aidan

Hi Aida,

I am checking about the progress of this issue. Did you manage to resolve it ?

I would like to note that it is also possible to use the following selectors:

$("#grid_container") - grabs the div containing the 1st grid on the page

$("#grid2_container") - grabs the div containing the 2nd grid on the page

and so on.

Please let me know If you need any further assistance on this.

Please let me know If you need any further assistance on this.