AngularJS HeaderTemplate Timing Problem with TabStrip

[BigzampanoXXl]

Hello!

I have a quite complex problem with my grid. I use AngularJS and have a grid in the second tab of a TabStrip. The Grid has a button in the HeaderTemplate of a column which is doing some stuff in the ng-click function (also preventing the sorting). 

Before the grid should load its data (read method of the datasource), I need to get data from the server.

The problem is: The button in the HeaderTemplate doesn't work in this scenario.

 

I created a little example which shows the problem: 

https://dojo.telerik.com/ameMuWOx/6

 

If the second tab initially is set to active, everything works fine:

https://dojo.telerik.com/ijazOZAG

 

It is also working if I don't make the server call before loading the grid AND I remove the ng-if on the grid:

https://dojo.telerik.com/UXUZIHIJ

 

So I would say it's kind of a timing problem? I really have no idea how to get my first plunkr work without making the grid-tab initial active. Maybe someone can help me finding a solution? It's a very complex problem and maybe I did something wrong.

 

For now my solution would be setting the grid-tab initial to active and to switch it programmatically after the grid is finished loading. But that wouldn't be a nice solution.

 

Thanks in advance!

[Konstantin Dikov]

Hi Dietmar,

This is indeed a timing issue, because the compilation of the template will be initiated before the header template is rendered, which prevents the "ng-click" to be attached correctly. As a workaround you could manually compile the header template once the Grid is rendered. For your convenience, following is the modified dojo:

• https://dojo.telerik.com/ameMuWOx/9

This concept is also demonstrated in the following HowTo example, although that the scenario differs:

• https://docs.telerik.com/kendo-ui/controls/navigation/tabstrip/how-to/AngularJS/add-new-tabs-dynamically

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[BigzampanoXXl]

Hi Konstantin,

 

Thanks for your help! Your solution works well. 

 

Best regards!