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.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):
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?Grid A:\[code\] $('#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" } ] });\[/code\]Grid B:\[code\] $('#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 }] });\[/code\]DataSource:\[code\]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 });\[/code\]