CODEWITHSUNDEEP
javascriptkendo-ui
hrishitiwari
hrishitiwari

Reputation: 644

Kendo Template onClick in element does not work

<script type="text/x-kendo-template" id="logotemplate">
    <div >
        <h3>#: name#</h3>
         # for (var i=0; i< options.length;i++) { #
             <img src="#= options[i].url #" class="item-photologos" onclick="clickedImage(name,i)"   />
         # } #
    </div>
</script>

I have a custom Kendo Mobile Listview template. The images show up as expected, but the onclick doesnot fire and no errors are seen in the logs. I have tried many different combinations of #: #, ##, #= #, etc around the onclick method, but doesnot work (in some of these cases, i see error messages like "i is not defined"). Help will be appreciated.

Upvotes: 0

Views: 4177

Answers (2)

Jarno Lahtinen
Jarno Lahtinen

Reputation: 1703

You can use JQuery On method on each image to add click event listener.

$(".item-photologos").on("click", function(e) {
  console.log(e);
});

Upvotes: 0

Joe
Joe

Reputation: 5497

I think you want something like this

<script type="text/x-kendo-template" id="logotemplate">
<div >
    <h3>Blah</h3>
    # for (var i=0; i< options.length;i++) { #
    <img src="#= options[i].url#" class="item-photologos" onclick="clickedImage('#: options[i].name #' , #:i #)"   />
    # } #
</div>

Where the parameters inside clickedImage are passed in and not hard-coded strings.

This renders the following:

   <div>
    <h3>Blah</h3>
    <img src="foo.jpg" class="item-photologos" onclick="clickedImage('Jane Doe' , 0)"   />
    <img src="bar.jpg" class="item-photologos" onclick="clickedImage('John Doe' , 1)"   />
  </div>

As opposed to 

<div >
    <h3>Blah</h3>
    <img src="foo.jpg" class="item-photologos" onclick="clickedImage(name,i)"   />
    <img src="bar.jpg" class="item-photologos" onclick="clickedImage(name,i)"   />
</div>

JsFiddle here

Upvotes: 3

Related Questions