This is a migrated thread and some comments may be shown as answers.
AngularJS HeaderTemplate Timing Problem with TabStrip
2 Answers 14 Views
This is a migrated thread and some comments may be shown as answers.
BigzampanoXXl
Top achievements
Rank 1
BigzampanoXXl asked on 25 Oct 2018, 09:08 AM

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!

2 Answers, 1 is accepted

Sort by
0
Accepted
Konstantin Dikov
Telerik team
answered on 29 Oct 2018, 08:06 AM
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:
This concept is also demonstrated in the following HowTo example, although that the scenario differs:
Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
BigzampanoXXl
Top achievements
Rank 1
answered on 29 Oct 2018, 10:05 AM

Hi Konstantin,

 

Thanks for your help! Your solution works well. 

 

Best regards!

Tags
Grid
Asked by
BigzampanoXXl
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
BigzampanoXXl
Top achievements
Rank 1
Share this question
or