Binding splitter with nested widgets

2 posts, 0 answers
  1. Mateusz
    Mateusz avatar
    1 posts
    Member since:
    Dec 2014

    Posted 18 Jun 2015 Link to this post

    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>
    </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

  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 22 Jun 2015 Link to this post

    Hello,

    I am afraid that the scenario is not supported. The bindings cannot be nested. You should use a single ViewModel and bind only the main element.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top