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.
The approach used was to clone the header row...
$("td[class*='ui-iggrid-childarea']:not([class*='additional-header-below-this'])").each(function (index, element) { var table = $(element).closest("table"); var headerColumns = $("#" + table.attr("id") + " > thead > tr > th.ui-iggrid-header"); var headerRow = $(headerColumns).closest("tr"); headerRow.each(function () { var $clone = headerRow.clone(); $clone.wrap("<div>"); var outerHtml = $clone.parent().html(); var childGridRow = $(element).parent(); var childGridRowId = childGridRow.attr("data-id"); $(element).addClass("additional-header-below-this"); $(childGridRow).addClass("additional-header-below-this"); var nextRow = $(childGridRow).next(); $(outerHtml).insertBefore(nextRow); $(nextRow).prev().hide(); $(nextRow).prev().show(1500); }) });
("#divSearchResults").on("click", ".ui-iggrid-expandcolumn", function (e) { ToggleExtraHeaders($(this));});
function ToggleExtraHeaders(toggleElement) { var tr = $(toggleElement).closest("tr"); var nextRow = $(tr).next(".additional-header-below-this").next(); var minus = $(toggleElement).children().children(".ui-icon-minus"); var plus = $(toggleElement).children().children(".ui-icon-plus"); minus.each(function (index, element) { nextRow.hide(0); }); plus.each(function (index, element) { nextRow.show(2000); });}
Hi Jared Meier,
Thank you for the update.
Please let me know the approach you've taken to add the column headers to the child grid. If possible, please attach a sample which I can review and possibly provide you with an approach which you can use to achieve the desired behavior.
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
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?