CODEWITHSUNDEEP
javascriptkendo-ui
Dale Fraser
Dale Fraser

Reputation: 4748

KendoUI Window Dynamic Open

I would like to use the kendoui window to open a dynamic number of windows and ideally if that window already existed by name it would just show the same window.

So i'm imagining a javascript function

win(name, url, width)

And I would call this from various places

<button onclick="win('my window', '/example/view', 100);">click me</button>

Im not really sure how to create a window like this using its name and how to check if it already exists.

The app is very simple, a range of menus and each menu opens a window, but the menu is driven from database content, thus I cant predefine all the windows

Upvotes: 0

Views: 2127

Answers (2)

OnaBai
OnaBai

Reputation: 40887

In your win function you should check if you already have that KendoUI window created. If so, you reuse the existing one and open it. Otherwise you create it.

Example:

function win (name, url, width) {
    var my_win = $("#" + name).data("kendoWindow");
    if (my_win) {
        // already exist, reuse it
        my_win.open();
    } else {
        // does not exist, create it
        // create a div with id "name" for my window and append it to 
        // to a container ("example") where all the windows are going to be.
        my_win = $("<div id='" + name + "'></div>").kendoWindow({
              title: name,
              content: url,
              width: width,
              appendTo: "#example",
              visible: true
        });
    }
}

EDIT: For invoking this from an anchor element (a) define win global to your page and define the anchors as follow.

  <a href="javascript: win('id1', '/page1', 200);">Open id1 window</a>
  <a href="javascript: win('id2', '/page2', 200);">Open id2 window</a>

Example here: http://dojo.telerik.com/@OnaBai/ekIba/2

Upvotes: 4

gamini2006
gamini2006

Reputation: 299

Once KendoUI window open it will create set of HTML elements starting with <div class="k-widget k-window" data-role="....... For each window it will create separate set of HTMLs.

So you can filter all those windows with var kendoeWinElems = $('.k-window')

And on a loop dig down to the title area (.k-window-title) and compare with the name and title of the window and then call relaventWindow.data("kendoWindow").open();

For ease of comparison and filtering I suggest you to add data attributes or classes as needed for buttons and Kendo windows

Hope this help!!!!

Upvotes: 0

Related Questions