I have users whose group policies block Javascript; so any use of that is out of the question.
I have found a page that performs the function that I need:
Pure CSS Popup Box
However, the popup is triggered after an anchor is clicked.
My issue issue is that I want the popup to trigger on the event change in an asp:DropDownList. My intent is that if an item is not listed in the DDL, then the user will be able to select the first item "Not Listed". After this selection I need to have the popup open with elements that will allow them to add the items to the database which populates the DDL.
I have attempted to use the following in the DDL OnSelectedIndexChanged event:
Response.Redirect(HttpContext.Current.Request.Url.AbsoluteUri.ToString() + "#popup1");
This idea has failed. I believe it is because I have it inside an Update Panel. The setup is as follows:
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<!-- Main Wrapper -->
<div class="wrapper wrapper-style2">
<div class="container">
<!-- breadcrumbs -->
<br />
<div class="row 200%">
<div class="12u">
<!-- Content -->
<div id="maincontent" runat="server">
<asp:UpdatePanel ID="upInputarea" runat="server" UpdateMode="Conditional" AssociatedUpdatePanelID="updateProgress">
<ContentTemplate>
<%-- Equipment Data --%>
<section class="box post">
<h3 class="bold">Equipment Data</h3>
<asp:UpdatePanel ID="upEquipmentData" runat="server" UpdateMode="Conditional" AssociatedUpdatePanelID="updateProgress">
<ContentTemplate>
<div id="EquipmentDataDiv2" runat="server" style="float: left; border-left: 2px solid rgba(144, 144, 144, 0.25); margin-right: auto; margin-left: auto;">
<asp:Panel ID="Pnl1" runat="server" CssClass="inputSet2">
<span>Model:</span>
<asp:DropDownList ID="ddlEquipmentDataModel" runat="server" AppendDataBoundItems="true" AutoPostBack="false" CssClass="round-corners " DataSourceID="SqlModel" DataTextField="Model" DataValueField="ID" />
</asp:Panel>
<asp:Panel ID="Pnl2" runat="server" CssClass="inputSet2">
<span>Item:</span>
<asp:DropDownList ID="ddlEquipmentDataItem" runat="server" AppendDataBoundItems="true" AutoPostBack="true" CssClass="round-corners width1" DataSourceID="SqlItem" DataTextField="Component" DataValueField="ID" OnSelectedIndexChanged="ddl_SelectedIndexChanged" />
</asp:Panel>
<asp:Panel ID="Pnl5" runat="server" CssClass="inputSet2">
<span>S/N:</span>
<asp:TextBox ID="txtEquipmentDataSN" runat="server" CssClass="round-corners " />
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</section>
<%-- Submit Button --%>
<section class="box post">
<div class="inputSet">
<asp:UpdatePanel ID="upSubmit" runat="server" UpdateMode="Conditional" AssociatedUpdatePanelID="updateProgress">
<ContentTemplate>
<asp:LinkButton ID="lbSubmit" runat="server" class="button icon fa-info-sign" Style="cursor: pointer;" OnClick="btn_Click" Text="Submit" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</section>
<div id="popup1" runat="server" class="overlay">
<div class="css_popup">
<h2>Add Component to Database</h2>
<a class="close" href="#">×</a>
<div class="content">
<asp:Panel ID="Panel13" runat="server" CssClass="inputSet2">
<span>Item:</span>
<asp:TextBox ID="txtNewItem" runat="server" CssClass="round-corners " />
</asp:Panel>
<asp:Panel ID="Panel14" runat="server" CssClass="inputSet2">
<span>NSN:</span>
<asp:TextBox ID="txtNewNSN" runat="server" CssClass="round-corners " />
</asp:Panel>
<asp:Panel ID="Panel15" runat="server" CssClass="inputSet2">
<asp:LinkButton ID="lbAddItem" runat="server" class="button icon fa-info-sign" Style="cursor: pointer;" OnClick="btn_Click" Text="Add Item" />
</asp:Panel>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
<asp:UpdateProgress ID="updateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<div class="fancybox-loading">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/fancybox/fancybox_loading.gif" AlternateText="Loading ..." ToolTip="Loading ..." Style="margin-top: -22px; margin-left: -22px; position: fixed; top: 51%; left: 51%; background: url('/fancybox/fancybox_sprite2.png'); background-position: 2 -2px;" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
The CSS for these elements mirror that of the link provided above.
Related
I have planed to implement two pops in asp.net page. The First popup perform when the page button Click, and the Second popup perform when the first popup button click.
But When I Implement this in code, i got fist popup only. Can't got the second popup open.
ASPX Code-
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.Background
{
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.Popup
{
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 400px;
height: 350px;
}
.lbl
{
font-size: 16px;
font-style: italic;
font-weight: bold;
}
</style>
<script type="text/javascript">
function ShowModalPopup() {
$find("mp1").show();
return false;
}
function HideModalPopup() {
// alert("Yes");
$find("mp1").hide();
return false;
}
function ShowModalPopup1() {
$find("ModalPopupExtender1").show();
return false;
}
function HideModalPopup1() {
// alert("Yes");
$find("ModalPopupExtender1").hide();
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnPopup1" runat="server" Text="Fill Form in Popup" />
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="btnPopup1"
BehaviorID="modalPopupBehavior" CancelControlID="btnHide" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" Style="display: none">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txt" runat="server" />
<asp:Label ID="Label2" Text="RED" runat="server" ForeColor="red" />
<asp:Button ID="Button2" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
<asp:CheckBox ID="CheckBox1" TextAlign="Left" Text="ssdd" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnPopup1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnHide" runat="server" Text="Hide Modal Popup" OnClientClick="return HideModalPopup()" />
<!-- ModalPopupExtender 2 -->
<asp:Button ID="btnPopup2" runat="server" Text="Fill Form in Popup" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1"
TargetControlID="btnPopup2" BehaviorID="modalPopupBehavior" CancelControlID="btnHide1"
BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="Popup" align="center" Style="display: none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" />
<asp:Label ID="Label1" Text="Blue" runat="server" ForeColor="Blue" />
<asp:Button ID="Button4" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
<asp:CheckBox ID="CheckBox2" TextAlign="Left" Text="ssdd" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnPopup2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnHide1" runat="server" Text="Hide Modal Popup" OnClientClick="return HideModalPopup1()" />
</asp:Panel>
<!-- ModalPopupExtender 2 -->
</asp:Panel>
<!-- ModalPopupExtender -->
</form>
</body>
C# Code -
protected void btnSubmit_Click(object sender, EventArgs e)
{
Label2.Text = "Blue";
}
protected void btnClose_Click(object sender, EventArgs e)
{
}
This link might be of good use to you.
http://aspdotnetcodebook.blogspot.com.au/2009/03/how-to-open-modalpopup-inside.html
Also to have a modal pop up over another modal popup you need to set the z-index otherwise there are chances that the 2nd popup might hide behind the 1st. The following are the links which explains the same.
How to show a modal pop up above other modal pop up
http://blogs.msdn.com/b/codejunkie/archive/2009/06/23/multiple-modal-popups-and-z-index.aspx
http://tiredblogger.wordpress.com/2008/07/24/layering-modal-popups-using-css-z-index/
http://forums.asp.net/p/1280547/2458840.aspx#2458840
Hope this helps.
Please take a look on below url.
http://www.codeproject.com/Articles/546817/ASP-NET-Popup-Control-Displaying-as-multiple-neste
In my webpage I have two controls that are bind to jquery.
One is a button to copy the Textbox value to clipboard and other is textbox to enter date.
But the problem is when I debug this web application, it throws the jquery error.
And when I comment out one javascript method and debug, it works (tried with both javascript method).
But when I dont't comment out, it doesn't work.
Aspx code:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="searchSerialResult.aspx.cs" Inherits="Locker.searchSerialResult" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.auto-style3 {
color: #CC3300;
font-size: x-large;
}
.auto-style1 {
color: #FFFFFF;
font-size: large;
}
.auto-style2 {
color: #000000;
}
</style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<p>
<p>
<p>
<strong> <span class="auto-style3"> Recorded Information</span><span class="auto-style1"> </span></strong>
<div style="width:70%; margin: auto auto; text-align:left; ">
<asp:Panel ID="Panel1" runat="server" BorderStyle="None">
<asp:Label ID="Label4" runat="server" CssClass="auto-style2" style="font-weight: 700; font-size: large" Text="Details for :"></asp:Label>
<asp:Label ID="Label5" runat="server" style="font-weight: 700; font-size: large; color: #0000FF"></asp:Label>
<br />
<br />
<asp:Label ID="Label1" runat="server" CssClass="auto-style2" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Serial :"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" BorderStyle="Solid" Enabled="False" Font-Size="Medium" ForeColor="Black" Width="213px"></asp:TextBox>
<asp:Button ID="Button3" runat="server" Text="Copy Me!"/>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.zclip.js" type="text/javascript"></script>
<script src="Scripts/jquery.zclip.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#<%=Button3.ClientID%>').zclip({
path: 'ZeroClipboard.swf',
copy: function () { return $('#<%=TextBox2.ClientID%>').val(); }
});
});
</script>
<br />
<br />
<asp:Label ID="Label13" runat="server" CssClass="auto-style2" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Serial Type :"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server" Height="26px" Width="181px" AutoPostBack="True" Enabled="False" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>Never Expire</asp:ListItem>
<asp:ListItem>Expire</asp:ListItem>
</asp:DropDownList>
<asp:Label ID="Label14" runat="server" CssClass="auto-style2" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Expiry Date :" Visible="False"></asp:Label>
<asp:TextBox ID="TextBox6" runat="server" BorderStyle="Solid" Enabled="False" Height="16px" Visible="False" Width="136px"></asp:TextBox>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function () {
$("#<%=TextBox6.ClientID%>").datepicker({
});
});
</script> <br />
<br />
<asp:Label ID="Label6" runat="server" style="font-weight: 700; font-size: large" Text="Description :" CssClass="auto-style2"></asp:Label>
<asp:TextBox ID="TextBox5" runat="server" BorderStyle="Solid" Font-Size="Medium" Height="48px" TextMode="MultiLine" Width="217px" Enabled="False"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label7" runat="server" style="font-weight: 700; font-size: small" Text="Last Editor was " CssClass="auto-style2"></asp:Label>
<asp:Label ID="Label8" runat="server" style="font-weight: 700; font-size: small" CssClass="auto-style2"></asp:Label>
<br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Edit" Width="97px" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Update" Visible="False" Width="97px" />
<br />
<br />
<asp:Label ID="Label12" runat="server" style="font-weight: 700; font-size: large; color: #0000FF" Visible="False"></asp:Label>
<br />
<br />
</asp:Panel>
</div>
</asp:Content
Works if i comment out anyone of the javascript method..
You're including more than one version of jQuery, and the second version overwrites the first version.
Therefore any plugins associated with the first version are removed. (ZClip in this case)
That´s right. You can´t use the same jquery plugin library (zclip) twice in order to append it to the $ sign. If you really need both (source and minified) you should use a different variable name for one of them. Otherwise it would cause conflicts.
So, I rather you to use this code:
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.zclip.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=Button3.ClientID%>').zclip({
path: 'ZeroClipboard.swf',
copy: function () { return $('#<%=TextBox2.ClientID%>').val(); }
});
});
</script>
If you are on production environment. If you are on development environment, then you should use the uncompressed version file of the jQuery plugin.
I am working in C#.Net and Ajax Concepts. I am having 2 ModelPopup Extender in a page. I am also having 2 Buttons in that page. When i click the 1st Button 1 MP should be displayed and when i click the 2nd Button, 2nd MP should get displayed. This works fine for me for the first time. [i.e] When i click the 1st Button, 1st MP is displayed and When i click the 2nd Button, 2nd MP is displayed and once again if i click the 1st Button nothing happens.
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<ajaxToolKit:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="Button2">
</ajaxToolKit:ModalPopupExtender>
<asp:Button ID="Button2" ToolTip="Location" runat="server" Text="Location(+)"
OnClientClick="LocClick();" />
<asp:Panel ID="Panel1" runat="server" Style="display: block; width: 600px; overflow: scroll;
height: 440px;" BackColor="White">
<table>
<tr valign="top">
<td width="650">
<ct:ASTreeView ID="astvMyTree" runat="server" BasePath="~/Scripts/astreeview/" DataTableRootNodeValue="0"
BackColor="White" EnableRoot="false" EnableNodeSelection="true" EnableCheckbox="false"
EnableDragDrop="false" EnableTreeLines="true" EnableNodeIcon="false" EnableCustomizedNodeIcon="false"
EnableDebugMode="false" EnableContextMenuAdd="false" EnableParentNodeExpand="false"
EnableAjaxOnEditDelete="false" AutoPostBack="true" OnOnSelectedNodeChanged="astvMyTree_OnSelectedNodeChanged" />
</td>
<td>
<div id="divConsole" runat="server">
</div>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel5" runat="server">
<ContentTemplate>
<ajaxToolKit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel2"
TargetControlID="Button1">
</ajaxToolKit:ModalPopupExtender>
<asp:Button ID="Button1" ToolTip="Product" runat="server" Text="Product(+)"
OnClientClick="ProdClick();" />
<asp:Panel ID="Panel2" runat="server" Style="display: block; width: 600px; overflow: scroll;
height: 440px;" BackColor="White">
<table>
<tr valign="top">
<td width="650">
<ct:ASTreeView ID="ASTreeView1" runat="server" BasePath="~/Scripts/astreeview/" DataTableRootNodeValue="0"
BackColor="White" EnableRoot="false" EnableNodeSelection="true" EnableCheckbox="false"
EnableDragDrop="false" EnableTreeLines="true" EnableNodeIcon="false" EnableCustomizedNodeIcon="false"
EnableDebugMode="false" EnableContextMenuAdd="false" EnableParentNodeExpand="false"
EnableAjaxOnEditDelete="false" AutoPostBack="true" OnOnSelectedNodeChanged="astvMyTree_OnSelectedNodeChanged" />
</td>
<td>
<div id="div4" runat="server">
</div>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I am just changing the back color of buttons in LocClick as well as ProdClick.
<script type="text/javascript">
function LocClick() {
var location = document.getElementById("<%= Button2.ClientID %>");
location.style.background = '#72BD66';
var product = document.getElementById("<%= Button1.ClientID %>");
product.style.background = '#065581';
var lastYear = document.getElementById('<%=chkLastYear.ClientID%>');
lastYear.checked = false;
}
How to fix this...
I am using the Telerik radlistview o display some results, i perform some grouping in my query and return a sorted and ordered resultset and set it to the datasource. For some reason (which i have been battling with all morning) the ListView re-orders the results by the ID column.
<telerik:RadListView runat="server" ID="rlThumbnailView" OnNeedDataSource="rlThumbnailView_NeedDataSource"
AllowPaging="true" PageSize="8" OnDataBound="rlThumbnailView_DataBound" OnItemDataBound="rlThumbnailView_ItemDataBound">
<LayoutTemplate>
<span style="vertical-align: top; position: relative; top: 4px">Displaying page
<%#Container.CurrentPageIndex + 1 %>
of
<%#Container.PageCount %></span> </span>
<br />
<div id="list">
<asp:Panel runat="server" ID="Panel1" Style="float: left; margin-left: 160px" Visible="<%#Container.PageCount > 1 %>">
<asp:Button runat="server" ID="PrevButton" CommandName="Page" CommandArgument="Prev"
Text="Prev Page" Enabled="<%#Container.CurrentPageIndex > 0 %>" />
<asp:Button runat="server" ID="NextButton" CommandName="Page" CommandArgument="Next"
Text="Next Page" Enabled="<%#Container.CurrentPageIndex < Container.PageCount - 1 %>" />
</asp:Panel>
<div>
<telerik:RadSlider runat="server" ID="RadSlider1" MaximumValue="3" MinimumValue="1"
Value="2" LiveDrag="false" SmallChange="1" AutoPostBack="true" OnValueChanged="RadSlider1_ValueChanged"
Width="150px" CausesValidation="false" />
</div>
<div style="clear: both;">
</div>
<asp:Panel ID="itemPlaceholder" runat="server">
</asp:Panel>
<div style="clear: both;">
</div>
</div>
</LayoutTemplate>
<ItemTemplate>
<div id="wrapper" runat="server" style="float: left; margin-top: 2px; margin-bottom: 2px;">
<telerik:RadBinaryImage ID="ThumnailImage1" runat="server" />
UPC:
<asp:Label ID="lblUPC" runat="server"></asp:Label><br />
Description:
<asp:Label ID="lblDescription" runat="server"></asp:Label>
<br />
<div id="dvCountries" runat="server">
Languages:</div>
Changes:<asp:Label ID="lblChanges" runat="server"></asp:Label>
<br />
Pack Format:<asp:Label ID="lblPackType" runat="server"></asp:Label>
<br />
Date Completed:<asp:Label ID="lblDateCompleted" runat="server"></asp:Label>
<br />
</div>
</div>
</ItemTemplate>
</telerik:RadListView>
I beleive this is based on the standard microsoft listview,
For anybody who faces the same issue, the answer appears here:
http://www.telerik.com/community/forums/aspnet-ajax/listview/listview-paging-and-sortorder.aspx
seems to be a bug with Telerik
I have designed a mockup in Photoshop and I intend to apply it to my product catalog's ListView control but it does not seem to be displaying it right (misaligned?) and I hope someone here could pintpoint my mistake as I've been trying to figure out to no avail.
Expected result/Mockup:
After debug (don't mind the missing photos):
Take a look at my codes,
CSS:
.productItem {
width: 200px;
float: left;
padding: 5px;
margin: 5px;
text-align: center;
background-color: White;
}
.cell1
{
width:117px;
height:27px;
background-image: url("images/blackbutton.jpg");
float:left;
font-size:12px;
vertical-align:middle;
color:White;
text-align:center;
}
.cell2
{
width:118px;
height:27px;
background-image: url("images/orangebutton.jpg");
float:left;
font-size:12px;
vertical-align:middle;
color:White;
text-align:center;
}
ListView narkup:
<div class="catalog">
<asp:ListView runat="server" ID="listView" GroupItemCount="3" DataSourceID="AccessDataSource1">
<LayoutTemplate>
<div style="height: 962px;">
<div style="width: 790px;">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
<asp:DataPager runat="server" ID="dpMyDatePager" PageSize="3" PagedControlID="listView" .Ю
</div>
</LayoutTemplate>
<GroupTemplate>
<div style="clear: both;">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</GroupTemplate>
<ItemTemplate>
<div class="productItem">
<div>
<img src='<%# Eval("ProductUrl") %>' height="180" width="200" />
</div>
<div>
<b>
<%# Eval("ProductBrand") %> <%# Eval("ProductModel") %></b>
</div>
<div>
Our Price: $<%# Eval("NormalPrice") %>
</div>
</div>
<div class="cell1">Add to cart</div>
<div class="cell2">View details</div>
</ItemTemplate>
</asp:ListView>
</div>
Change cell1 and cell2 width to 50%
and try following layout:
<LayoutTemplate>
<div style="height: 962px;">
<div style="width: 790px;">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
</div>
<asp:DataPager runat="server" ID="dpMyDatePager" PageSize="6" PagedControlID="listView"></asp:DataPager>
</div>
</LayoutTemplate>
<GroupTemplate>
<div style="clear: both;">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</GroupTemplate>
<ItemTemplate>
<div class="productItem">
<div>
<img src='<%# Eval("ProductUrl") %>' height="180" width="200" />
</div>
<div>
<b>
<%# Eval("ProductBrand") %>
<%# Eval("ProductModel") %></b></div>
<div style="clear: right;">
Our Price: $<%# Eval("NormalPrice") %></div>
<div class="cell1">
Add to cart</div>
<div class="cell2">
View details</div>
</div>
</ItemTemplate>