Embedding javascript function in template in grid

[Michael]

I'm trying to figure out how to embed a function in a template with 3+ levels of nested quotes.  It works in one case, but not in another.  

Here is the JSFiddle:  http://jsfiddle.net/ZpCAy/62/

Here is the code:
$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                id: "OrderID"            
            }
        }
    },
    columns: ["OrderID",
              { title: "Edit1", template:"<a href='javascript:(function(){window.open(\"www.oracle.com\");})();'>Edit1</a>" },
              { title: "Edit2", template:"<a href='javascript:(function(){$(\"#win\").kendoWindow();})();'>Edit2</a>" }
             ]
});


(Note that it won't actually run because of the Edit2 line.  But if you remove that, the Edit1 will work)

When I run this in Chrome, I get this:

11Uncaught Error: Invalid template:'<tr data-id="#=this.tmpl0(data)#"><td>${OrderID}</td><td><a href='javascript:(function(){window.open("www.oracle.com");})();'>Edit1</a></td><td><a href='javascript:(function(){$("#win").kendoWindow();})();'>Edit2</a></td></tr>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<tr data-id="'+(this.tmpl0(data))+'"><td>'+(e(OrderID))+'</td><td><a href=\'javascript:(function(){window.open("www.oracle.com");})();\'>Edit1</a></td><td><a href=\'javascript:(function(){$("';win").kendoWindow();})();'>Edit2</a></td></tr>;o+=;}return o;'

As you can see, the generated code is doing something to the "#win" and converting it to "';win" ... anyone know what's up?

[Atanas Korchev]

Hello,

 The "#" is a special symbol in templates and should be escaped:

{ title: "Edit2", template:"<a href='javascript:(function(){$(\"\\#win\").kendoWindow();})();'>Edit2</a>" } 

Here is the updated jsfiddle: http://jsfiddle.net/korchev/ZpCAy/63/

Another option is to replace the complex string template with a function call:

{ title: "Edit2", template:"<a href='javascript: openWindow()'>Edit2</a>" }  


<script>
function openWindow() {
    $("#win").kendoWindow();
}
</script>

Kind regards,
Atanas Korchev
the Telerik team

[Michael]

Thanks Atanas.  

Yeah, I actually tried just calling a function first but it wasn't working so I thought maybe the template engine had a problem with that so I tried an anonymous function.  Turns out that it *was* working but the kendoWindow I was popping up was below the (unpaged) grid despite its associated div being above the grid (still don't understand that).

But all is well now.

...Michael