List Templates in external files

2 posts, 0 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 03 May 2012 Link to this post

    I created a List that is populated from an external JSON file.

    But I don't like cluttering my HTML with Javascript snippets, So I thought I could just reference an external file. But that is not working:

    Original: (which works)

    <div id="listView">
        <script src="Templates/TypeEntryTemplate.tmpl" type="text/x-kendo-tmpl" id="template" >
            <div class="typeEntry">
                <input id="typeCheck-${idx}" value="type-${type}" type="checkbox" checked="checked"/>
                <label for="typeCheck-${idx}">${type}</label>
            </div>
        </script>
    </div>

    Moving the script to an external file:

    <div id="listView">
        <script src="Templates/TypeEntryTemplate.tmpl" type="text/x-kendo-tmpl" id="template" />
    </div>

    External File (Templates/TypeEntryTemplate.tmpl :

    <div class="typeEntry">
        <input id="typeCheck-${idx}" value="type-${type}" type="checkbox" checked="checked"/>
        <label for="typeCheck-${idx}">${type}</label>
    </div>


    FYI: here is the code that creates the ListView:

    $("#listView").kendoListView({
        dataSource:dataSource,
        pageable:false,
        template:kendo.template($("#template").html())
    });

  2. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 04 May 2012 Link to this post

    Overnight it occured to me that I was being stupid.

    I now create the kendo template as a string and use Jquery.Extend  to clone the template and replace pieces. So I am closing this thread.

  3. Kendo UI is VS 2017 Ready
Back to Top