Kendo UI One DataSource用于多个网格

Question

我最近在Kendo UI上遇到问题，我有1个数据源，它被3个网格使用。 所有这些都可以正常工作，但是由于某种原因，网格的样式由于缺乏更好的词而“被迷住了”。

如果我从网格A过滤数据源，则网格A看起来不错，但是网格B和C看起来像这样（不要介意列中的名字“错误”）：

如果我从Grid B筛选数据源，则Grid B现在看起来会很好，但是Grid A和C会看起来“迷茫”。 可能是什么问题呢？

网格A：

    $('#grid-a').kendoGrid({
      autoBind: false,
      dataSource: emp_ds,
      toolbar: kendo.template($("#mainlist-template").html()),
      scrollable: true,
      sortable: true,
      selectable: 'row',
      pageable: {
        input: true,
      },
      columns: [{
          field: "id",
          title: "ID",
          width: 100
        },{
          field: "firstname",
          title: "Firstname"
        },{
          field: "lastname",
          title: "Lastname"
        }
      ]
    });

网格B：

    $('#grid-b').kendoGrid({
      autoBind: false,
      dataSource: emp_ds,
      toolbar: kendo.template($("#emplist-template").html()),
      scrollable: true,
      sortable: true,
      selectable: 'row',
      pageable: {
        input: true,
      },
      columns: [{
          field: "id",
          title: "ID",
          width: 100
        },{
          field: "firstname",
          title: "Firstname"
        },{
          field: "lastname",
          title: "Lastname"
        },{ 
          command: {
            text: 'Select',
            click: function(e) {
              e.preventDefault();

              if(employeeSelectSwitch == 2) {
                return;
              }

              varholder.curUid = $(e.currentTarget).closest("tr").data('uid');

              $('#daterange-dialog').data('kendoWindow').center().open();
            }
          },
          width: 140
      }]
    });

数据源：

emp_ds = new kendo.data.DataSource({
    transport: {
      read: {
        dataType: 'json',
        url: url.employeeList
      }
    },
    schema: {
      model: {
        fields: {
          id: { type: 'number' },
          firstname: { type: 'string' },
          lastname: { type: 'string' },
        }
      }
    },
    pageSize: 15
  });

Answer 1

开玩笑地思考为什么需要3个网格来显示Same Data，如果不共享数据源，则使用3 Datasource。 看看@ Kendo共享数据源。

Answer 2

如果您确实只希望一个数据源执行一次，并且您不能共享它，因为每个数据源的过滤方式都不一样，

您可以在后台填充数据源，然后在数据返回时，将其拆分到网格中，如下所示：

 var dsBackground = new kendo.data.DataSource(myDsConfig);

 dsBackground.read().then(function (e) {
    if (dsBackground.data().length > 0) {
        $(".parallel-grid").each(function() {
            var grid = $(this).data("kendoGrid");
            if (grid != null)
            {
                dsBackground.filter({ field: "foo-type", operator: "eq", value:$(this).data("foo-type")});
                grid.dataSource.data(dsBackground.view());
                grid.dataSource.page(1);
                grid.dataSource.pageSize(10);
            }
        });
    }
});

这是一个包含一些虚假数据的工作示例：

http://dojo.telerik.com/@paltimus/EmUXE/2