Using Javascript in a custom template

[COMM]

As part of a scheduler, I have a custom kendo template for the add/edit event, and into this template I want to insert a JS function for some autoComplete functionality. 

<script id="addEditPopup" type="text/x-kendo-template">

## $("##UserIdSelector").kendoAutoComplete({ ##
## minLength: 3, ##
## dataTextField: 'fullname', ##
## dataValueField: 'login', ##
## dataSource: { ##
## type: 'json', ##
## serverFiltering: true, ##
## transport: { ##
## read: { ##
## url: 'remote/UserProxy.cfc?method=getuserSuggest', ##
## dataType: 'json' , ##
## parameterMap: function() { ##
## return { search: $(this).val() }; ##
## } ##
## } ##
## }, ##
## schema: { ##
## data: 'data' ##
## } ##
## }, ##
## select: function(e){ ##
## var dataItem = this.dataItem(e.item.index()); ##
## $("##userID").val(dataItem.login); ##
## } ##
## }); ##

<label for="user_uid">#getResource("reservation.UserID")#</label>
<div data-container-for="user_uid">
<input name="UserIdSelectorName" id="UserIdSelector" class="k-input k-textbox" required="required" />
<input type="hidden" id="userID" name="userID" />
<span class="" data-for="UserIdSelector"></span>
</div>

</script>

I get two errors:
"Uncaught SyntaxError: Unexpected token ILLEGAL"
"Uncaught Error: Invalid template:"

(Note that I have to double-up all the #s because server-side I'm using ColdFusion.)

Any idea where I'm going wrong?

[Rosen]

Hi,

The template content will be rendered as an HTML. Thus, in order to register output a function declaration you will need to add it as a script block. However, this script block tags should be escaped in order to construct the correct tag hierarchy. Also the hash tag which are not an code block expression should also be escaped with backslashes. Combining all of this, the template should look similar to the following:

    <script id="addEditPopup" type="text/x-kendo-template">
<script>
 $("\#UserIdSelector").kendoAutoComplete({
    minLength: 3,
    dataTextField: 'fullname',
    dataValueField: 'login',
    dataSource: {
    type: 'json',
    serverFiltering: true,
    transport: {
    read: {
    url: 'remote/UserProxy.cfc?method=getuserSuggest',
    dataType: 'json' ,
    parameterMap: function() {
    return { search: $(this).val() };
    }
    }
    },
    schema: {
    data: 'data'
    }
    },
    select: function(e){
    var dataItem = this.dataItem(e.item.index());
    $("\#userID").val(dataItem.login);
    }
 });
<\/script>

<label for="user_uid">#getResource("reservation.UserID")#</label>
<div data-container-for="user_uid">
<input name="UserIdSelectorName" id="UserIdSelector" class="k-input k-textbox" required="required" />
<input type="hidden" id="userID" name="userID" />
<span class="" data-for="UserIdSelector"></span>
      </div>

    </script>

However, I suggest you to consider moving the function declaration outside of the template if possible.

Regards,
Rosen
Telerik