How to refresh data automatically in a kendo listView Angular

1 Answer 63 Views
ListView
hiba
Top achievements
Rank 1
hiba asked on 29 Apr 2021, 02:20 PM

I am using kendo listview and I have a dynamic data that's why I want to reload data automatically in the listView. Can anyone help me ?

This is the method I used where I add new item in the data of the  lisView "addresses" :

addNewAddress(){
    this.var=false
    if(this.isvalidAddresses){
      this.var = true;
      this.addresses.push(this.oneDamageAddress);
      console.log(this.addresses)
    }
  }

 

And this is my HTML :

<button (click)="addNewAddress()">add</button>

<kendo-listview*ngIf="var"

 
            #listView
            [kendoListViewBinding]="addresses"
            [loading]="loading"
            [containerClass]="'k-d-flex k-flex-col k-flex-nowrap'"
            
        >
            <ng-template
                kendoListViewItemTemplate
                let-dataItem="dataItem"
            >
            <div class="product" >
            <div class="description">
                <div class="product-name">{{ dataItem.streetName }}</div>
                <div class="category-name">{{ dataItem.surname }}</div>
            </div>
            <div class="price">
              <button ><i class="fas fa-trash"></i></button>
            </div>
        </div>           
            </ng-template>
        

</kendo-listview>

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 30 Apr 2021, 09:18 AM

Hi Hiba,

The reason for the observed behaviour is that when a collection is used as an Input for a component, Angular does not track changes to the collection elements in order to trigger a change detection cycle. So in the current case even though the new address is pushed correctly to the addresses collection, Angular is not aware of it.

In order to fix the issue, we could make a copy of the addresses array to a new instance. Passing this new instance to the kendoListViewBinding directive would trigger the change detection cycle.

this.addresses.push(this.oneDamageAddress);
this.addresses = [...this.addresses];

Regards,
Dimiter Madjarov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Tags
ListView
Asked by
hiba
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or