0

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>

Update

 setTimeout(function () {
            // Grid’s empty row content element is retrieved
            var emptyRowEle = this.assetGrid.element.querySelector('.e-emptyrow td');
            // The default contents are removed from the element
            emptyRowEle.innerHTML = "<p class='w-100 text-center'><span class='font-bold'>No results</span><br />Try adjusting your search by changing or removing search text.</p>";
        }.bind(this), 5)

enter image description here

Able to align the text in the center

San Jaisy
  • 15,327
  • 34
  • 171
  • 290

1 Answers1

1

Currently the Syncfusion 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)
}

Please find the below sample prepared based on this for your reference,

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

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

Sujith
  • 96
  • 2