Kendo Grid Angular 2 - 修复组列不呈现（间歇性）

Question

使用：Kendo Grid Angularjs 2版本显示用户列表。

问题：间歇性地渲染问题以显示locked列数据，因为它只显示第一个锁定的行。

请参阅下面的屏幕截图，其中突出显示了问题：

HTML模板代码：

<kendo-grid
        [scrollable]="'scrollable'"
        [data]="usersList | async"
        [pageSize]="pageSize"
        [skip]="skip"
        [sort]="sort"
        [filter]="filter"
        [sortable]="{
            allowUnsort: true,
            mode: multiple
            }"
        [pageable]="true"
        [filterable]="true"
        (dataStateChange)="dataStateChange($event)"
>
    <kendo-grid-column field="first_name" title="First Name" width="200" [locked]="true">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button [routerLink]="['/users/edit/' + dataItem.id]" title="Edit" type="button" class="btn btn-outline btn-default"><i class="fa fa-edit"></i></button>
            {{dataItem.first_name}}
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="last_name" title="Last Name" width="125" [locked]="true">
        <ng-template kendoGridCellTemplate let-dataItem>{{dataItem.last_name}}</ng-template>
    </kendo-grid-column>

    <kendo-grid-column-group media="(min-width: 450px)" [locked]="false">

        <kendo-grid-column field="username" title="Username" width="200"></kendo-grid-column>
        <kendo-grid-column field="email" title="Email" width="350"></kendo-grid-column>
        <kendo-grid-column field="created_at" title="Created On" width="150" [headerStyle]="{'text-align': 'center'}" class="text-centre" [format]="'{0:dd/MM/y}'">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <kendo-grid-date-filter-cell [showOperators]="true" [column]="column" [filter]="filter"></kendo-grid-date-filter-cell>
            </ng-template>
            <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem.created_at | date:'dd/MM/y' }}</ng-template>
        </kendo-grid-column>

    </kendo-grid-column-group>
</kendo-grid>

Answer 1

显然我已经通过在css上添加以下课程解决了这个问题。

.k-grid-content-locked {
  height: calc(100% + 0px) !important;
}