Invalid Template?

[Jeremy]

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 : "[e-mail]",

                FirstName: "Jeremy",

                LastName: "Mills",

                UserID: "1",

                selected: true },

            {   UserName : "[e-mail]",

                FirstName: "Josh",

                LastName: "Howard",

                UserID: "2",

                selected: false},

            {   UserName : "[e-mail]",

                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.

[Petyo]

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

[Jeremy]

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]

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]

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]

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]

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]

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\\# ");

[Gareth]

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]

It helped me. I have been struggling to figure out  for one day and finally..
Thanks a lot...

[Zachary]

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]

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]

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?