Gregory's Blog

Kendo template with void to consume a function in an anchor link

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<InvalidTag 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>

This entry was posted on April 24, 2019 at 7:51 PM and has received 37 views.

There are currently 0 comments.




Your input and contributions are welcomed!

If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together.

Images and Photography:

Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. If an image is not part of the "Gregory's Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site.

Credits:

Portions of Gregory's Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site. Some of the major open source contributers to BlogCfc include:

  1. Peter Farrell: the author of 'Lyla Captcha' that is used on this blog.
  2. Pete Freitag: the author of the 'ColdFish' code formatter that is also used on this blog.

Version:

Gregory's Blog Version 1.01 June 13, 2019 00:49 PST.