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

問題は実際にはデフォルトでは、結果のJSON文字列が100 KBを超える場合は、.NET JSONシリアライザが例外をスローします。明らかに、何千ものレコードを送信することは制限よりも大きいです。この設定を変更することはできますが、アプリケーションにはお勧めできません。

代わりに、一度にデータの小さなチャンクを要求するためにグリッドを設定します。 Scrollのようにデータをロードするようにkendoグリッドを設定することができるようになります。/ a>。

$("#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
    },

    ...
});

.

サーバーサイドスクリプトは、kendoが送信するPresentsのtop（レコード数の数）とskip（どこで開始するか）パラメータを処理する必要があります。

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"
                   }
               }
           }
       });
   });

.