ListView - Appending Data

Products List

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadListView supports appending additional data items to its current data source. The client-side RadListView.appendData(array) method can be used to add new items to an existing data source, or set the current data source if no previous data is present. When new items are added to RadListView, existing items are not cleared and rebound. Instead, RadListView only creates new items for the appended data records, avoiding excessive databinding.

This demo shows an approach for binding JSON to RadListView. Additional data items can be appended on demand on click of a button, or at predefined regular intervals.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <h2 class="demoTitle">Products List</h2>
        <telerik:RadScriptBlock runat="server" ID="RadCodeBlock1">
            <script type="text/javascript">
                var listView;
                Sys.Application.add_load(function () {
                    listView = $find('<%= RadListView1.ClientID %>');
                });
            </script>
        </telerik:RadScriptBlock>
        <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight"> 
            <LayoutTemplate>
                <div id="mainContentWrapper">
                    <div id="scrollArea">
                        <div id="itemContainer">
                        </div>
                    </div>
                </div>
                <div style="width: 700px">
                    <telerik:RadButton RenderMode="Lightweight" ID="ShowMoreButton" runat="server" Text="Show more results" OnClientClicked="function(){appendListViewData(2);}"
                        AutoPostBack="false" CssClass="button" Skin="Silk"></telerik:RadButton> 
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Auto-Load" OnClientClicked="function(){toggleAutoLoad()}"
                        AutoPostBack="false" CssClass="button" Skin="Silk"></telerik:RadButton> 
                </div>
            </LayoutTemplate>
            <ClientSettings>
                <DataBinding ItemPlaceHolderID="itemContainer">
                    <ItemTemplate>
                        <div class="item">                            
                            <div class="content">
                                <h3>#= productName #</h3>
                                <div class="image-holder">
                                    <img src="#= imageURL#" alt="#= productName #" />
                                </div>
                                <div class="details">
                                    <span>Product ID: #= productID #</span><br />
                                    <span>Category: #= category #</span><br />    
                                    <span>Unit Price: #= unitPrice #</span>
                                </div>
                            </div>
                        </div>
                    </ItemTemplate>
                </DataBinding>
            </ClientSettings>
        </telerik:RadListView>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?