This is a migrated thread and some comments may be shown as answers.

Misaligned headers & columns

2 Answers 310 Views
MultiColumnComboBox
This is a migrated thread and some comments may be shown as answers.
Shane
Top achievements
Rank 1
Shane asked on 21 Sep 2019, 05:57 AM

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.

2 Answers, 1 is accepted

Sort by
0
Shane
Top achievements
Rank 1
answered on 22 Sep 2019, 01:51 PM
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.


0
Martin
Telerik team
answered on 24 Sep 2019, 02:57 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
MultiColumnComboBox
Asked by
Shane
Top achievements
Rank 1
Answers by
Shane
Top achievements
Rank 1
Martin
Telerik team
Share this question
or