Hello all,
I'd like to know how to pass a parameter to an event handler registered inside a template. In my case, how to pass EmployeeID to myFunc()? I have tried onclick='myFunc(EmployeeID)' and onclick='myFunc(#: EmployeeID#)' and onclick='myFunc(#= EmployeeID #)' , but none of them works.
<script type="text/x-kendo-template" id="emp_list_template">
<div class="product">
<img src="@Url.Content("~/content/shared/images/employees/")#: EmployeeID #.png" alt="#: EmployeeID #" />
<a href='' onclick='myFunc(EmployeeID)'>Download</a>
</div>
</script>
Thanks.
4 Answers, 1 is accepted
Thank you for the provided code snippets.
In case the EmployeeID is a number, you may call the function like this:
<a href="" onclick="myFunc(#=EmployeeID#)">Download</a>However, if the EmployeeID is a string, I would recommend passing the button itself to the function and determining the item which was clicked with the help of the dataItem() method instead:
https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/methods/dataitem
<a href='' onclick='myFunc(this)'>Download</a> function myFunc(button){ var item = $(button).closest("div.product"); var listView = $("#listView").data("kendoListView"); var dataItem = listView.dataItem(item); console.log(dataItem.EmployeeID); }For your reference, here is a runnable example using both of these approaches:
https://dojo.telerik.com/@bubblemaster/EDitanEW/2
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Rank 1
Iron
Veteran
Iron
Hi Alex,
If I ignore the error on the MVC view (Please see the attached image). the code seems work but whole page refresh when I click that link. I don't know why.
Thanks!
You should pass the "event" to the event handler:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Untitled</title><body> <a href='' onclick='myFunc(event, 5)'>test</a> <script> function myFunc(ev, id){ ev.preventDefault(); alert(id); } </script></body></html>Another option would be to remove the "preventDefault" as a solution and change the "href" to be "#" instead:
<a href="\\#" onclick="myFunc(#=EmployeeID#)">Download</a>Regards,
Konstantin Dikov
Progress Telerik
Rank 1
Iron
Veteran
Iron
I am not sure why the page would refresh without seeing what the myFunction function actually does. However, you may try calling e.preventDefault() in the function and see if that helps.
Could you please share it so I can use it to run some tests in an MVC project, in case there is a difference?
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Rank 1
Iron
Veteran
Iron
Thanks Alex !
Attachments are the sample code that I mentioned before. I really appreciated your help!
As my colleague have suggested, you should call "preventDefault" on the click event:
<a href="" onclick="myFunc(event, #= id #)">Download Employee Info</a>function myFunc(ev, v) { ev.preventDefault(); alert("you click Employee with id= " + v);}Regards,
Konstantin Dikov
Progress Telerik
Rank 1
Iron
Veteran
Iron
Thanks Dikov.
I tried that way but it seems that place do not accept preventDefault() method. Please see attached image.
Rank 1
I found that I was able to prevent the page refresh by using a button element, with a type="button".
<button onclick="myFunc(event, #= id #)" type="button">Download Employee Info</button>