AngularJS HeaderTemplate Timing Problem with TabStrip

3 posts, 1 answers
  1. BigzampanoXXl
    BigzampanoXXl avatar
    76 posts
    Member since:
    Jan 2007

    Posted 25 Oct 2018 Link to this post


    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:


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


    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:


    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. Answer
    Konstantin Dikov
    Konstantin Dikov avatar
    2466 posts

    Posted 29 Oct 2018 Link to this post

    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.

    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.
  3. BigzampanoXXl
    BigzampanoXXl avatar
    76 posts
    Member since:
    Jan 2007

    Posted 29 Oct 2018 in reply to Konstantin Dikov Link to this post

    Hi Konstantin,


    Thanks for your help! Your solution works well. 


    Best regards!

Back to Top