Template creation and t.getAttribute is not a function

5 posts, 1 answers
  1. Luka
    Luka avatar
    13 posts
    Member since:
    Oct 2013

    Posted 03 Dec 2013 Link to this post

    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?
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 03 Dec 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Luka
    Luka avatar
    13 posts
    Member since:
    Oct 2013

    Posted 03 Dec 2013 Link to this post

    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!
  5. Luka
    Luka avatar
    13 posts
    Member since:
    Oct 2013

    Posted 03 Dec 2013 Link to this post

    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...
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 03 Dec 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready