how to bind image with specific height and width in repeater control - asp.net-2.0

i have repeater control that have specific template for my web site jquery slider. how ever i have table name tbl_Slide_master that have slide details to show. this table have two columns like Img_height and Img_width as int data type for setting image properties in repeater control.
for further information i include my repeater control
<asp:Repeater ID="SliderRepeater" runat="server">
<ItemTemplate>
<li>
<p class="img"><asp:Image ID="Img_Slide" runat="server" ImageUrl='<%# "images/"+ Eval("ImageName")%>' Height='<%#Eval("Img_height")%>' Width='<%#Eval("Img_width")%>'/></p>
<div class="button"><span class="right_but"><img src="images/l_arrow.gif" alt="picture" width="84" height="28" border="0" /><img src="images/r_arrow.gif" alt="picture" width="84" height="28" border="0" /></span></div>
<h2><asp:Label ID="lbl_slideheadertext" runat="server" Text='<%# Eval("Header_text")%>'></asp:Label></h2>
<p><asp:Label ID="lbl_slidetext" runat="server" Text='<%# Eval("Para_text")%>'></asp:Label></p>
</li>
</ItemTemplate>
</asp:Repeater>
when i run my project then error occured like "Specified cast is not valid". it can not evaluate image height and width properties from tbl_slide_master table. how ever when i simple remove Height and Width properties from Image control then Image shows with original h*w.
is there i have mistake in Height='<%#Eval("Img_height")%>' and Width='<%#Eval("Img_width")%>...
well i also seen there i can use something like that Height='<%#Eval("Img_height") & "px"%> but also error occurred like "Operator '&' cannot be applied to operands of type 'object' and 'string'"
Updated Solution
ok i have idea i can use html image control so no px needed to join with height and width.
<asp:Repeater ID="SliderRepeater" runat="server">
<ItemTemplate>
<li>
<%--<p class="img"><asp:Image ID="Img_Slide" runat="server" ImageUrl='<%# "images/"+ Eval("ImageName")%>' Height='<%# Eval("Img_height")&"px"%>' Width='<%# Eval("Img_width")&"px"%>'/></p>--%>
<p class="img"><img id="Img_Slide" src='<%# "images/"+ Eval("ImageName")%>' width='<%#Eval("Img_width")%>' height='<%#Eval("Img_height")%>'/></p>
<div class="button"><span class="right_but"><img src="images/l_arrow.gif" alt="picture" width="84" height="28" border="0" /><img src="images/r_arrow.gif" alt="picture" width="84" height="28" border="0" /></span></div>
<h2><asp:Label ID="lbl_slideheadertext" runat="server" Text='<%# Eval("Header_text")%>'></asp:Label></h2>
<p><asp:Label ID="lbl_slidetext" runat="server" Text='<%# Eval("Para_text")%>'></asp:Label></p>
</li>
</ItemTemplate>
</asp:Repeater>

Related

target panel of CollapsiblePanelExtender not visible on load, need to collapse then expand to see it

I have inherited an app that has a CollapsiblePanelExtender. The codebehind populates the control that's inside the panel when it loads. I set the CollapsiblePanelExtender to be expanded in the codebehind, but the target panel isn't visible, even though the CollapsiblePanelExtender is expanded.
If I then collapse the CollapsiblePanelExtender, and then expand it again, the panel shows up. The html is there, but it isn't showing.
Any clues would be appreciated, thanks.
<div class="contentBoxTitle">
<asp:Panel ID="expandCTL" runat="server" Width="100%">
<asp:Image ID="expandIMG" ImageUrl="~/images/itemOpen.gif" runat="server" />
Client
</asp:Panel>
</div>
<asp:Panel ID="profilePanel1" runat="server" >
<div class="profileTable">
<table width="350" border="0" cellpadding="2" cellspacing="0">
<tr bgcolor="ffffff">
<th width="100" height="20" bgcolor="ffffff"><div align="right">Name:</div></th>
<td>
<asp:Label ID="name" runat="server" Text=""></asp:Label> </td>
</tr>
...
(more fields here)
...
</table>
</div>
</asp:Panel>
</div>
<ajaxToolkit:CollapsiblePanelExtender runat="server" TargetControlID="profilePanel1" CollapsedSize ="1" ID="profilePanelCollapser"
ExpandDirection="Vertical" ImageControlID="expandIMG" ExpandedImage="~/images/itemOpen.gif"
CollapsedImage="~/images/itemClosed.gif" Collapsed="false" ExpandControlID="expandCTL" CollapseControlID="expandCTL" />

