Grid textbox input text not selected with mouse

[Bharat Buddhadev]

Technology angular js and mvc

Here I am describing steps to reproduce the issue which we are facing.

Step1  Click on grid add button means + symbol.

            gird first row now is enable for insert data

Step 2 : Insert record in texbox of grid first record first column

            now with mouse try to select the input text data

         

    for example I have insert

     "hello how are you"

     when i try to select this text in textbox using mouse

  I am not able to select input text

  

 Issue  :we are not able to select input text of textbox with mouse

  

[Prasanna Kumar Viswanathan]

Hi Bharat,

Thanks for contacting Syncfusion support.

We created a sample in Angular JS with MVC. After adding new data, we inserted a record in the Textbox of Grid’s first record. We can select an input text of Textbox using mouse.

Please find the following screenshot,



Please confirm the following details,

1.       Is the issue is reproduced in normal editing or some other edit modes?

2.       Provide the code example and screenshot of the issue.

3.       Share the Essential Studio version details.
Please find the sample from the following link:

Link: https://www.syncfusion.com/downloads/support/forum/120207/ze/ServerOperations-489100821

Please try the above sample, If you face the same issue still, please get back to us with the code example.

Regards,
Prasanna Kumar N.S.V

---

GG Greg Gannicott September 17, 2015 08:14 AM UTC

Hi.

I work with Bharat, and can offer some additional information.

This appears to occur when scrolling is enabled, and when there is enough data present to require scrolling.

I was able to reproduce this by modifying your Inline Edit demo, and replacing the pagination with scrolling. Here is the modified demo in JS Playground. I've also attached it to this post (I'm not sure how long it lasts on JS Playground).

I've only been able to reproduce this in Chrome (not in Firefox or IE 11).

Hope this helps.

Thanks.

Attachment: Essential_Studio_for_JavaScript__Inline_on_Local_data_d58dc364.zip

---

BM Balaji Marimuthu Syncfusion Team September 18, 2015 01:06 PM UTC

Hi Greg, 

We have checked the provided sample and suggest you to set the enableTouchScroll property as false to select text in textbox using Mouse in Grid scrollSettings.

Please refer to the modified JS playground link and code example as follows, 

https://jsplayground.syncfusion.com/gzyihqkk

$("#Grid").ejGrid({

                // the datasource "window.gridData" is referred from jsondata.min.js

                dataSource: window.gridData,

                scrollSettings: { width: 886, height: 300, enableTouchScroll: false },

                allowScrolling: true,

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                . . . .

            });

Please try using the above code example and get back to us if you need any further assistance.

Regards, 
Balaji Marimuthu

---

GG Greg Gannicott September 18, 2015 01:14 PM UTC

I applied it to the JS Playground example I provided.

Now when I attempt to select text, it no longer scrolls the window, however it still doesn't select text as you'd expect.

Is there anything else we can try?

Thanks.

---

GG Greg Gannicott September 18, 2015 01:17 PM UTC

I've attached an animated gif with how it now acts. You'll have to take my word that I'm holding my mouse button down :)

Thanks

Attachment: SelectionIssues_e449e0a8.zip

---

PK Prasanna Kumar Viswanathan Syncfusion Team September 21, 2015 07:28 AM UTC

Hi Greg,

We have tried with JSPlayground sample in Chrome browser but we are unable to reproduce the mentioned issue at our end.

We have recorded a video to select text from an input textbox and find the video from the following link, 

Video Link: http://www.syncfusion.com/downloads/support/forum/120207/ze/Video1539855728

Please share the following details.

1.       Version of the chrome browser.

2.       Code example of sample or issue reproducible JSPlayground sample. 

Regards,
Prasanna Kumar N.S.V

---

GG Greg Gannicott October 22, 2015 07:44 AM UTC

Hi.

Sorry for the delay in response.

