Horizontal Scrolling Hierarchical Grid - Problem

[Mark]

There is a problem with the horizontal scrolling of a hierarchical grid. I'm actually using kendo for ASP MVC  but the problem is with the underlying UI product rather than the MVC wrappers.

Scenario

A hierarchical grid in which the child grid is wider than the parent grid. Page (or container) of the widget made narrow enough to produce the horizontal scrollbar.

Problem

When scrolling to the right, the parent grid headers stop scrolling when they are all visible. Scrolling past this point leaves the parent columns misaligned with their headers. (There is also a vertical line representing the right hand edge of the parent grid which shows through on the child grid.)

I have edited one of the Telerik demos to illustrate, see here.

I'm currently try to figure out a workaround for this but would welcome any help.

 

 

[Stefan]

Hello, Mark,

Thank you for the runnable example.

In this scenario, the child Grid has to be scrollable and the parent container has to have a width which is smaller than all column widths combined;

http://dojo.telerik.com/uveJUZ/3

I will forward this to the front-end team to test if there is another approach, or this is required if there are multiple columns with fixed width.

Regards,
Stefan
Progress Telerik

[Mark]

Thanks Stefan.

Unfortunately, this approach may not work for my data. The child grids have 2 - 5 rows and display quite well at the moment apart from the horizontal scrolling problem (which is actually quite minor). I don't know if your solution can cope with variable numbers of child rows and no paging.

I did come up with a javascript (jquery) solution which seems to work although may be overkill. I call this function in the child grid databound event. Posted here in case anyone can improve it.

/* ----------------------------------------------------------------------------------
Adjust width of last column on grid so that overall parent width is same as child.
IDs passed in should be Html ids (no #)
---------------------------------------------------------------------------------- */
kendoAdjustLastColumnWidth = function (parentID, childID) {
    var adjusted = $("#" + parentID).data("adjusted");
    // Adjust width of last (dummy) column on parent grid so that horizontal scrolling isn't borked.
    // Only proceed if this is the first child grid loaded...
    if (adjusted === undefined || adjusted === false) {

        // Calculate sum of widths of child grid columns.
        var totalChildWidth = 0;
        $("#" + childID).find("table").eq(0).find("colgroup col").each(function (idx) {
            totalChildWidth += +$(this).width();
        });

        // Calculate sum of widths of parent grid columns (excluding expander (first) and dummy (last)).
        var totalParentWidth = 0;
        var cols = $("#" + parentID).find(".k-grid-content table > colgroup").eq(0).find("col");
        cols.each(function (idx) {
            if (idx > 0 && idx < cols.length - 1)
                totalParentWidth += +$(this).width();
        });

        // Allocate difference to the dummy column.
        var diff = totalChildWidth - totalParentWidth;
        if (diff > 0) {
            $("#" + parentID).find(" .k-grid-header-wrap table > colgroup").eq(0).find("col").eq(cols.length - 1).css({ width: diff });
            $("#" + parentID).find(".k-grid-content table > colgroup").eq(0).find("col").eq(cols.length - 1).css({ width: diff });
        }

        $("#" + parentID).data("adjusted", true);
    }
}