Client-Side Binding

1 posts, 0 answers
  1. Dave
    Dave avatar
    32 posts
    Member since:
    Feb 2008

    Posted 02 Jun 2012 Link to this post

    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>

     

Back to Top