Angular Kendo数据网格调整大小列会导致标题在新的远程数据源搜索上未对齐

Question

我已经看到了与此类似的问题，但大多数问题都涉及调整大小。 当在数据源中设置新数据时，这特定于对齐。 我想看看我是否正确设置了网格，或者可能有更好的解决方法。

当我调整Kendo数据网格的大小时，列和标题似乎对齐良好（Chrome中有些错误）。 但是，在我调整了其中一列的大小并搜索了新数据之后，我发现这些列和标题未对齐。

我已经尝试过Firefox和Chrome，但都遇到了这个问题。

这类似于这些问题，但似乎在调整大小而不是数据加载。

Kendo Grid标头和数据行列未对齐

chrome中的kendo ui grid lrt css中的错误

Here is an example of the issue I'm running into. http://jsfiddle.net/teisaacs21w/6k5km7nb/

1. 调整列大小并点击搜索
2. 请注意网格和列标题未对齐

我已经以多种不同方式设置了该网格，但仍然遇到此问题。 在小提琴中进行了设置，因此数据不会自动加载，我们需要首先搜索。 我还通过使用options对象中定义的传输方式设置数据源来设置数据源的初始加载位置。

到目前为止，我还没有找到一种方法来设置这个位置，而我没有看到这个问题。

检查HTML之后，当我们加载新数据时，我发现标头失去了Kenodo在列调整大小上设置的样式。

我创建了一个变通办法，似乎在小提琴中工作正常，但标题在我的应用程序中有些跳动，有时会沿此路线前进。

`workaround`  

http://jsfiddle.net/teisaacs21w/a7cfv4g6/

我正在寻找是否有人遇到过这种情况，并且知道它是否与我的设置有关或是否有更好的解决方案？

Answer 1

这是我想配合我的Kendo网格列调整大小以在chrome上表现更好的方法。 小提琴的例子

我必须在chrome中的kendo ui网格lrt css中的Bug中使用CSS解决方法的一部分，而对于搜索问题，我使用了上面发布的内容。 当网格具有大量数据并且我们调整列的大小时，仍然存在一些绘画问题，但是总的来说这要好得多。

.k-grid-content {
  overflow-y: auto;
}

dataBound: function(e) {
  //column header fix, make sure header keeps the same style that kendo applied on resize
  var headerObj = $(".k-grid-header-wrap table");
  var gridObj = $(".k-grid-content table");
  var gridObjStyle = gridObj.attr('style');

  if (gridObjStyle) {
    headerObj.attr('style', gridObjStyle);
  }
}