grid with dynamic columns fire databound event in bucle

[Manolo Capdevila]

Hi,

I've a grid with dynamic columns. When I load the data, I need hide some columns

In this link https://ej2.syncfusion.com/angular/documentation/grid/columns/#set-column-options-to-auto-generated-columns

you explain how do it.

My code is:

<ejs-grid #gridEquipamiento [dataSource]='equipamientos'

[selectionSettings]='selectionOptions'

width='100%'

allowResizing='true' allowSorting='true' allowSelection='true' allowTextWrap='true'

(dataBound)="onGridDataBound($event)">

</ejs-grid>

onGridDataBound(args) {

alert(args);

for (const col of this.grid.columns) {

debugger;

switch((col as any).field) {

case 'idTipoFinanciacion':

case 'tin':

case 'tae':

case 'porcentajeGastosApertura':

case 'gastosApertura':

case 'cuota':

case 'primeraCuota':

(col as any).visible = false;

break;

}

}

this.grid.refreshColumns();

}

But event databound is continously firing.

So, how can I hide columns without the event firing continuously

Thanks

[Thavasianand Sankaranarayanan]

Hi Manolo, 

 

Greetings from Syncfusion support. 

 

We have validated the reported issue and you can achieve the requirement in below way. Please find the code example and sample for your reference. 

 

[app.component.html] 

 

  <ejs-grid #grid [dataSource]='data' allowPaging='true'  (load)='load($event)' (dataBound)="dataBound($event)">     

    </ejs-grid> 

 

 

[app.component.ts] 

 

export class AppComponent { 

  public data: Object[] = []; 

  public isinitialLoad: boolean = false; 

  @ViewChild('grid', { static: false }) public grid: GridComponent; 

  load(args) { 

    this.isinitialLoad = true; 

  } 

  dataBound(args) { 

     

    if (this.isinitialLoad) { 

      for (let i: number = 0; i < this.grid.columns.length; i++) { 

        if (this.grid.columns[i]['field'] === "ShipRegion" || this.grid.columns[i]['field'] === "ShipAddress" || this.grid.columns[i]['field'] === "ShipName") { 

          this.grid.columns[i]['visible'] = false; 

        } 

        else{ 

          if(this.grid.columns[i]['field'] === 'OrderDate' || this.grid.columns[i]['field'] === 'ShippedDate'){ 

            this.grid.columns[i]['format']= 'yMd'; 

          } 

          if(this.grid.columns[i]['field'] ==='Freight'){ 

            this.grid.columns[i]['format']= 'C2'; 

          } 

          if(this.grid.columns[i]['type'] ==='number'){ 

            this.grid.columns[i]['textAlign']= 'Right'; 

          } 

        } 

      } 

      this.isinitialLoad = false; 

      this.grid.refreshColumns(); 

    } 

  } 

  ngOnInit(): void { 

    this.data = orderDetails; 

  } 

 

In the above sample we have change column properties in dataBound event and ‘refreshColumns’ of Grid at initial render only. Also we found that , Is the Grid can render at initially by using ‘load’ event of Grid . 

 

Sample : https://stackblitz.com/edit/angular-evkngq?file=main.ts 

Regards, 

Thavasianand S. 

[Manolo Capdevila]

Thanks a lot!

And other doubt, Can I use frozen columns with dynamic columns?

When I set the frozen columns value, the grid is wrong rendered

With no frozen columns

With frozen columns

My function dataBound

onGridDataBound(args) {

if (this.isInitialLoad) {

for (const col of this.grid.columns) {

switch((col as any).field) {

case 'idTipoFinanciacion':

case 'tin':

case 'tae':

case 'porcentajeGastosApertura':

case 'gastosApertura':

case 'cuota':

case 'primeraCuota':

case 'mesesFinanciacion':

case 'idEmpresaInstaladora':

(col as any).visible = false;

break;

case 'tipoFinanciacion':

(col as any).headerText = 'Tipo financiación';

break;

case 'descripcionTipoFinanciacion':

(col as any).headerText = 'Datos financiación';

break;

default:

(col as any).format = 'C2';

}

}

this.isInitialLoad = false;

this.grid.refreshColumns();

this.grid.frozenColumns = 3;

}

}

[Dhivya Rajendran]

Hi Manolo, 

Thanks for your update. 

We have validated the provided information and checked with our end. We confirmed “Script error thrown when enable frozen column with auto generated columns in Grid” as a bug and logged a report for the same. We will include the defect fix in our upcoming September 11, 2019 patch release. 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 
 
https://www.syncfusion.com/feedback/8554/script-error-is-thrown-when-enabling-frozen-column-with-auto-generated-columns-in-grid 

Until then we appreciate your patience. 

Regards, 

R.Dhivya 

[Manolo Capdevila]

Ok,

Thanks

[Dhivya Rajendran]

Hi Manolo, 

You can track the status of the request through the feedback link that we provided in the previous update. Please get back to us if you need further assistance from us. 

Regards, 

R.Dhivya