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

Focus problem while insert to edit mode

18 Answers 272 Views
Grid
This is a migrated thread and some comments may be shown as answers.
rafi
Top achievements
Rank 1
rafi asked on 28 Apr 2014, 08:40 AM
Hello,

I'm using kendo UI grid and have a strange problem that occurred
sometimes when user click on cell to start edit mode on it:

I define a grid with inline edit mode. The grid contains among other a
simple string column.

When the user click on this field for edit it he see as expected a
simple input control and can change its text. But, sometimes after he click on
this cell to start edit it, the input control got the focus just for a millisecond
and then lost the focus. In this case the cell is opened for edit and
the input field is displayed but the focus is not on it. In order to start edit,
the user needs to click again on the input control for get it back the focus.
When this problem occurs it seems like the td that contains this input field got
the focus instead the input itself.

This problem occurs only in IE browser (I have IE version 11) and not
occurs in Chrome browser.

The strange story here, that when I change the 'navigatable' attribute
of grid to 'false' everything works perfectly. When I change this attribute to
'true' this problem occurs.

Do you have any idea what can be the problem? (my code is attached)

Thanks,

Yocheved


18 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 28 Apr 2014, 01:31 PM
Hello Yocheved,


I tried to reproduce the issue on my side, but to no avail. Please take a look at the following demo that I used for testing and let me know if I am missing something. If that is the case, please modify it in order to reproduce the issue and send me the updated version so I could assist you further.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
rafi
Top achievements
Rank 1
answered on 29 Apr 2014, 12:52 PM
Hello,
Thnaks for your reply.

I also can not reproduce the problem on html stands for itself. The problem exists only in my project and I would like to hear from you whether you have an idea what could cause such a problem.
It would be best if you can connect to me remotely and see the problem directly on my project.
Is it possible?
Thanks,
Yocheved
0
Dimiter Madjarov
Telerik team
answered on 29 Apr 2014, 01:16 PM
Hello Yocheved,


At the moment only DevCraft Ultimate licence holders are eligible for remote web assistance meeting.

Regarding the current issue, please update my example in order to reproduce the problem or send me an isolated example, which demonstrates it, so I could inspect it locally and assist you further.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
rafi
Top achievements
Rank 1
answered on 01 May 2014, 10:36 AM
I make a seperate project but his size is 31 MB.
There is another way I can send you the project?
Maybe by Jumbo Mail?

Thanks,
Yocheved
0
Dimiter Madjarov
Telerik team
answered on 01 May 2014, 01:41 PM
Hello Yocheved,


You could use a sharing platform of your choice and provide us a direct download link e.g. Dropbox. Nevertheless I am not sure that such a big project is an isolated version of the problem. Please review the provided link which demonstrates sample approaches to decrease it's size and leave only the important parts.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
rafi
Top achievements
Rank 1
answered on 14 May 2014, 07:27 AM
Ok,
I worked on the project very much and succeeded to reduce it to less then 2 MB.
I hope you will succeed understand the problem and help me.
Thanks,
Yocheved
0
Dimiter Madjarov
Telerik team
answered on 14 May 2014, 02:30 PM
Hi Yocheved,


Thank you very much for providing the runnable project. Nevertheless we inspected it on several machines and the issue was not reproduced in neither of them. Here is a short screen cast, which demonstrates my attempt to reproduce it.

As a shot in the dark, if the user clicks really fast twice near the edges/corners of the cell, the behavior will be reproduced and this is expected - The first click enters the cell in edit mode, but the second click is outside of the input in the area around the edge, so the input is no longer focused. Here is a screen cast, which demonstrates this.

I hope this information helps.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
rafi
Top achievements
Rank 1
answered on 18 May 2014, 07:14 AM
Hello,
I know this behavior that when click twice or near the edges the cell lost its focus but, I don't click twice and also try not click near edges. I simple click on cell for edit it and get this behavior.
I made also a short visio that you can my behvior:  http://www.jumbomail.co.il/Downloads.aspx?sid=77435A676B644A754658593D  
Thanks,
Yocheved
0
Dimiter Madjarov
Telerik team
answered on 20 May 2014, 08:43 AM
Hi Yocheved,


