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 variable is incorrect, thus that._createResizeHandle never executed.
I was able to fix the behavior by removing the getPageZoomStyle function completely and let always be equal e.clientX rather than e.clientX / getPageZoomStyle(). However, I'm not sure 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)
10 Answers, 1 is accepted
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
Rank 1
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, "");
Rank 2
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.
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
Rank 1
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!
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
Rank 1
Chrome Version on windows: 61.0.3163.100 (Official Build) (64-bit)
sample page : http://demos.telerik.com/kendo-ui/grid/column-resizing
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
Rank 1
Hi Team,
I have column resizer which is on the left hand side of the column. I want the column to be on the right hand side of the column.
I am using Kendo Grid. Please help.
Let me know if anything more is required.
Hello Dinesh,
When column resizing is enabled in the Grid the resize handler will be on the right side of the column by default. You can try the following example for reference:
https://demos.telerik.com/kendo-ui/grid/column-resizing
In case you are observing a different behavior, would you send us a runnable sample where the issue is replicated. This will enable us to examine it and look for what is causing the behavior.
Regards,
Viktor Tachev
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.