Misaligned headers & columns

[Shane]

I just started working with the MultiColumnComboBox component, and I immediately noticed that the headers are increasing misaligned with their columns as you move from left to right across the grid.

The demos show a small buffering header over the vertical scrollbar, but that's not present in my implementation.

Is there something I'm missing to have that little buffering header over the scrollbar?

 

I've included a screenshot of the MultiColumnComboBox grid rendering where you can clearly see the misalignment. The screenshot includes the configuration code, as well.

[Shane]

I was able to keep the headers aligned with their columns by checking the headers length against the columns length in the open event function and inserting a new header at the end of the header row when needed:

open: function (e) {
    /* if the scrollable area overflows and the vertical
    * scrollbar is visible the headers will be misaligned
    * with their columns */
    var itemsCount = $(this.list[0]).find('.k-item').length;
    /* due to the set height value, I know that if the
    * grid contains more than 5 items the scrollable
    * area will overflow */
    if (itemsCount > 5) {
        var headers = $(this.columnsHeader[0]).find('th');
        /* insert extra <th> element at end of header
        * row to align headers with their columns,
        * if not already done */
        if (headers.length < this.options.columns.length + 1) {
            $('<th>').insertAfter(headers.last());
        }
    }
}

 

I've attached a screenshot of the result.

[Martin]

Hello Shane,

Thank you for the provided screenshots. 

I was unable to reproduce the reported issue, but I am happy that you managed to resolve it on your own.

If at some point you are experiencing that again (or you are having another issue), please do not hesitate to contact us. We will be happy to assist you.

Regards,
Martin
Progress Telerik