Angular Kendo data grid resizing columns causes the headers to misalign on new remote datasource search

Question

I have seen similar question as this but most deal with alignment on resizing. This is specific to alignment when new data is set in the datasource. I'm looking to see if I have the grid setup correctly or a possible better workaround.

When I resize the Kendo data grid the columns and header seem to align fine (some bugginess in Chrome). however after I have resized one of the columns and search for new data I find the columns and headers are misaligned.

I have tried both firefox and chrome and both have this issue.

This is similar to these issues but seem to be on resize not data load.

Kendo Grid header and data row columns are not aligned

Bug in kendo ui grid lrt css in chrome

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

1. resize a column and hit search
2. notice the grid and columns headers are misaligned

I have set this grid up many different ways and still get this issue. In the fiddle have it setup so the data does not load automatically, we require a search first. I have also setup it up where the datasource is initially loaded by setting the datasource with a transport defined in the options object.

So far I have not found a way to set this up where I don't see this issue.

After inspecting the HTML, when we load new data I found that the header is loosing the styling that Kenodo sets on column resize.

I created a workaround that seems to work fine in the fiddle but the headers get a little jumpy in my app sometimes going this route.

`workaround`  

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

I'm looking to see if anyone has ran into this and know if it's related to my setup or have a better solution?

Answer 1

Here is what I think I'm going to go with to get my Kendo grids column resizing to behave better on chrome. example fiddle

I had to use part of the CSS workaround in Bug in kendo ui grid lrt css in chrome and for the search issue I used what I posted above. There are still some painting issues when the grid has a lot of data and we resize the columns but overall this is much better.

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