Invalid Template?

12 posts, 0 answers
  1. Jeremy
    Jeremy avatar
    31 posts
    Member since:
    Jul 2012

    Posted 29 Feb 2012 Link to this post

    Howdy.

    I'm getting an error when trying to run a template, and I can't seem to figure out what my problem is.

    <script id="HuddleGroupTemplate" type="text/x-kendo-template">
        <select id="#UserName" class="multiselect" multiple="multiple" name="UserName">
            # for (var i = 0; i < data.length; i++) { #
                <option value="#=data[i].UserName#" id="#=data[i].UserID#" selected="">#=data[i].FirstName# #=data[i].FirstName#</option>
            # } #
        </select>
    </script>

    $(document).ready(function() {
            var Person = [
                {   UserName : "jeremy@gmail.com",
                    FirstName: "Jeremy",
                    LastName: "Mills",
                    UserID: "1",
                    selected: true },
                {   UserName : "jgop@yahoo.com",
                    FirstName: "Josh",
                    LastName: "Howard",
                    UserID: "2",
                    selected: false},
                {   UserName : "johnny@gmail.com",
                    FirstName: "John",
                    LastName: "Doe",
                    UserID: "3",
                    selected: false }
            ];
             
            var HuddleGroupTemplate = kendo.template($("#HuddleGroupTemplate").html());
            var result = HuddleGroupTemplate(Person); 
            $("#UserName").html(result);
     
        });

    I keep getting this error; Uncaught Error: Invalid template:
    I've also tried this based on another post, but I still got the error

    <script id="HuddleGroupTemplate" type="text/x-kendo-template">
        <select id="#UserName" class="multiselect" multiple="multiple" name="UserName">
            # for (var i = 0; i < data.length; i++) { #
                <option value="data[i].UserName" id="data[i].UserID" selected="">data[i].FirstName data[i].FirstName</option>
            # } #
        </select>
    </script>


    So, what am I doing wrong here? This is killing me.
  2. Petyo
    Admin
    Petyo avatar
    2442 posts

    Posted 01 Mar 2012 Link to this post

    Hello,

    The problem is in the following code:

    <select id="#UserName"

    The id attribute does not need the # symbol. If you ever need # in your template, you need to escape them using backslashes. 

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Jeremy
    Jeremy avatar
    31 posts
    Member since:
    Jul 2012

    Posted 01 Mar 2012 Link to this post

    Hi Petyo.

    Wow, that was a n00b mistake on my part. I can't believe I didn't catch that. it's amazing how you can look at something 1,000 times and stil miss something so obvious.

    Thanks for your second set of eyes!
  4. Guillermo
    Guillermo avatar
    4 posts
    Member since:
    Feb 2011

    Posted 02 Mar 2012 Link to this post

    This work just fine in the  rowTemplate but it doesn't work with the toolbar template...i'm still getting the same error:


    <script type="text/x-kendo-template" id="template">
    <div class="toolbar">                
    <a class="k-button k-button-icontext k-grid-edit" href='\#'><span class="k-icon k-add"></span>Agregar</a>
    <a class="k-button k-button-icontext k-grid-edit" href="\#"><span class="k-icon k-search"></span>Buscar</a>
                        <label class="nombre-label" for="nombre">Nombre:</label>
                        <input type="search" id="nombre" style="width: 230px"></input>
                    </div>
    </script>
     
     <script type="text/x-kendo-template" id="row-template">
             <tr>        
             <td>
             <a class="k-button k-button-icontext k-grid-edit" href='\#'><span class="k-icon k-edit"></span>Editar</a>
             <a class="k-button k-button-icontext k-grid-delete" href='\#'><span class="k-icon k-delete"></span>Borrar</a>
             </td>
            <td>
                #= RPE #
            </td>
            <td>
                #= Nombre #
            </td>
            <td>
                #= DES #
            </td>
        </tr>
    </script>
  5. Vijay
    Vijay avatar
    5 posts
    Member since:
    Apr 2012

    Posted 04 May 2012 Link to this post

    not sure why I'm getting this issue? Uncaught Error: Invalid template:'<tr data-uid="#=uid#"><td>#=SecurityName#</td><td>#=of Portf#</td><td>#=of Bmark#</td><td>#=Sector#</td><td>#=Market#</td><td>#=Market Cap#</td><td>#=Market Beta#</td></tr>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<tr data-uid="'+(uid)+'"><td>'+(SecurityName)+'</td><td>'+(of Portf)+'</td><td>'+(of Bmark)+'</td><td>'+(Sector)+'</td><td>'+(Market)+'</td><td>'+(Market Cap)+'</td><td>'+(Market Beta)+'</td></tr>';}return o;' 

    generating Columns using jquery+ JSON. as JSON has complex structure

    EDIT: replaced all blank spaces!. Its working as expected now
  6. Jeremy
    Jeremy avatar
    31 posts
    Member since:
    Jul 2012

    Posted 04 May 2012 Link to this post

    Vijay,

    Can you post your code so that we can see? It's probably an issue with having the "#" in the wrong place, or possibly a semicolon or quotation mark in the wrong spot.
  7. Vijay
    Vijay avatar
    5 posts
    Member since:
    Apr 2012

    Posted 04 May 2012 Link to this post

    Thanks I have over come the issue!

    However, how to apply footer template on the fly. I am creating headers on the fly. Highlighted text is not working!

      var str = "<th data-field='ProductName'>Product Name</th>";
                            str += "<th data-field='price' title='portfolio weight' footerTemplate='Total Count: #'>of Portf</th>";

                            str += "<th data-field='discount'>of Bmark</th>";
                            str += "<th data-field='Sector'>Sector</th><th data-field='Market'>Market</th>";
                            for (var j = 0; j < this.data[0].Factordata.length; j++) {
                                var factorType = this.data[0].Factordata[j].FactorType;
                                var header = factorType.replace(/\s/gi, "");
                                str += "<th data-field='" + header + "'>" + factorType + "</th>";
                            }
  8. Gareth
    Gareth avatar
    4 posts
    Member since:
    Aug 2012

    Posted 15 Aug 2012 Link to this post

    I was having a problem with a grid toolbar template because of a # in a href
    Worked out that I needed to excape the # with \\\ and not \\

    <script type="text/x-kendo-template" id="toolbarTemplate">
         <div class='toolbar'>
             <a id="createButton" class="k-button" href="\\\#">Create</a>
         </div>
    </script>


    and not

    <script type="text/x-kendo-template" id="toolbarTemplate">
        <div class='toolbar'>
            <a id="createButton" class="k-button" href="\\#">Create</a>
        </div>
    </script>

    I suppose it is kind of obvious, but hopefully it will help someone...
  9. Kishore
    Kishore  avatar
    1 posts
    Member since:
    Jul 2013

    Posted 07 Aug 2013 Link to this post

    It helped me. I have been struggling to figure out  for one day and finally..
    Thanks a lot...
  10. Zachary
    Zachary avatar
    23 posts
    Member since:
    Feb 2013

    Posted 10 Jan 2014 Link to this post

    Thank you everyone for pointing me in the right direction! In my case, I had a CSS inline style with a hex color in it. After pulling it out into a CSS class, things work as expected. I couldn't escape the inline style without my IDE freaking out.

    Bottom line: no # symbols in templates unless they are escaped.

    <script type="text/x-kendo-template" id="template">
        <div style="float: left; border-right: 1px solid #dadada">
            #:data.customerName#
        </div>
    </script>
  11. rrr
    rrr avatar
    1 posts
    Member since:
    Sep 2015

    Posted 10 Sep 2015 in reply to Gareth Link to this post

    It's not correct. If you click on the link it will navigate to telerik demos.

    href="\#" or href="\\#" or href="\\\#" never work as expected.

     

    better try this

     

    href="javascript:return false;"

     

     

     

  12. Hapsakti
    Hapsakti avatar
    1 posts
    Member since:
    Dec 2015

    Posted 18 Dec 2015 in reply to Vijay Link to this post

    not sure why I'm getting this issue? Uncaught Error: Invalid template:'<tr data-uid="#=uid#"><td>#=SecurityName#</td><td>#=of Portf#</td><td>#=of Bmark#</td><td>#=Sector#</td><td>#=Market#</td><td>#=Market Cap#</td><td>#=Market Beta#</td></tr>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<tr data-uid="'+(uid)+'"><td>'+(SecurityName)+'</td><td>'+(of Portf)+'</td><td>'+(of Bmark)+'</td><td>'+(Sector)+'</td><td>'+(Market)+'</td><td>'+(Market Cap)+'</td><td>'+(Market Beta)+'</td></tr>';}return o;' 

     You said it's fixed with replacing all blank spaces, which one is it in the code above?

Back to Top