How to escape the hash(#) sign in a Kendo Grid column template?

If you are writing a Kendo Grid Column template and you run into the malformed template issue when trying to add a hyperlink that executes a javascript function (i.e. <a href=’#’ onclick=’function(me)’> blah </a> ), then here is the easy fix.

As with all the Telerik lack of documentation, or ease of finding, this one isn’t obvious but is easy. Just add to backslashes \#.

This

<a href=’#’ onclick=’function(me)’> blah </a>

becomes this

<a href=’\#’ onclick=’function(me)’> blah </a>

Example template of mine:

   <script type="text/x-kendo-tmpl" id="myPortfolio_PlanningTemplate">
      <a class='noStyleActionLink' href='\#' onclick='showPlanning("#: Id #")'> <div> 
        # var imgurl='redLight.png',statusText='Unknown - ERROR' #
        # if(PlanningStatus==PlanningStatusEnum.Not_Started){ imgurl='greyLight.png';statusText='Not Started' }  #
        # if(PlanningStatus==PlanningStatusEnum.On_Track){ imgurl='greenLight.png';statusText='On Track' }  #
        # if(PlanningStatus==PlanningStatusEnum.Deadline_Approaching){ imgurl='yellowLight.png';statusText='Deadline Approaching' }  #
        # if(PlanningStatus==PlanningStatusEnum.Overdue){ imgurl='redLight.png';statusText='Overdue' }  #
        # if(PlanningStatus==PlanningStatusEnum.Complete){ imgurl='greenLight.png';statusText='Complete' }  #            
         <img src='@Url.Content("~/Content/Images/lights/")#: imgurl #'/>  #: statusText # 
        </div>          
        </a>
    </script>

Happy coding!

One Reply to “How to escape the hash(#) sign in a Kendo Grid column template?”

Leave a Reply

Your email address will not be published. Required fields are marked *