Question

我有一个kendo UI网格并从ajax调用方法加载数据。当点击按钮第一次加载数据没有任何问题，但当我再次点击该按钮时数据没有加载。问题是什么请帮我。

<body>
    <div id="example">
      <button id="primaryTextButton" class="k-primary">Submit</button>
     <div id="grid"></div>     </div>
</body>

$(document).ready(function () {
    var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
            transport: {
                /*read:  {
                    url: crudServiceBaseUrl + "/Products",
                    dataType: "jsonp"
                },*/
                 read: function(options) {
                                           $.ajax({
                                               type: "POST",
                                               url: crudServiceBaseUrl + "/Products",
                                              // contentType: "application/json; charset=utf-8",
                                               dataType: 'jsonp',
                                               //data: JSON.stringify({key: "value"}),
                                              // data: JSON.stringify(_traceInput),
                                               success: function(data) {

                                                   var grid = $('#grid').getKendoGrid();
                                                   if (grid == undefined) {
                                                       grid.empty();
                                                   }
                                                   else {

                                                       grid.dataSource.data(data);
                                                       grid.refresh();
                                                   }

                                               }
                                           });
                                       },
                update: {
                    url: crudServiceBaseUrl + "/Products/Update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: crudServiceBaseUrl + "/Products/Destroy",
                    dataType: "jsonp"
                },
                create: {
                    url: crudServiceBaseUrl + "/Products/Create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        autoBind : false,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            { field: "Discontinued", width: "120px" },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }],
        editable: "inline"
    });



 $('.k-primary').click(function (e) {
    // do something else

    dataSource.read();
});
});

http://jsfiddle.net/qoxvaayn/40

Answer 1

我重新调整了你的代码并更新了小提琴。希望这符合您的要求。

$(document).ready(function () {
    var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
            data:[],
            batch: true,
            pageSize: 20
        });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        autoBind : false,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            { field: "Discontinued", width: "120px" },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }],
        editable: "inline"
    });



 $('.k-primary').click(function (e) {
   var grid = $('#grid')
  // show loading indicator
    kendo.ui.progress(grid, true);
    $.ajax({
       type: "POST",
       url: crudServiceBaseUrl + "/Products",
       dataType: 'jsonp',
       success: function(data) {       
          $("#grid").data("kendoGrid").dataSource.data(new kendo.data.ObservableArray(data));
          // hide loading indicator
            kendo.ui.progress(grid, false);
       }
    });
 });
});

http://jsfiddle.net/qoxvaayn/40/

Answer 2

两件事：

首先：您通过“手动”使用您返回的数组覆盖数据来破坏成功处理程序中网格的dataSource传输。这就是为什么读取不会第二次触发...您的数据现在是一个常规数组而不是远程传输。将您的成功处理程序更改为记录的处理（EXAMPLE - SET READ AS A FUNCTION）

    success: function(data) {
      // notify the data source that the request succeeded
      options.success(data);
    }

第二：通过将功能和对象传输定义混合在一起，您会遇到麻烦。它们必须全部定义为所有函数或所有对象，否则您将遇到未触发事件的问题。 http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read

所有传输操作（读取，更新，创建，销毁）必须以相同的方式定义，即作为函数或对象。无法混合使用不同的配置选项。

Kendo UI网格未首次加载

2 个答案: