Correct way to data-bind="click: someFun" in nested kendo template.

1 Answer 205 Views
Templates
Karan
Top achievements
Rank 1
Karan asked on 06 Jan 2022, 02:00 PM | edited on 08 Jan 2022, 02:41 AM

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

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 11 Jan 2022, 10:36 AM

Hello, Karan,

Here is a small Dojo example with the provide code on how to correctly attach the click event.

Let me know if you have any questions.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Templates
Asked by
Karan
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or