Invalid Template?

2 Answers 5938 Views
Templates
Jeremy
Top achievements
Rank 1
Jeremy asked on 29 Feb 2012, 11:24 PM
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 Answers, 1 is accepted

Sort by
1
Petyo
Telerik team
answered on 01 Mar 2012, 09:30 AM
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!
Jeremy
Top achievements
Rank 1
commented on 01 Mar 2012, 11:27 PM

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!
Guillermo
Top achievements
Rank 2
commented on 02 Mar 2012, 08:59 PM

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>
Vijay
Top achievements
Rank 1
commented on 04 May 2012, 01:45 PM

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
Jeremy
Top achievements
Rank 1
commented on 04 May 2012, 03:45 PM

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.
Vijay
Top achievements
Rank 1
commented on 04 May 2012, 04:17 PM

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>";
                        }
Toby
Top achievements
Rank 1
commented on 16 Aug 2021, 02:06 PM

Not so obvious but this helped greatly!  Thanks.. Here is what i had to do in order to get mine working. I have a Main grid with a client template (subgrid) and this is how i had to add the ancor tag in order for it to stop throwing  the error. im guessing because its a template inside of a template?

 

c.Bound(x => x.InvoiceNumber).ClientTemplate("<a href='\\\\\\#' title='Export To PDF' onClick='ExportReview(this)'><span class='k-icon k-i-pdf'></span></a> \\#=InvoiceNumber\\# ");

0
Gareth
Top achievements
Rank 1
answered on 15 Aug 2012, 07:54 PM
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...
Kishore
Top achievements
Rank 1
commented on 07 Aug 2013, 05:40 PM

It helped me. I have been struggling to figure out  for one day and finally..
Thanks a lot...
Zachary
Top achievements
Rank 1
commented on 10 Jan 2014, 04:41 PM

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>
rrr
Top achievements
Rank 1
commented on 10 Sep 2015, 05:56 AM

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;"

 

 

 

Hapsakti
Top achievements
Rank 1
commented on 18 Dec 2015, 09:06 AM

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?

Tags
Templates
Asked by
Jeremy
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Gareth
Top achievements
Rank 1
Share this question
or