使用 Angular 13 在 ejs-grid 中自定义无记录模板

Question

将 ejs-grid 与 Angular 一起使用并尝试自定义 No Records data 模板无法做到

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

这一点从此参考 https://www.syncfusion.com/feedback/24388/no-easy-angular-way-to-change-no-records-text，我发现emptyRecordTemplate，但它不起作用。

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

更新

 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)

能够将文本居中对齐

Answer 1

目前，Syncfusion EJ2 Grid 不支持空记录模板。但是，我们已经将此要求的功能任务记录为“需要为空记录模板提供支持”，并将其添加到我们的功能请求数据库中。在每个发布周期的规划阶段，我们都会审查所有开放功能，并根据具体参数（包括产品愿景、技术可行性和客户兴趣）确定要实施的功能。此功能将包含在我们即将发布的任何版本中。

您可以跟踪此请求的当前状态，查看建议的解决方案时间表，并通过以下反馈链接与我们联系以获取任何进一步的疑问，

反馈链接： https://www.syncfusion.com/feedback/28548/need-to-provide-support-for-empty-record-template

所以现在我们建议您自定义 Grid 的空记录内容通过使用下面的方法，

可以通过修改Grid的create事件中的空行元素内容来实现此要求（在超时函数中，以便Grid初始化不冲突），如下面的代码片段所示，

// 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)
}

请找到下面准备的示例在此供您参考，

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

API： https://ej2.syncfusion.com/angular/documentation/api/grid/#创建了