Web Pages on Safari iPad/iPhone Not Scrolling After Loading Data Into Grid With AllowFilter And Date Column

[Jeffrey Stone]

After upgrading to the new release of SyncFusion I have noticed an issue where web pages are no longer scrolling on Safari (iPhone/iPad). I have isolated the issue to a very specific case: 

     The page has a Grid control where AllowFiltering is true 

     and where the grid control has a date time column 

     and where the grid's data is populated using JavaScript.

NOTE - the page will scroll normally UNTIL the the data is loaded - after loading the data the web page will no longer scroll.  

Here is sample code which has the problem:

<form class="form-inline" style="margin-top: 10px; margin-bottom: 20px">

    @Html.DropDownList("Strategies", null, new { @class = "form-control", style="width: 200px", placeholder = "Strategy" })

</form>

@(Html.EJ().Grid<TradingStrategyTrade>("TradesGrid")

        .AllowFiltering()

        .AllowGrouping()

        .AllowPaging()

        .AllowReordering()

        .AllowSelection(false)

        .AllowSorting()

        .AllowTextWrap()

        .PageSettings(p => { p.PageSize(20); })

        .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

        .ShowColumnChooser()

        .Columns(c =>

        {

            c.Field(r => r.EnterDateTime).Format("{0:MM-dd-yy HH:mm:ss}").HeaderText("Entered").Add();            

            c.Field(r => r.EnterPrice).Format("{0:C2}").TextAlign(TextAlign.Right).HeaderText("Enter").Add();

        }))

@section scripts {

    <script>

        $("#Strategies")

            .change(

                function() {

                    var selectedValue = $("#Strategies").val();

                    loadTrades(selectedValue);

                }

            );

        function loadTrades(tradingStrategyName) {

            var requestUrl = "@Url.Action("GetSimulatedTrades", "TradingStatus")";

            $.ajax({

                type: "GET",

                url: requestUrl,

                data: {

                    tradingStrategyName : tradingStrategyName

                },

                dataType: "json",

                error: function(xhr, ajaxOptions, thrownError) {

                    if (xhr.readyState === 0 || xhr.status === 0) {

                        // not really an error

                        return;

                    }

                    alert("ajax error text: " + thrownError);

                },

                success: function (result) {

                    // after the following line executes the web page will no longer scroll

                    $("#TradesGrid").ejGrid("dataSource", ej.parseJSON(result));

                }

            });

        }

    </script>

}

These are the CSS files being used:

    <link rel='nofollow' href="/Content/daterangepicker.css" type="text/css" rel="stylesheet"/>

    <link rel='nofollow' href="/Content/themes/base/jquery-ui.min.css" type="text/css" rel="stylesheet"/>

    <link rel='nofollow' href="/Content/ej/web/gradient-azure/ej.web.all.min.css" type="text/css" rel="stylesheet"/>

    <link rel='nofollow' href="/Content/ej/web/responsive-css/ej.responsive.css" type="text/css" rel="stylesheet"/>

    <link rel='nofollow' href="/Content/ej/web/responsive-css/ejgrid.responsive.css" type="text/css" rel="stylesheet"/>    

And these are the JavaScript files:

    <script src="/Scripts/jquery-3.1.1.min.js"></script>

    <script src="/Scripts/jquery.linq.min.js"></script>

    <script src="/Scripts/jquery.easing.1.3.min.js"></script>

    <script src="/Scripts/jquery.confirm.js"></script>

    <script src="/Scripts/jquery.validate.min.js"></script>

    <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

    <script src="/Scripts/jquery-ui-1.12.1.min.js"></script>

    <script src="/Scripts/globalize.js"></script>

    <script src="/Scripts/jsrender.min.js"></script>

    <script src="/Scripts/ej/web/ej.web.all.min.js"></script>

    <script src="/Scripts/ej/common/ej.unobtrusive.min.js"></script>

    <script src="/Scripts/moment.min.js"></script>

    <script src="/Scripts/daterangepicker.js"></script>

    <script src="/Scripts/linq.min.js"></script>

    <script src="/Scripts/lodash.min.js"></script>

    <script src="/Scripts/postal.min.js"></script>

    <script src="/bundles/bootstrap?v=-g7cxTWQV6ve_iRyKtg7LoBytQltgj_w8zTNeaLaBc41"></script>

    

    <script src="/Scripts/os/accounting.min.js"></script>

    <script src="/Scripts/os/HighCharts/highstock.js"></script>

    <script src="/Scripts/os/HighCharts/exporting.js"></script>

    <script src="/Scripts/os/HighCharts/current-price-indicator.js"></script>

    <script src="/Scripts/os/HighCharts/oxymoronic-candlesticks.js"></script>

