Kendo UI Grid - Client Template: Escaping # sign
I am working with Kendo UI Network along with Twitter Bootstrap.
Twitter Bootstrap has a built in popup / modal that can be called with
<a href="#" class="text-yellow" data-toggle="modal" data-target="#login">Login</a>
In my Kendo UI grid, I have my own column template:
columns.Template(e => { }).ClientTemplate("<span data-toggle='modal' data-target='#login' title='Flag Animals as Dead or Deceased' style='cursor:pointer;' class='glyphicon glyphicon-flag flag-dead text-red'></span>").Width(50);
This is where I have a problem, if you noticed you need to specify the Id of the modal with a # sign. those.data-target='#login'
Whenever the # sign is in my grid template, the grid breaks. How can I avoid this sign?
source to share
You can escape the # with the \ character like this data-target='\#login'
UPDATE: From telerik documentation kendo templates
If your template contains a literal # character that is not part of the binding expression and is not a script code marker, then you must avoid that character or this will result in a template compilation error. For example, this can happen if # is used inside a hyperlink URL or CSS color value. Literal # in Javascript strings is escaped with \\ #, and literal # in external HTML script templates is escaped with \ #.
source to share