Pass a parameter to an event handler inside a template

4 Answers 5649 Views
ListView
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
Daochuen asked on 28 Jan 2019, 03:48 AM

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

Sort by
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 30 Jan 2019, 06:42 AM
Hi, Daochuen,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 11 Feb 2019, 03:03 PM

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!

0
Accepted
Konstantin Dikov
Telerik team
answered on 20 Feb 2019, 09:34 AM
Hi,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 21 Feb 2019, 03:32 PM

Thanks Konstantin, both solutions worked great !
0
Alex Hajigeorgieva
Telerik team
answered on 13 Feb 2019, 12:57 PM
Hello, Daochuen,

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
Get quickly and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 15 Feb 2019, 07:57 PM

 

Thanks Alex !

Attachments are the sample code that I mentioned before. I really appreciated your help!

0
Konstantin Dikov
Telerik team
answered on 19 Feb 2019, 11:52 AM
Hi,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 19 Feb 2019, 02:46 PM

Thanks Dikov.

I tried that way but it seems that place do not  accept  preventDefault() method. Please see attached image.

Gib
Top achievements
Rank 1
commented on 30 Mar 2022, 09:24 PM

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>

Tags
ListView
Asked by
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Alex Hajigeorgieva
Telerik team
Konstantin Dikov
Telerik team
Share this question
or