The JS Playground example linked to earlier (http://jsplayground.syncfusion.com/eokfizrz) is still causing us the same problems.

Chrome Version: 46.0.2490.71 m

Thanks.

---

PK Prasanna Kumar Viswanathan Syncfusion Team October 23, 2015 07:06 AM UTC

Hi Bharat,

In the provided sample, you have not disabled the enableTouchScroll property in the scrollSettings. So, set the enableTouchScroll property as false in scrollSettings.


Please find the code example and modified sample:

$(function () {
            $("#Grid").ejGrid({
                // the datasource "window.gridData" is referred from jsondata.min.js
                dataSource: window.gridData,
                scrollSettings: { width: 886, height: 300, enableTouchScroll: false },
                allowScrolling: true,
                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
                columns: [
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },
                        { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },
                 ----------------------------------------------------------------------------------------------------------------------------------------------
                ]
            });
            $("#selection").ejDropDownList({ width: "120px", change: "onSelectionTypeChange", selectedItemIndex: 0 });

        });

Sample: http://jsplayground.syncfusion.com/gbv4zugs

Regards,
Prasanna Kumar N.S.V

---

GG Greg Gannicott October 23, 2015 07:33 AM UTC

Thanks for the prompt reply.

The fix looked promising, but I still seem to be getting the same problem (using the JS Playground you provided).

I've attached an animated gif of it in action.

Attachment: NotSelecting_ad2cc4f2.zip

---

PK Prasanna Kumar Viswanathan Syncfusion Team October 26, 2015 11:25 AM UTC

Hi Greg,
We have tried with the mentioned version by disabling the enableTouchScroll property, we are able to select the input text with the mouse. Also, we tried with the older versions but we unable to reproduce the issue at our end. So, we request you to setup a web meeting to look into it and provide the resolution.

A support incident has been created under your account to resolve the issue. Please log on to our support website to check for further updates. 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,
Prasanna Kumar N.S.V

SIGN IN To post a reply.

• 10 Replies
• 4 Participants
• Want to subscribe?
  SIGN IN
• Created by
  BB Bharat Buddhadev
• Platform
  jQuery
• Control
  ejGrid
• Created On
  Sep 10, 2015 01:30 PM UTC
• Last Activity On
  Oct 26, 2015 11:25 AM UTC

[Greg Gannicott]

Hi.

I work with Bharat, and can offer some additional information.

This appears to occur when scrolling is enabled, and when there is enough data present to require scrolling.

I was able to reproduce this by modifying your Inline Edit demo, and replacing the pagination with scrolling. Here is the modified demo in JS Playground. I've also attached it to this post (I'm not sure how long it lasts on JS Playground).

I've only been able to reproduce this in Chrome (not in Firefox or IE 11).

Hope this helps.

Thanks.

Attachment: Essential_Studio_for_JavaScript__Inline_on_Local_data_d58dc364.zip

[Balaji Marimuthu]

Hi Greg, 

We have checked the provided sample and suggest you to set the enableTouchScroll property as false to select text in textbox using Mouse in Grid scrollSettings.

Please refer to the modified JS playground link and code example as follows, 

https://jsplayground.syncfusion.com/gzyihqkk

$("#Grid").ejGrid({

                // the datasource "window.gridData" is referred from jsondata.min.js

                dataSource: window.gridData,

                scrollSettings: { width: 886, height: 300, enableTouchScroll: false },

                allowScrolling: true,

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                . . . .

            });

Please try using the above code example and get back to us if you need any further assistance.

Regards, 
Balaji Marimuthu

[Greg Gannicott]

I applied it to the JS Playground example I provided.

Now when I attempt to select text, it no longer scrolls the window, however it still doesn't select text as you'd expect.

Is there anything else we can try?

Thanks.

[Greg Gannicott]

I've attached an animated gif with how it now acts. You'll have to take my word that I'm holding my mouse button down :)

Thanks

Attachment: SelectionIssues_e449e0a8.zip

[Prasanna Kumar Viswanathan]

Hi Greg,

We have tried with JSPlayground sample in Chrome browser but we are unable to reproduce the mentioned issue at our end.

We have recorded a video to select text from an input textbox and find the video from the following link, 

Video Link: http://www.syncfusion.com/downloads/support/forum/120207/ze/Video1539855728

