Add dynamic column in table with editable headers

[Mukarram Ali]

I want to create a table where user can add dynamic columns on Add button click shown in attached below pic and also can edit header names. In the table 1st column would be fixed default input text and remaining all would be checkbox columns which will be dynamically added on button click every time.

[Vinitha Balasubramanian]

Hi Mukarram,

Greetings from Syncfusion support.

Query: Add dynamic column in table with editable headers

Based on your query, we understand that you want to edit the header values in the EJ2 Grid. However, we regret to inform you that our Grid component does not support editing of header values.

Regards,

Vinitha Balasubramanian

[Mukarram Ali]

what about 2nd part of above query i.e.  user can add dynamic columns on Add button click shown in attached above pic.
In the table 1st column would be fixed default input text and remaining all would be checkbox columns which will be dynamically added on button click every time.

[Mukarram Ali]

my query is still open. Could you please look into it(above comment).

[Rajapandiyan Settu]

Hi Mukarram,

By using the following code, you can dynamically add columns to the Grid component through the button click.

refreshColumns: https://ej2.syncfusion.com/angular/documentation/api/grid/#refreshcolumns
getColumnByField: https://ej2.syncfusion.com/angular/documentation/api/grid/#getcolumnbyfield

 

  btnClick1(args) {

    if (this.grid.getColumnByField('Verified1') == null) {

      // push the new column to the Grid’s Columns

      this.grid.columns.push({

        field: 'Verified1',

        width: 120,

        displayAsCheckBox: true,

      } as any);

      // refresh the Grid columns

      this.grid.refreshColumns();

    }

  }

 

Sample: https://stackblitz.com/edit/angular-kavrgs?file=src%2Fapp.component.ts

Regards,

Rajapandiyan S