1. Home
  2. Forum
  3. jQuery
  4. Grid textbox input text not selected with mouse

Grid textbox input text not selected with mouse


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
  








10 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team September 11, 2015 05:58 AM UTC

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


Loader.
Up arrow icon