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

Template creation and t.getAttribute is not a function

4 Answers 221 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Luka
Top achievements
Rank 1
Luka asked on 03 Dec 2013, 01:14 PM
Hi! I'm using a custom template to make my listview. It seems that kendo ui does make the templates since i see them on screen but the whole thing just hangs with the loading animation in the middle running indefinetly.

Firebug shows this:
Timestamp: 3.12.2013 14:09:09
Error: TypeError: t.getAttribute is not a function
Source File: http://localhost:44112/Resources/scripts/vendor/kendoUI/js/kendo.all.min.js
Line: 9
This is my code (i'm using IIS express and Visual Studio 2012 for development, i dont want to use MVVM):
<!DOCTYPE html>
<html>
<head runat="server">
    <style>
        .gumb {
            display: inline-block;
        }
 
        .container-gumbi {
            float: right;
            margin-top: 5px;
        }
 
        .kocka {
            display: inline-block;
        }
 
        .kockaimg {
            display: inline-block;
            vertical-align: middle;
        }
 
        p.info-text {
            margin: auto;
            font-size: 10px;
        }
 
        p.date-text {
            margin-top: 5px;
            font-size: 13px;
            font-weight: 800;
            margin-bottom: 0px;
        }
 
        p.opis-text {
            margin-top: 5px;
            font-size: 11px;
            font-weight: 500;
            margin-bottom: 0px;
        }
 
        p.denar-text {
            margin-top: 5px;
            font-size: 14px;
            font-weight: 800;
            margin-bottom: 0px;
        }
    </style>
    <title></title>
    <link href="/../../../Resources/scripts/vendor/kendoUI/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="/../../../Resources/scripts/vendor/kendoUI/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="/../../../Resources/scripts/vendor/kendoUI/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="/../../../Resources/scripts/vendor/kendoUI/js/jquery.min.js"></script>
    <script src="/../../../Resources/scripts/vendor/kendoUI/js/kendo.all.min.js"></script>
</head>
<body>
    <div data-role="view" id="listview-templates" data-init="mobileListViewTemplatesInit" data-title="ListView">
    <div class="head"> </div
    <ul id="custom-listview"></ul>
</div>
 
<<script type="text/x-kendo-template" id="customListViewTemplate">
    <li>
                    <div class="kockaimg">
                        <img width="50" height="50" src="../../../clipart-generic-logo-d2f5.png" />
                    </div>
                    <div class="kocka">
                        <h4><span>#:nazivNarocnika#</span></h4>
                    </div>
                </li>
                <li>
                    <div class="kocka">
                        <p class="info-text">
                            Datum lansiranja:<br />
                        </p>
                        <p class="date-text">#:dtLansiranja#</p>
                    </div>
                    <div class="kocka">
                        <p class="info-text">
                            Datum pričetka:<br />
                        </p>
                        <p class="date-text">#:dtPricetka#</p>
                    </div>
                    <div class="kocka">
                        <p class="info-text">
                            Datum zaključka:<br />
                        </p>
                        <p class="date-text">#:dtZakljucka#</p>
                    </div>
                </li>
                <li>
                    <p class="info-text">
                        Opis:<br />
                    </p>
                    <p class="opis-text">#:opis#</p>
                </li>
                <li>
                    <div class="kocka">
                        <p class="info-text">
                            Trenutna ponudba:<br />
                        </p>
                        <p class="denar-text">#:cena# €</p>
                    </div>
                    <div class="container-gumbi">
                        <div class="gumb">
                            <a class="k-button" data-icon="add" style="font-size: 10px" data-role="button" href="">Dodaj ponudbo</a>
                        </div>
                        <div class="gumb">
                            <a class="k-button" data-icon="info" style="font-size: 10px" data-role="button" href="">Podrobno</a>
                        </div>
                    </div>
                </li>
            </script>
    <script>
        var groupedData = [
       { nazivNarocnika: "Narocnik d.d.", dtLansiranja: "18.5.2013", dtPricetka: "21.5.2013", dtZakljucka: "5.6.2013", opis: "Bla bla bla.", cena: "8.000,00" },
       { nazivNarocnika: "Narocnik d.d.", dtLansiranja: "18.5.2013", dtPricetka: "21.5.2013", dtZakljucka: "5.6.2013", opis: "Bla bla bla.", cena: "8.000,00" },
       { nazivNarocnika: "Narocnik d.d.", dtLansiranja: "18.5.2013", dtPricetka: "21.5.2013", dtZakljucka: "5.6.2013", opis: "Bla bla bla.", cena: "8.000,00" },
       { nazivNarocnika: "Narocnik d.d.", dtLansiranja: "18.5.2013", dtPricetka: "21.5.2013", dtZakljucka: "5.6.2013", opis: "Bla bla bla.", cena: "8.000,00" }
        ];
 
        function mobileListViewTemplatesInit() {
            $("#custom-listview").kendoMobileListView({
                dataSource: kendo.data.DataSource.create({ data: groupedData }),
                template: $("#customListViewTemplate").html(),
                headerTemplate: "Ime razpisa"
            });
        }
        var app = new kendo.mobile.Application($("#mjav"), {
            skin: 'flat'
        });
    </script>
<script>
    var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
Any ideas?

4 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 03 Dec 2013, 01:30 PM
Hi Luka,

There is an invalid html in the template that you use to display the ListView's content. The problem comes from the fact that The ListView automatically wraps the template content in <li> tag. Putting a <li> tag inside the template creates invalid nesting of elements. So you will need to either wrap the <li> elements in a <ul> tag in order to create valid nesting, or you can choose different html elements to display your content.

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Luka
Top achievements
Rank 1
answered on 03 Dec 2013, 01:37 PM
It works like a charm! Ofcourse the UL tag, been working on this project for a while now and i'm on the front end and just didnt see the obvious fix. Thank you for a rapid reply!
0
Luka
Top achievements
Rank 1
answered on 03 Dec 2013, 01:49 PM
Ah but now i see whats different. I'm not using your listview design anymore... Is there anyway i could get that design for lists on my ul in my template?

EDIT: I should really stop for today. The solution is obvious add data-role="listview" to the ul element in the template...
0
Kiril Nikolov
Telerik team
answered on 03 Dec 2013, 02:17 PM
Hi Luka,

I am glad you found the solution. Please do not hesitate to contact us whenever you need help with the Kendo UI widgets.

Have a great day!

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView (Mobile)
Asked by
Luka
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Luka
Top achievements
Rank 1
Share this question
or