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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

grid with dynamic columns fire databound event in bucle

Thread ID:

Created:

Updated:

Platform:

Replies:

146977 Aug 27,2019 12:23 PM UTC Sep 2,2019 04:17 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Manolo Capdevila
Asked On August 27, 2019 12:23 PM UTC

Hi,

I've a grid with dynamic columns. When I load the data, I need hide some 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 [Syncfusion]
Replied On August 28, 2019 08:38 AM UTC

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 . 
 

Regards, 
Thavasianand S. 


Manolo Capdevila
Replied On August 29, 2019 10:06 AM UTC

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 [Syncfusion]
Replied On August 30, 2019 08:34 AM UTC

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
Replied On August 30, 2019 09:54 AM UTC

Ok,

Thanks

Dhivya Rajendran [Syncfusion]
Replied On September 2, 2019 04:17 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon