We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131551 Jul 16,2017 01:03 PM Aug 3,2017 02:21 PM ASP.NET MVC 8
loading
Tags: Grid
Jeffrey Stone
Asked On July 16, 2017 01:03 PM

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 [Syncfusion]
Replied On July 17, 2017 04:00 PM

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
Replied On July 18, 2017 08:36 PM

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 [Syncfusion]
Replied On July 19, 2017 11:02 AM

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. 
  
  
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
Replied On July 23, 2017 12:14 PM

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
Replied On August 1, 2017 07:33 AM

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 [Syncfusion]
Replied On August 2, 2017 09:22 AM

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
Replied On August 2, 2017 11:13 PM

Prasanna,

I think it was version 15.1.0.41.

Regards, Jeff


Prasanna Kumar Viswanathan [Syncfusion]
Replied On August 3, 2017 02:21 PM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;