Question

我想将网格绑定到第一页加载的预加载数据，以便网页在加载页面时不再对服务器进行调用，但我希望网格进行ajax调用应用页面更改或过滤时到服务器。

我尝试过＆＃34; autoBind：false＆＃34;，创建＆＃34; transport＆＃34;在网格绑定到预加载的数据之后动态地对象，但没有任何工作或在剑道的核心内引发错误。

这是我目前的代码：

$(document).ready(function () {
    var gridData = @Html.Raw(ViewBag.GridData);

    var grid = $("#grid").kendoGrid({
        dataSource: {
            data: gridData,
            transport: {
                read: {
                    url: '@Url.Action("GetUsers")',
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8"
                },
                parameterMap: function (options) {
                    return JSON.stringify({ pageSize: options.pageSize, page: options.page });
                }
            },
            ...
            pageSize: gridData.PageSize,
            serverFiltering: true,
            serverPaging: true
        },
        ...
        filterable: true,
        pageable: {
            refresh: true,
            pageSizes: [10, 25, 50, 100]
        }
    }).data("kendoGrid");
});

当我设置＆＃34;数据＆＃34;和＆＃34;运输＆＃34;网格上的属性＆＃34;数据源＆＃34;同时＆＃34;运输＆＃34;将向服务器发出请求以获取第一页上的数据加载忽略＆＃34;数据＆＃34;已包含预加载数据的属性。

Answer 1

将read定义为第一个返回预加载数组的函数。以下调用应调用ajax来加载数据。

      // Control if this is the first time it is loaded
      var first = true; 
      // Initial content
      var initial = [
        {
          ProductID: 1000, ProductName: "OnaBai", UnitPrice: 10, Discontinued: false
        }
      ];

      // DataSource definition
      var dataSource = new kendo.data.DataSource({
        serverFiltering: true,
        serverSorting: true,
        transport: {
          read: function (op) {
            if (first) {
              // If it is first return initial content and toggle first
              op.success(initial);
              first = false;
            } else {
              // Subsequent runs use jquery.ajax for loading the data
              $.ajax({
                url: "http://demos.telerik.com/kendo-ui/service/Products",
                dataType: "jsonp",
                success: function(result) {
                  // Return loaded data
                  op.success(result);
                },
                error : function(result) {
                  op.error(result);
                }  
              }); 
            }
          }
        }
      });

      $("#grid").kendoGrid({
        filterable: true,
        dataSource : dataSource
      });

检查它在这里运行：http://dojo.telerik.com/@OnaBai/akoJ

Answer 2

创建DataSource后，您可以使用.data()函数来设置数据，而不会删除transport.read选项。

var gridData = @Html.Raw(ViewBag.GridData);

var gridDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: '@Url.Action("GetUsers")',
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8"
            },
            parameterMap: function (options) {
                return JSON.stringify({ pageSize: options.pageSize, page: options.page });
            }
        },
        ...
        pageSize: gridData.PageSize,
        serverFiltering: true,
        serverPaging: true
    });

gridDataSource.data(gridData);

var grid = $("#grid").kendoGrid({
    dataSource: gridDataSource,
    ...
    filterable: true,
    pageable: {
        refresh: true,
        pageSizes: [10, 25, 50, 100]
    }
}).data("kendoGrid");

如何在第一次加载页面时使网格不加载数据？

2 个答案: