Question

When I have a result set with several hundred columns, the header wraps back to the left side of the web page and takes up two rows. The correlation between header positions and column positions in the data also is not correct toward the end of the first line of header cells.

It appears that the width of the header is fixed to 10000px and the width of the row cells can be much wider and this is what is causing the rendering problem.

The style for slick-header-columns is set explicitly by slick.grid.js to: style=”width: 10000px; left: -1000px”.

When I inspect the css via firebug in this wrapping state, I see that the width of each slick-row is set to: 12805px. When I manually change the width of the slick-header-columns width to 15000px, the rendering is correct and the header no longer wraps.

Is there a way to programatically update the header width so that it can hold all of the column cells?

Answer 1

My solution to this problem was to modify the setCanvasWidth function in slick.grid.js so that it updates the header width as well as the canvas width:

    function setCanvasWidth(width) {
        $canvas.width(width);
        if (width > $headers.width()) {
           $headers.width(width + 1000);
        }
        viewportHasHScroll = (width > viewportW - scrollbarDimensions.width);
    }