Hi
I would like to add some additional content to either the Paging Header (shows the page size in use) or to the caption area.
Our idea is to add some additional filtering functionality to the unused area, doing so with make use of the current white space.
If not currently possible out of the box, I would appreciate some advice on how to template these items.
Regards
Aidan
Hello Aidan,
Could you please clarify what functionality exactly you want to achieve in the Paging Header ?
Generally you can append some element to the Paging Header, like in the following forum thread - http://es.infragistics.com/community/forums/t/83941.aspx
Then on click event for example you can call some of the grid filtering methods: http://help.infragistics.com/jQuery/2014.1/ui.iggridfiltering
Please let me know If I misunderstood you or if you have any other questions regarding this issue.
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?
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.
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
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.
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
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 ?