javascript - Can't expand KendoPanelBar with KnockoutJS - Why? -

i want display various persons children in kendo panelbar. atm looks this:

with no chance expand "parent" person.

if closely on width of borders, can see who's child , not. or let me explain in other words.. every child can have children, too, , because of border-width, can see who's child of whom.

the parent person 1 no border btw. list dynamically filled knockoutjs.

<ul data-role="panelbar" data-bind="template: { name: 'person-template', foreach: personlist, callbackelementonce: function () { return initkendopanelbar($element) } }"> </ul>  <ul data-role="panelbar" data-bind="template: { name: 'person-template', foreach: ascendantlist, afterrender: initkendopanelbar($element) }"> </ul> 

one parent , 1 children. initkendopanelbar-function should make panelbar out of list.

function initkendopanelbar(element) {             $(element).kendopanelbar({ expandmode: "single" });         }; 

but doesn't , don't know why. in way list formatted panelbar because list wouldn't crazy then, said, won't let me expand anything.

thanks in advance!

knockout gives opportunity "do something" elements foreach binding renders. how works in template binding:

data-bind="template: {   name: templatename,    foreach: items,    afterrender: afterrendermethod }" 

afterrendermethod has function works this:

afterrender — invoked each time foreach block duplicated , inserted document, both when foreach first initializes, , when new entries added associated array later. knockout supply following parameters callback: (1) an array of inserted dom elements, (2) data item against being bound

(source, emphasis mine)

this means initkendobar has accept array of elements.

function initkendopanelbar(elements, data) {   // todo: check nr of elements , select right one(s)   $(elements[0]).kendopanelbar({ expandmode: "single" }); }; 

the way add in data bind not so: afterrender: initkendopanelbar($element) (this calls function), so: afterrender: initkendopanelbar.

to give example of how works, check out fiddle: https://jsfiddle.net/sve52r7n/

p.s. don't callbackelementonce comes from, i've never seen before. that's why hesitant answer question. think should able work out template binding , afterrender however.