下面是我的网格并尝试实现持久化网格状态(Kendo Persist)。持久化网格的方法已经奏效,但是现在我所有的自定义列模板都不再起作用。我们经常使用枚举,因此我们需要评估这些值并将其更改为文本,以便用户理解。任何帮助都会很棒。
<kendo-grid #grid
[data]="gridSettings.gridData"
[pageSize]="gridSettings.state.take"
[skip]="gridSettings.state.skip"
[sort]="gridSettings.state.sort"
[filter]="gridSettings.state.filter"
[filterable]="true"
[sortable]="true"
[pageable]="{
buttonCount: 5,
info: true,
type: 'numeric',
pageSizes: [25, 50, 75, 100],
previousNext: true
}"
[groupable]="true"
[group]="gridSettings.state.group"
[columnMenu]="true"
[resizable]="true"
[reorderable]="true"
(columnReorder)="onReorder($event)"
(columnResize)="onResize($event)"
(columnVisibilityChange)="onVisibilityChange($event)"
(dataStateChange)="dataStateChange($event)"
(edit)="editHandler($event)"
(remove)="removeHandler($event)">
<kendo-grid-column *ngFor="let col of gridSettings.columnsConfig"
[field]="col.field"
[title]="col.title"
[width]="col.width"
[filter]="col.filter"
[filterable]="col.filterable"
[hidden]="col.hidden"
[format]="col.format">
<ng-container *ngIf="col.field === UnitStatus">
<ng-template kendoGridColumnMenuTemplate let-service="service">
<kendo-grid-columnmenu-sort [service]="service">
</kendo-grid-columnmenu-sort>
<kendo-grid-columnmenu-lock [service]="service">
</kendo-grid-columnmenu-lock>
<div class="c-column__menu-title"><span class="k-icon k-i-filter"></span> Filter</div>
<div class="c-column__menu-dropdown">
<kendo-grid-dropdown-filter [filter]="filter"
[data]="unitStatusFilterArray"
textField="UnitStatusText"
valueField="col.field">
</kendo-grid-dropdown-filter>
</div>
</ng-template>
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-dropdown-filter [filter]="filter"
[data]="unitStatusFilterArray"
textField="UnitStatusText"
valueField="col.field">
</kendo-grid-dropdown-filter>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<p><span *ngIf="dataItem.UnitStatus === 0" class="detail-label">Dormant</span></p>
<p><span *ngIf="dataItem.UnitStatus === 1" class="detail-label">Checked Out</span></p>
<p><span *ngIf="dataItem.UnitStatus === 2" class="detail-label">Inspecting</span></p>
<p><span *ngIf="dataItem.UnitStatus === 3" class="detail-label">Researching</span></p>
<p><span *ngIf="dataItem.UnitStatus === 4" class="detail-label">Damaged</span></p>
<p><span *ngIf="dataItem.UnitStatus === 5" class="detail-label">On Hold</span></p>
<p><span *ngIf="dataItem.UnitStatus === 6" class="detail-label">Available</span></p>
<p><span *ngIf="dataItem.UnitStatus === 7" class="detail-label text-brand">In Transit</span></p>
<p><span *ngIf="dataItem.UnitStatus === 8" class="detail-label">Consumed</span></p>
<p><span *ngIf="dataItem.UnitStatus === 9" class="detail-label">Merged</span></p>
<p><span *ngIf="dataItem.UnitStatus === 10" class="detail-label">In Use</span></p>
</ng-template>
</ng-container>
</kendo-grid-column>
<ng-container *ngFor="let field of dynamicGridElements; let i = index">
<kendo-grid-column field="{{field?.FieldId}}" title="{{field?.Title}}" class="mobile-hidden" [width]="150"></kendo-grid-column>
</ng-container>
<kendo-grid-command-column [columnMenu]="false" [width]="350">
<ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
<svg class="u-icon u-icon--white padding-top__10 cursor-pointer" (click)="refreshGrid()">
<use xlink:href="#svg-refresh"></use>
</svg>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<button *ngIf="permissions?.CanEditArticleAttributes" kendoGridEditCommand kendoButton [primary]="true"><span class="k-icon k-i-pencil margin-right__5"></span>Edit</button>
<button (click)="openArticleDetails(dataItem)" class="k-button">Details</button>
<button kendoGridRemoveCommand class="k-button-delete">Delete</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>