Kendo-knockout: Widget Observable Is Not Filled With The Actual Widget

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

Solution 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.

Share