具有锁定列的Kendo Grid分为下一行

Question

我有一个包含许多列的kendo网格。网格宽度为100％第一个列也被锁定。在我获取/设置网格数据的ajax调用之后，网格的右侧显示在网格的左侧下方。它与内部尺寸计算的完成方式有关。如果网格具有特定宽度，则问题不会显示。然而，这并不令人满意，因为网格在不同的浏览器中不会以相同的方式显示，并且不会像宽度为100％时那样调整大小。

还有其他人看过这个或知道如何预防吗？

请参阅下图

Answer 1

需要以像素显式指定所有网格列的宽度，以使锁定列功能按预期工作：

LINK TO DOCS

满足此要求后，您可以将网格的宽度设置为100％，网格仍将按预期显示：

<kendo-grid [data]="gridData" [height]="370" style="width: 100%">
        <kendo-grid-column field="ProductID" title="ID" width="50" [locked]="true">
        </kendo-grid-column>
        <kendo-grid-column field="ProductName" title="Name" width="250" [locked]="true">
        </kendo-grid-column>
        <kendo-grid-column field="Category.CategoryName" title="Category" width="200">
        </kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Price" width="280">
        </kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" title="In stock" width="280">
        </kendo-grid-column>
        <kendo-grid-column field="Discontinued" title="Discontinued" width="220">
            <ng-template kendoGridCellTemplate let-dataItem>
                <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
            </ng-template>
        </kendo-grid-column>
    </kendo-grid>

http://plnkr.co/edit/3kmOf54DT7JUG68qUdaP?p=preview