This is a migrated thread and some comments may be shown as answers.

Grid not refreshing in Safari on IPad

1 Answer 90 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 19 Oct 2012, 09:10 PM
I have a need for a grid to be auto updated via ajax on an interval running on multiple platforms.  It does not update\refresh on the IPad\IPhone in Safari.  I've tested and it works in IE 9 on Win7, Safari 5 on Win7, FireFox on Win7, Android default browser. 
I began altering the ajaxbinding example in the Kendo.Mvc.Examples solution.  The grid is refreshed every second.

I need to know why it isn't working on IPad\IPhone devices.

ajaxbinding.cshtml:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()   
      .Name("Grid")
      .Columns(columns => {
columns.Bound(p => p.ProductID).Groupable(false).Width(140);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice)
.HtmlAttributes(new { style = "text-align: right" })
.Width(140);
columns.Bound(p => p.UnitsInStock).Width(160);
}).Pageable()
      .Sortable()
      .Scrollable().Selectable(row => row.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))
      .Groupable()
      .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("Products_Read", "Grid"))))
 
<button id="refreshButton" onclick="refreshGrid()">Start the Refresh</button>
 
<script>
    var myGrid;
     
    $(function () {
        myGrid = $('#Grid').data('kendoGrid');
    });
     
    function refreshGrid() {
        $('#refreshButton').attr("disabled", "disabled");
        setInterval(DoWork, 1000);
    }
     
    function DoWork() {
        myGrid.dataSource.read();
    }
</script>

Here is the modified controller to return data.  The GetProducts() method was altered to return random product values.

IndexController.cs:

using System.Collections.Generic;
using System.Data.Linq;
using System.Linq;
using System.Web.Mvc;
using Kendo.Mvc.Examples.Models;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using System;
 
namespace Kendo.Mvc.Examples.Controllers
{
    public partial class GridController : Controller
    {
        public ActionResult Index()
        {
            return View(GetProducts());
        }
 
        public ActionResult Remote_Data()
        {
            return View("AjaxBinding");
        }
 
        public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetProducts().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
 
        private static IEnumerable<OrderViewModel> GetOrders()
        {
            var northwind = new NorthwindDataContext();
 
            var loadOptions = new DataLoadOptions();
 
            loadOptions.LoadWith<Order>(o => o.Customer);
            northwind.LoadOptions = loadOptions;
 
            return northwind.Orders.Select(order => new OrderViewModel
            {
                ContactName = order.Customer.ContactName,
                OrderDate = order.OrderDate,
                OrderID = order.OrderID,
                ShipAddress = order.ShipAddress,
                ShipCountry = order.ShipCountry,
                ShipName = order.ShipName,
                EmployeeID = order.EmployeeID
            });
        }
 
        private static IEnumerable<ProductViewModel> GetProducts()
        {
            //var northwind = new NorthwindDataContext();
 
            var list = new List<ProductViewModel>();
            var randomGen = new Random(DateTime.Now.Second);
            for (var i = 500; i >= 1; i--)
            {
                list.Add(
                    new ProductViewModel
                        {
                            ProductID = i,
                            ProductName = "ProductName-" + i,
                            UnitPrice = Convert.ToDecimal(randomGen.NextDouble()),
                            UnitsInStock = randomGen.Next(),
                            UnitsOnOrder = (short)randomGen.Next(),
                            Discontinued = (i % 2) == 0 ,
                            LastSupply = DateTime.Today.AddDays(i)
                        }
                    );
            }
 
            return list.AsEnumerable();
 
            //return northwind.Products.Select(product => new ProductViewModel
            //{
            //    ProductID = product.ProductID,
            //    ProductName = product.ProductName,
            //    UnitPrice = product.UnitPrice ?? 0,
            //    UnitsInStock = product.UnitsInStock ?? 0,
            //    UnitsOnOrder = product.UnitsOnOrder ?? 0,
            //    Discontinued = product.Discontinued,
            //    LastSupply = DateTime.Today
            //});
        }
 
        private static IEnumerable<EmployeeViewModel> GetEmployees()
        {
            var northwind = new NorthwindDataContext();
 
            return northwind.Employees.Select(employee => new EmployeeViewModel
            {
                EmployeeID = employee.EmployeeID,
                FirstName = employee.FirstName,
                LastName = employee.LastName,
                Country = employee.Country,
                City = employee.City,
                Notes = employee.Notes,
                Title = employee.Title,
                Address = employee.Address,
                HomePhone = employee.HomePhone
            });
        }
    }
}



1 Answer, 1 is accepted

Sort by
0
Mike
Top achievements
Rank 1
answered on 23 Oct 2012, 05:20 PM
I logged a support ticket and was told it is based on how IOS 6 is handling the caching the results of ajax calls. 

The following change resulted in it working:

public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
{
    // Setting no-cache resolved the issue
    Response.Cache.SetCacheability(HttpCacheability.NoCache);

    
return Json(GetProducts().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

From the support team:

"The most likely reason for the problem is that the result is being cached and no request is made to the controller. This forum thread provides more information on this issue with iOS 6 and the known solution. One way to set the header in the action method when using the MVC wrappers, is as in the snippet below:

Response.Cache.SetCacheability(HttpCacheability.NoCache);

Tags
Grid
Asked by
Mike
Top achievements
Rank 1
Answers by
Mike
Top achievements
Rank 1
Share this question
or