I use JQuery ThickBox 3.1 , and here is my code
<telerik:RadListView runat="server" ID="myDataList" AllowPaging="true"
DataKeyNames="id" ItemPlaceholderID="PlaceHolder1"
NeedDataSource="list_DataRebind">
<LayoutTemplate>
<div class="sushibar">
<asp:Panel ID="SushiPanel" runat="server">
<div class="sushi">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>
<telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="4" PagedControlID="myDataList">
<Fields>
<telerik:RadDataPagerButtonField />
<telerik:RadDataPagerPageSizeField />
<telerik:RadDataPagerSliderField />
</Fields>
</telerik:RadDataPager>
</asp:Panel>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="imageDiv">
<span style="margin-bottom: 5px; display: block; color: #FF6600; font-weight: bold;">
<%#Eval("Title") %></span>
<br />
<a href='<%#Eval("ImagePath")%>' title='<%#Eval("Title")%>' class="thickbox" >
<img src='<%#Eval("ImagePath")%>' alt="Single Image" width="150px" height="200px" /></a></div>
</ItemTemplate>
</telerik:RadListView>
Popup box with Image and Title show correctly , but I have another field(<%#Eval("Description")%>) to show with it !
I found how to show Inline Content in Thickbox ,
<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a
caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true"
class="thickbox">Show hidden modal content.</a>
But I don't know how to use this in a ListView !
:D , I found the answer ! Just put the contents ( Image + Description ) to hidden division (style with Display:none) and set this div id to inlineId .
<ItemTemplate>
<div class="imageDiv">
<span style="margin-bottom: 5px; display: block; color: #FF6600; font-weight: bold;">
<%#Eval("Title") %></span>
<br />
<div id="popUpRegion" style="display: none">
<img src='<%#Eval("ImagePath")%>' alt="Single Image" width="500px" height="600px" />
<p>
<%#Eval("Description")%></p>
</div>
<a href="#TB_inline?height=800&width=600&inlineId=popUpRegion" title='<%#Eval("Title")%>'
class="thickbox">
<img src='<%#Eval("ImagePath")%>' alt="Single Image" width="150px" height="200px" /></a></div>
</ItemTemplate>
Related
I have link buttons for showing gridview and list view and also I have paging using datalist control all these being within the updatepanel.
Paging and listview link button and gridview link button working fine in the first load but the problem is when I'm doing any action within update panel like moving to next page or change gridview to listview then the <a> tag link within the repeator control is not working.
I have order buton inside the repeator control this will give the modal pop up for quantity selection and add to cart option but <a> tag not working it does not show modal.
This <a> tag is not working:
<a class="cur-pointer order button"
data-uid="<%#Container.DataItem("unit")%>"
data-uname="<%#Container.DataItem("UnitName")%>"
data-price="<%#Container.DataItem("price")%>"
data-pro-name="<%#Container.DataItem(productName)%>"
data-iid="<%#Container.DataItem("ItemId")%>">
<strong>
<asp:Literal runat="server" Text="<%$Resources:Resource,Order %>"></asp:Literal>
</strong>
</a>
full code here :
<div class="row" style="padding: 0px 0px 41px 0px;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="sort-grid">
<div class="col-md-4 ">
<div class="sorting hiddenview">
<asp:LinkButton ID="gridlink" runat="server" CssClass="icongridlist"><i class="gridicon"></i></asp:LinkButton>
<asp:LinkButton ID="listlink" runat="server" CssClass="icongridlist"><i class="fa fa-list" style="color:#fff;"></i></asp:LinkButton>
</div>
</div>
<div class="col-md-4 col-md-offset-4">
<div class="sorting pagingdropdownmob">
<%-- style="width: 91px;"--%>
<h6>Show</h6>
<asp:DropDownList runat="server" ID="dropdownlist" Style="width: 42px;" AutoPostBack="True" OnSelectedIndexChanged="lbtnFirst_Click">
<%--AppendDataBoundItems = "true"--%>
<asp:ListItem Selected="True" Text="10" Value="10"></asp:ListItem>
<asp:ListItem Text="15" Value="15"></asp:ListItem>
<asp:ListItem Text="30" Value="30"></asp:ListItem>
<asp:ListItem Text="45" Value="45"></asp:ListItem>
</asp:DropDownList>
<div class="clearfix"></div>
</div>
<div class="sorting paginglistmob">
<h6>Page: </h6>
<%-- <asp:LinkButton ID="lbtnFirst" runat="server" CausesValidation="false" OnClick="lbtnFirst_Click" ></asp:LinkButton> --%>
<asp:LinkButton ID="lbtnPrevious" runat="server" CausesValidation="false" OnClick="lbtnPrevious_Click"><i class="fa fa-caret-left hoverclr"></i></asp:LinkButton>
<span>
<asp:DataList ID="dlPaging" runat="server" RepeatDirection="Horizontal" OnItemCommand="dlPaging_ItemCommand"
OnItemDataBound="dlPaging_ItemDataBound" Style="display: inline-block;">
<ItemTemplate>
<asp:LinkButton ID="lnkbtnPaging" runat="server" Style="color: #000;" CommandArgument='<%# Eval("PageIndex") %>'
CommandName="Paging" Text='<%# Eval("PageText") %>'></asp:LinkButton>
</ItemTemplate>
</asp:DataList>
<asp:LinkButton ID="lbtnNext" runat="server" CausesValidation="false"
OnClick="lbtnNext_Click"><i class="fa fa-caret-right hoverclr"></i></asp:LinkButton></span>
<%-- <asp:LinkButton ID="lbtnLast" runat="server" CausesValidation="false" OnClick="lbtnLast_Click">Last</asp:LinkButton></span>--%>
</div>
</div>
<div class="clearfix"></div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="row">
<asp:UpdatePanel ID="UpdatePanel3" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<div class="single-pro">
<asp:PlaceHolder ID="phItem" runat="server" Visible="false">
<asp:Repeater ID="rptItem" runat="server">
<ItemTemplate>
<div class="col-md-3 col-sm-6 product-men">
<%-- col-md-4 col-sm-6--%>
<div class="men-pro-item simpleCart_shelfItem">
<div class="men-thumb-item">
<a href="javascript:void(0);">
<img alt="" class="pro-image-front" src="<%#Container.DataItem("ImageSrc")%>">
<img alt="" class="pro-image-back" src="<%#Container.DataItem("ImageSrc")%>">
</a>
<div class="men-cart-pro" style="padding-bottom: 8px;">
<div class="inner-men-cart-pro">
<asp:LinkButton runat="server"><i class="glyphicon glyphicon-zoom-in"></i> View</asp:LinkButton>
</div>
</div>
</div>
<%--men thumb item--%>
<div class="item-info-product ">
<h5 style="font-size: 16px; font-weight: 900; padding-left: 0px; padding-right: 0px; height: 42px; line-height: 17px;" class="m-none h-initial"><strong><%#Container.DataItem(productName)%></strong></h5>
<%--height:33px;--%>
<div class="info-product-price">
<strong><span class="item_price"><%#Container.DataItem("price")%> </span><%=GetGlobalResourceObject("Resource", "Currency")%><span> /<%#Container.DataItem("UnitName")%></span>
</div>
<div class="snipcart-details top_brand_home_details item_add single-item link-product-add-cart ">
<a class="cur-pointer order button" data-uid="<%#Container.DataItem("unit")%>" data-uname="<%#Container.DataItem("UnitName")%>" data-price="<%#Container.DataItem("price")%>" data-pro-name="<%#Container.DataItem(productName)%>" data-iid="<%#Container.DataItem("ItemId")%>"><strong>
<asp:Literal runat="server" Text="<%$Resources:Resource,Order %>"></asp:Literal></strong> </a>
</div>
</div>
<%-- item info product--%>
</div>
<%-- menproitem--%>
</div>
<%--colmd3--%>
</ItemTemplate>
</asp:Repeater>
</asp:PlaceHolder>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="row">
Because the Repeater is in an UpdatePanel, you need to rebind the data attributes after Async PostBack. Because the PostBack updates the UI and previous bindings are lost.
<script type="text/javascript">
$(document).ready(function () {
bindDataAttributes();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
bindDataAttributes();
});
function bindDataAttributes() {
//call the jquery function that binds data-uid etc here
}
</script>
You need to populate the repeater on each postback. The best place for this is the OnInit event.
I've read that the ListView itself can't take CSS to adjust its width, but that you do it in the ItemTemplate, but I just can't get it. I'm trying to put three ListView controls side by side. Each control has an image and text to the right. Think Windows Explore file list, but only a single column with a name.
The text in each ListView will be less than 32 characters, so there should be plenty of room, but each ListView takes up more than 50% of the screen no matter what I've tried. CSS is not my strong suit.
Current CSS which is wrong
.lv_table{
width:500px;
border: 1px solid #ccc;
}
.lv_tr
{
width: 100px;
}
.list_view
{
border-style: solid;
border-width: 2px;
border-color: #000000;
}
.list_image
{
float: left;
display: inline-block;
}
.list_item_large
{
font-size: 1.6em;
color: #000000;
padding: 8px 0px 0px 0px;
margin: 0px auto;
display: inline-block;
text-align:left;
min-height: 32px;
}
ListView Controls
<table class="lv_table">
<tr class="lv_tr"><td class="list_view">
<asp:ListView runat="server" ID="lvwCategories" >
<LayoutTemplate>
<div style="width: 500px;">
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="list_image">
<img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
</div>
<div class="list_item_large ">
<a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
</div>
</ItemTemplate>
<ItemSeparatorTemplate>
<div>
</div>
</ItemSeparatorTemplate>
<EmptyDataTemplate>
<div>
<img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
</div>
<div>
<b>No Categories Found</b>
</div>
</EmptyDataTemplate>
</asp:ListView>
</td>
<td> </td>
<td class="list_view">
<asp:ListView runat="server" ID="lvwLists">
<LayoutTemplate>
<div style="width: 500px;">
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="list_image">
<img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
</div>
<div class="list_item_large ">
<a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
</div>
</ItemTemplate>
<ItemSeparatorTemplate>
<div>
</div>
</ItemSeparatorTemplate>
<EmptyDataTemplate>
<div>
<img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
</div>
<div>
<b>No Categories Found</b>
</div>
</EmptyDataTemplate>
</asp:ListView>
</td>
<td> </td>
<td class="list_view">
<asp:ListView runat="server" ID="lvwItems">
<LayoutTemplate>
<div style="width: 500px;">
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="list_image">
<img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
</div>
<div class="list_item_large ">
<a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
</div>
</ItemTemplate>
<ItemSeparatorTemplate>
<div>
</div>
</ItemSeparatorTemplate>
<EmptyDataTemplate>
<div>
<img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
</div>
<div>
<b>No Categories Found</b>
</div>
</EmptyDataTemplate>
</asp:ListView>
</td>
</tr>
</table>
You can change your .lv_table style width to 100% and give your .list_view style a width:33%; and remove all the inline width:500px; of your <div>'s in your LayoutTemplates.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="divFilters">
<div class="subHeaderWrapper">
<span class="subHeaderLeft">
<img id="imgCtrlContainer" onclick="toggle_visibility('divContainer1','imgCtrlContainer','span_min.png','span_max.png','true');" name="Expand and Collapse1" alt="Expand / Collapse" src="../Style/UX/Images/span_min.png" style="display: none;" />
</span>
<span class="widgtTitle">
<asp:Label ID="lblFilters" EnableTheming="false" runat="server" Text="Filters"></asp:Label>
</span>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="subHeaderWrapper" id="divSubHeaderWrapper" runat="server">
<span class="subHeaderLeft"></span>
<span class="widgtTitle">
<asp:Label ID="lblObservation" EnableTheming="false" runat="server" Text="Observation"></asp:Label>
</span>
<a **href="#divFilters"** id="filterAnchor" class="filtersPopup" style="text-decoration: none;">
<img style="border-bottom: medium none; border-left: medium none; border-top: medium none; border-right: medium none" id="util1" class="filterIcon" onmouseover="mouseOverUtl('util1')" title="Filter" onmouseout="mouseOutUtl('util1')" name="Util1" runat="server" alt="Utility" src="../Images/icon_dash_filters.png" />
</a>
</div>
<asp:Griview...>
</asp:Gridview>
Above is my code written in the asp:UpdatePanel tag.While going from the anchor tag to the div "divFilter" the href="#divFilters" mentioned is not working.The same page when taken to another aspx page without giving updatepanel works fine. But I need to get it done under UpdatePanel only
I want to add slider in datalist controll.
<ItemTemplate>
<img alt="" src='Image/<%#Eval("Image") %>' /><br />
</a>
<h4><asp:Label ID="lb" runat="server" Font-Bold="True" Font-Size="12pt" Text='<%# Eval("Title") %>'></asp:Label><br />
Product Code: <span><%# Eval("product_code") %></span></h4>
<span ><del>र</del><%# Eval("Our_price") %>INR</span><br />
<a href='Shopping_Cart.aspx?cart_id=<%# Eval("id") %>'>Add to Cart</a>
Now I want to add slider so that all products could slide with images.
Your Question was not Clear what i understood is that u want to scroll your item list. Give your Datalist a fixed size(height and width) and overflow:scrolling in css
style='height:400;width:500; overflow:scrolling'
I understood that you can do it dynamically.You can use image slider into datalist as below:
<div id="box">
<div id="slider">
<div class="slider">
<ul>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="7" RepeatDirection="Horizontal">
<ItemTemplate>
<li><img src='<%#Eval("Path") %>' alt="" width="272" height="170" runat="server"/></li>
</ItemTemplate>
</asp:DataList>
</ul>
</div>
<div class="sliderButon">
Previous
Next
</div>
</div>
</div>
I have an ASP.NET 3.5 form with several fields and a sub form inside a ModalPopup. The problem I'm having is with a RequiredFieldValidator inside the ModalPopup. For some reason it is preventing post back inside the ModalPopup. Both the validator and the submit buttons have the same ValidationGroup that is unique to them. Here is the markup for the sub form:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="RoomBuilder.ascx.cs" Inherits="Admin_Controls_RoomBuilder" %>
<link href="../../../../style/FlexStyle.css" rel="stylesheet" type="text/css" id="style"
runat="server" visible="false" />
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="form" style="width: 420px; height: 500px; padding: 3px; position: relative;
text-align: center;">
<div style="width: 280px">
<div class="item smalltitle ">
Title:
</div>
<div class="item">
<asp:TextBox ID="txtTitle" runat="server" Width="250px"></asp:TextBox>
</div>
<div class="item smalltitle gapontop">
Description:
</div>
<div class="item">
<asp:TextBox ID="txtDesc" runat="server" Width="250px" Height="40px" TextMode="MultiLine"></asp:TextBox>
</div>
<div class="item gapontop">
<div class="smalltitle floatLeft" style="width: 120px;">
Room Number
</div>
<div class="smalltitle floatLeft" style="width: 120px;">
Phone
</div>
</div>
<div class="item">
<div class="floatLeft" style="width: 120px;">
<asp:TextBox ID="txtRoomNo" runat="server" Width="100px"></asp:TextBox>
</div>
<div class="floatLeft" style="width: 120px;">
<asp:TextBox ID="txtPhone" runat="server" Width="100px"></asp:TextBox>
</div>
</div>
<div class="item smalltitle gapontop ">
Type:
</div>
<div class="item">
<asp:TextBox ID="txtType" runat="server" Width="250px"></asp:TextBox>
</div>
<div class="item smalltitle gapontop ">
Number of Seats:
<asp:RequiredFieldValidator ID="RequiredFieldValidatortxtNoSeats" runat="server" ErrorMessage="*"
ControlToValidate="txtNoSeats" ValidationGroup="roomVal"></asp:RequiredFieldValidator>
</div>
<div class="item">
<asp:TextBox ID="txtNoSeats" runat="server" Width="50px"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Not a number"
ControlToValidate="txtNoSeats" ValidationGroup="roomVal" ValidationExpression="[0-9]*"></asp:RegularExpressionValidator>
</div>
</div>
<!-- ************************************ -->
<div class="topBorder" style="width: 100%; height: 35px; position: absolute; bottom: -8px;
right: 2px; text-align: right; padding-top: 11px;">
<asp:Button ID="btnCancel" runat="server" CssClass="button" Text="Cancel" CausesValidation="false"
OnClick="btnCancel_Click" ValidationGroup="roomVal" />
<asp:Button ID="btnSave" runat="server" CssClass="button" Text="Save" OnClick="btnSave_Click" CausesValidation="true" ValidationGroup="roomVal" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
When the validator is removed (or CausesValidation is set to false), the sub form posts. RegularExpressionValidators don't have this problem. I've run FireBug, but I'm not seeing any obvious errors.
Is there something I'm missing?
Oh my god I'm so stupid!! >:(
Found the reason for the problem. There was another copy of the same control nested inside another control. And (of course) having the same ValidationGroup name as my first control all Required Field Validators fail to work!
Argh! Candidate for a Daily WTF!
Sorry to have wasted everybody's time :(
Can you please check if your Button (or some other control) that open the popup and the modaldialog extender are outside the update panel?
I got strange problems with modalpopup too. I would suggest you to try something different, for example a numericupdown control from the ajaxcontroltoolkit, if you already use it. So you don't need any validator for this.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<div class="item smalltitle gapontop ">
Number of Seats:
</div>
<div class="item">
<asp:TextBox ID="txtNoSeats" runat="server" Width="50px"></asp:TextBox>
<cc1:NumericUpDownExtender ID="txtNoSeatsExt" runat="server"
Enabled="true" Minimum="1" Maximum="100" TargetControlID="txtNoSeats" Width="50" />
</div>