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

Pass content to window overriding content from element used to initialize the window

1 Answer 100 Views
Window
This is a migrated thread and some comments may be shown as answers.
Troy
Top achievements
Rank 1
Troy asked on 27 Mar 2013, 01:02 AM
Is there a way to just pass content to a window instead of having the window load its data from the element used to initialize it? Right now I'm displaying a window after a user clicks a help link like this:

deleteAttribute = function(evt){
  evt.preventDefault();
  $(evt.target).kendoWindow({
    position: "right",
    height: '100px',
    title: 'Confirm Deletion',
    width: '325px'
  });
  var win = $(evt.target).data('kendoWindow');
  win.content(Mustache.to_html($('#confirmDeleteAttributeTemplate').html(), {id: $(evt.target).closest('li.attribute').attr('id')}));
  win.open();
  win.center();
};

I  want the window to position itself near the delete link...that's why I want to use evt.target to initialize the window. The content of the delete link is an icon. Passing in content using the content method appends the content to the window instead of overwriting it. The window also removes the event target from the DOM???

*** Update
I am now using this code:
deleteAttribute = function(evt){
  evt.preventDefault();
  var win = $('.window').data('kendoWindow');
  if(!win) {
    $('.window').kendoWindow({
      title: 'Confirm Deletion',
      width: '325px',
      height: '100px'
    })
    .data('kendoWindow');
    win = $('.window').data('kendoWindow');
  }
  else {
    win.close();
    win.setOptions({
      title: 'Confirm Deletion',
      width: '325px',
      height: '100px'
    });
  }
  win.content(Mustache.to_html($('#confirmDeleteAttributeTemplate').html(), {id: $(evt.target).closest('li.attribute').attr('id')}));
  win.center();
  win.open();
};
There are more than one link on the page to open a window, so I check for the kendoWindow object first. I think centering the window in the viewport looks the best, but for some reason if this function creates and opens the window, it is centered relative to the document. If this function opens an existing window instead, it is centered in the viewport correctly. Even if the function creates and opens the windows, subsequent invocations center the window in the viewport. I must be missing something here.

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 28 Mar 2013, 04:02 PM
Hi Troy,

If you initialize a Kendo UI Window from an element on the page, this element is moved in the DOM and becomes part of the Window content. This is by design. If you don't want such a behavior, you should create the Window instance from a new document fragment like this:

var winObject = $("<div />").appendTo(document.body).kendoWindow({
    title: "title",
    content: "......"
}).data("kendoWindow");

The Window's content() method replaces any existing content. I am not sure how you manage to append new content.

Generally, the Window cannot be positioned relative to an arbitrary element automatically. It can be either centered in the browser window, or it can be positioned somewhere manually by applying suitable top and left CSS properties to the wrapper element (div.k-window).

If you need further assistance, please provide a runnable example, so that it is more clear what you are trying to do.

All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Window
Asked by
Troy
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or