Angular & kendo ui, width and height kendo window

Question

I want the height and width of the kendo window to be dynamically set for the content of the kendo grid this is my kendo-window

 <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>

here is a call function "Operation.OprOznGrid"

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

i get this

I want the height and width of the kendo window to be dynamically set for the content of the kendo grid

Please help me, I will be very grateful !!! sorry for my english ))

Answer 1

With regard to heights, you can simply remove the Kendo UI Window height and the widget will expand and shrink, depending on the height of its content.

Adjusting the width is not that trivial. If the Window has no width, it will expand, depending on the Grid's width. At the same time, the Grid is 100% wide by default and will expand as much as it can. A vicious circle occurs, which can cause the Window to expand too much.

My recommendation is to apply min-width and max-width styles to the Grid s, or set explicit width styles to the Grids, which depend on the sum of all column widths. In this way both the Grids and Window will expand to some extent only.

Answer 2

Step 1: You can add cell css class

.cell {
   white-space: normal;
}

Step 2: You can also check here? Auto Resize Grid