How to load huge of data in kendo grid

Question

web method:

   <WebMethod()>
   Public Shared Function Pcpacking() As IEnumerable(Of Packing)
   Dim db As New STOREEntities
   Return db.PC_PACKING_HISTORIES. _
   Where(Function(q) q.PACK_DATE > "1388/11/07"). _
   Select(Function(q) New Packing _
              With {.Packdate = q.PACK_DATE,
                    .Packserialnumber = q.PACK_SERIAL_NUMBER,
                    .Netweight = q.NET_WEIGHT,
                    .Packusername = q.PACK_USER_NAME}).ToList()
   End Function

script:

$(function () {
       $("#grid").kendoGrid({
           height: 200,
           columns: [
                { field: "Packserialnumber", width: "150px" },
               { field: "Netweight", width: "50px" },
               { field: "Packusername", width: "150px" },
               { field: "Packdate", width: "100px" }
           ],
           editable: false,
           dataSource: {
               schema: {
                   data: "d",
                   model: {
                       id: "Packserialnumber",
                       fields: {
                           Packserialnumber: { editable: false, nullable: true },
                           Netweight: { type: "number", validation: { required: true, min: 1} },
                           Packusername: { validation: { required: true} },
                           Packdate: { validation: { required: true} }
                       }
                   }
               },
               batch: false,
               transport: {
                   read: {
                       url: "Default.aspx/Pcpacking",
                       contentType: "application/json; charset=utf-8",
                       type: "POST"
                   }
               }
           }
       });
   });

with this condition(PACK_DATE > "1388/11/07" 366 records) everything works well.but when i change date to 1388/11/06 1260 records or 1388/11/05 5460 records or ... following error occurs:

{"Message":"Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property. ","StackTrace":" at System.Web.Script.Serialization.JavaScriptSerializer. Serialize(Object obj, StringBuilder output, SerializationFormat serializationFormat)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Serialize(Object obj, SerializationFormat serializationFormat)\r\n at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary`2 rawParams)\r\n
at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)", "ExceptionType":"System.InvalidOperationException"}

i think kendo grid dont suppport huge data.Any suggestions?
sorry for my bad english.

Answer 1

The problem is actually that by default, the .NET JSON serializer throws an exception if the resulting JSON string is larger than 100 kB. Obviously, sending thousands of records is larger than the limit. You can change this setting, but I wouldn't recommend it for your application.

Instead, configure the grid to request small chunks of the data at a time. It looks like you can configure Kendo Grid to load more data as you scroll.

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        serverPaging: true,
        serverSorting: true,
        pageSize: 100,
        transport: {
            read: {
                url: "Default.aspx/Pcpacking",
                contentType: "application/json; charset=utf-8",
                type: "POST"
            }
        }
    },
    scrollable: {
        virtual: true
    },

    ...
});

Your server-side script will have to handle the top (how many records to send) and skip (where to start) parameters that Kendo sends along.

Answer 2

$(function () {
       $("#grid").kendoGrid({
           height: 200,
           columns: [
                { field: "Packserialnumber", width: "150px" },
               { field: "Netweight", width: "50px" },
               { field: "Packusername", width: "150px" },
               { field: "Packdate", width: "100px" }
           ],
           editable: false,
           dataSource: {
               schema: {
                   data: "d",
                   model: {
                       id: "Packserialnumber",
                       fields: {
                           Packserialnumber: { editable: false, nullable: true },
                           Netweight: { type: "number", validation: { required: true, min: 1} },
                           Packusername: { validation: { required: true} },
                           Packdate: { validation: { required: true} }
                       }
                   }
               },
               batch: false,
               transport: {
                   read: {
                       url: "Default.aspx/Pcpacking",
                       contentType: "application/json; charset=utf-8",
                       dataType: "json"
                   }
               }
           }
       });
   });