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. Image for the cookie policy date
close icon

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

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>";


3 Replies 1 reply marked as answer

SI Santhosh Iruthayaraj Syncfusion Team March 7, 2023 03:41 PM UTC

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



IC Ivan Chiu March 7, 2023 10:43 PM UTC

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 pageSettingsObject;
  public columns = [ ];
  
  ngOnInit(): void{
this.employeeService.getGridData().then((response: any) => {
this.columns = response.column;
this.data = response.data;
}
}
}


SI Santhosh Iruthayaraj Syncfusion Team March 8, 2023 04:13 PM UTC

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


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon