Angular & kendo ui，宽度和高度剑道窗口答案

【问题标题】：Angular & kendo ui, width and height kendo windowAngular & kendo ui，宽度和高度剑道窗口
【发布时间】：2017-05-17 16:00:34
【问题描述】：

我希望为剑道网格的内容动态设置剑道窗口的高度和宽度这是我的剑道窗口

 <div kendo-window="Operation.OperCustWind"
         k-width="800"
         k-height="700"
         id="operCustWindow"
         k-visible="false"
         modal="true"
         k-on-close="Operation.closeOperCustWindindow()">
        <div ng-show="Operation.IsOpers.isOpenCurrencyGrid">
            <div kendo-grid="Operation.currencyGrid" k-options="Operation.CurrencyGridOptions"></div>
        </div>
        <div ng-show="Operation.IsOpers.isOpenDecisionGrid">
            <div kendo-grid="Operation.decisionGrid" k-options="Operation.DecisionGridOptions"></div>
        </div>
        <div ng-show="Operation.IsOpers.isOpenCodeA">
            <div kendo-grid="Operation.CodeAGrid" k-options="Operation.CodeAGridOptions"></div>
        </div>
        <div ng-show="Operation.IsOpers.isOpenCodeB">
            <div kendo-grid="Operation.CodeBGrid" k-options="Operation.CodeBGridOptions"></div>
        </div>
        <div ng-show="Operation.IsOpers.isOpenCodeC">
            <div kendo-grid="Operation.CodeCGrid" k-options="Operation.CodeCGridOptions"></div>
        </div>
        <div ng-show="Operation.IsOpers.isOpenCodeD">
            <div kendo-grid="Operation.CodeDGrid" k-options="Operation.CodeDGridOptions"></div>
        </div>
        <div ng-show="Operation.IsOpers.isOpenCodeE">
            <div kendo-grid="Operation.CodeEGrid" k-options="Operation.CodeEGridOptions"></div>
        </div>
        <div ng-show="Operation.IsOpers.isOpenCodeVid">
            <div kendo-grid="Operation.CodeVidGrid" k-options="Operation.CodeVidGridOptions"></div>
        </div>
        <div ng-show="Operation.IsOpers.isOprOZN">
            <div kendo-grid="Operation.OprOznGrid" k-options="Operation.OprOznGridOptions"></div>
        </div>
        <div ng-show="Operation.IsOpers.isOprVid2">
            <div kendo-grid="Operation.OprVid2Grid" k-options="Operation.OprVid2GridOptions"></div>
        </div>
        <div ng-show="Operation.IsOpers.isOprVid3">
            <div kendo-grid="Operation.OprVid3Grid" k-options="Operation.OprVid3GridOptions"></div>
        </div>
        <div ng-show="Operation.IsOpers.isOprRiVid">
            <div kendo-grid="Operation.OprRiVidGrid" k-options="Operation.OprRiVidGridOptions"></div>
        </div>
    </div>

这里是一个调用函数“Operation.OprOznGrid”

vm.getOperOzn = function () {
        vm.IsOpers.isOprOZN = true;
        vm.OperCustWind.setOptions({
            title: "Довідник K_DFM10"
        });
        vm.OperCustWind.open().center();
        vm.OprOznGrid.dataSource.read();
    }

我知道

我希望为剑道网格的内容动态设置剑道窗口的高度和宽度

请帮帮我，我将不胜感激！！！对不起我的英语））

【问题讨论】：

你把高度和宽度设置为k-grid-content了吗？
我设置了列的宽度，高度没有

标签： javascript html css angularjs kendo-ui

【解决方案1】：

关于高度，您可以简单地移除 Kendo UI 窗口的高度，小部件会根据其内容的高度展开和缩小。

调整宽度并不是那么简单。如果 Window 没有宽度，它将根据 Grid 的宽度扩展。同时，网格默认为 100% 宽，并将尽可能扩大。出现恶性循环，可能导致窗口过度扩大。

我的建议是对 Grid 应用 min-width 和 max-width 样式，或者为 Grid 设置显式宽度样式，这取决于所有列宽的总和。这样，Grids 和 Window 都只会扩大到一定程度。

【讨论】：

当我移除高度时，剑道窗口不会在中心打开...我应该在中心打开剑道窗口。谢谢回答！！
为了完整起见，如果您遇到与@VladLutsenko 相同的问题，即您的窗口未居中打开，请尝试更改打开窗口的方式。因此，您应该调用 center().open() 而不是 open().center() 。至少这对我有用。

【解决方案2】：

第 1 步：您可以添加单元格 css 类

.cell {
   white-space: normal;
}

第 2 步：你也可以在这里检查？ Auto Resize Grid

【讨论】：