This is a migrated thread and some comments may be shown as answers.

Muliptle Kendo Window loading on runtime

8 Answers 182 Views
Window
This is a migrated thread and some comments may be shown as answers.
Prakash
Top achievements
Rank 1
Prakash asked on 05 Sep 2012, 01:28 PM
I am trying to loads multiple window on runtime based on my xml configure.Xml contains like window name,height,width,url
using "for" loop to creating window 
But i am not able to load the multiple window on Runtime
Please advice me ,how to proceed futher.

Code Sample
        for (var i = 0, sl = jsonDoc.widget.length; i < sl; i++)
          {
             var panelname;
             panelname = "#panel" + i;
             $(panelname).kendoWindow(
             {
                draggable: true,
                name: jsonDoc.widget[i].name,
                title: jsonDoc.widget[i].title,
                height: jsonDoc.widget[i].height,
                width: jsonDoc.widget[i].width,
                resizable: true,
                actions: ["Minimize", "Maximize", "Refresh", "Close"],
                content: {
                    url: jsonDoc.widget[i].url
                }
              });
            }


 

 

 

 

 

 

8 Answers, 1 is accepted

Sort by
0
Nohinn
Top achievements
Rank 1
answered on 05 Sep 2012, 04:11 PM
First be sure to have the n dom elements to apply the kendoWindow function, then, your loop is ok just modify these lines:
for (var i = 0, sl = jsonDoc.widget.length; i < sl; i++)
         {
            var panelname;
            panelname = "#panel" + i;
            $(panelname).kendoWindow(
            {
               name: jsonDoc.widget[i].name,
               title: jsonDoc.widget[i].title,
               height: jsonDoc.widget[i].height,
               width: jsonDoc.widget[i].width,
               actions: ["Minimize", "Maximize", "Refresh", "Close"],
               content: jsonDoc.widget[i].url
             });
           }

No need for draggable: true neither resizable: true as the default value for those options is true.
As for setting the url option => content: url (as string)
0
Prakash
Top achievements
Rank 1
answered on 06 Sep 2012, 04:18 AM
Thanks for your input.
Acutually i have four "div" in my ASP.Net MVC view like below

This is my html:

<div id="panel0" class="k-window" style="float:left; position:relative ; top:45%;min-height:200px; min-width:320px;background-color:Red"/>
<div id="panel1" class="k-window" style="float:left; position:relative ; top:45%;min-height:200px; min-width:320px;background-color:Aqua"/>
<div id="panel2" class="k-window" style="float:left; position:relative ; top:45%;min-height:200px; min-width:320px;background-color:Gray"/>
<div id="panel3" class="k-window" style="float:left; position:relative ; top:45%;min-height:200px; min-width:320px;background-color:Blue"/>

What i am trying to do load or place the my runtime window in the above four div.
But real, shows in only one window(this is also not proper) in my screen and other not in appear and place.
And I ensured and verified my DOM elements in the loop, all are good.
Note: I never define the window in design time and windows are created on runtime through the for loop only and try to place in div(see previous post)


0
Accepted
Nohinn
Top achievements
Rank 1
answered on 06 Sep 2012, 07:55 AM
I tried to make a sample in jsbin following your code and modifying it a bit:
http://jsbin.com/ekutig/1 

Is this what you're trying to get working?
0
Prakash
Top achievements
Rank 1
answered on 06 Sep 2012, 08:44 AM

Fantastic Nohinn

Thanks lot & Thanks for your valuable time

You are really saved my time

Great!!!!
0
Prakash
Top achievements
Rank 1
answered on 06 Sep 2012, 09:21 AM
Hi Nohinn,

All windows are loaded in my page.
But it not loaded in div position ,loads other place
same time the windows are loaded in one another one
There is any way to align the window properly as per  div position(i.e area) ???

Thanks
Prakash
0
Accepted
Nohinn
Top achievements
Rank 1
answered on 06 Sep 2012, 09:32 AM
http://jsbin.com/ekutig/3 
Take a look in the code after the kendoWindow instance. All you need to position them is, once they're created, set the left and/or top css property to the window (dom element with class k-window), and to do so starting at the panel + number element you need to get the parent element.
$('#panel0').parent() => this will give you the k-window element.
And on this element apply any css rule to position it like in this sample.

Any style you apply to the divs affects the content area of the window, but not the window itself.
0
Prakash
Top achievements
Rank 1
answered on 06 Sep 2012, 09:56 AM
Thanks Nohinn
0
Prakash
Top achievements
Rank 1
answered on 10 Sep 2012, 04:11 AM
How to set window drag-able area and implement to docking system
I have four Kendo windows in my web page.
I am loading four windows during run time using JQuery.
Same time i need to indicate drag able area for the four windows.
As per our requirement, the windows should drag limited area in web page and window docking system.
Please instruct me, there is any way to do this?
Tags
Window
Asked by
Prakash
Top achievements
Rank 1
Answers by
Nohinn
Top achievements
Rank 1
Prakash
Top achievements
Rank 1
Share this question
or