I had a customer request to duplicate table headers whenever a hierarchichal grid has been expanded and put the same headers that are the top of the grid below the expanded item. When this row is expanded, the information in the tooltip for a cell is now offset by one cell (i.e. it shows the information from the cell below it). Also, If we have multiples of these copied headers in the row, the offset shifts accordingly.. I.E. If there are 2 additional headers, the tooltip info is that of the cell 2 rows below the cell that is hovered over, if 3 additional headers, tooltip info is that of cell 3 rows below and so on.
Here's what I tried. I tried using the iggridtooltipstooltipshowing event. I just set the tooltip equal to the data in the hovered over element.
$(document).delegate("[id^='bws-cv-grid-']", "iggridtooltipstooltipshowing", function (evt, args) { if (!(args.element.textContent.contains("..."))) { args.tooltip = args.element.textContent; }});
The problem with this code is that it only can get the information which is in the cell, which is trimmed with a ... at the end. I added the if statement to only replace the tooltip info if there was not a "..." in the cell. Then I realized that this still doesn't fix the problems of the cells that have the "..." in them (i.e. they still have info from cells below them).
I realize that I have done something with jQuery that was never intended to be done by infragistics, but I would appreciate any suggestions.
Hi Jared Meier,
Thank you for posting on our forums.
Given the sample here, the text content should provide you with the complete text. If this doesn't work for you, can you modify this sample, or provide a new one which reproduces the behavior so that I can review it further?
I am looking forward to your update.
You were correct, Jose... there must've been something going on the last time I tried it. So now, here's my code..
$(document).delegate("[id^='bws-cv-grid-']", "iggridtooltipstooltipshowing", function (evt, args) { args.tooltip = args.element.textContent;});
The only problem now is that the tooltipsshowing event doesn't fire for the bottom row if I have 1 extra header row and it doesn't fire for the bottom 2 rows if I have 2 extra header rows and so forth. Any idea how I could force this event to fire on the last number of rows when I add the same amount of extra header rows?
Thanks so much.
-Jared
Hi Jared,
It's my understanding that you wish to do this to prevent users from scrolling all the way back up to find the header text for the parent table, and then scroll all the way back down to where they were before. Personally, I propose what I believe to be a better solution. How about if you set the height for each child to be something like 200px and enable overflow-y to show a scrollbar for all child grids. This will enable you to scroll the down the child while keeping the parent table headers completely in view. If the parent grid has several rows such that you would have to scroll the parent headers out of view, you can always enable paging on the parent to prevent scrolling for the parent, or the user can simply scroll back up the parent table without moving the scroll position of the child.
I hope the details I've provided give you a good understanding of my suggestion. If you agree that this will work, and need assistance implementing this suggestion, please let me know.
Hi Jose.. What I'm looking for is more like the image that I added here.. I'd like to add an additional header UNDER the child expanded grid that lines up with parent grid. That way if you expand the grid and scroll down, you can still see the headers for the top level data.
Thank you for the update.
Is it required that this be done dynamically? You should be able to simply set the igHierarchicalGrid's MultiColumnHeader when you initialize the component since the parent columns don't change. I've attached a sample which demonstrates how you can achieve my suggestion.
Please review the sample and let me know if you have additional questions.
Can you show me an example of how I might dynamically assign the unbound columns' columnHeaders with the text of it's parent grid? I'm not sure I'm totally understanding.
Instead of cloning the headerRow, I recommend using the available igGridMultiColumnHeaders feature to configure the child grid's columnHeaders such that the it contains unboundColumns with the text of it's parent grid.
To learn more about the igGridMultiColumHeader feature, please review the following help topics:http://help.infragistics.com/jQuery/2015.1/ui.iggridmulticolumnheaders_hghttp://www.igniteui.com/grid/multi-column-headers Please let me know how this approach works for you.