ASP.Net ListView Grouping by Data Field?

I uses asp.net listview control to display the details. Each item has the group details. For demo purposes group is hard coded.
I want to display the listview as shown below
Right now, I have this
Code:
<asp:ListView ID="HyperLinkListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<ul class="dfwp-list">
<asp:PlaceHolder ID="groupContainer" runat="server" />
</ul>
</div>
</div>
</div>
</section>
</LayoutTemplate>
<GroupTemplate>
<span>Group</span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
<ItemTemplate>
<li>
<div class="item">
<div class="link-item">
<asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# this.LinkToPlay((((SPListItem)Container.DataItem)["VideoFileName"]).ToString()) %>' Text='<%# Eval("Title") %>' runat="server" />
</a>
</div>
</div>
</li>
</ItemTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
</asp:ListView>
How do I achieve this?
For a flexible solution, you can use nested ListView
You will need to update your HTML and CSS to get the desired appearance.
ASPX Code
<asp:ListView ID="GroupsListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="groupContainer" OnItemDataBound="GroupsListView_ItemDataBound">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<asp:PlaceHolder ID="groupContainer" runat="server" />
</div>
</div>
</div>
</section>
</LayoutTemplate>
<ItemTemplate>
<ul class="dfwp-list">
<li><%# Eval("Title") %></li>
<div>
<asp:ListView runat="server" ID="ItemsListView" ItemPlaceholderID="itemContainer">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<ul class="dfwp-list">
<asp:PlaceHolder ID="itemContainer" runat="server" />
</ul>
</div>
</div>
</div>
</section>
</LayoutTemplate>
<ItemTemplate>
<li>
<div class="item">
<div class="link-item">
<asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>' runat="server" />
</a>
</div>
</div>
</li>
</ItemTemplate>
</asp:ListView>
</div>
</ul>
</ItemTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
</asp:ListView>
In the code behind you need to bind the child ListView in parent ItemDataBound event.
protected void GroupsListView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
ListView itemsListView = (ListView)e.Item.FindControl("ItemsListView");
if (e.Item.ItemType == ListViewItemType.DataItem)
{
itemsListView.DataSource = ((Group)e.Item.DataItem).Items;
itemsListView.DataBind();
}
}
It is not quite clear what kind of grouping you want. However the ListView is limited in what it can do.
First of all you can only get a grouping by a fixed number of items. You can define that number with the GroupItemCount property. Your code would then look like this
<asp:ListView ID="HyperLinkListView" GroupItemCount="2" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">
And generate in html like this
GROUP
My car video
My sample video
GROUP
Another sample video
Item 4
Assuming you want GROUP A and GROUP B etc, you would normally use a binding expression, which looks like this
<GroupTemplate>
<span>Group <%# Container.DataItemIndex %></span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
However the GroupItemTemplate is not part of the DataBind process, so getting and index based system will not work like that.
So a client side solution is needed if you want to add A, B etc. So first add a placeholder for the alhpa character and give the <span> a class so jQuery can find it. I've used {index} and groupIndex
<GroupTemplate>
<span class="groupIndex">Group {index}</span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
Now with a simple jQuery method, all the placeholders are replaced with their correct alpha character.
<script type="text/javascript">
$(document).ready(function () {
$('.quick-links .groupIndex').each(function (index, element) {
var char = String.fromCharCode(65 + index);
$(this).html($(this).html().replace('{index}', char));
});
});
</script>
Note that the .quick-links comes from your <section class="quick-links"> part in the LayoutTemplate.

How can I retrieve an image from database and display it in a repeater control?

