Kendo UI resize的使用

Kendo UI很多控件在初始化时需要处于可见状态，才能正常显示，否则会出现很多意想不到的情况。不可见的情况包括：

• 处于关闭状态的Window或对话框
• 切分窗处于最小化的部分
• 分页控件的未选中页面
  等等，如果一个控件比如网格，在初始化时处于不可见状态，很多属性是失效的。这里举一个例子。在弹出窗中，放置一个网格，我们已经设定了网格的高度，可是打开弹出窗后，会发现高度设置没起作用。代码如下：

   <div id="divFields" data-role="window" data-bind="visible: isFieldsWinOpen">
        <div class="form container" style="width:800px;height:600px;margin:10px;padding:10px">
            <div class="form-group row">
                <span id="cmdSetFields" class="k-button hide-on-narrow" data-bind="click: closeFieldWin">保存</span>
            </div>
            <div class="form-group row">
                <div id="selectedfieldgrid" class="grid" 
                     data-role="grid"
                     data-bind="source: currentNodeFields"
                     data-editable='true'
                     data-height='500'
                     data-columns='[
                                  {"field":"Name","title":"变量名称", "width:": "200px"},
                                  {"field":"Title","title":"变量说明", "width:": "200px"},
                                  {"field":"Selected","title":"选择","width:": "200px",template: "#=GetSelected(Selected)#"}]'
                     data-scrollable="true">

                </div>
            </div>

        </div>

效果如下：

图片.png

网格设置的高度不起作用。这种情况下，需要在打开弹出窗后，调用网格的resize方法，进行调整：

                openFieldWin: function () {
                    this.set("isFieldsWinOpen", true);
                    $("#divFields").data("kendoWindow").center().open();
                    $("#selectedfieldgrid").data("kendoGrid").resize();
                }

效果如下：

图片.png