Misaligned headers & columns

3 posts, 0 answers
  1. Shane
    Shane avatar
    3 posts
    Member since:
    Aug 2019

    Posted 21 Sep 2019 Link to this post

    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. Shane
    Shane avatar
    3 posts
    Member since:
    Aug 2019

    Posted 22 Sep 2019 Link to this post

    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) {


    I've attached a screenshot of the result.

  3. Martin
    Martin avatar
    222 posts

    Posted 24 Sep 2019 Link to this post

    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.

    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.
Back to Top