I am trying to display an image from a database in a repeater control but I am unable to retrieve it.
I used the following code
<div id="photos" class="galleryview">
<asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<div class="panel">
<img src="<%#Eval("image") %>" />
<div class="panel-overlay">
<p>description: <b><%# Eval("description") %></b><br />
View full-size photo here.</p>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<!-- Strip to display the bottom slideshow. -->
<ul class="filmstrip">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<li><img width="100" height="100" src="<%#Eval("image") %>" alt='<%#Eval("description") %>' title='<%# Eval("category") %>' /></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
I think the image in your db may be bytecode.You may find a way to make the byte to a image
you can see this Retrieve image from database and display on ASP.NET without httphandler

ItemTemplate in Listview - Layout issue

I have the following Listview in my aspx page
<asp:ListView ID="ListView1" GroupItemCount="4" runat="server"
DataKeyNames="contentid" DataSourceID="sqldsPhotos">
<LayoutTemplate>
<asp:Placeholder
id="groupPlaceholder"
runat="server" />
</LayoutTemplate>
<GroupTemplate>
<div>
<asp:Placeholder
id="itemPlaceholder"
runat="server" />
</div>
</GroupTemplate>
<ItemTemplate>
<asp:Image id="picAlbum" runat="server"
ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'
Height="108" Width="192" />
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</ItemTemplate>
<EmptyItemTemplate>
</EmptyItemTemplate>
</asp:ListView>
The resulting webpage displays my image with the link button beside it. What I would like is the image with the Linkbutton centered below it for each item.
Can someone help me out with the necessary html or css to achieve this.
Try the following html inside ItemTemplate
<div style="float: left; margin-left: 10px; text-align:center;width: 192; ">
<asp:Image id="picAlbum" runat="server"
ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'
Height="108" Width="192" />
<asp:LinkButton ID="LinkButton1" runat="server"
style="display: block; clear: both;">LinkButton</asp:LinkButton>
</div>
The above code will show divs side by side. So inorder to show 4 divs add with (800px) to your items in list view.
If you don't get the linkbutton at center add some margin-left to it to show it at center.
Try this:
<div style="width: 192px; text-align:center;">
<asp:Image id="picAlbum" runat="server"
ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'
Height="108" Width="192" /><br/>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>

Problem with CSS(floating) in ListView ItemTemplate!

i am new in CSS and have a problem with styling ListView Control in ItemTemplate tag.
my project language is rtl(persian) and i want to set the user image at the right and her/his infos to the left of the image.
but this is the result:
alt text http://sites.google.com/site/mahdiahmadirad/download-1/2009-12-08_134217.png?attredirects=0&d=1
and here is the code for ListView:
<asp:ListView ID="NokListView" runat="server" DataSourceID="ObjectDataSource1">
<LayoutTemplate>
<img alt="" src="./img/group.png"><br />
<br />
<fieldset>
<legend>ليست کلي</legend>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</fieldset>
</LayoutTemplate>
<ItemSeparatorTemplate>
<hr />
</ItemSeparatorTemplate>
<ItemTemplate>
<img style="float: right;" alt="" src='<%# Eval("Gender","./img/{0}.png") %>' />
<span>نام وارث:</span><%# Eval("FirstName") %> <%# Eval("LastName") %><span
dir="ltr">(<%# Eval("Email") %>)</span><br />
<span>نسبت او با شما:</span>
<%# Eval("Relationship")%><br />
</ItemTemplate>
</asp:ListView>
I set the style of to float:right and it is working but as you see the template is like a Hierarchical list!
I want each Item place below the previous Item NOT in the front of.
please explain me what is exactly happening?! and how to fix it?
Put the non-image data together in a div with float:left and see if that works?
I Found My Answer here: doctype.com
and the complete fixed code is:
<ItemSeparatorTemplate>
<hr style="clear:right;" />
</ItemSeparatorTemplate>
<ItemTemplate>
<div style="clear: both;">
<img style="float: right;" alt="" src='<%# Eval("Gender","./img/{0}.png") %>' />
<span>نام وارث:</span><%# Eval("FirstName") %> <%# Eval("LastName") %>
<span dir="ltr">(<%# Eval("Email") %>)</span><br />
<span>نسبت او با شما:</span><%# Eval("Relationship")%><br />
</div>
</ItemTemplate>
So Look at the result:
alt text http://sites.google.com/site/mahdiahmadirad/download-1/2009-12-09_103134.png?attredirects=0&d=1

Resources