angular component inside template

3 posts, 1 answers
  1. Marcel
    Marcel avatar
    42 posts
    Member since:
    Apr 2011

    Posted 01 Jun 2016 Link to this post


    I'm using a angularjs component inside the ListView template like this:

    <!-- Categories Cardview template-->
     <script type="text/ng-template" id="categories-cardview-template">
     <div kendo-list-view="categoriesListView" class="eclub-cardview pager-offset" k-scope-field="cardView"
          <div k-template>
            <eclub-category-card category="dataItem" on-select="$ctrl.selectionChanged(card)">
     <div kendo-pager k-options="$ctrl.pagingOptions" class="eclub-cardview-pager"></div></script>

    The ListView is bound to a Kendo UI Datasource.
    I noticed when I add a new item to the Datasource ALL of angular components which are already available in the ListView get re-created.
    I tried several ways to add the new item to the Datasource (add, insert, pushCreate), but all with the same result.
    So you can imagine the performance hit when the ListView is already displaying let's say 20 items.

    Is this normal behavior of the ListView ?

    Thanks in advance

  2. Answer
    Petyo avatar
    2444 posts

    Posted 03 Jun 2016 Link to this post


    I am afraid that this is so - the listview does a full re-render when the datasource changes. Notice however that using the listview component in angular context is not necessary, given the simpler ng-repeat built-in directive. Of course, the ng-repeat won't work with DataSource out of the box. 

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. William
    William avatar
    2 posts
    Member since:
    Oct 2015

    Posted 30 Nov 2016 in reply to Petyo Link to this post

    I could be mistaken but if you use an observablearray as your data you can remove and add from it without actually changing the datasource and no performance hit for recreating the widget.
Back to Top