CODEWITHSUNDEEP
kendo-ui
lg0173
lg0173

Reputation: 234

Kendo UI : how create window with others components

I want create a kendo window with 2 components : kendo multiselect and kendo upload.

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

What the best way ? How to do ? Do you have a little sample ?

Thanks for your help

Upvotes: 0

Views: 448

Answers (1)

Drew B.
Drew B.

Reputation: 1145

I'm not going to give you a full answer as this is a stepping stone for you to continue learning and figuring out it, but you can just include other components within the actual <div> of your window. This is essentially the basics of 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>

Upvotes: 1

Related Questions