Any help would be appreciated. 

Regards, Jeff

[Prasanna Kumar Viswanathan]

Hi Jeffrey, 

 

Thanks for contacting Syncfusion support. 

 

Before we proceed with this, we need some clarification. 

 

1. You have mentioned the page will scroll normally until the data is loaded. So, when the grid is bind with empty data the page scrolls. After loading the data the web page does not get scroll.  

 

2. In Grid control you have enable the allowFiltering and also an OrderDate column. So, is the mentioned issue is reproduced once you perform filtering in Grid or in initial rendering?. 

 

3. Did you face the issue only in Safari (iPhone/iPad) or anyother browsers? 

 

4. Share the current Essential Studio Version and previous version?  

 

Regards, 

Prasanna Kumar N.S.V 

[Jeffrey Stone]

Prasanna,

Thanks for the response. Here are the answers to your questions.

1. You have mentioned the page will scroll normally until the data is loaded. So, when the grid is bind with empty data the page scrolls. After loading the data the web page does not get scroll. 
==> Correct - the web page stops scrolling after being populated via JavaScript such as: $("#TradesGrid").ejGrid("dataSource", ej.parseJSON(result));

 

2. In Grid control you have enable the allowFiltering and also an OrderDate column. So, is the mentioned issue is reproduced once you perform filtering in Grid or in initial rendering?. 

==> The issue occurs after the grid is populated via javascript such as: $("#TradesGrid").ejGrid("dataSource", ej.parseJSON(result));
==> You do not need to actually filter the data

3. Did you face the issue only in Safari (iPhone/iPad) or anyother browsers? 

==> Just in Safari (iPhone/iPad).
==> It works fine on Windows Desktops (Chrome, Firefox, Internet Explorer)
==> I have not tested it on a Mac as we don't have any Mac's

4. Share the current Essential Studio Version and previous version?
==> 15.2.0.46 and the previous version was 15.2.0.40

Let me know if you have any other questions.

Regards, Jeff

[Prasanna Kumar Viswanathan]

Hi Jeff, 

  

We created a sample with your code example and when we check the sample in Safari (iPhone/iPad) the web page gets scrolled in iPhone. We checked the sample with iPhone 5s and  we unable to reproduce the mentioned issue at our end.  

  

For your convenience we attached a sample and please download the sample from the following link. 

  

Sample: http://www.syncfusion.com/downloads/support/forum/131551/ze/ServerOperations1710298313 

  

Please check with the attached sample and check whether the mentioned issue is reproduced in iPad. Also please share the device details of iPad or iPhone.  

  

Regards, 

Prasanna Kumar N.S.V 

 

[Jeffrey Stone]

Prasanna, 

Thanks for the sample. The sample that you sent worked correctly; however, after making some modifications to the web page I was able to cause the web page to stop scrolling again.

