Hello Team,
I have a following scenario.
<script id="OuterTemplate" type="text/x-kendo-template">
# for (var i = 0; i < data.length; i++) { #
<a href="\\#'" data-bind="click: onOuterLinkClick" data-index="#: i #">#: data[i].displayText #</a>
#}#
#= renderMyTemp(data[i].innerLinks) #
</script>
<script id="InnerTemplate" type="text/x-kendo-template">
# for (var j = 0; j < data.length; j++) { #
<a href="\\#" data-bind="click: onInnerLinkClick"
data-index="#: j #">#: data[j].displayText #</a>
# } #
</script>
<script type="text/javascript" >
function renderMyTemp(data) {
return kendo.Template.compile($('#InnerTemplate').html())(data);
}
</script>
And my data which is getting passed to OuterTemplate, looks like following:
var data = [
{
"displayText" : "outer link abc",
"onOuterLinkClick" : () => {},
"innerLinks" : [
{
"displayText" : "inner link abc1",
"onInnerLinkClick" : () => {}
},
{
"displayText" : "inner link abc2",
"onInnerLinkClick" : () => {}
}
]
},
{
"displayText" : "outer link def",
"onOuterLinkClick" : () => {},
"innerLinks" : [
{
"displayText" : "inner link def1",
"onInnerLinkClick" : () => {}
},
{
"displayText" : "inner link def2",
"onInnerLinkClick" : () => {}
}
]
}
]
I pass the data as follows:
var template = kendo.template($('#OuterTemplate').html());
template(data);
Question : In above code, inside outerTemplate, onOuterLinkClick binding is working properly. But inside InnerTemplate, onInnerLinkClick binding is not working. can you please tell me, what's the correct way to do it?
Thanks & Rergards
Karan