Is there any way to customize the No Records to display row using angular

[anandjaisy]

Using ejs-grid with angular and trying to customize the No Records data template couldn't do it

<ejs-grid #assetGrid id="asset_grid" class="scrollable-body-grid"
                          (dataBound)='dataBound($event)'
                          [height]='gridBodyCalculatedHeight'
                          [dataSource]='assetList | async'
                          [enableHover]='false'
                          [searchSettings]='false'
                          allowPaging='true'
                          allowSorting="true"
                          [allowResizing]='true'
                          [pageSettings]='pageSettings'
                          (dataStateChange)='dataStateChange($event)'
                          [toolbar]="toolbar"
                          allowExcelExport='true'
                          (toolbarClick)='toolbarClickHandler($event)'
                          showColumnChooser='true'>
                    <e-columns>
                        <ng-template #template ngFor let-column [ngForOf]="gridColumns">
                            <ng-container *ngIf="column.field === 'name'">
                                <e-column [field]="column.field" [width]="column.width" [visible]="column.field !== 'id' && column.field !== 'vendorId'"
                                          [headerText]="column.headerText">
                                    <ng-template #template let-data>
                                        <a class="gridLink" title="{{data.name}}" (click)="openAsset(data)">{{data.name}}</a>
                                    </ng-template>
                                </e-column>
                            </ng-container>
                            <ng-container *ngIf="column.field !== 'name'">
                                <e-column [field]="column.field" [width]="column.width" [visible]="column.field !== 'id' && column.field !== 'vendorId'"
                                          [headerText]="column.headerText" [showInColumnChooser]="column.field !== 'id' && column.field !== 'vendorId'">
                                </e-column>
                            </ng-container>

                        </ng-template>
                    </e-columns>
                    <ng-template #EmptyRecordTemplate>
                        custom text
                      </ng-template>
                </ejs-grid>

From this reference https://www.syncfusion.com/feedback/24388/no-easy-angular-way-to-change-no-records-text, I found emptyRecordTemplate, but it is not working.

<ng-template #emptyRecordTemplate>
    custom text
  </ng-template>

[sujithvj]

Hi @anandjaisy ,

Greetings from Syncfusion.

Currently the EJ2 Grid does not have support for empty record template. However, we have already logged feature task for this requirement as “Need to provide support for empty record template” and added it to our feature request database. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. This feature will be included in any of our upcoming releases.

You can track the current status of this request, review the proposed resolution timeline, and contact us for any further inquiries through the below feedback link,

Feedback Link: https://www.syncfusion.com/feedback/28548/need-to-provide-support-for-empty-record-template

So for now we suggest you to customize the empty record content for Grid by using the below approach,

This requirement can be achieved by modifying the empty row element content in Grid’s created event(in a timeout function so that Grid initialization is not conflicted) as demonstrated in the below code snippet,

// Grid’s created event handler onCreated() { setTimeout(function () { // Grid’s empty row content element is retrieved var emptyRowEle = this.gridObj.element.querySelector('.e-emptyrow'); // The default contents are removed from the element emptyRowEle.innerHTML = ""; // Here you can create the required content and append it to the empty row element var span = document.createElement('span'); span.innerText = "Loading..."; span.classList.add('custom-style'); emptyRowEle.append(span); }.bind(this), 5) }

We have prepared a sample based on this for your reference. You can find it below,

Sample: https://stackblitz.com/edit/angular-bqcnts?file=app.component.ts

API: https://ej2.syncfusion.com/angular/documentation/api/grid/#created

Please get back to us if you require any further assistance.

Regards, Sujith R