This is a migrated thread and some comments may be shown as answers.

Client-Side Binding

0 Answers 62 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 02 Jun 2012, 07:39 PM

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>

 

No answers yet. Maybe you can help?

Tags
ListView
Asked by
Dave
Top achievements
Rank 1
Share this question
or