How to add slider in datalist controll - asp.net

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>

Related

Why doesn't repeater repeat 3 images per row but 1 ?

I have used asp's repeater to repeat 3 images per row but it shows only 1 image per row. why ?
I have tried every way I could but no effect.
<asp:Repeater ID="rptrImages" runat="server">
<ItemTemplate>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src='<%# "UploadedImages/"+ Eval("Image") %>' alt="No Image" class="img-responsive img-rounded" />
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>

The <ItemTemplate> within a repeater is the content that gets repeated for every object within the data source. All you need to do is refactor your template:
<div class="row">
<asp:Repeater ID="rptrImages" runat="server">
<ItemTemplate>
<div class="col-md-4">
<div class="thumbnail">
<img src='<%# "UploadedImages/"+ Eval("Image") %>' alt="No Image" class="img-responsive img-rounded" />
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
Using the above, the <div class="col-md-4"> will be repeated for each item in your data source and all contained within a single <div class="row">, due to the nature of Bootstrap's columns they will automatically wrap onto another line within the same div once three are placed horizontally. If you need to hide the <div class="row"> should the repeater not contain any items then try the below:
<asp:Repeater ID="rptrImages" runat="server">
<HeaderTemplate>
<div class="row">
</HeaderTemplate>
<ItemTemplate>
<div class="col-md-4">
<div class="thumbnail">
<img src='<%# "UploadedImages/"+ Eval("Image") %>' alt="No Image" class="img-responsive img-rounded" />
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:Repeater>
Then in your code-behind when binding the repeater:
rptrImages.DataSource = myDataSourceVar;
rptrImages.DataBind();
rptrImages.Visible = (rptrImages.Items.Count > 0);
Because the <div class="row"> is within the HeaderTemplate and FooterTemplate it will not get rendered if you set Visible to false.

You must add width and height to Your Image
<div class="row" style="width: 100%;">
<div class="col-sm-12">
<asp:Repeater ID="RepeaterImages" runat="server" Visible="true">
<ItemTemplate>
<asp:Image ID="imageSlide" CssClass="MyGridGallery" ImageUrl='<%# Container.DataItem %>' runat="server" Width="300px" Height="200px" />
</ItemTemplate>
</asp:Repeater>
</div>
.MyGridGallery {
padding: 5px;
}
</style>

Is there a way to add a 3rd item template to a repeater

I have a repeater set up in Visual Studio to try and grab the latest 3 blog titles from the database and show the associated image along with the title, intro and a link.
However the parent div of each blog needs to have a different ID.
Currently I have the following code but it's not working because I've since found out you can't have an itemtemplate followed by an alternating item template followed by another item template.
I there any workaround to this?
<asp:Repeater runat="server" ID="repeaterNews1" DataSourceID="SQLDataNews1">
<ItemTemplate>
<div id="blog1">
<div class="col-xs-12">
<asp:Image runat="server" ID="Image1" ImageUrl='<%# Eval("NewsStoryImage") %>'/>
<div class="blogContent">
<div class="container">
<h2>Our Blog</h2>
<p><asp:Label runat="server" ID="Label1" Text='<%# Eval("PageTitle") %>'></asp:Label></p>
<p><asp:Label runat="server" ID="Label2" Text='<%# Eval("Content1") %>'></asp:Label></p>
Read More
</div>
</div>
</div>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div id="blog2">
<div class="col-xs-12">
<asp:Image runat="server" ID="Image2" ImageUrl='<%# Eval("NewsStoryImage") %>'/>
<div class="blogContent">
<div class="container">
<h2>Our Blog</h2>
<p><asp:Label runat="server" ID="Label1" Text='<%# Eval("PageTitle") %>'></asp:Label></p>
<p><asp:Label runat="server" ID="Label2" Text='<%# Eval("Content1") %>'></asp:Label></p>
Read More
</div>
</div>
</div>
</div>
</AlternatingItemTemplate>
<ItemTemplate>
<div id="blog3">
<div class="col-xs-12">
<asp:Image runat="server" ID="Image3" ImageUrl='<%# Eval("NewsStoryImage") %>'/>
<div class="blogContent">
<div class="container">
<h2>Our Blog</h2>
<p><asp:Label runat="server" ID="Label1" Text='<%# Eval("PageTitle") %>'></asp:Label></p>
<p><asp:Label runat="server" ID="Label2" Text='<%# Eval("Content1") %>'></asp:Label></p>
Read More
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>

No, you cannot create a third template.
What you can do is make sure the ID's are still unique by using Container.DataItemIndex
<ItemTemplate>
<div id="blog<%# Container.DataItemIndex %>"></div>
</ItemTemplate>

how to make Responsive DataList asp.net

