Question

我最近遇到了Kendo UI的问题，我有1个数据源，它由3个网格使用。这一切都有效，但出于某种原因，网格的样式被“拆除”，因为缺少更好的单词。

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

Grid B and C

如果我从网格B过滤数据源，网格B现在看起来不错，但网格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
      }]
    });

的DataSource：

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

Jest思考为什么你需要3个网格来显示相同的数据，如果你不共享数据源，则使用3个数据源。看看@Kondo Shared Datasource。

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

Kendo UI一个用于多个网格的数据源

2 个答案: