<%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.ListViewExamplesVBNET.Overview.DefaultVB"CodeFile="DefaultVB.aspx.vb" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" DecorationZoneID="demo-container" EnableRoundedCorners="false" />
<div class="demo-container size-wide" id="demo-container">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ListViewPanel1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="CheckBoxList1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="CheckBoxList1"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
<ClientEvents OnRequestStart="RequestStart"></ClientEvents>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function RequestStart(sender, eventArgs) {
//disable ajax on update/insert operation to upload the image
if ((eventArgs.get_eventTarget().indexOf("Update") > -1) || (eventArgs.get_eventTarget().indexOf("PerformInsert") > -1)) {
eventArgs.set_enableAjax(false);
}
}
</script>
</telerik:RadCodeBlock>
<table>
<tr>
<td>
<h3>Editable RadListView with tiled layout</h3>
<asp:Panel ID="ListViewPanel1" runat="server">
<telerik:RadListView ID="RadListView1" DataSourceID="SqlDataSource1" runat="server" RenderMode="Lightweight"
ItemPlaceholderID="CustomersContainer" DataKeyNames="CustomerID" AllowPaging="true"
OnItemCommand="RadListView1_ItemCommand">
<LayoutTemplate>
<!-- Set the id of the wrapping container to match the CLIENT ID of the RadListView control to display the ajax loading panel
In case the listview is embedded in another server control, you will need to append the id of that server control -->
<fieldset id="FiledSet1" class="mainFieldset">
<legend>Customers</legend>
<table>
<tr>
<td>
<telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
PageSize="2" CssClass="pagerStyle">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
<telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="4"></telerik:RadDataPagerButtonField>
<telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
<telerik:RadDataPagerPageSizeField PageSizeComboWidth="60" PageSizeText="Page size: "></telerik:RadDataPagerPageSizeField>
<telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
></telerik:RadDataPagerGoToPageField>
</Fields>
</telerik:RadDataPager>
</td>
</tr>
</table>
<div class="RadListView RadListView_<%# Container.Skin %>">
<asp:PlaceHolder ID="CustomersContainer" runat="server"></asp:PlaceHolder>
</div>
<div class="clearFix">
</div>
<table class="commandTable">
<tr>
<td class="insertCell">
<telerik:RadButton RenderMode="Lightweight" ID="btnInitInsert" runat="server" Text="Add New Customer" OnClick="btnInitInsert_Click" CausesValidation="false"></telerik:RadButton>
</td>
<td class="sortCell">
<asp:Label ID="lblSort1" runat="server" AssociatedControlID="ddListSort" Text="Sort by:"
CssClass="sortLabel"></asp:Label>
<telerik:RadComboBox RenderMode="Lightweight" ID="ddListSort" Width="185px" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddListSort_SelectedIndexChanged" CausesValidation="false">
<Items>
<telerik:RadComboBoxItem Text="-Select field to sort-" Value=""></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Text="Company name" Value="CompanyName"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Text="Contact name" Value="ContactName"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Text="Title" Value="ContactTitle"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Text="City" Value="City"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Text="Country" Value="Country"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Text="Clear sort" Value="ClearSort"></telerik:RadComboBoxItem>
</Items>
</telerik:RadComboBox>
<asp:RadioButtonList RepeatLayout="Flow" RepeatDirection="Horizontal" ID="rblSort"
runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblSort_SelectedIndexChanged">
<asp:ListItem Text="Ascending" Value="ASC" Selected="True"></asp:ListItem>
<asp:ListItem Text="Descending" Value="DESC"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
</table>
</fieldset>
</LayoutTemplate>
<ItemTemplate>
<!--The widths/heights of the fieldset/outer tables in the item/edit/insert templates should match to avoid wrapping or visual discrepancies
in the tiles layout-->
<fieldset class="fieldset itemFieldset">
<legend>Company name:
<%# Eval("CompanyName") %></legend>
<table class="dataTable">
<tr class="rlvI">
<td>
<table class="itemTable">
<tr>
<td>
<table class="innerItemTable">
<tr>
<td class="itemCellLabel">Name:
</td>
<td class="itemCellInfo">
<%#Eval("ContactName")%>
</td>
</tr>
<tr>
<td>Title:
</td>
<td>
<%#Eval("ContactTitle")%>
</td>
</tr>
<tr>
<td>City:
</td>
<td>
<%# Eval("City")%>
</td>
</tr>
<tr>
<td>Country:
</td>
<td>
<%# Eval("Country")%>
</td>
</tr>
<tr>
<td>Phone:
</td>
<td>
<%#Eval("Phone")%>
</td>
</tr>
</table>
</td>
<td class="image">
<telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Contact Photo"
ToolTip="Contact Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# IIf(Eval("Photo") IsNot DBNull.Value, Eval("Photo"), New System.Byte(-1) {})%>'></telerik:RadBinaryImage>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<telerik:RadButton RenderMode="Lightweight" ID="btnEdit" CssClass="btnEdit" runat="server" Text="Edit" CommandName="Edit" CausesValidation="false"></telerik:RadButton>
<telerik:RadButton RenderMode="Lightweight" ID="btnDelete" CssClass="btnDelete" runat="server" Text="Delete" CommandName="Delete" CausesValidation="false"></telerik:RadButton>
</td>
</tr>
</table>
</fieldset>
</ItemTemplate>
<EditItemTemplate>
<!--The widths/heights of the fieldset/outer tables in the item/edit/insert templates should match to avoid wrapping or visual discrepancies
in the tiles layout-->
<fieldset class="fieldset editFieldSet">
<legend><asp:Label runat="server" AssociatedControlID="txtBoxCompanyName">Company name:</asp:Label>
<asp:TextBox ID="txtBoxCompanyName" runat="server" Text='<%#Bind("CompanyName")%>'></asp:TextBox>
<asp:RequiredFieldValidator ID="rvCompanyName" runat="server" ControlToValidate="txtBoxCompanyName"
ErrorMessage="Please enter company name" Display="Dynamic"></asp:RequiredFieldValidator>
</legend>
<table class="dataEditTable">
<tr>
<td>
<table class="editTable">
<tr>
<td>
<table>
<tr>
<td class="editItemCellLabel"><asp:Label runat="server" AssociatedControlID="txtBoxName">Name:</asp:Label>
</td>
<td class="editItemCellInfo">
<asp:TextBox ID="txtBoxName" runat="server" Text='<%#Bind("ContactName")%>'></asp:TextBox>
<asp:RequiredFieldValidator ID="rvName" runat="server" ControlToValidate="txtBoxName"
ErrorMessage="Please enter name" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td><asp:Label runat="server" AssociatedControlID="txtBoxTitle">Title:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtBoxTitle" runat="server" Text='<%#Bind("ContactTitle")%>'></asp:TextBox>
<asp:RequiredFieldValidator ID="rvTitle" runat="server" ControlToValidate="txtBoxTitle"
ErrorMessage="Please enter title" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td><asp:Label runat="server" AssociatedControlID="txtBoxCity">City:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtBoxCity" runat="server" Text='<%#Bind("City")%>'></asp:TextBox>
<asp:RequiredFieldValidator ID="rvCity" runat="server" ControlToValidate="txtBoxCity"
ErrorMessage="Please enter city" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td><asp:Label runat="server" AssociatedControlID="txtBoxCountry">Country:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtBoxCountry" runat="server" Text='<%#Bind("Country")%>'></asp:TextBox>
<asp:RequiredFieldValidator ID="rvCountry" runat="server" ControlToValidate="txtBoxCountry"
ErrorMessage="Please enter country" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td><asp:Label runat="server" AssociatedControlID="txtBoxPhone">Phone:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtBoxPhone" runat="server" Text='<%#Bind("Phone")%>'></asp:TextBox>
<asp:RequiredFieldValidator ID="rvPhone" runat="server" ControlToValidate="txtBoxPhone"
ErrorMessage="Please enter phone" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
</td>
<td class="editImage">
<telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Contact Photo"
ToolTip="Contact Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# IIf(Eval("Photo") IsNot DBNull.Value, Eval("Photo"), New System.Byte(-1) {})%>'></telerik:RadBinaryImage>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<div class="asyncUpload">
<telerik:RadAsyncUpload RenderMode="Lightweight" ID="ruCustomerImage" runat="server" AllowedFileExtensions=".jpg,.jpeg,.gif,.png"
MaxFileSize="1000000" ControlObjectsVisibility="None" InputSize="12" Width="130px"
CssClass="radUploadStyle" OnFileUploaded="ruCustomerImage_FileUploaded">
</telerik:RadAsyncUpload>
</div>
<div class="clearFix">
</div>
<div class="commandButton">
<telerik:RadButton RenderMode="Lightweight" ID="btnUpdate" runat="server" Text="Update" CommandName="Update"></telerik:RadButton><%-- --%><telerik:RadButton RenderMode="Lightweight" ID="btnCancel" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false"></telerik:RadButton>
</div>
</td>
</tr>
</table>
</fieldset>
</EditItemTemplate>
<InsertItemTemplate>
<!--The widths/heights of the fieldset/outer tables in the item/edit/insert templates should match to avoid wrapping or visual discrepancies
in the tiles layout-->
<fieldset class="fieldset fieldsetInsert">
<legend><asp:Label runat="server" AssociatedControlID="txtBoxCompanyName">Company name:</asp:Label>
<asp:TextBox ID="txtBoxCompanyName" runat="server" Text='<%# Bind("CompanyName") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="rvCompanyName" runat="server" ControlToValidate="txtBoxCompanyName"
ErrorMessage="Please enter company name" Display="Dynamic"></asp:RequiredFieldValidator>
</legend>
<table class="dataInsertTable">
<tr>
<td>
<table class="editTable">
<tr>
<td class="editItemCellLabel"><asp:Label runat="server" AssociatedControlID="txtBoxName">Name:</asp:Label>
</td>
<td class="editItemCellInfo">
<asp:TextBox ID="txtBoxName" runat="server" Text='<%# Bind("ContactName") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="rvName" runat="server" ControlToValidate="txtBoxName"
ErrorMessage="Please enter name" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td><asp:Label runat="server" AssociatedControlID="txtBoxTitle">Title:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtBoxTitle" runat="server" Text='<%# Bind("ContactTitle") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="rvTitle" runat="server" ControlToValidate="txtBoxTitle"
ErrorMessage="Please enter title" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td><asp:Label runat="server" AssociatedControlID="txtBoxCity">City:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtBoxCity" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="rvCity" runat="server" ControlToValidate="txtBoxCity"
ErrorMessage="Please enter city" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td><asp:Label runat="server" AssociatedControlID="txtBoxCountry">Country:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtBoxCountry" runat="server" Text='<%# Bind("Country") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="rvCountry" runat="server" ControlToValidate="txtBoxCountry"
ErrorMessage="Please enter country" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td><asp:Label runat="server" AssociatedControlID="txtBoxPhone">Phone:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtBoxPhone" runat="server" Text='<%# Bind("Phone") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="rvPhone" runat="server" ControlToValidate="txtBoxPhone"
ErrorMessage="Please enter phone" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
</td>
<td class="editImage">
<telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="No Photo"
ToolTip="No Photo" Width="90px" Height="110px" ResizeMode="Fit" ImageUrl="~/ListView/Examples/Overview/images/EmtpyCategoryImage.jpg"></telerik:RadBinaryImage>
</td>
</tr>
<tr>
<td colspan="2">
<div class="insertAsyncUpload">
<telerik:RadAsyncUpload RenderMode="Lightweight" ID="ruCustomerImage" runat="server" AllowedFileExtensions=".jpg,.jpeg,.gif,.png"
MaxFileSize="1000000" ControlObjectsVisibility="None" InputSize="12" Width="160px"
CssClass="radUploadStyle">
</telerik:RadAsyncUpload>
</div>
<div class="clearFix">
</div>
<div class="insertCommandButton">
<telerik:RadButton RenderMode="Lightweight" ID="btnPerformInsert" runat="server" Text="Insert" CommandName="PerformInsert"></telerik:RadButton>
<telerik:RadButton RenderMode="Lightweight" ID="btnCancel" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false"></telerik:RadButton>
</div>
</td>
</tr>
</table>
</fieldset>
</InsertItemTemplate>
<EmptyDataTemplate>
<fieldset class="noRecordsFieldset">
<legend>Customers</legend>No records for customers available.
</fieldset>
</EmptyDataTemplate>
</telerik:RadListView>
</asp:Panel>
</td>
</tr>
</table>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [City], [Country], [Phone], [Photo] FROM [CustomerPhotos]"
DeleteCommand="DELETE FROM [CustomerPhotos] WHERE [CustomerID] = @CustomerID"
InsertCommand="INSERT INTO [CustomerPhotos] ([CustomerID], [CompanyName], [ContactName], [ContactTitle], [City], [Country], [Phone], [Photo]) VALUES (@CustomerID, @CompanyName, @ContactName, @ContactTitle, @City, @Country, @Phone, @Photo)"
UpdateCommand="UPDATE [CustomerPhotos] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [City] = @City, [Country] = @Country, [Phone] = @Phone WHERE [CustomerID] = @CustomerID"
OnInserting="SqlDataSource1_Inserting" OnUpdating="SqlDataSource1_Updating">
<DeleteParameters>
<asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
<asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
<asp:Parameter Name="ContactTitle" Type="String"></asp:Parameter>
<asp:Parameter Name="City" Type="String"></asp:Parameter>
<asp:Parameter Name="Country" Type="String"></asp:Parameter>
<asp:Parameter Name="Phone" Type="String"></asp:Parameter>
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
<asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
<asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
<asp:Parameter Name="ContactTitle" Type="String"></asp:Parameter>
<asp:Parameter Name="City" Type="String"></asp:Parameter>
<asp:Parameter Name="Country" Type="String"></asp:Parameter>
<asp:Parameter Name="Phone" Type="String"></asp:Parameter>
<asp:Parameter Name="Photo" DbType="Binary"></asp:Parameter>
</InsertParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>