Please share the following details.

1.       Version of the chrome browser.

2.       Code example of sample or issue reproducible JSPlayground sample. 

Regards,
Prasanna Kumar N.S.V

---

GG Greg Gannicott October 22, 2015 07:44 AM UTC

Hi.

Sorry for the delay in response.

The JS Playground example linked to earlier (http://jsplayground.syncfusion.com/eokfizrz) is still causing us the same problems.

Chrome Version: 46.0.2490.71 m

Thanks.

---

PK Prasanna Kumar Viswanathan Syncfusion Team October 23, 2015 07:06 AM UTC

Hi Bharat,

In the provided sample, you have not disabled the enableTouchScroll property in the scrollSettings. So, set the enableTouchScroll property as false in scrollSettings.


Please find the code example and modified sample:

$(function () {
            $("#Grid").ejGrid({
                // the datasource "window.gridData" is referred from jsondata.min.js
                dataSource: window.gridData,
                scrollSettings: { width: 886, height: 300, enableTouchScroll: false },
                allowScrolling: true,
                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
                columns: [
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },
                        { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },
                 ----------------------------------------------------------------------------------------------------------------------------------------------
                ]
            });
            $("#selection").ejDropDownList({ width: "120px", change: "onSelectionTypeChange", selectedItemIndex: 0 });

        });

Sample: http://jsplayground.syncfusion.com/gbv4zugs

Regards,
Prasanna Kumar N.S.V

---

GG Greg Gannicott October 23, 2015 07:33 AM UTC

Thanks for the prompt reply.

The fix looked promising, but I still seem to be getting the same problem (using the JS Playground you provided).

I've attached an animated gif of it in action.

Attachment: NotSelecting_ad2cc4f2.zip

---

PK Prasanna Kumar Viswanathan Syncfusion Team October 26, 2015 11:25 AM UTC

Hi Greg,
We have tried with the mentioned version by disabling the enableTouchScroll property, we are able to select the input text with the mouse. Also, we tried with the older versions but we unable to reproduce the issue at our end. So, we request you to setup a web meeting to look into it and provide the resolution.

A support incident has been created under your account to resolve the issue. Please log on to our support website to check for further updates. 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,
Prasanna Kumar N.S.V

[Greg Gannicott]

Hi.

Sorry for the delay in response.

The JS Playground example linked to earlier (http://jsplayground.syncfusion.com/eokfizrz) is still causing us the same problems.

Chrome Version: 46.0.2490.71 m

Thanks.

[Prasanna Kumar Viswanathan]

Hi Bharat,

In the provided sample, you have not disabled the enableTouchScroll property in the scrollSettings. So, set the enableTouchScroll property as false in scrollSettings.


Please find the code example and modified sample:

$(function () {
            $("#Grid").ejGrid({
                // the datasource "window.gridData" is referred from jsondata.min.js
                dataSource: window.gridData,
                scrollSettings: { width: 886, height: 300, enableTouchScroll: false },
                allowScrolling: true,
                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
                columns: [
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },
                        { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },
                 ----------------------------------------------------------------------------------------------------------------------------------------------
                ]
            });
            $("#selection").ejDropDownList({ width: "120px", change: "onSelectionTypeChange", selectedItemIndex: 0 });

        });

Sample: http://jsplayground.syncfusion.com/gbv4zugs

Regards,
Prasanna Kumar N.S.V

[Greg Gannicott]

Thanks for the prompt reply.

The fix looked promising, but I still seem to be getting the same problem (using the JS Playground you provided).

I've attached an animated gif of it in action.

Attachment: NotSelecting_ad2cc4f2.zip

[Prasanna Kumar Viswanathan]

Hi Greg,
We have tried with the mentioned version by disabling the enableTouchScroll property, we are able to select the input text with the mouse. Also, we tried with the older versions but we unable to reproduce the issue at our end. So, we request you to setup a web meeting to look into it and provide the resolution.

A support incident has been created under your account to resolve the issue. Please log on to our support website to check for further updates. 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,
Prasanna Kumar N.S.V