Kendo UI:如何与其他组件一起创建窗口

时间:2019-05-16 14:22:06

标签: kendo-ui

我想创建一个包含2个组件的kendo窗口:kendo multiselect和kendo上传。

$("#win").kendoWindow({
  actions: ["Close"],
  draggable: false,
  modal: true,
  pinned: false,
  resizable: true,
  title: "Window with components",
  width: "40%",
  height: "40%"
}).data("kendoWindow");

最好的方法是什么?怎么做 ? 你有一些样品吗?

感谢您的帮助

1 个答案:

答案 0 :(得分:1)

我不会为您提供完整的答案,因为这是您继续学习并弄清楚它的垫脚石,但是您可以在窗口的实际<div>中包括其他组件。这实质上是HTML的基础。

$("#multiselect").kendoMultiSelect({
  dataSource: [
    { name: "Apples" },
    { name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "name"
});

$("#win").kendoWindow({
  actions: ["Close"],
  draggable: true,
  modal: true,
  pinned: false,
  resizable: true,
  title: "Window with components",
  width: "40%",
  height: "40%"
}).data("kendoWindow");
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>

<div id='win'>
  <div id='multiselect'></div>
  <!-- More components -->
</div>