How to rebind kendo angular grid on button click?

[Adil]

I have grid in angular and two buttons ones bind 5 column the other bind 2 but when i click them grid always shows 5 column.... How to fix this without using js? Is there any refresh() or rebind() function or directive?

html

<button (click)="changeDataSource(1)">Data1</button>  <button (click)="changeDataSource(2)">Data2</button>

<kendo-grid [data]="gridData | async" k-grid-options="sa">
</kendo-grid>

component

  public gridData: Observable<any[]>;


  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.gridData = this.productService.getProducts();

  }

  changeDataSource(id: number) {
    console.log(id);
    if (id == 1) { this.gridData =this.productService.getProducts();}
    if (id == 2) { this.gridData =this.productService.getProductsAlternative() }

    
  }

my service

getProducts(): Observable<Products[]>{ //Returns ProductID,ProductName,CategoryName,UnitPrice,UnitsInStock
    return this.http.get<Products[]>(this.url)
  }

  getProductsAlternative(): Observable<ProductAlternative[]>{ //Returns ProductName,CategoryName
    return this.http.get<ProductAlternative[]>(this.url1)
  }

Thanks

[Adil]

Hi All,

I found my answer on this forum. Link below

https://www.telerik.com/forums/refresh-grid-columns-after-data-change 

Thanks