Question

I am using RPNiemeyer`s kendo-knockout library. I have a kendo window:

HTML:

<div data-bind="kendoWindow: {isOpen: isOpen, title:'Language', width: 400, height: 200, modal: true, widget: popUpWindow }" > 

JavaScript part that centers the window:

this.popUpWindow = ko.observable();
    self.isOpen.subscribe(function (newValue) {
        if (newValue) {
            self.popUpWindow().center();
        }
    });

I am using the source code from my previous question for my fiddle:

Kendo-Knockout: Window does not close correctly

I am following the steps shown here:

Kendo-Knockout: How to center window

I am defining the widget observable but when I want to use it it is not filled with the actual widget.

Fiddle:
http://jsfiddle.net/dcYRM/15/

Any help with working example will be greatly appreciated.

Answer 1

Looks like there are a couple of issues:

First, your isOpen subscription is running before the widget has been filled.

Secondly, after filling the widget, it is causing the datasource to get refreshed and is trying to serialize the model including the widget, which is causing an issue. This is ultimately because Knockout-Kendo is a little too aggressive about unwrapping the data passed to the grid.

I see two pretty easy ways to fix the issue. The easiest way is to set up a global handler for the widget’s open event and call center on it.

Putting this with the close event from a previous question would look something like:

  ko.bindingHandlers.kendoWindow.options = {
    close: function() {
      $('.k-window, .k-overlay').remove();
    },
    open: function(event) {
       event.sender.center();
    }
  };

Now, whenever any window is opened it will get centered and you don’t need to mess with the widget at all. Sample here: http://jsfiddle.net/rniemeyer/F4JGG/

That looks like the best option. To make it work with the reference to the widget itself, you will need to workaround an issue in the library. As mentioned above, it is a little too aggressive and unwrapping the options and it appears that this causes an issue when a widget is initialized, the widget parameter is passed, and it is already filled with a widget. I should be able to address it in the library, when I get a chance.

Otherwise, you would have to do:

self.popUpWindow = ko.observable();
self.popUpWindow.subscribe(function (widget) {
  if (widget) {
    widget.center();
    self.popUpWindow(null); //hack - Knockout-Kendo should handle this one
  }
});

So, clear the observable after you called center on it. Here is a sample: http://jsfiddle.net/rniemeyer/PVMjy/. I also subscribed to the widget’s observable itself, so that there is not the timing issue with isOpen as mentioned above.

Setting the global open handler, seems like the cleanest and best option in this case.