<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>client-binding with initial server items</title>
    <style type="text/css">
        html, body, form
        {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #MyContainer1
        {
            height: 100%;
            margin: 0;
            overflow-y: scroll;
        }
        .rlvI, .rlvA
        {
            width: 200px;
            padding:10px;
            height: 80px;
            margin: 5px;            
        }
        div.RadListView
        {
            height: 100%;
        }
        ul
        {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1" EnableScriptLocalization="true">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            <asp:ScriptReference Path="~/jquery.tmpl.js" />
        </Scripts>
    </asp:ScriptManager>
    <telerik:RadListView runat="server" ID="RadListView1" Skin="Windows7">
        <LayoutTemplate>
            <div class="RadListView RadListViewFloated RadListView_Windows7">
                <div class="rlvFloated" id="MyContainer1">
                    <div id="itemPlaceHolder" runat="server">
                    </div>
                </div>
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <div class="rlvI">
                <ul>
                    <li><i>Product Number</i>: <b>
                        <%#Eval("ProductNumber")%></b> </li>
                    <li><i>Name</i>:
                        <%#Eval("Name")%>
                    </li>
                     <li><i>Weight</i>:
                        <%# Eval("Weight")%>
                    </li>
                    <li><i>Price</i>:
                        <%# Eval("ListPrice", "{0:C}") %>
                    </li>
                </ul>               
            </div>
        </ItemTemplate>
    </telerik:RadListView>
    <telerik:RadListViewClientBindingExtender runat="server" ID="RadListViewClientBindingExtender1"
        TargetControlID="RadListView1">
        <ClientItemTemplate>
            <div class="rlvI">
               <ul>
                    <li><i>Product Number</i>: <b>
                        {%=ProductNumber%}</b> </li>
                    <li><i>Name</i>:
                        {%=Name%}
                    </li>
                     <li><i>Weight</i>:
                        {%=Weight%}
                    </li>
                    <li><i>Price</i>:
                        {%= String.localeFormat("{0:C}", ListPrice) %}
                    </li>
                </ul>               
            </div>                
        </ClientItemTemplate>
        <DataBindingSettings ClientItemContainerID="MyContainer1" LocationUrl="Default2.aspx"
            MethodName="GetProducts" />
    </telerik:RadListViewClientBindingExtender>
    </form>
</body>
</html>
