Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Toshendra Dalvi
55
IGX grid not updating
posted

Hi ,

I am evaluating iGX grid and i wanted to do simple functionality of add to favourite. I have  favourite button that is bound to favourite property when you click the button i want to toggle [ IsACTIVE] property so to make button favourite / not favourite.

here is the code.

 <igx-grid  #grid1 id="grid1"  displayDensity="compact" [data]="stocks" [rowHeight]="22"   [autoGenerate]="false">
        <igx-column field="name" [sortable]="true" [resizable]="true" header="Name"></igx-column>
        <igx-column field="code" [sortable]="true" [resizable]="true" header="Code"></igx-column>
        <igx-column field="price" [sortable]="true" [resizable]="true" header="Price "></igx-column>
        <igx-column field="previousPrice" [sortable]="true" [resizable]="true" header="Last Price"></igx-column>
        <igx-column field="favorite" [editable]="false">
           <ng-template igxCell let-cell="cell">
                <button  igxButton="icon" (click)="toggleFavourite(cell.cellID.rowIndex)">
                    <igx-icon [isActive]="cell.value">favorite</igx-icon>
                </button>
            </ng-template> 
      </igx-column>
      <igx-column field="favorite" [editable]="false">

      </igx-column>
    </igx-grid>
======= grid componenet.ts
import { Component, NgZone, OnInit,ViewChild } from '@angular/core';
import { IgxGridComponent } from 'igniteui-angular';
import { Stock } from 'src/app/model/stock';
import { StockService } from 'src/app/Services/stock.service';

@Component({
  selector: 'app-stock-grid',
  templateUrl: './stock-grid.component.html',
  styleUrls: ['./stock-grid.component.scss']
})
export class StockGridComponent implements OnInit {

  stocks: Array<Stock> = new Array();
  @ViewChild("grid1", { read: IgxGridComponent, static: true })
  public grid1: IgxGridComponent;
  
  constructor(private stockService:StockService,private zone:NgZone) { }

  ngOnInit(): void {
    this.stocks = this.stockService.getStocks();
  }
 
  toggleFavourite(index:number){
    let stock = this.stocks[index];
    if(stock != undefined)
      stock.favorite = !stock.favorite;
      stock.previousPrice +=1;
      //this.zone.run(() => this.grid1.markForCheck());
     // this.stockService.toggleFavourite(stock);
  }
}
================= service.ts
import { Injectable } from '@angular/core';
import { Stock } from '../model/stock';

@Injectable({
  providedIn: 'root'
})
export class StockService {

  private stocks: Stock[];
  constructor() { 
    this.stocks = [];
    this.stocks.push( new Stock("Tesco Plc","TSCO.L", 140.2,140));
    this.stocks.push( new Stock("Just Eat Takeaway.com N.V.'","JET.L", 9462.00,9462.50));
    this.stocks.push( new Stock("Tesco Plc","TSCO.L", 140.2,140));
    this.stocks.push( new Stock("Tesco Plc","TSCO.L", 140.2,140));
    this.stocks[1].favorite = true;
  }
  getStocks():Stock[]{
    return this.stocks;
  }
  createStock(stock:Stock):boolean{
    let foundStock = this.stocks.find(s=> s.code === stock.code)
    if(foundStock) return false;
    this.stocks.push(stock);
    return true;
  }
  toggleFavourite(stock:Stock){
    let foundStock = this.stocks.find(s=>s.code === stock.code);
    if(foundStock){
      stock.favorite = ! stock.favorite;
    }
  }
}
=====stock.ts
export class Stock {
    
 public favorite:boolean = false;
 
constructor(public name:string,
    public code:string,
    public price:number,
    public previousPrice:number)
    {}

    isPositiveChange():boolean{
        return this.price  >= this.previousPrice;
    }
 
}
Can you please help in is there any property i need to set it in the grid to do the databinding work ??
Thank you
Toshendra
  • 1560
    Verified Answer
    Offline posted

    Hello,

    I have been looking into the described behavior and created a small sample trying to reproduce it based on the provided code snippet.

    If you are changing only the underlying data source, the grid would not detect this as a change. My suggestion in order to achieve your requirement and update the grid is to use the cell's update method. It would set a new value to the cell and call the grid's chageDetectRef markForCheck method in order to update the grid too.

    Instead of rowIndex you could pass as argument of toggleFavourite method the cell itself, update its value and take its row. After that you could get the required cell from this row and update it too:

      public toggleFavourite(cell: IgxGridCellComponent) {
    cell.update(!cell.value);
    let row: IgxGridRowComponent = cell.row;
    row.cells.forEach(function(cell: IgxGridCellComponent) {
      if (cell.column.field === "PreviousPrice") {
        cell.update(cell.value + 1);
      }
    });
  }

    Here could be found my sample for your reference.  Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach it in this case.

    Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.

    Thank you for your cooperation.

    Looking forward to hearing from you.

    Sincerely,

    Teodosia Hristodorova

    Associate Software Developer