When ejGrid is set to editMode: "dialog" ok,cancel buttons do not work on ipad if using individual dependencies instead of ej.web.all.js

[dan]

Syncfusion version: 15.1.33

Theme: Bootstrap

IOS: 10

I must be missing a dependency but the grid works fine on the desktop.  I am not using the mobile version of the grid, just the responsive desktop version.

The gird does display on the ipad. You can touch a row and the edit dialog will be displayed, however if you touch ok or cancel nothing happens.

I have installed each grid dependency according to this doc

Css installed:

"Content/ej/web/ej.widgets.core.bootstrap.min.css",
"Content/ej/web/bootstrap-theme/ej.theme.min.css",
"Content/ej/web/responsive-css/ej.responsive.css",
"Content/ej/web/responsive-css/ejgrid.responsive.css"

 

[Alan Sangeeth S]

Hi Dan, 

  

 

Could you please provide us the following information so that we could provide you a solution as early as possible? 

1.       Grid rendering code snippets 

2.       Whether you have referred ej.web.all.min.js script file or individual script files for Grid control alone. 

Information provided would be great helpful for us to resolve the issue 

Regards,
Alan Sangeeth S 

[dan]

The problem ended up being with Jquery.  Jquery vs 3.0 and above cause a problem with a responsive grid on an ipad/iphone with ios version 10

Steps to reproduce:

1. Setup basic grid with editMode = dialog
   
2. View on ipad
   
3. Tap to edit a row
   
4. In the dialog box try to tap ok/cancel  -- nothing happens
   

I imagine it is throwing an error but I don't have a mac to enable the safari debug console.

Note:

This same setup works fine on a desktop.

Sample app attached

Attachment: gridtest_f3ac6ec4.zip

[Venkatesh Ayothi Raman]

Hi Dan, 

Thanks for the update and providing the sample. 

We went through your sample that you have shared with us and found that you are rendering the ‘ok’ and ‘cancel’ buttons in div tag like as follows, 

Code example: 

<div id="DialogMode" style="display:none"> 

    <table> 

        <tr> 

            <td>OrderID:</td> 

            <td><input type="text" id="OrderID" disabled value=""/></td> 

        </tr> 

 

        <tr> 

            <td>CustomerID:</td> 

            <td><input type="text" id="CustomerID" value=""/></td> 

        </tr> 

 

        <tr> 

            <td>EmployeeID:</td> 

            <td><input type="text" id="EmployeeID" value=""/></td> 

        </tr> 

 

        <tr> 

            <td>Freight:</td> 

            <td><input type="text" id="Freight" value=""/></td> 

        </tr> 

    </table> 

    <div style="display:inline-block;float:right"> 

        <button id="OK"> Ok</button> 

        <button id="Cancel">Cancel</button> 

    </div> 

    <br/><br/> 

</div> 

From above code example, we suspect that you want to set the edit mode as Dialog template for customizing the Dialog edit form. In Grid, we have rendered the save and cancel buttons by default in dialog template mode. So if we click the save or cancel button, then Grid corresponding actions can be performed automatically. 

If Dialog template edit mode is your requirement, then please refer to the following Help documentation and online demo for your reference, 

Help documentation: https://help.syncfusion.com/js/grid/editing#edit-modes 

Online demo: http://js.syncfusion.com/demos/web/#!/bootstrap/grid/editing/dialogonlocaldata 

And in dialog template mode, there is no need to render the ‘Ok’/’Cancel’ buttons externally. If you want those buttons, then we should handle the Grid actions by clicking the corresponding buttons. Maybe this is the cause of the issue. 

If we misunderstood your query, then could you please provide following details? 

1)      Issue screenshot or video. 

2)      Replication procedure of issue. 

Regards, 

Venkatesh Ayothiraman.