Using Javascript in a custom template

2 posts, 0 answers
  1. COMM
    COMM avatar
    21 posts
    Member since:
    Oct 2014

    Posted 03 May Link to this post

    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?
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 05 May Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top