Question

我有一个定义为

的kendo网格的编辑器模板

<script id="my-editor-template" type="text/x-kendo-template"> 
    <div class="k-edit-label">
        <label for="ContactName">Contact</label>
    </div>
    <div data-container-for="ContactName" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
    </div>
    <!-- more fields, etc -->
</script>

在我的网格定义中，我可以像这样编辑：

        editable =
        {
            mode: 'popup',
            template: kendo.template($('#my-editor-template').html()),
            confirmation: 'Are you sure you want to delete rec'
        };

但我想让弹出窗口更宽广。我尝试在

中包装模板的内容

<div style="width: 800px;"></div>

但弹出窗口保持不变，并使内容可滚动（即400px窗口内的800px内容）。

我知道我可以做一个

$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();

窗口打开后，

窗口的所有内容都被格式化为400px，感觉有点hackish。我没有办法在模板标记中指定大小吗？

Answer 1

Kendo网格弹出窗口正在使用kendo窗口，因此您可以像这样设置高度和宽度

editable: {
  mode: "popup",
  window: {
      title: "My Custom Title",
      animation: false,
      width: "600px",
      height: "300px",
  }
}

以下是dojo，但由于我没有定义自定义模板，因此仍然使用默认模板，因此窗口大小已经为600 x 300但内容不是。

Answer 2

经过一个小时+长时间的研究后，代码修复了我的问题。我不得不把这段代码放在编辑事件中。

$(".k-edit-form-container").attr('style', "width:auto");

如何在kendo网格编辑器模板上更改窗口大小？

2 个答案: