This is a migrated thread and some comments may be shown as answers.

Binding splitter with nested widgets

1 Answer 128 Views

MVVM

This is a migrated thread and some comments may be shown as answers.

Mateusz asked on 18 Jun 2015, 11:43 AM

Hi All,

I started my journey with Kendo MVVM today and immediately I faced this problem. I have view contains div with nested divs. It looks like:

<div id="splitter" class="vsm-splitter" data-role="splitter" data-panes="[

{ collapsible: true, min: '640px', size: '50%', scrollable: false },

{ collapsible: false, min: '300px' },

{ collapsible: true, min: '320px', size: '25%' }]"

data-bind="visible: isVisible">

<div>

@Html.Partial("widget1")

</div>

<div>

@Html.Partial("widget2")

</div>

<div>

@Html.Partial("widget3")

</div>

Parent div should be bound to splitter and children divs to widgets. We want to have view model for splitter which is very simple:

var vm = kendo.observable({ isVisible: true });

and have separated view model for each component and bind them one by one. So code can look like that:

kendo.bind($('#splitter'), vm);

kendo.bind($('#widget1Root'), vmW1);

kendo.bind($('#widget2Root'), vmW2);

kendo.bind($('#widget3Root'), vmW3);

but it causes following error:

Uncaught TypeError: undefined has no properties

When I replace Partial with static text it works ok. Do you know how I can proceed with that kind of issue? Any suggestion?

Best Regards,
Mateusz

1 Answer, 1 is accepted