We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Can't select a part of a text with mouse within an editcell in the treegrid

Hi, i have a big project in which i used syncfusion version Now i switched to and i had problems with the selection of a text within an editcell in the treegrid.
I am using ejNumericTextbox and a ejMaskEdit, and in both i can't select a part of the text with the mouse when i am in edit mode of the cell.
If i switch back to the older version it is working as expected.

It looks like that the ejCombobox is not working with the old and the new version(it only works with the keyboard, but not with the mouse).

I have tried to create a small example based on your demo....

... and i found out that is was working there. I used the "Task Name" column.
Then i clicked on the "Edit" button to modify your example a little bit in the jsPlayground, and i found out, that in the playground the selection was not working(without changing anything on the code).

Then i found out that in the playground sample the selection via mouse doesn't work in chrome, but it works in the internet explorer.
And  last but not least in chrome it looks like that the selection with mouse does work if the text is longer then the cell.

Can you reproduce this problems with the different browsers?
Are there any known problems with the newer version in this environment?


8 Replies

PP Pooja Priya Krishna Moorthy Syncfusion Team November 6, 2019 02:01 PM UTC

Hi Michael, 
Greetings from Syncfusion support. 
Thank you for detailed information. 
We have checked reported scenarios in the shared jsPlayground sample in our local machine. But we are unable to reproduce the issue. We have checked the sample in Chrome browser with version 77.0.3865.120. 
Please share us the below mentioned details. 
  1. Chrome browser version.
  2. Machine’s operating system
  3. Video sample to replicate this issue.
It will be very helpful if you share the details with us, to check this issue in our end. 
Pooja Priya K. 

DE Developer November 7, 2019 07:06 AM UTC

Hi, i am using the following versions:

Google Chrome, newest version => Version 78.0.3904.87 (Offizieller Build) (64-Bit)
Internet Explorer Version 11.805.17763.0 (Update version: 11.0.155)
Windows 10.0.17763 Build 17763

In jsPlayground it is  also working if i change the output from Web to Android.

I have added a video with the described behavior.
Starting with chrome browser and the demo, then switching to jsPlayground, switching to internet explorer and back to chrome.

I see that we are here in the javascript EJ 2 part of the forum, but i think the problem is in the older javascript version (is it called EJ1). With the link of the first post it should be clear in which version the problem is.


Attachment: 20191107_074922_43aca46c.7z

PP Pooja Priya Krishna Moorthy Syncfusion Team November 8, 2019 11:27 AM UTC

Hi Michael, 

Thanks for your detailed information. 
We are able to reproduce the reported issue when isResponsive property is enabled by default this property was true. We are preventing the default events internally when this property is enabled on various actions. 
So we logged a bug report for this, you can track its status from below feedback link.  
We will fix this issue and include the fix in our upcoming Volume 4, 2019 main release which is expected to be rolled out on December 16, 2019. 
To prevent this issue this in your application now , please set isResponsive property as false
If you need solution earlier in source level, we can provide it as patch file. 
Until then we appreciate your patience. 

Pooja Priya K. 

DE Developer November 11, 2019 03:22 PM UTC

Hi, thanks for the information,
but in my environment it makes no difference if i use isResponsive "true" or "false". It is the same not working behavior in the masked edit cell in the tree grid.
The only thing that work for my is if  i switch back to the older syncfusion version. Then it is working as expected, and it also makes no difference there if i use isResponsive "true" or "false".
It would be fine if i can have the earlier solution on source level. Maybe this one would work in my environment.


PP Pooja Priya Krishna Moorthy Syncfusion Team November 12, 2019 01:00 PM UTC

Hi Michael, 
We have checked in many cases and tested in mentioned chrome version and source version. We are able to reproduce the issue only when isResponsive property is enabled. 
Please cross-check whether these properties were used twice in your application code’s top and bottom location. 
Else we will arrange a web meeting to discuss about this issue, because without reproducing it we can’t fix it from our side. So that it will be helpful to fix this in source level. 
Pooja Priya K. 

DE Developer December 10, 2019 11:46 AM UTC

Hi, i found out some more information. The difference between the working version (16.4) and the not working version (17.3) was the generation of the ej.theme.css with the Essential JS 1 Custom Script Generator. The working version was created with the "Minified" setting, and the not working version with "Non-Minified".

So i have created a small example(test.html). This example is working with the minified ej.theme.min.css from your homepage which is referenced in the following file. ( <link rel='nofollow' href="//cdn.syncfusion.com/" rel="stylesheet" />). => Text can be selected in the cell of the column "value" as expected.

With the Custom Script Generator i have generated one minified (ej.theme.css) and one non-minifed (ej.theme.max.css) css file.
If i use the minified css file instead of the file from your homepage, it is also working. But if i use the non-minified version i can not select the text via mouse in the edit cell of the column "value". I have also the same behavior with other versions.

What i also found out was, that the selected text can be copied correctly, only the selection is not show, so i was looking about some CSS/styling problemes(user-select: text).
And the problem only occurs if i use an editTemplate for the column. 

I am currently using the minified version, but i think the non-minified version should also work correct. I hope the informations help you to find the problem.


Attachment: NonMinifiedProblem_6df0c28e.7z

PP Pooja Priya Krishna Moorthy Syncfusion Team December 11, 2019 01:53 PM UTC

Hi Michael, 
Thanks for sharing the detailed information. 
We are also able to reproduce the issue in our end. We will check and update you the details in one business day(December 12, 2019). 
Pooja K. 

PP Pooja Priya Krishna Moorthy Syncfusion Team December 13, 2019 01:29 PM UTC

Hi Michael, 

We have analyzed the reported issue with information shared by you. We can replicate the issue in our side also. We have checked the all the styles and CSS classes referred to that input box and containers but there is no CSS properties override the background highlight. In un-minified file we found that some empty styles are set for the ::selection pseudo element. We suspect that, this might be the reason. 
We can resolve this issue in work-around by setting the background color for this ::selection element. Please find the below code example. 

  ::selection { 
      background: #179BD7; 

Pooja Priya K. 

Live Chat Icon For mobile
Up arrow icon