I have a Kendo template that is used to display real time statuses for contracts, and programmed an a href tag that was intended to consume a javascript function rather than opening up a link. On my first attempt, I was having problems as I could not program a pound symbol into the Kendo template (like ColdFusion, a pound symbol indicates a variable within a Kendo template), so I escaped it using two pounds, and found myself struggling to figure out why my window was suddenly being refreshed. I spent around ten minutes stepping through my code only to find out that the a href tag refreshing the entire page, even though it was blank as the double pound sign was escaped. On further introspection, this is understandable as I just had inadvertently programmed a typical link. To fix this issue, I used a simple javascript:void(0); within the link, and the javascript function is called without the default a href tag opening up the link. Essentially, the void(0) code prevents the default behavior of the link, and it acts like a a href="#". I would not typically use void in other code, but using it within a Kendo MVVM template is an appropriate place. Here is the code:

view plain about
1<script type="text/x-kendo-template" id="myApprovalTemplate">
2    /* Note: dynamic vars can be displayed like so: #: myApprovalDs.total() # */
3     /* Alternate row colors. */
4    # if(window.altRow) { #
5        <tr class='k-alt'>
6    # } else { #
7        <tr class='k-content'>
8         # } #
9 # if(ApprovalId > 0){ #
10     <td class="border">
11     <input type="checkbox" name="approved#: ApprovalId #" id="approved#: ApprovalId #" value="1" /></td>
12     <td class="border">#: ApproverTitle #</td>
13     <td class="border"><a href="javascript:void(0);" onClick="openContractDetailWindow(#: ContractId #, #: ApprovalId #, '')">#: Contract #</a></td>
14     <td class="border">#: Contractor #</td>
15     <td class="border">pdf</td>
16     <td class="border"></td>
17 #} else {#
18     <td colspan="6"<!--- class="k-loading-image k-loading-color" --->>
19     <br/>There are no contracts eligible for you to approve
20     </td>
21 #}#
22     </tr>
23 <!--- Toggle the window variable. --->
24 # window.altRow = !window.altRow; #
25 </script>