Kendo UI一个用于多个网格的数据源 [英] Kendo UI One DataSource for Multiple Grid

问题描述

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

I have an issue with Kendo UI lately, I have 1 datasource and it is used by 3 grids. This is all working but for some reason styling of the grid is "dismantled" for a lack of better word.

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

If I filter the datasource from Grid A, Grid A looks good but Grid B and C would look something like this (don't mind the firstname "Error" in the column):

如果我从网格B过滤数据源，网格B现在会看起来好，但网格A和C看起来会拆除。可能是什么问题？

If I filter the datasource from Grid B, Grid B now will look good but Grid A and C will look "dismantled". What could be the problem?

网格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：

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

推荐答案

如果你真的只想要一个执行一次的数据源，而且你不能分享它，因为每个都会被不同地过滤，

If you really want just one datasource that executes once, and you can't share it because each will be filtered differently,

你可以在后台填充数据源，当数据回来时，将它分成网格像这样：

You could populate the datasource in the background, and when the data comes back, split it amongst the grids like so:

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

这是一个带有一些假数据的工作样本：

Here is a working sample with some fake data:

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

这篇关于Kendo UI一个用于多个网格的数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！