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>
<
Calendar
ID
=
"Calendar1"
runat
=
"server"
>
<
SpecialDays
>
<
telerik:RadCalendarDay
Repeatable
=
"Today"
ItemStyle-BackColor
=
"Green"
>
</
telerik:RadCalendarDay
>
</
SpecialDays
>
</
Calendar
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
DefaultLoadingPanelID
=
"RadAjaxLoadingPanel1"
>
<
ClientEvents
OnRequestStart
=
"requestStart"
/>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadGrid1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
div
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
AllowSorting
=
"True"
AutoGenerateColumns
=
"False"
GridLines
=
"None"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
OnSortCommand
=
"RadGrid1_SortCommand"
>
<
MasterTableView
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"Name"
HeaderText
=
"Name"
SortExpression
=
"Name"
UniqueName
=
"colTextual"
/>
<
telerik:GridBoundColumn
DataField
=
"Name"
HeaderImageUrl
=
"Images/someImage.gif"
SortExpression
=
"Name"
UniqueName
=
"colGraphical"
/>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
</
div
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
Skin
=
"Default"
>
</
telerik:RadAjaxLoadingPanel
>
<
telerik:RadCodeBlock
ID
=
"codeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function requestStart(sender, eventArgs) {
alert("requestStart");
}
</
script
>
</
telerik:RadCodeBlock
>
protected
void
RadGrid1_SortCommand(
object
source, Telerik.Web.UI.GridSortCommandEventArgs e)
{
RadAjaxManager m = RadAjaxManager.GetCurrent(Page);
bool
inAjax = m ==
null
?
false
: m.IsAjaxRequest;
}
function
OnClientTimeSlotClick(sender, eventArgs) {
if
(!sender.get_readOnly()) {
var
startTime = sender._rowSelectionState.rowSelectionStartSlot._startTime;
var
endTime = sender._rowSelectionState.rowSelectionEndSlot._startTime;
var
dateStart = window.document.getElementById(
"<%= DateStart.ClientID %>"
);
var
dateEnd = window.document.getElementById(
"<%= DateEnd.ClientID %>"
);
dateStart.value = startTime.toDateString();
dateEnd.value = endTime.toDateString();
}
}
Protected
Sub
RadScheduler_TimeSlotContextMenuItemClicking(
ByVal
sender
As
Object
,
ByVal
e
As
TimeSlotContextMenuItemClickingEventArgs)
Dim
scheduler
As
RadScheduler =
DirectCast
(sender, RadScheduler)
Dim
MyDateStart
As
Date
Dim
MyDateEnd
As
Date
If
Me
.DateStart.Value <>
""
Then
'date range set
MyDateStart =
CDate
(
Me
.DateStart.Value)
MyDateEnd =
CDate
(
Me
.DateEnd.Value).AddDays(1)
If
Not
((e.TimeSlot.Start >= MyDateStart)
And
(e.TimeSlot.
End
<= MyDateEnd))
Then
'single cell is NOT within highlighted range; reset dates
MyDateStart = e.TimeSlot.Start
MyDateEnd = e.TimeSlot.
End
End
If
Else
'date range NOT set
MyDateStart = e.TimeSlot.Start
MyDateEnd = e.TimeSlot.
End
End
If
For
Each
appt
As
Appointment
In
scheduler.Appointments.GetAppointmentsInRange(MyDateStart, MyDateEnd)
'delete appointment(s)
Appointments.Remove(FindById(appt.ID))
Next
AddAppointment(scheduler, MyDateStart, MyDateEnd, e.MenuItem.Text, e.MenuItem.Value)
End
Sub
var keyValue = (e.Item
as
GridDataItem).GetDataKeyValue(
"keyField"
));
GridDataItem item = MyGrid.Items[
int
.Parse(e.CommandArgument)];
var keyValue = item.GetDataKeyValue(
"keyField"
);
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"rgFacilities"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"rgFacilities"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadGrid
DataSourceID
=
"ldsFacilities"
AutoGenerateColumns
=
"false"
AllowPaging
=
"True"
PageSize
=
"20"
AllowSorting
=
"True"
ID
=
"rgFacilities"
runat
=
"server"
>
<
MasterTableView
DataKeyNames
=
"FacilityID"
DataSourceID
=
"ldsFacilities"
AllowMultiColumnSorting
=
"False"
GroupLoadMode
=
"Server"
>
<
DetailTables
>
<
telerik:GridTableView
DataKeyNames
=
"EquipmentID"
DataSourceID
=
"ldsEquipment"
Width
=
"100%"
runat
=
"server"
AutoGenerateColumns
=
"true"
>
<
ParentTableRelation
>
<
telerik:GridRelationFields
DetailKeyField
=
"FacilityID"
MasterKeyField
=
"FacilityID"
/>
</
ParentTableRelation
>
</
telerik:GridTableView
>
</
DetailTables
>
<
Columns
>
<
telerik:GridBoundColumn
SortExpression
=
"Name"
HeaderText
=
"Facility Name"
DataField
=
"Name"
UniqueName
=
"Name"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
SortExpression
=
"City"
HeaderText
=
"City"
DataField
=
"City"
UniqueName
=
"City"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
SortExpression
=
"Region"
HeaderText
=
"State/Province"
DataField
=
"Region"
UniqueName
=
"Region"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
SortExpression
=
"Country"
HeaderText
=
"Country"
DataField
=
"Country"
UniqueName
=
"Country"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
SortExpression
=
"Description"
HeaderText
=
"Description"
DataField
=
"Description"
UniqueName
=
"Description"
AllowSorting
=
"false"
>
</
telerik:GridBoundColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
<
asp:LinqDataSource
ID
=
"ldsFacilities"
OnSelecting
=
"ldsFacilities_Selecting"
runat
=
"server"
>
</
asp:LinqDataSource
>
<
asp:LinqDataSource
ID
=
"ldsEquipment"
OnSelecting
=
"ldsEquipment_Selecting"
runat
=
"server"
>
<
SelectParameters
>
<
asp:SessionParameter
Name
=
"FacilityID"
SessionField
=
"FacilityID"
/>
</
SelectParameters
>
</
asp:LinqDataSource
>
protected
void
ldsFacilities_Selecting(
object
sender, LinqDataSourceSelectEventArgs e)
{
Data.EcofitDataContext db =
new
Data.EcofitDataContext();
e.Result = (from f
in
db.Facilities
select f);
}
protected
void
ldsEquipment_Selecting(
object
sender, LinqDataSourceSelectEventArgs e)
{
Data.EcofitDataContext db =
new
Data.EcofitDataContext();
e.Result = (from eq
in
db.Equipments
where eq.FacilityID == Guid.Parse(e.SelectParameters[
"FacilityID"
].ToString())
select eq);
}