Weird behavior with Kendo Grid returning a 500 error with large datasets

[Shane P]

I am having some issues trying to get a grid binding to a dataset of about 10,000 records.

Within my layout I have my scripts set as

<link rel="stylesheet" href="https://da7xgjtj801h2.cloudfront.net/2013.1.514//styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://da7xgjtj801h2.cloudfront.net/2013.1.514/styles/kendo.default.min.css">
  @Styles.Render("~/Content/all")
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  @Scripts.Render("~/bundles/all")

  <script src="https://da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.web.min.js"></script>
  <script src="https://da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.aspnetmvc.min.js"></script>

My grid set as 

@(Html.Kendo().Grid<ZZ.Model.ProductModel>()

           .Name("products-grid")
           .Columns(columns =>
               {
                  columns.Bound(o => o.id).ClientTemplate("<input type='checkbox' data-id='#: id #'/>").Title(" ").Sortable(false).Width(22).Filterable(false);
                   columns.Bound(o => o.name).Title("Name").Width(140);
                   columns.Bound(o => o.handle).Title("Handle").Width(140);
                   columns.Bound(o => o.type).Title("Type").Width(140);
                   columns.Bound(o => o.sku).Title("SKU").Width(80);


               })
           .Scrollable()
           .Resizable(r=>r.Columns(true))
           .Sortable()
           .Filterable()
           .Pageable(p=>p.Messages(m=>m.Display("{0}-{1} of {2} products")))
           .HtmlAttributes(new { style = "height: 600px" })
           .DataSource(dataSource => dataSource
                                         .Ajax()
                                         .PageSize(250)

                                         .Read(read => read.Action("GetProducts", "Products"))
           )
           //  .Events(events => events.Change("select"))
           )

My controller

public JsonResult GetProducts([DataSourceRequest] DataSourceRequest request)
      {
          var businessId = BusinessInfo.Id;
                  var result = _repository.GetProductsInDatabase(businessId).OrderBy(o=>o.handle).ToDataSourceResult(request);
          return Json(result, JsonRequestBehavior.AllowGet);
      }

Now when I try load the page I get a 500 error telling me that the json amount is to large. 
If I switch the order the 2 kendo scripts are loaded to be 

 <script src="https://da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.aspnetmvc.min.js"></script>
<script src="https://da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.web.min.js"></script>


The grid loads but there is a js error "Uncaught TypeError: Cannot read property 'jQuery' of undefined " and I am unable to filter or sort.

Anyone else ran into this problem before?

[Nikolay Rusev]

Hello Shane,

The order in which scripts are registered is important - kendo.aspnetmvc.min.js must always be after kendo.(web/all).min.js. Here is the relevant documentation on this:
Using Kendo UI in ASP.NET MVC application
Correct Order Of JavaScript Files

Regarding the orignal error the article bellow explains the reason for it and gives possible solutions:
Error during serialization or deserialization using the JSON JavaScriptSerializer

Regards,
Nikolay Rusev
the Telerik team

[Shane P]

Thanks Nikolay,
Changing the way the data is returned like the link supplied sorted the issue of the grid not binding.
I'm unable to sort the grid. Is https://da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.web.min.js the correct cdn to be using?

[Nikolay Rusev]

Hello Shane,

You need to directly access the CloudFront CDN if you need to use HTTPS. 
Here is the corresponding article: Kendo UI CDN

Regards,
Nikolay Rusev
the Telerik team

[Shane P]

No joy.  I tried both the https and http version with no luck.

Putting a breakpoint on my controller the [DataSourceRequest] DataSourceRequest request the parameters are null.

Do I need to open a support request?

[Nikolay Rusev]

Hello Shane,

The issue shouldn't be related to where the scripts come from - CDN  or local files as long as kendo.aspnetmvc.min.js is included after kendo.(web|all).min.js.

Can you send us runnable example where the issue can be observed?

Regards,
Nikolay Rusev
the Telerik team

[Shane P]

Ok I have found the issue. Its to do with a lowercase urlrewrite I have in place.

My web.config

<rule name="LowerCase" stopProcessing="true">
        <match url="[A-Z]" ignoreCase="false" />
        <action type="Redirect" url="{ToLower:{URL}}" />
      </rule>

I commented this out and it works ok. Does kendo not support url rewrites? ideally I want to be able to use the above rule.

[Nikolay Rusev]

Hello Shane, 

The problem with this rule is that it redirects all requests by executing GET requests regardless of the fact that the original request(in case of Grid read) is a POST request. So what happens when you redirect a POST request with GET is that the child request looses the data/context of the original.

If you inspect the browser console network tab you will notice that the context information for page/sort etc. is lost when redirected. One way that can resolve this is to instruct the DataSource.Read to perform GET requests instead:

.DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Products_Read", "Grid").Type(HttpVerbs.Get))
    )

However in case of editing the data items will be send with POST and this rule will prevent you from delete/update/insert items. Maybe you should consider more appropriate rule in this case. For example adding condition for redirecting only if the original request method is GET too:

<rule name="LowerCase" stopProcessing="true">
          <match url="[A-Z]" ignoreCase="false" />
          <action type="Redirect" url="{ToLower:{URL}}" />
          <conditions>
              <add input="{REQUEST_METHOD}" pattern="GET" />
          </conditions>
        </rule>

That's up to you and the business logic you need to implement.Regards,
Nikolay Rusev
Telerik