Kendo Grid appearance broken after upgrading from AngularJS 1.2.26 to 1.3

[Christos]

I have an application using Kendo (2014.2.1008) Grid with AngularJS. It was working fine with Angular 1.2.26 but not with Angular 1.3.

The problem is that the grid is taking more vertical space than it should, and it visually overlaps with HTML elements below the grid. 

The grid should have a height of 500px:
<div kendo-grid
                 k-data-source="vm.searchResults"
                 k-sortable="true"
                 k-columns="[
                    {'field': 'dateDue', width:'90px', 'title': 'Date due', template:'#=kendo.toString(kendo.parseDate(dateDue),&quot;yyyy-MM-dd&quot;)#' },
                    //...
                 ]"                 
                 style="width:980px; height: 500px" id="searchResultsGrid">
</div>

I noticed the following differences between the HTML rendered when using Angular 1.2.26 and the Angular 1.3:

Angular 1.2.26:
<div class="k-grid-content" style="height: 469px">
   <table role="grid">
    ...

Calling $(".k-grid-content").height() in the JavaScript console returns 469

Angular 1.3:
<div class="k-grid-content"> <!-- no height specified -->
   <table role="grid">
    ...

Calling $(".k-grid-content").height() in the JavaScript console returns 606, which would explain the overlap with HTML elements below the grid.
Calling $(".k-grid-content").height(469) fixes the visual overlap problem.

Any ideas why would the grid render to different HTML when using Angular 1.3 instead of 1.2.26? 

Has Kendo been tested with Angular 1.3, is there an expected date for a version that should support it?

[Alex Gyoshev]

Hello Christos,

I could not reproduce the problem in this Dojo snippet. Please adjust it so that it shows it.

Regards,
Alex Gyoshev
Telerik

 

 

[Christos]

I could not quickly reproduce, I tried referencing the same libraries as in my project, using similar CSS and layout. I'll continue investigating later this week and let you know what I find.

Thanks

[Christos]

I found how to reproduce: http://dojo.telerik.com/oJEZi/6 (after running the snippet, click on the "Load" button that appears, and you should see a grid that overlaps with another item below it)

I introduced 3 major differences from your original snippet:
1. jQuery 2.1.1 instead of 1.9.1 (but the bug can also be reproduced with 1.9.1)

2. Query is not run immediately, but only once user clicks on "Load" button (in my complete application, there is a search form with a few criteria the user has to enter before clicking a "Search" button). Data is bound using <div kendo-grid k-data-source="vm.data"></div>

3. Grid is not shown initially, but only once data has been loaded. For this, the grid is wrapped in a <div ng-show="vm.data"></div>

Removing the ng-show="vm.data", to show the grid even when there is no data yet could be a temporary workaround until the problem is fixed in Kendo.

Also note that if you click "Load" twice, the problem goes away after the second load.

[Petyo]

Hi,

As far as I see, the issue here is related to the fact that the grid is initialized invisible, and can't perform its calculations. I need to dig further in order to see how that worked in 1.2, though. 

Another workaround I may suggest is to use the k-ng-delay approach - like this. 

Regards,
Petyo
Telerik

 

 

[Christos]

Thanks, using k-ng-delay on the grid, in addition to ng-show on its parent div does exactly what I needed. It could still be nice to investigate why there is a difference between Angular versions, in case there are similar problems in other cases, but this workaround is enough for me.