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

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,

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.

Hi Jared,

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.