In trying out the the ListView / Appending Data demo. The demo works well inside an asp.net solution. However, when we attempt to port this into a dotnetnuke module using its Telerik.dll - 2012.1.411.35 - The scripting fails with this error "Unable to get value of the property 'get_dataSource': object is null or undefined Home.aspx, line 756 character 21" With experimenting Setting "currentItemCount = 0" and the script fails at ' listView.set_virtualItemCount(listViewData._totalCount);'
Any suggestions are appreciated,
Cheers.
<div> <!-- content start -->
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript" >
var listView,
$,
autoLoadInterval,
isMouseOver,
animationDuration = 500,
updateInterval = 4000;
function pageLoad() {
$ = $telerik.$;
listView = $find("RadListViewDataBinding");
listView1 = $find("RadListView1");
//append 4 items initially
appendListViewData(4);
//append 3 more items every time the more results button is clicked
$("#more").click(function () { appendListViewData(3); });
//toggle auto-load on click
$("#autoLoad").click(toggleAutoLoad);
$("#scrollArea") //prevent auto-loading if mouse is over scroll area
.mouseenter(function () { isMouseOver = true; })
.mouseleave(function () { isMouseOver = false; })
}
function appendListViewData(itemCount) {
//YouTube search videos feed URL
var youtubeFeedUrlFormat = "https://gdata.youtube.com/feeds/api/videos?author=telerikinc&alt=json-in-script&start-index={0}&max-results={1}",
currentItemCount = listView1.get_dataSource() ? listView.get_dataSource().length : 0,
startIndex = currentItemCount + 1;
//jQuery.ajax reference: http://api.jquery.com/jQuery.ajax/
$.ajax({
type: "GET",
url: String.format(youtubeFeedUrlFormat, startIndex, itemCount),
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
success: onYouTubeRequestSuccess,
error: function () { throw new Error(arguments[1]); }
});
}
function onYouTubeRequestSuccess(result) {
var listViewData = mapListViewData(result);
listView.set_virtualItemCount(listViewData._totalCount);
animateScrollContainer(listViewData.length, function () {
listView.appendData(listViewData);
});
}
function animateScrollContainer(appendedItemCount, callback) {
var scrollArea = $("#scrollArea")[0],
$items = $("#itemContainer"),
singleItemHeight = 102,
addedHeight = appendedItemCount * singleItemHeight;
//jQuery.animate referece: http://api.jquery.com/animate/
$items.css("height", $items.height() + "px")
.animate({ height: "+=" + addedHeight + "px" },
{
duration: animationDuration,
step: function () {
scrollArea.scrollTop = scrollArea.scrollHeight;
},
complete: function () {
callback();
$items.css("height", "");
scrollArea.scrollTop = scrollArea.scrollHeight;
}
});
}
function mapListViewData(result) {
var data = [],
items = result.feed.entry;
for (var i = 0; i < items.length; i++) {
var item = items[i];
data[data.length] = {
title: item.title.$t,
description: formatDescription(item.content.$t),
link: item.link[0].href,
author: item.author[0].name.$t,
published: new Date(item.published.$t.split("T")[0].replace(/-/gi, "/")),
views: item.yt$statistics.viewCount,
thumb: item.media$group.media$thumbnail[2].url,
duration: formatThumbTime(item.media$group.media$content[0].duration)
};
//prefetch thumbnail image
(new Image()).src = data[data.length - 1].thumb;
}
data._totalCount = result.feed.openSearch$totalResults.$t;
return data;
}
function formatDescription(description) {
//split the text into words and take the first 25.
return description.split(" ").splice(0, 25).join(" ") + " <b>...</b>";
}
function formatThumbTime(time) {
var mins = Math.floor(time / 60),
secs = time % 60,
hours = Math.floor(mins / 60);
return hours ?
hours + ":" + mins + ":" + secs :
mins + ":" + secs;
}
function toggleAutoLoad() {
if (autoLoadInterval) {
clearInterval(autoLoadInterval);
autoLoadInterval = null;
$(this).html("Auto-Load");
updateButtonsVisiblity();
}
else {
$(this).html("Stop");
appendListViewData(1);
autoLoadInterval = setInterval(function () {
if (!isMouseOver) {
appendListViewData(1);
}
}, updateInterval);
updateButtonsVisiblity();
}
}
function updateButtonsVisiblity() {
var itemCount = listView.get_dataSource().length,
totalCount = listView.get_virtualItemCount();
if (itemCount >= totalCount) {
$("#more").css("visibility", "hidden");
$("#autoLoad").css("visibility", "hidden");
}
else {
if (autoLoadInterval) {
$("#more").css("visibility", "hidden");
}
else {
$("#more").css("visibility", "visible");
$("#autoLoad").css("visibility", "visible");
}
}
}
</script>
</telerik:RadScriptBlock>
<h2>Telerik on YouTube</h2>
<telerik:RadListView ID="RadListViewDataBinding" runat="server">
<LayoutTemplate>
<div id="telerikVideos">
<div id="scrollArea">
<div id="itemContainer">
</div>
</div>
</div>
<a id="autoLoad" href="javascript:void(0)" class="ybutton">Auto-Load</a>
<a id="more" class="ybutton" href="javascript:void(0)">Show more results</a>
</LayoutTemplate>
<ClientSettings>
<DataBinding ItemPlaceHolderID="itemContainer"> <ItemTemplate>
<div class="item">
<div class="thumb">
<a href="#= link #" target="_blank">
<img src="#= thumb #" />
<span class="time">#= duration #</span>
</a>
</div>
<div class="content">
<h3>
<a href="#= link #" target="_blank">#= title #</a>
</h3>
<div class="description">
#= description #
</div>
<div class="details">
<span class="author">
by <a href="http://www.youtube.com/user/#= author #" target="_blank">
#= author #
</a>
</span>
<span class="sep">|</span>
<span class="published">
#= format(published, "d") #
</span>
<span class="sep">|</span>
<span class="views">
#= views # views
</span>
</div>
</div>
</div>
</ItemTemplate>
</DataBinding>
<ClientEvents OnDataBound="updateButtonsVisiblity" />
</ClientSettings>
</telerik:RadListView>