Column resize in Chrome (61)

9 posts, 0 answers
  1. Armen
    Armen avatar
    3 posts
    Member since:
    Apr 2017

    Posted 25 Sep Link to this post

    Column resize doesn't work in the latest Chrome version when the scale (including system-wide property) is not 100%.
    Steps to reproduce:
    1) If you're using Windows go to Display Settings and specify the Scale other than 100%, for instance, 250%.
    2) Open the latest Chrome (version 61, as of today).
    3) Go to official Kendo Grid documentation - http://demos.telerik.com/kendo-ui/grid/column-resizing *
    * This doesn't mean that resizing is broken only on that page, I see the same behavior with any Kendo Grid instance. The fact that it doesn't work even on that page is meant to prove that this is not something on my end.

    Column resizing feature is broken. The resize handler is not even visible when you hover the edge of the column.
    columnResizeHandleWidth is not the case.
    Note that exactly the same page is working fine in FF and IE.
    I think I found what appears to be the issue - getPageZoomStyle function in the Grid._positionColumnResizeHandle function. When getPageZoomStyle returns anything but 1 the value of the clientX variable is incorrect, thus that._createResizeHandle is never executed.
    I was able to fix the behavior by removing the getPageZoomStyle function completely and let clientX always be equal e.clientX rather than e.clientX / getPageZoomStyle(). However, I'm not sure is this the correct solution. Moreover, there may be similar issues in other places, though I couldn't find any. Actually, the fact that this trick is used only here and not in any other Kendo UI component is very suspicious.

    I am not 100% sure but it looks like this issue appeared with the latest major Chrome update (version 61)

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1766 posts

    Posted 27 Sep Link to this post

    Hi Armen,

    The behavior you are seeing is observed in the latest Chrome version. We are aware of the behavior and it is logged in our repo. You can monitor the status of the issue in the link below.


    As a temporary workaround you can override the internal _positionColumnResizeHandle method. Check out the example below that illustrates the approach:



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tyson
    Tyson avatar
    1 posts
    Member since:
    Jun 2014

    Posted 03 Oct in reply to Viktor Tachev Link to this post

    There's an issue with the fix posted. 

    "Uncaught reference error Cursor is not defined"

    It seems to work fine with this line commented out however. What was the intention of this:

    cursor(that.wrapper, "");

     

  4. Stephen
    Stephen avatar
    89 posts
    Member since:
    Jan 2011

    Posted 04 Oct in reply to Tyson Link to this post

    The cursor function is a method defined in the kendo VirtualScrollable widget, but it is pretty simple, with no external references:

    function cursor(context, value) {
        $('th, th .k-grid-filter, th .k-link', context).add(document.body).css('cursor', value);
     }

    As a workaround, you can just put a local copy of it in override provided by Viktor.

    See http://dojo.telerik.com/@Stephen/UDETiQ

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1766 posts

    Posted 05 Oct Link to this post

    Hello,

    After further examination it seems that some of the code was a legacy that is no longer necessary. You can find an updated version of the dojo below:


    It is important to note that this workaround is not fully tested. Thus, I would recommend testing how the Grid behaves after including it in order to ensure that everything is working as expected. 


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Coy
    Coy avatar
    6 posts
    Member since:
    May 2013

    Posted 09 Oct Link to this post

    Just ran into this tonight.  I implemented the workaround and that seems to be working for me.  Will reply back if I run into any issues.

    Full Chrome version:  Version 61.0.3163.100 (Official Build) (64-bit)

    Thanks!

  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1766 posts

    Posted 5 days and 23 hours ago Link to this post

    Hi Coy,

    Please take your time to test how the workaround behaves in your application.  If you find anything that is not working as expected do not hesitate to contact us again.

    With that said, the fix has been implemented and will be included in the upcoming service pack. I would recommend updating the components when the next version is available.

    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Houda
    Houda avatar
    3 posts
    Member since:
    Nov 2015

    Posted 5 days and 3 hours ago Link to this post

    I observe this issue even when page is not zoomed (100%)
    Chrome Version on windows:  61.0.3163.100 (Official Build) (64-bit)
    sample page : http://demos.telerik.com/kendo-ui/grid/column-resizing

  9. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1766 posts

    Posted 3 days and 21 hours ago Link to this post

    Hi Houda,

    The behavior can also be replicated when scaling is enabled in the OS. Nevertheless, the same workaround should also work in that scenario. 

    With that said, the developers have fixed the issue and it should not be observed in the upcoming Service Pack. Please update the components to it when it is available and see how it works for you.


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top