After further testing, we managed to reproduce the mentioned behavior on our side. Nevertheless it was only reproducing with the Q3 2013 version and we were unable to observe it when using the latest one. I would suggest updating the currently used Kendo UI version to Q1 2014 SP1 (2014.1.416), as it includes many bug fixes and optimizations.

Let me know if the issue was resolved on your side too.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Pawel
Top achievements
Rank 1
answered on 23 Jun 2014, 12:34 PM
Hi,

I have a similar issue. I try to implement a Quick Filter row in my grid. When I try to enter any value into a control in the row, it receives and immediately loses focus, so user is not able to enter any value. The control does not receive focus even after a second click.
Here is my code: http://jsbin.com/pocanihe/2/edit
It works fine on Chrome, does not work in IE. I have added a Kendo UI Q1 2014 library to a project.

Are you able to reproduce it?
0
Nikolay Rusev
Telerik team
answered on 25 Jun 2014, 12:19 PM
Hello Pawel,

We were unable to replicate the behavior in IE11.  Here is a short screen cast, which demonstrates my attempt to reproduce it.: http://screencast.com/t/NrpmipF4jGAc

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ilan EinGedi
Top achievements
Rank 1
answered on 22 Jun 2017, 01:05 PM

I had the same problem and i was able to solve it by removing unnecessary configuration like: navigatable, selectable:...

in general i suggest you to remove all and test it first only with :

columns, dataSource and editable configuration .. 

0
Taylor
Top achievements
Rank 1
answered on 12 Mar 2018, 01:37 PM

Hello Dimiter,

 

In your example [url=http://output.jsbin.com/ticuzete/1]here[/url], there is a bug that exists which I am trying to fix. Click on the cell with content "Chai" so that it is focused upon and in edit mode. Now, hit shift+tab - instead of jumping to the "cancel changes" button, the cell itself is still selected, although no longer in edit mode. This also works in reverse.. Which is the use case I am concerned about. Going from the "cancel changes" button to the cell.

In short.. tabbing into a tab does not properly select the first cell.

Do you know of a fix? Is this intended functionality?

 

Thank you

0
Taylor
Top achievements
Rank 1
answered on 12 Mar 2018, 02:23 PM

After some digging, it seems this is a "feature". https://www.telerik.com/forums/batch-grid---tabbing-into-grid-from-outside-input-does-not-kick-first-selected-cell-into-edit-mode#sI9DMJ6V8kSmGaDAIypkGg

 

Still hoping to find a fix.

0
Stefan
Telerik team
answered on 14 Mar 2018, 07:47 AM
Hello, Taylor,

This is still the default behavior of the Grid and changing it could lead to a breaking change in the widget.

Still, I can offer a possible workaround to programmatically set the cell mode when the Grid is focused and the focused cell is the same as the first cell in the Grid using the editCell method:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/editcell

I made an example demonstrating this:

https://dojo.telerik.com/OLajaJEP

I hope this will help to achieve the desired result.

Regards,
Stefan
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
Suhail
Top achievements
Rank 1
answered on 14 Jun 2019, 12:10 PM

Hi,

We got the same issue and when I remove Navigatable property of grid, mouse click is working  properly but tab sequence failed. if we add Navigatable property then tab sequence is working fine but mouse click is not working properly.

Please provide Permanent fix which work in both scenario. 

0
Viktor Tachev
Telerik team
answered on 18 Jun 2019, 06:46 AM
Hello Suhail,

I tried to replicate the issue in a sample project and attached it in the ticket you have submitted. I suggest we continue the conversation there. If you would like you can post the final resolution in this thread as well.


Regards,
Viktor Tachev
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.
0
Suhail
Top achievements
Rank 1
answered on 14 Oct 2019, 07:38 AM

Hi,

Its fixed after updating Telerik Version

Thank you

Tags
Grid
Asked by
rafi
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
rafi
Top achievements
Rank 1
Pawel
Top achievements
Rank 1
Nikolay Rusev
Telerik team
Ilan EinGedi
Top achievements
Rank 1
Taylor
Top achievements
Rank 1
Stefan
Telerik team
Suhail
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or