Пользовательский интерфейс Kendo: как создать окно с другими компонентами

Question

Я хочу создать окно кендо с 2 компонентами: мультиселект кендо и загрузка кендо.

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

Какой самый лучший способ? Как сделать ? У вас есть маленький образец?

Спасибо за вашу помощь

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