Disable mouse swipe to page / allowing text selection

[Josh Wood]

Hi, 

I'm getting started with the Syncfusion javascript controls and am configuring an ejGrid component for a site. I would like users to be able to selection textual content within a grid with their mouse. Currently this appears to be disabled to allow the swipe gesture with the mouse to switch pages. 

How can I disable this gesture and reinstate the default browser text selection behaviour with an ejGrid?

Thanks

[Mohammed Farook J]

Hi  Josh Wood,

Thanks for using Syncfusion products.

Based on your request, we have created a simple ejGrid sample. in this sample, we have reinstated the default browser text selection behaviour with an ejGrid using below CSS. Please find the CSS.

 

    <style>

        .e-grid .e-gridheader .e-headercell,

        .e-grid .e-rowcell {

            -moz-user-select: text;

            -khtml-user-select: none;

            -webkit-user-select: text;

            -ms-user-select: text;

            user-select: text;

        }

    </style>

 

 

Attach sample here :     Sample_127584.zip

 

Please let us know if you have any queries.

 

Thanks with Regards,

J.Mohammed Farook

[Josh Wood]

Thank you for the reply. 

This does indeed reinstate the browser text selection. However, mouse click swipe gestures remains, and will trigger at the end of a selection if there is an available page to switch to. Is there a way to disable mouse gestures as well?

Thanks

[Prasanna Kumar Viswanathan]

Hi Josh Wood,

Based on the request, we have created a ejGrid sample. In this sample, we disable the mouse gesture with an ejGrid using the script.

 

[script]

 gridObj._off($("#Grid"), "swipeleft swiperight", ".e-gridcontent .e-table"); (After the Grid gender)

 Please find the attached sample.

Please let us know if you have any concerns.

Prasanna Kumar N.S.V

{Software Engineer  + JS Team}

 

Attachment: Sample_127584_208c3074.zip

[Prasanna Kumar Viswanathan]

Hi Josh Wood,

 

Please ignore our previous response.

 

Currently we don’t have option to disable mouse gesture but we have provided workaround to disable mouse gesture in ejGrid. Please find the workaround.

 

[script]

 gridObj._off($("#Grid"), "swipeleft swiperight", ".e-gridcontent .e-table"); //After the Grid render

 

Note: As per your request, we have considered this as feature request “Disable mouse gesture on ejGrid”.

 

Sample: http://www.syncfusion.com/downloads/support/forum/117022/Sample_127584_208c3074.zip

 

Please let us know if you have any concerns. 

Regards,

Prasanna Kumar N.S.V

[Josh Wood]

Thank you.

[Mohammed Farook J]

Hi Josh Wood,

 

Thanks for your update.

 

Please get back if you require further assistance. We will be glad to assist you.

 

Regards,

J.Mohammed Farook

[Josh Wood]

Hi, we updated to a more recent version (I think it's v12.4.0.24) and the swipe-workaround no longer works. Selecting text within the ejGrid now switches pages.

Is there a setting to disable the mouse gestures now?

Thanks in advance!

[Balaji Marimuthu]

Hi Josh,

We have achieved your requirement by using “enableTouch” property in Grid.

Sample: http://www.syncfusion.com/downloads/support/directtrac/117022/EnableTouch-520808892.zip

In the latest version we have included the property enableTouch to enable/ disable the swipe functionality. By default enableTouch set to “true” and to disable the mouse gestures it has to be set to “false”. Please find the below code snippet:

$(function () {

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

            var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));

            $("#Grid").ejGrid({

                dataSource: data,

                allowPaging: true,

                enableTouch: false,

               

                . . . . .

        });

Please let us know if you have any queries.

Regards,

Balaji Marimuthu

[Josh Wood]

Hi,

thanks for your reply. I could get your demo to work, but I couldn't get that setting to work with our ejGrid code.

We are including the widgets individually. Are we missing one? We are including the following:

* /ej/common/ej.core.min.js

* /ej/common/ej.data.min.js

* /ej/common/ej.draggable.min.js

* /ej/common/ej.scroller.min.js

* /ej/common/ej.touch.min.js

* /ej/common/ej.unobtrusive.min.js

* /ej/web/ej.datepicker.min.js

* /ej/web/ej.timepicker.min.js

* /ej/web/ej.grid.min.js

* /ej/web/ej.pager.min.js

Thanks

[Balaji Marimuthu]

Hi Josh,

We are sorry about the inconvenience caused. We are unable to reproduce the reported issue while creating a sample by including the individual ej.widgets files. Please refer the sample.

Sample: http://www.syncfusion.com/downloads/support/directtrac/117022/EnableTouch_(2)-1493717601.zip

Please  provide more information to reproduce the issue or modify the attached sample to issue reproducible that will helpful for provide better solution ASAP. Also refer the following link for including the dependencies files.

http://help.syncfusion.com/ug/js/default.htm#!documents/griddependencies.htm

If you are using the latest Essential Studio 12.4.0.30 version please include the dependency file ej.scrollbar.min.js file, could you please let us know which version of the Essential studio you are used and are you getting any script error in the console.

Please let us know if you have any queries.

Regards,

Balaji Marimuthu

[Josh Wood]

Hi Syncfusion support,

I have determined the discrepancy between the provided example and our actual project. As we use MVC controls to generate the call to instantiate the grid control, our code boils down to:

            var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
            $("#Grid").ejGrid({
                dataSource: data,
                allowPaging: true,
                columns: [
                        { field: "OrderID", headerText: "Order ID", width: 75, textAlign: ej.TextAlign.Right },
                        { field: "CustomerID", headerText: "Customer ID", width: 80 },
                        { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
                        { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },
                        { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
                        { field: "ShipCity", headerText: "Ship City", width: 110 }
                ]
            });
            
            // Time Passes
            
            $("#Grid").ejGrid({
                enableTouch: false
            });

    
Note the time passes, and second call to ejGrid.

I hypothesize that enableTouch is merely guarding the binding of touch events on construction, but does nothing to an already existing grid object, so
on the second call enableTouch: false does nothing, where it should be unbinding the touch events.

[Balaji Marimuthu]

Hi Josh,

We are sorry for the inconvenience caused. We have confirmed that the issue with “EnableTouch Property is not working after grid initialized” is a defect and we have logged a defect report. We will fix the issue and it will be included in Vol 1, 2015 release, which has been scheduled to be roll out in the month of March 2015.

We have also created an incident internally to have a follow up with this issue.

Regards,

Balaji Marimuthu