We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

grid with dynamic columns fire databound event in bucle

Hi,

I need a grid but I don't know the column's number in each query, so I need dynamic columns.

For smallest screen, I need scroll this grid. I set the witdh in each column in databound event. The scroll appear, but i doesn't work fine.

I attach an example

Thanks

Attachment: dynamiccolumnsresponsive_9e1d304a.zip

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team September 25, 2019 09:49 AM UTC

Hi Manolo, 
 
Greetings from Syncfusion support. 
 
Query: grid with dynamic columns fire databound event in bucle 
 
We have checked your query and we are able to reproduce the reported problem at our end with the provided sample. The grid.refreshColumns method is called repeatedly which is the cause of the issue. You can resolve the reported problem by using boolean variable like below. Refer below code snippets and sample for your reference. 
 
[code example] 
... 
export class AppComponent { 
  public data: Object[] = []; 
  @ViewChild('grid', { static: true }) public grid: GridComponent; 
  public initial: boolean = true; 
 
  ngOnInit(): void { 
    this.data = [ 
      { OrderID: 1, CustomerID: 'VINET', Freight: 32.3800, OrderDate: '1996-07-02T00:00:00.000Z', City: 'Paris', Price: 300 }, 
      ... 
   ]; 
  } 
 
  dataBound(args: any) { 
    if (this.initial) { 
      for (const cols of this.grid.columns) { 
        ... 
     } 
      this.grid.refreshColumns(); 
      this.initial = false; 
    } 
  } 
} 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S. 



MC Manolo Capdevila September 27, 2019 07:28 AM UTC

Thanks


TS Thavasianand Sankaranarayanan Syncfusion Team September 27, 2019 07:30 AM UTC

Hi Manolo, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


Loader.
Up arrow icon