The key difference is that in your sample the grid is bound to "object" and passed in the field names, c.Field("OrderDate"), while my sample was grid was bound to the object type and added the fields by c.Field(r => r.OrderDate)

    @(Html.EJ().Grid<object>("TradesGrid")

            c.Field("OrderDate").Format("{0:MM-dd-yy HH:mm:ss}").HeaderText("Entered").Add();

            c.Field("Freight").Format("{0:C2}").TextAlign(TextAlign.Right).HeaderText("Enter").Add();

Which results in the following HTML:

$("#TradesGrid").ejGrid({

"allowPaging": true,

"allowTextWrap": true,

"allowSorting": true,

"showColumnChooser": true,

"allowFiltering": true,

"allowGrouping": true,

"allowSelection": false,

"selectedRowIndices": [],

"cssClass": "",

"allowReordering": true,

"columns": [

{ "field": "OrderDate", "headerText": "Entered", "format": "{0:MM-dd-yy HH:mm:ss}" },

{ "field": "Freight", "headerText": "Enter", "textAlign": "right", "format": "{0:C2}" }],

"pageSettings": { "pageSize": 20 },

"filterSettings": { "filterType": "Excel", "filteredColumns": [] }

});

@(Html.EJ().Grid<TestRow>("TradesGrid")

            c.Field(r => r.OrderDate).Format("{0:MM-dd-yy HH:mm:ss}").HeaderText("Entered").Add();

            c.Field(r => r.Freight).Format("{0:C2}").TextAlign(TextAlign.Right).HeaderText("Enter").Add();

Which results in the following HTML - notice the addition of "type:" "datetime" on the OrderDate column

$("#TradesGrid").ejGrid({

"allowPaging": true,

"allowTextWrap": true,

"allowSorting": true,

"showColumnChooser": true,

"allowFiltering": true,

"allowGrouping": true,

"allowSelection": false,

"selectedRowIndices": [],

"cssClass": "",

"allowReordering": true,

"columns": [

{ "field": "OrderDate", "headerText": "Entered", "format": "{0:MM-dd-yy HH:mm:ss}", "type": "datetime" },

{ "field": "Freight", "headerText": "Enter", "textAlign": "right", "format": "{0:C2}" }],

"pageSettings": { "pageSize": 20 },

"filterSettings": { "filterType": "Excel", "filteredColumns": [] }

});

The key difference is that as soon as "type:" "datetime" is specified then the web page will stop scrolling after the data is loaded via json.

This issue occurs on the iPhone 6 and 7 and the iPad Pro.  I tested it this weekend on a Mac and the issue does not appear on Safari on the Mac.

Regards, Jeff

[Jeffrey Stone]

Prasanna,

Hope you are doing well.  

Did you see my last reply that the sample you provided, with a minor change, had the problem with the web page not scrolling? I also provided a version in JavaScript that has the problem.

Regards, Jeff

[Prasanna Kumar Viswanathan]

Hi Jeff, 

Sorry for the late reply.  

We can reproduce the mentioned issue with Apple IPad. In previous update you have mentioned that once upgrading to the new release of SyncFusion you have noticed this issue. We checked in our sample with older versions but we can face the same issue. So, please share the Essential Studio Version that you do not face the mentioned issue.  

 

We face the mentioned issue in Apple IPad when we used model values in Grid.  

 

Find the code example:  

 

 

@(Html.EJ().Grid<TestRow>("TradesGrid") 

            c.Field(r => r.OrderDate).Format("{0:MM-dd-yy HH:mm:ss}").HeaderText("Entered").Add(); 

            c.Field(r => r.Freight).Format("{0:C2}").TextAlign(TextAlign.Right).HeaderText("Enter").Add(); 

 

 

 

Regards, 

Prasanna Kumar N.S.V 

[Jeffrey Stone]

Prasanna,

I think it was version 15.1.0.41.

Regards, Jeff

[Prasanna Kumar Viswanathan]

Hi Jeff, 

Thanks for the patience. 

We can reproduce the mentioned issue in Apple IPad with the version(15.2.0.43). We have confirmed the issue "Data does not scrolled in Apple IPad when we load data in Grid” is a defect and logged a defect report. The fix for this issue will be included in Volume 3, Service Pack 1 2017 which has been scheduled to be rolled out at the end of August 2017 

Regards, 

Prasanna Kumar N.S.V