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

Column resize in Chrome (61)

10 Answers 347 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Armen
Top achievements
Rank 1
Armen asked on 25 Sep 2017, 10:09 AM

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

Sort by
0
Viktor Tachev
Telerik team
answered on 27 Sep 2017, 10:38 AM
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.
0
Tyson
Top achievements
Rank 1
answered on 03 Oct 2017, 06:49 PM

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, "");

 

0
Stephen
Top achievements
Rank 2
answered on 04 Oct 2017, 02:35 PM

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

0
Viktor Tachev
Telerik team
answered on 05 Oct 2017, 01:44 PM
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.
0
Coy
Top achievements
Rank 1
answered on 10 Oct 2017, 03:22 AM

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!

0
Viktor Tachev
Telerik team
answered on 11 Oct 2017, 10:57 AM
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.
0
Houda
Top achievements
Rank 1
answered on 12 Oct 2017, 07:01 AM
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

0
Viktor Tachev
Telerik team
answered on 13 Oct 2017, 01:30 PM
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.
0
Dinesh
Top achievements
Rank 1
answered on 28 May 2020, 02:48 PM

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.

 

0
Viktor Tachev
Telerik team
answered on 29 May 2020, 04:37 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Armen
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Tyson
Top achievements
Rank 1
Stephen
Top achievements
Rank 2
Coy
Top achievements
Rank 1
Houda
Top achievements
Rank 1
Dinesh
Top achievements
Rank 1
Share this question
or