Kendo-Knockout: How to center window

Question

I am using RPNiemeyer`s kendo-knockout library. I have a kendo window which I use like this in the html:

<div data-bind="kendoWindow: { isOpen: isOpen, title:'States', width: 600, height: 150, modal: true, resizable: false, actions: ['Maximize', 'Close'] }" > </div>

I used to center the dialog like this:

$('#productionStates').data("kendoWindow").center();

But as center is a method I cannot pass it in the markup like this center: true. In the kendo-knockout documentation there is a property widget for some of the widgets and my guess is that this is the key but I am not sure how to use it as there are no examples. Any ideas will be welcome. Thanks!

Answer 1

I actually achieved the same effect as Niemeyer by sticking it in the binding handler:

 

    ko.bindingHandlers.kendoWindow.options = {
        open: function () { this.element.data('kendoWindow').center(); }
    };

No additional binding needed, but it does tie up your "onOpen" event.

Answer 2

The widget parameter is intended to be used when you need to interact with a widget in a way that is not supported by the provided binding options. Normally, this is kind of a last resort, but in this case it looks like it would be the right choice.

What you do is pass an observable into the widget parameter and it will get filled with the actual widget. Then, you can call methods off of it from your view model.

Something like:

var ViewModel = function() {
   this.isOpen = ko.observable(false);
   //center it if it is opened
   this.isOpen.subscribe(function(newValue) {
       if (newValue) {
           this.myWidget().center();         
       }
   }, this);

   //hold the widget
   this.myWidget = ko.observable();
};

Then, in markup:

<div data-bind="kendoWindow: { isOpen: isOpen, visible: false, modal: true, widget: myWidget }">
     ...
</div>​

Sample here: http://jsfiddle.net/rniemeyer/gNgDm/