Button disappear on grid if there is a loop for <e-column>

[Ivan Chiu]

Hi,

I am trying to show button columns on the grid but I noticed once I added the dynamic column that loops through ngFor, the button disappears. Then I tried a different approach by adding the button in the typescript as html string. The button shows on the grid but does not trigger the (click). I am just wondering what is the correct way to do this dynamic + button column. I will be happy if either approach can be solved.

Thanks for the help!!!

First approach: goal - show the static button column with dynamic e-column
<ejs-grid  [dataSource]="gridData">

            <e-columns>

                <e-column field='ID' headerText='Employee' type="string" width='150'>

                    <ng-template #template let-data>

                        <button class="btn btn-success" (click)="test(data)" >000</button>

                    </ng-template>

                </e-column>

                <e-column *ngFor="let column of columnList" field="{{column.displayValue}}" headerText="{{column.columnName}}" width="{{column.width}}" [disableHtmlEncode]='false'>

                </e-column>

            </e-columns>

        </ejs-grid>

Second approach: goal - being able to trigger the (click) for the html encode button on grid

<ejs-grid  [dataSource]="gridData">

            <e-columns>

                <e-column *ngFor="let column of columnList" field="{{column.displayValue}}" headerText="{{column.columnName}}" width="{{column.width}}" [disableHtmlEncode]='false'>

                </e-column>

            </e-columns>

        </ejs-grid>

this.columnList.push({ columnName: "", displayValue: "buttonColumn", width: "150" });

this.gridData ["buttonColumn"] = "<ng-template #template let-data><button class='btn btn-success' (click)='test(data)'>000</button></ng-template>";

[Santhosh Iruthayaraj]

Hi Ivan,

Greetings from Syncfusion support.

Query: Button disappear on grid if there is a loop for <e-column>

We have reviewed your query and have found a solution to your concern. We have used ngForOf to achieve your requirement without button disappearing. And also triggered click event of the button. We have attached the code snippet to achieve your requirement and a sample link for your reference. You can find the code snippet below:

[app.component.html]

 

<ejs-grid #grid [dataSource]='data' id='Grid' [allowPaging]="true" [gridLines]="lines">

      <e-columns>

        <e-column field='ID' headerText='Employee' type="string" width='150'>

          <ng-template #template let-data>

              <button class="btn btn-success" (click)="test($event)" >000</button>

          </ng-template>

      </e-column>

        <ng-template ngFor let-column [ngForOf]="columns">

          <e-column [field]="column.fieldName" [headerText]="column.headerName" [width]="80"></e-column>

        </ng-template>

      </e-columns>

    </ejs-grid>

Sample: https://stackblitz.com/edit/angular-263829-toggle-grid-view-in-card-8u6uqb?file=app.component.ts,app.component.html

We hope this solution addresses your concern. If you have any further queries or issues, please feel free to reach out to us.

Regards,

Santhosh Iruthayaraj

[Ivan Chiu]

Thank you for the quick reply, I checked the example and applied the change but still no good. Then I noticed one thing, the button does show if the column value is set on page load. However, my case here is a dynamic table in which both columns and data are unknown until I got a response back from the server. If I set the column value after the server call, then the rest of the grid will show except for the button column.

like the following:

export class AppComponent {

  public data = employeeData;

  public pageSettings: Object;

  public columns = [ ];

  

  ngOnInit(): void{

this.employeeService.getGridData().then((response: any) => {

this.columns = response.column;

this.data = response.data;

}

}

}

[Santhosh Iruthayaraj]

Hi Ivan,

Query: Button not showing after server call

We have reviewed your query and achieved your requirement by using the ngIf to render the button when the columns property is not empty. We have prepared a code snippet that will help you achieve your requirement.

[app.component.html]

 

<e-column *ngIf="columns.length != 0" field='ID' headerText='Employee' type="string" width='150'>

            <ng-template #template let-data>

                <button class="btn btn-success" (click)="test($event)" >000</button>

            </ng-template>

          </e-column>

We have also attached the sample for your reference.

Sample: https://stackblitz.com/edit/angular-263829-toggle-grid-view-in-card-t2ehmf?file=app.component.html

If you have any further queries or concerns, please do not hesitate to reach out to us.

Regards,

Santhosh I