Introduction:
Here I will explain how to implement scrollable repeater control with fixed column header in asp.net using css classes in c#, vb.net with example or scrollable repeater with fixed header in asp.net using css in c#, vb.net.
Description:
In previous articles I explained Repeater Control Example in asp.net, sorting columns in repeater control in asp.net, scrollable html table with fixed header using css, Display time like facebook/twitter like 1 minute ago, hour ago, use of using statement in c# and many articles relating to asp.net, css, c#, vb.net and jQuery. Now I will explain how to implement scrollable repeater control with fixed header column in asp.net using css in c#, vb.net with example.
In previous articles I explained Repeater Control Example in asp.net, sorting columns in repeater control in asp.net, scrollable html table with fixed header using css, Display time like facebook/twitter like 1 minute ago, hour ago, use of using statement in c# and many articles relating to asp.net, css, c#, vb.net and jQuery. Now I will explain how to implement scrollable repeater control with fixed header column in asp.net using css in c#, vb.net with example.
To
implement scrollable repeater control with fixed header in asp.net
using css
in c#, vb.net
first write the code following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Scrollable Repeater
with Fixed Header in asp.net using css</title>
<style type="text/css">
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #B34C00;
width:40%;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #000;
}
td, th {
border-bottom:1px solid #000;
background: #fff;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
</style>
</head>
<body>
<form id="form1"
runat="server">
<section class="">
<div class="container">
<asp:Repeater ID="rptUserData"
runat="server">
<HeaderTemplate>
<table>
<tr class="header">
<th>UserId<div>UserId</div></th>
<th>UserName<div>UserName</div></th>
<th>Education<div>Education</div></th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="height: 25px;">
<td >
<%#Eval("UserId").ToString()%>
</td>
<td >
<%#Eval("UserName").ToString()%>
</td>
<td>
<%#Eval("Education").ToString()%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</section>
</form>
</body>
</html>
|
Now open code behind file and write following code
C#
Code
using System;
using System.Data;
using System.Web.UI.WebControls;
public partial class _Default :
System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindRepeater();
}
}
private void
BindRepeater()
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId",
typeof(Int32));
dt.Columns.Add("UserName",
typeof(string));
dt.Columns.Add("Education",
typeof(string));
dt.Rows.Add(1, "Suresh
Dasari", "B.Tech");
dt.Rows.Add(2, "Rohini
Dasari", "Msc");
dt.Rows.Add(3, "Madhav
Sai", "MS");
dt.Rows.Add(4, "Praveen",
"B.Tech");
dt.Rows.Add(6, "Sateesh",
"MD");
dt.Rows.Add(7, "Mahesh
Dasari", "B.Tech");
dt.Rows.Add(8, "Mahendra",
"CA");
DataView dvData = new
DataView(dt);
rptUserData.DataSource = dvData;
rptUserData.DataBind();
}
}
|
VB.NET
Code
Imports System.Data
Imports System.Web.UI.WebControls
Partial Class VbCode
Inherits System.Web.UI.Page
Protected Sub
Page_Load(ByVal sender As Object, ByVal e As
EventArgs) Handles Me.Load
If Not IsPostBack Then
BindRepeater()
End If
End Sub
Private Sub
BindRepeater()
Dim dt As New DataTable()
dt.Columns.Add("UserId",
GetType(Int32))
dt.Columns.Add("UserName",
GetType(String))
dt.Columns.Add("Education",
GetType(String))
dt.Rows.Add(1, "Suresh
Dasari", "B.Tech")
dt.Rows.Add(2, "Rohini
Dasari", "Msc")
dt.Rows.Add(3, "Madhav
Sai", "MS")
dt.Rows.Add(4, "Praveen",
"B.Tech")
dt.Rows.Add(6, "Sateesh",
"MD")
dt.Rows.Add(7, "Mahesh
Dasari", "B.Tech")
dt.Rows.Add(8, "Mahendra",
"CA")
Dim dvData As New DataView(dt)
rptUserData.DataSource = dvData
rptUserData.DataBind()
End Sub
End Class
|
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
1 comments :
Note: Only a member of this blog may post a comment.