This is a migrated thread and some comments may be shown as answers.

how to populate Kendo List View with an external file Template

8 Answers 222 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Ammar
Top achievements
Rank 1
Ammar asked on 19 Aug 2012, 10:59 AM
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

8 Answers, 1 is accepted

Sort by
0
Ammar
Top achievements
Rank 1
answered on 20 Aug 2012, 02:33 AM
please someone reply here,i m waiting since yesterday
0
Michael
Top achievements
Rank 1
answered on 20 Aug 2012, 04:05 PM
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
0
Ammar
Top achievements
Rank 1
answered on 20 Aug 2012, 04:33 PM
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 :(
0
Michael
Top achievements
Rank 1
answered on 20 Aug 2012, 04:50 PM
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
0
Ammar
Top achievements
Rank 1
answered on 21 Aug 2012, 07:16 PM
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?
0
Accepted
Michael
Top achievements
Rank 1
answered on 21 Aug 2012, 08:06 PM

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> 

0
Ammar
Top achievements
Rank 1
answered on 21 Aug 2012, 08:29 PM
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:)
0
Michael
Top achievements
Rank 1
answered on 21 Aug 2012, 08:37 PM
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>
Tags
ListView
Asked by
Ammar
Top achievements
Rank 1
Answers by
Ammar
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Share this question
or