grid with dynamic columns

[RakhiS]

Hi,

I am using ANGULAR 15 version, in that using *ngFor for painting grid coumns is not working, can you please create a simple example in which columns are getting painted using *ngFor on data that is coming from data base for example:

select * from griddetails

Id Label Datatype

1 CreatedBy NVarchar(255)

2 Status NVarchar(255)

so, using the label column of the table i want to create in ejs-grid tag using *ngFor (there can be any number of data in this table)

[Santhosh Iruthayaraj]

Hi RakhiS,

Greetings from Syncfusion support.

Based on your request, we understand that you need assistance with binding columns fetched from a database to the Grid using ngFor in Angular.

To address your requirement, we have prepared a sample solution that demonstrates how you can achieve this. The provided code snippet and sample showcase the necessary implementation steps.

[app.component.ts]

 

export class AppComponent implements OnInit {

   .  .  .  .  .

    // Retrieve the columns from the database in the columns property when initializing

    this.columns = [

      {

        field: 'OrderID',

        headerText: 'Order ID',

        width: 100,

        editType: '',

        type: 'string',

        textAlign: 'Left',

      },

      {

        field: 'Freight',

        headerText: 'Freight',

        width: 120,

        editType: 'numericedit',

        type: 'number',

        textAlign: 'Left',

      },

      {

        field: 'ShipCity',

        headerText: 'Ship City',

        width: 150,

        editType: '',

        type: 'string',

        textAlign: 'Left',

      },

    ];

  }

}

 

[app.component.html]

 

<ejs-grid

  #grid

  [dataSource]="data"

  [allowPaging]="true"

  [allowSorting]="true"

  [allowFiltering]="true"

  [filterSettings]="filterSettings"

  [editSettings]="editSettings"

> 

  <e-columns>

    <!-- bound the columns to the grid's e-column using ngFor -->

    <e-column

      *ngFor="let column of columns"

      [field]="column.field"

      [headerText]="column.headerText"

      [width]="column.width"

      [editType]="column.editType"

      [type]="column.type"

      [textAlign]="column.textAlign"

    >

    </e-column>

  </e-columns>

</ejs-grid>

 

 

You can access the sample from the following link:

Sample: https://stackblitz.com/edit/angular-grid-column-using-ngfor

Please feel free to reach out to us if you need any further assistance or have additional queries.

Regards,
Santhosh I