Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kendo-Knockout: How to center window

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!

like image 792
Mdb Avatar asked Dec 15 '12 11:12

Mdb


2 Answers

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.

like image 25
Audrey Arndt Avatar answered Oct 05 '22 09:10

Audrey Arndt


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/

like image 83
RP Niemeyer Avatar answered Oct 05 '22 08:10

RP Niemeyer