Kendo网格列模板不能与持久化网格状态一起使用

时间:2018-09-11 17:52:59

标签: angular kendo-ui-angular2

下面是我的网格并尝试实现持久化网格状态(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>

0 个答案:

没有答案