Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

ASP.Net Scrollable Repeater Control with Fixed Column Header using CSS in C#, VB.NET

Mar 30, 2015
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.

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

ASP.Net Scrollable Repeater Control with Fixed Column Header using CSS in C#, VB.NET


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 RSS subscribe by email Subscribe by Email

1 comments :

Unknown said...
This comment has been removed by the author.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.