Hi RitwikSaha,
Check the below example. In the example i an binding the data using temporary DataTable. You need to fetch and bind DataTable record from Database.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jcarousel/0.2.8/jquery.jcarousel.min.js"></script>
<link href="https://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" rel="Stylesheet" />
<style type="text/css">
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 100px !important;
}
.jcarousel-skin-tango .jcarousel-item {
width: 100px !important;
}
.jcarousel-skin-tango .jcarousel-container {
border: none !important;
}
.jcarousel-container .jcarousel-container-horizontal {
width: 100px !important;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 100px !important;
}
</style>
<script type="text/javascript">
$(function () {
$('[id*=mycarousel]').jcarousel({ scroll: 1, visible: 1 });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DataList ID="DatListProduct" runat="server" OnItemDataBound="DatListProduct_ItemDataBound" RepeatColumns="4">
<ItemTemplate>
<asp:Label ID="lblProdName" runat="server" Font-Bold="true" Font-Size="Medium" Text='<%# Eval("Pname")%>'></asp:Label>
<asp:Label ID="lblProdPcode" runat="server" Font-Bold="true" Font-Size="Medium" Text='<%# Bind("Pcode") %>' Visible="false"></asp:Label>
<ul id="mycarousel" class="jcarousel-skin-tango">
<asp:Repeater ID="InnerRepeaterCourseResults" runat="server">
<ItemTemplate>
<li>
<asp:Image ID="ImgProdImg" runat="server" ImageUrl='<%# String.Format("~/Gallery/{0}", Eval("ImgName"))%>' Width="100px" Height="100px" />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:Label ID="lblProdDP" runat="server" Font-Bold="true" Font-Size="Large" Text='<%# Bind("DP") %>'></asp:Label>
<asp:Label ID="lblProdMRP" runat="server" Font-Bold="false" Font-Strikeout="true" Font-Size="Medium" Text='<%# Bind("MRP") %>'></asp:Label>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>
Namespaces
C#
using System.Data;
VB.Net
Imports System.Data
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DatListProduct.DataSource = ProductMaster();
DatListProduct.DataBind();
}
}
private DataTable ProductMaster()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] {
new DataColumn("Id"),
new DataColumn("Pcode",typeof(int)),
new DataColumn("Pname"),
new DataColumn("MRP",typeof(int)),
new DataColumn("DP",typeof(int)) });
dt.Rows.Add(1, 1234, "Samsung Mobile", 20000, 18000);
dt.Rows.Add(2, 2345, "Mi Mobile", 15000, 14000);
dt.Rows.Add(3, 3456, "Realme Mobile", 12000, 10000);
dt.Rows.Add(4, 4567, "Nokia Mobile", 9000, 8000);
return dt;
}
private DataTable ProductImages()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] {
new DataColumn("Id",typeof(int)),
new DataColumn("Pcode",typeof(int)),
new DataColumn("ImgName") });
dt.Rows.Add(1, 1234, "Samsung1.jpg");
dt.Rows.Add(2, 1234, "Samsung2.jpg");
dt.Rows.Add(3, 1234, "Samsung3.jpg");
dt.Rows.Add(4, 1234, "Samsung4.jpg");
dt.Rows.Add(5, 2345, "Mi1.jpg");
dt.Rows.Add(6, 2345, "Mi2.jpg");
dt.Rows.Add(7, 2345, "Mi3.jpg");
dt.Rows.Add(8, 3456, "Realme1.jpg");
dt.Rows.Add(9, 3456, "Realme2.jpg");
dt.Rows.Add(10, 4567, "Nokia1.jpg");
dt.Rows.Add(11, 4567, "Nokia2.jpg");
dt.Rows.Add(12, 4567, "Nokia3.jpg");
return dt;
}
protected void DatListProduct_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
string Pcode = (e.Item.FindControl("lblProdPcode") as Label).Text;
Repeater InnerRepeaterCourseResults = e.Item.FindControl("InnerRepeaterCourseResults") as Repeater;
DataRow[] dr = ProductImages().Select("Pcode=" + Pcode);
DataTable dtp = ProductImages().Clone();
if (dr.Length > 0)
{
dtp = dr.CopyToDataTable();
InnerRepeaterCourseResults.DataSource = dtp;
InnerRepeaterCourseResults.DataBind();
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
DatListProduct.DataSource = ProductMaster()
DatListProduct.DataBind()
End If
End Sub
Private Function ProductMaster() As DataTable
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn() {
New DataColumn("Id"),
New DataColumn("Pcode", GetType(Integer)),
New DataColumn("Pname"),
New DataColumn("MRP", GetType(Integer)),
New DataColumn("DP", GetType(Integer))})
dt.Rows.Add(1, 1234, "Samsung Mobile", 20000, 18000)
dt.Rows.Add(2, 2345, "Mi Mobile", 15000, 14000)
dt.Rows.Add(3, 3456, "Realme Mobile", 12000, 10000)
dt.Rows.Add(4, 4567, "Nokia Mobile", 9000, 8000)
Return dt
End Function
Private Function ProductImages() As DataTable
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn() {
New DataColumn("Id", GetType(Integer)),
New DataColumn("Pcode", GetType(Integer)),
New DataColumn("ImgName")})
dt.Rows.Add(1, 1234, "Samsung1.jpg")
dt.Rows.Add(2, 1234, "Samsung2.jpg")
dt.Rows.Add(3, 1234, "Samsung3.jpg")
dt.Rows.Add(4, 1234, "Samsung4.jpg")
dt.Rows.Add(5, 2345, "Mi1.jpg")
dt.Rows.Add(6, 2345, "Mi2.jpg")
dt.Rows.Add(7, 2345, "Mi3.jpg")
dt.Rows.Add(8, 3456, "Realme1.jpg")
dt.Rows.Add(9, 3456, "Realme2.jpg")
dt.Rows.Add(10, 4567, "Nokia1.jpg")
dt.Rows.Add(11, 4567, "Nokia2.jpg")
dt.Rows.Add(12, 4567, "Nokia3.jpg")
Return dt
End Function
Protected Sub DatListProduct_ItemDataBound(ByVal sender As Object, ByVal e As DataListItemEventArgs)
If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
Dim Pcode As String = (TryCast(e.Item.FindControl("lblProdPcode"), Label)).Text
Dim InnerRepeaterCourseResults As Repeater = TryCast(e.Item.FindControl("InnerRepeaterCourseResults"), Repeater)
Dim dr As DataRow() = ProductImages().[Select]("Pcode=" & Pcode)
Dim dtp As DataTable = ProductImages().Clone()
If dr.Length > 0 Then
dtp = dr.CopyToDataTable()
InnerRepeaterCourseResults.DataSource = dtp
InnerRepeaterCourseResults.DataBind()
End If
End If
End Sub
Screenshot