I have an Asp.net DataList control in my page. It is currently having repeatcolumns set to 4 which will give me 4 columns in each row. But I want to make this responsive and set the value to 1 for smaller screen sizes. Below is my asp.net control:
<asp:DataList runat="server" RepeatDirection="Horizontal" RepeatColumns="4" ID="dd" class="vex-res">
How can I achieve this?

You cannot make DataList to be responsive, because it renders as Table.
Instead, you need to use ListView with bootstrap (or some other responsive framework).
<asp:ListView ID="ListView1" runat="server" ...>
...
<ItemTemplate>
<div class="row">
<div class="col-md-4"><%# Eval("Name") %></div>
<div class="col-md-4"><%# Eval("Email") %></div>
<div class="col-md-4"><%# Eval("Address") %></div>
</div>
</ItemTemplate>
</asp:ListView>

This Work My Home :
<asp:DataList ID="dlCustomers" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" CssClass="row">
<ItemTemplate>
<%-- <div class="row">--%>
<div class="col-sm-4"><!--THUMBNAIL#2-->
<div class="panel-body">
<span class="label label-warning"><%# Eval("status")%></span>
<div class="thumbnail label-success">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/" +Eval("image1").ToString().Trim() %>' Width="150px" Height="150px" />
<div class="caption"><h4>Rp.<small> <%# Eval("harga")%></small></h4>
<strong><%# Eval("judul") %></strong>
<p>
<small>LT:<strong> <%# Eval("luastanah")%> m2</strong> </small> <small> LB : <strong> <%# Eval("luasbangunan")%> m2</strong> </small>
<small>Setifikat : <strong><%# Eval("sertifikasi")%></strong> </small> <br />
<small> Kamar : <strong><%# Eval("kamartidur")%></strong> </small><br />
<small> Kamar Mandi : <strong><%# Eval("kamarmandi")%></strong> </small>
</p>
Lihat Details
</div>
</div>
</div>
</div>
<%--</div>--%>
</ItemTemplate>
</asp:DataList>
Responsive using bootstrap 3.3.6 ..

Coming to this a little late but I found an asp:repeater works well and no additional CSS is required to get the layout repeating horizontally.
<div class="container">
<div class="row">
<asp:Repeater ID="myRepeater" runat="server" DataSourceID="myDataSourceID">
<ItemTemplate>
<div class="col-sm-4">
<%# Eval("itemID")%><br />
<%# Eval("itmName")%>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
I realise that this will result in the total columns in one row adding up to more than 12 but as this will just wrap to the line underneath it shouldn't really matter.
Reference: https://stackoverflow.com/questions/23502342/bootstrap-3-grid-does-it-really-matter-how-many-columns-are-in-a-row

You can also try setting RepeatLayout="Flow". That will cause your datalist to render as a series of <div> elements, which will behave more responsively.

<asp:DataList ID="DataList1" runat="server" OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
<ItemTemplate>
<div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Name") %></div>
<div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Email") %></div>
<div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Address") %></div>
<div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Phone") %></div>
</ItemTemplate>
</asp:DataList>

<asp:DataList ID="uxPosts" runat="server" OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
<ItemTemplate>
<a id="uxLink" runat="server" class="txt_link">
<div class="col-xs-4 col-sm-4 col-md-4 " style="text-align:center;" >
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 " style="text-align:center;" >
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 " style="text-align:center;" >
<asp:Label ID="Label4" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>
</div>
</a>
</ItemTemplate>
</asp:DataList>

You can do it with asp literal, write the code in the string and add it to literal,
suppose you want to show items dynamically
you can do it this way
Add html
<div class="any_css_class">
<div class="any_css_class2">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
</div>
and in your cs file
string htmlcode = ""; //code you want in your html
foreach (FetchedDetails fd in yourListOfItems)
{
htmlcode += "<div class='content content-1' onclick=\"dosomething('" + fd.itemId + "')\"> " +
"<div class='fab fa-any_icon'></div> " +
"<h2>" + fd.anyAttribute + "</h2> ";
}
Literal1.Text = htmlcode; //add code to literal
This will do it. It will be responsive but you have to define your css properly :)

<asp:DataList ID="uxPosts" runat="server" OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
<ItemTemplate>
<a id="uxLink" runat="server" class="txt_link">
<div class=" col-xs-6 col-sm-4 col-md-3 col-lg-3 " style="text-align:center;" >
<div class="pnlborde">
<div class="encabezadofondo">
<asp:Label ID="Label2" runat="server" Height="38px" width="150px" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>
</div>
<br />
<asp:Image ID="uxImage" runat="server" width="65%" Height="90%" align="center" />
<br /><br />
</div>
<br />
</div>
</a>
</ItemTemplate>
</asp:DataList>

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

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