Angular Kendo Splitter only binding data on the first pane

Question

I've been having trouble figuring out why Angular is not binding data anywhere after the first pane of my Kendo-UI splitter.

Here is the relevant HTML, with extraneous uses of {{formData.hello}} to illustrate when the problem occurs:

<div ng-controller="MyCtrl">
    <p>A = {{formData.hello}}</p>
    <div id="idLeftRight">
        <div>
            <p>Content on the left.</p>
            <p>B = {{formData.hello}}</p>
        </div>
        <div>
            <p>Content on the right.</p>
            <p>C = {{formData.hello}}</p>
        </div>
    </div>
    <p>D = {{formData.hello}}</p>
</div>

The above shows "A = Hello world" and "B = Hello world", but "C = {{formData.hello}}" and "D = {{formData.hello}}".

If the second pane (the div containing "C =") is removed, so there is only one pane in the splitter, then "D = Hello world" appears as expected.

Here is the Javascript:

angular.module("app", [ "kendo.directives" ]);

function MyCtrl($scope) {      
    $scope.formData = {};
    $scope.formData.hello = "Hello world";

    $('#idLeftRight').kendoSplitter({
        orientation: "horizontal",
        panes: [
            { collapsible: false, size: "30%" },
            { collapsible: false },
        ]
    });
}

Plunker: Kendo Splitter problem

However, if I change the div with ID "idLeftRight" to:

<div kendo-splitter
    k-panes="[ { collapsible: false, size: '30%' } , { collapsible: false } ]"
    k-orientation="horizontal">

then it works.

Why does kendoSplitter() behave differently to kendo-splitter? Am I doing something wrong?

score 0 · Accepted Answer · answered May 05 '15 at 07:15

Since you are in an Angular application you are supposed to use markup to define your Kendo splitter (the way you have already tried and is working) instead of modifying the DOM with javascript inside your controller (which is what you are doing when you call $('#idLeftRight').kendoSplitter({...}).

You will notice in your Plunker if you open the browser console that the following error appears when your javascript call to kendoSplitter is evaluated:

TypeError: Cannot read property 'childNodes' of undefined
    at compositeLinkFn (angular.js:6108)
    at compositeLinkFn (angular.js:6108)
    at compositeLinkFn (angular.js:6108)
    at nodeLinkFn (angular.js:6705)
    at compositeLinkFn (angular.js:6105)
    at compositeLinkFn (angular.js:6108)
    at compositeLinkFn (angular.js:6108)
    at publicLinkFn (angular.js:6001)
    at angular.js:1449
    at Scope.$get.Scope.$eval (angular.js:12701)

which then results in C and D not being bound correctly. I am not really sure myself what exactly is the problem, it seems to me however that your call to kendoSplitter() causes Kendo to modify the DOM outside of Angular's digest cycle which "confuses" Angular and breaks your page.

Angular Kendo Splitter only binding data on the first pane

1 Answers1