how to populate Kendo List View with an external file Template

[Ammar]

i have template in an external file like this

BooksLibrary.htm

<ul id="vid">
    <li class="panel"><a href="http://demo.fabthemes.com/valor/video/bioshock/">
        <img width="150" height="200" src="../../BookImages/${BookImageName}" class="v-image wp-post-image"
            alt="46" title="46" /></a>
        <button id="ViewDetail" class="k-button" type="${Book_Id}">
            Have a Look</button>
    </li>
</ul>


and in my script file i want to load this template

var templateMarkup;
$(function () {

    $.get("../Templates/BooksLibrary.htm", function (data) {
        templateMarkup = kendo.template(data);
    });

    var dataSource = new kendo.data.DataSource({

        transport: {
            read: {
                type: "POST",
                url: "../Service/books.svc/AllBooks",
                contentType: "application/json; charset=utf-8",
                dataType: "json"

            }
        },

        schema: {

            parse: function (data) {
                return JSON.parse(data.d);
            }
        },
        pageSize: 10
    });

    $("#casing").kendoListView({
        dataSource: dataSource,
        template: templateMarkup
    });
});

but data is not populated.
please help me where i did wrong, if i place template not in external file List View easily bind but i want to load template from external file

[Ammar]

please someone reply here,i m waiting since yesterday

[Michael]

I don't know about .htm files, but if I was doing this with a script file then I would give my script an id
ex. <script id="list-view-template" type="text/x-kendo-template">...</script>

Then in the listview control, reference the ClientTemplateId("list-view-template")

You can place a script path reference to the external file in the head of your HTML and it should all wire up correctly.

Michael

[Ammar]

yeah i know this, and it work fine but i want to store my template in external file to make it reuseable.
i believed there must be a some way to do this.please let me know if any one can help..i was waiting for my solution fromthe last two days :(

[Michael]

Can you tell me more about how you are trying to reuse? 
Script files are stored outside of the webpage in many cases and thus reusable.
Example, the jquery.js file is able to be referenced and shared by all of your pages with a header link.

Is this something that is going to be on a file system and shared amongst projects?  Either way, your could do it, just don't put the ../../ in your link but rather give it an actual path. 

I do need more information to be able to help though.

Thanks,
Michael Buller
Stratuslive, LLC

[Ammar]

i have a simple question.
i have a template which is store in .htm file
the only thing i want when i use the KendoListView i want to to get my external template like this

$('#listView').kendoListView({
dataSource:dataSource,
template:kendo.template(????);
});

how i get my template from the external file?

[Michael]

Can you use a .js file instead of the .htm?  You can put the same markup, etc. in the script file...
The difference would be that the header can reference it as a <script> and then your kendo ui element could reference it by name...
This .js file could be put in any folder in the project you want and easily shared with project references.

I am not understanding the need for the .htm file or where the .htm file is in your project.

So.  the .js file would look like this from your code...
 //script.js
var template = kendo.template('<ul id="vid">
<li class="panel"><a href="http://demo.fabthemes.com/valor/video/bioshock/">
<img width="150" height="200" src="../../BookImages/${BookImageName}" class="v-image wp-post-image"
alt="46" title="46" /></a>
<button id="ViewDetail" class="k-button" type="${Book_Id}">
Have a Look</button>
</li>
< /ul>')

Then you would reference ...

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

and that would work as long as you have a script reference in the head of your html....

 <script src="@Url.Content("~/Scripts/script.js")" type="text/javascript"></script> 

[Ammar]

thanks it works, actually the need for the use of .htm file is i have .aspx file and i want to store all my template in separate .htm file thats why i also want to store this one into .htm file.if there is possiblity to get from .htm file instead of using .js file please tell me.
if not possible then it also fine for me and yeah i mark ur valueable reply as answer.thanks again:)

[Michael]

This works perfectly fine in .aspx as well as MVC.  The only difference is I would use the .Master page to include my script references.
example...

<head runat="server">    
     <link href="Styles/kendo/kendo.common.min.css" rel="Stylesheet" type="text/css" />
     <link href="Styles/kendo/kendo.silver.min.css" rel="Stylesheet" type="text/css" />
     <link href="Styles/Site.css" rel="Stylesheet" type="text/css" />
     <script src="Scripts/jquery.min.js" type="text/javascript"></script>
     <script src="Scripts/kendo.web.min.js" type="text/javascript"></script>
     <script src="Scripts/json.extensions.js" type="text/javascript"></script>
     <script src="Scripts/template.js" type="text/javascript"></script>     
</head>