Kendo template with void to consume a function in an anchor link
Apr 24
by Gregory Alexander Kendo MVVM template

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:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org <script type="text/x-kendo-template" id="myApprovalTemplate"> /* Note: dynamic vars can be displayed like so: #: myApprovalDs.total() # */ /* Alternate row colors. */ # if(window.altRow) { # <tr class='k-alt'> # } else { # <tr class='k-content'> # } # # if(ApprovalId > 0){ # <td class="border"> <input type="checkbox" name="approved#: ApprovalId #" id="approved#: ApprovalId #" value="1" /></td> <td class="border">#: ApproverTitle #</td> <td class="border"><a href="javascript:void(0);" onClick="openContractDetailWindow(#: ContractId #, #: ApprovalId #, '')">#: Contract #</a></td> <td class="border">#: Contractor #</td> <td class="border">pdf</td> <td class="border"></td> #} else {# <td colspan="6"<!--- class="k-loading-image k-loading-color" --->> <br/>There are no contracts eligible for you to approve </td> #}# </tr> <!--- Toggle the window variable. ---> # window.altRow = !window.altRow; # </script> 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> |
This entry was posted on April 24, 2019 at 7:51 PM and has received 409 views.
Download Galaxie Blog
Subscribe
Tags
Recent Posts
CfBlogs.org - A New ColdFusion Blog Aggregator |
Extending Application.cfc's using mappings and proxies |
Happy New Year! |
Galaxie Blog Status Update |
Adding a dummy record in the first row of a recordset |