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:
This is my code (i'm using IIS express and Visual Studio 2012 for development, i dont want to use MVVM):
Any ideas?
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
<!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
>