angular component inside template

[Marcel]

Hello,

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"
     k-options="$ctrl.listViewOptions">

      <div k-template>

        <eclub-category-card category="dataItem" on-select="$ctrl.selectionChanged(card)">

        </eclub-category-card>

      </div>

</div>

 <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

[Petyo]

Hi,

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. 

Regards,
Petyo
Telerik

 

 

[William]

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.