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

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 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.

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.

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,

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

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 ?