Kendo UI Une source de données pour plusieurs grilles

Question

J'ai un problème avec Kendo UI dernièrement, j'ai 1 source de données et elle est utilisée par 3 grilles. Tout cela fonctionne mais pour une raison quelconque, le style de la grille est "démantelé", faute d'un meilleur mot.

Si je filtre la source de données à partir de la grille A, la grille A a l'air bien mais les grilles B et C ressembleraient à quelque chose comme ceci (ne faites pas attention au prénom "Error" dans la colonne) :

Si je filtre la source de données de la grille B, la grille B aura l'air bien mais les grilles A et C auront l'air "démantelées". Quel pourrait être le problème ?

Grille 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"
        }
      ]
    });

Grille 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 penser pourquoi vous avez besoin de 3 grilles pour afficher les mêmes données, utiliser 3 Datasource si vous ne partagez pas les sources de données. tale un regard @ Kendo Shared Datasource.

Answer 2

Si vous voulez vraiment une seule source de données qui s'exécute une fois, et que vous ne pouvez pas la partager car chacune sera filtrée différemment,

Vous pourriez alimenter la source de données en arrière-plan, et lorsque les données reviennent, les répartir entre les grilles comme suit :

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

Voici un échantillon fonctionnel avec des données fictives :

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