Window MVVM title

[Andrew]

Hi,

I'm  wondering if the window title can be bound to a view model, so it can be modified via the view model at run time. Currently I have data-title set in the html, but I would like to be able to change the title via the view model (presumably in the data-bind section).

<div id="window1" data-role="window" data-resizable="false" data-modal="true" data-title="windowTitle1" data-bind="invisible: vmInvisible" data-width="300"><br></div>

Can the title be modified in a vew model, or can it only be set via the title() method?

var kendoWindow = $("#window").data("kendoWindow").title("Do a barrel roll!");

I tried using data-bind="attr: {title: windowTitle2 }" but this doesn't work on window, is there another way of doing it?

Thanks,
Andrew

[Alex Gyoshev]

Hello Andrew,

I'm afraid that this binding is not supported on the window widget at this moment. You can, however, bind an event handler and handle the setting of this value, like shown in this jsBin.

Regards,
Alex Gyoshev
Telerik

[Steven]

Its a year later, but for anyone else looking for an answer.  Here's a way that worked for me.  This may only work for me because my window was a part of a template, but you can bind the text using the #:field# syntax... so for example this worked:

<div  class="hierarchyWindow"
         data-role="window"
         data-width="800"
         data-height="600"
         data-title="#:Label#"
         data-bind="visible: WindowVisible"
         data-actions="['Close']">

[Tim]

The jsBin quoted by Telerik shows a way to create a window with the title, but my goal was to update the title based upon a bound element.  I can't tell if Steven's answer serves this purpose because I am not creating my window from a template.  I cobbled this together and it seems to work nicely.

                            var dataItem = $('#cFoo', this.element)[0].kendoBindingTarget.source;
                            var tHis = this;
                            dataItem.bind('set', function (pEvent) {
                                if (pEvent.field == 'Foo')
                                    tHis.setOptions({ title: 'Editing ' + pEvent.value });
                            });

I put this code into the activate function for a grid's popup editor window.  The cFoo element is data bound to the Foo member like so:             <input type="text" name="Foo" id="cFoo" data-bind="value:Foo">