hi there,
I'm a newbie in using kendo ui. and I'm having problems with populating a template using data from an ajax call.
here is my view
<div id="computerTab" class="container">
<div id="computerDetailsSection"></div>
</div>
<script type="text/x-kendo-template" id="myTemplate">
<div>
<!-- Loop for sections -->
<dl>
#for (var i=0,len=Sections.length; i<len; i++){#
#if(Sections[i].Fields.length>0)#
#{#
<dt>${ Sections[i].Title }</dt>
<!-- Loop for fields -->
#for(var j=0, l=Sections[i].Fields.length; j<l; j++){#
<dd>${ Sections[i].Fields[j].Name }</dd>
#}#
#}#
# } #
</dl>
</div>
</script>
here is my script
<script>
function getComputerData() {
var result;
$.ajax({
url: 'myurl',
type: 'GET',
contentType: 'application/json; charset=utf-8',
success: function (data) {
console.log('success');
result = data;
},
error: function () {
console.log('Error');
}
});
return result;
}
var ajaxData = getComputerData();
var scriptTemplate = kendo.template($("#myTemplate").html());
$("#computerDetailsSection").html(scriptTemplate(ajaxData));
here is a sample of the data that i get from my ajax call
Sections: [
{ Fields: [], Title: "Computer", Order: 1, init: "readMode", alt: "editMode hidden" },
{
Fields: [
{ Order: 1, Name: "Company-owned Location", Value: null },
{ Order: 2, Name: "Country", Value: null },
{ Order: 3, Name: "State", Value: null },
{ Order: 4, Name: "Site", Value: null },
{ Order: 5, Name: "Address Line 1", Value: null },
{ Order: 6, Name: "Address Line 2", Value: null },
{ Order: 7, Name: "Building", Value: null },
{ Order: 8, Name: "Floor", Value: null },
{ Order: 9, Name: "City", Value: null },
{ Order: 10, Name: "Zip", Value: null },
{ Order: 11, Name: "Room", Value: null },
{ Order: 12, Name: "Where can you be found?", Value: null }
],
Title: "Location", Order: 5, init: "readMode", alt: "editMode hidden"
}]
but when i run this in my browser i always get this exception JavaScript runtime error: Object expected
what am i doing wrong?
thanks!
I'm a newbie in using kendo ui. and I'm having problems with populating a template using data from an ajax call.
here is my view
<div id="computerTab" class="container">
<div id="computerDetailsSection"></div>
</div>
<script type="text/x-kendo-template" id="myTemplate">
<div>
<!-- Loop for sections -->
<dl>
#for (var i=0,len=Sections.length; i<len; i++){#
#if(Sections[i].Fields.length>0)#
#{#
<dt>${ Sections[i].Title }</dt>
<!-- Loop for fields -->
#for(var j=0, l=Sections[i].Fields.length; j<l; j++){#
<dd>${ Sections[i].Fields[j].Name }</dd>
#}#
#}#
# } #
</dl>
</div>
</script>
here is my script
<script>
function getComputerData() {
var result;
$.ajax({
url: 'myurl',
type: 'GET',
contentType: 'application/json; charset=utf-8',
success: function (data) {
console.log('success');
result = data;
},
error: function () {
console.log('Error');
}
});
return result;
}
var ajaxData = getComputerData();
var scriptTemplate = kendo.template($("#myTemplate").html());
$("#computerDetailsSection").html(scriptTemplate(ajaxData));
here is a sample of the data that i get from my ajax call
Sections: [
{ Fields: [], Title: "Computer", Order: 1, init: "readMode", alt: "editMode hidden" },
{
Fields: [
{ Order: 1, Name: "Company-owned Location", Value: null },
{ Order: 2, Name: "Country", Value: null },
{ Order: 3, Name: "State", Value: null },
{ Order: 4, Name: "Site", Value: null },
{ Order: 5, Name: "Address Line 1", Value: null },
{ Order: 6, Name: "Address Line 2", Value: null },
{ Order: 7, Name: "Building", Value: null },
{ Order: 8, Name: "Floor", Value: null },
{ Order: 9, Name: "City", Value: null },
{ Order: 10, Name: "Zip", Value: null },
{ Order: 11, Name: "Room", Value: null },
{ Order: 12, Name: "Where can you be found?", Value: null }
],
Title: "Location", Order: 5, init: "readMode", alt: "editMode hidden"
}]
but when i run this in my browser i always get this exception JavaScript runtime error: Object expected
what am i doing wrong?
thanks!