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

Template creation and t.getAttribute is not a function

4 Answers 504 Views

ListView (Mobile)

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

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>

</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

Accepted