Sometimes
it is needed to highlight data cell in Repeater, so that we can clearly
differentiate some data against the large number of
records being displayed. In the previous article I have discussed how to Highlight
or change color of gridview row.
Suppose
in case of Employee record we want to highlight prticular Cell where age of the employee
is greater than “30”. We can change the
color of the Cell in code behind on this condition by doing some code on “Item Data Bound” Event of Repeater.
In this article I will explain the following
points:
1. Save data
to database.
2. Show data
in Repeater.
3. Highlight
Cell based on some condition i.e. Age>30
Implementation:
Let's create a demo website to demonstrate the concept.
Create a
database “Test”, Then create one table i.e. Emp_Personal
Column
Name
|
Data
Type
|
EmpPer_Id
|
Int(Primary Key. So set is
identity=true)
|
EmpName
|
varchar(100)
|
Age
|
Int
|
Address
|
varchar(500)
|
Create a
stored procedure to save Employee details in sql server database table
create PROCEDURE SaveEmp_SP
@EmpName VARCHAR(100),
@age INT,
@Address VARCHAR(500)
AS
BEGIN
INSERT
INTO dbo.Emp_Personal(EmpName,Age,Address)
VALUES(@EmpName,@age,@Address)
END
Create another stored procedure to get Employee details to be
filled in Repeater Data Control.
CREATE PROCEDURE GetEmp_SP
AS
BEGIN
SELECT
* FROM dbo.Emp_Personal
END
create the connection string in Webconfig as:
<connectionStrings>
<add name="Empcon" connectionString="Data Source=localhost;Initial
Catalog=test;IntegratedSecurity=True"/>
</connectionStrings>
Asp.Net
C# Section
Design
Part:
<div>
<fieldset style="width:370px;">
<legend><strong>Change Colour of Repeater Cell based on condition</strong></legend>
<table>
<tr>
<td> </td>
<td>
</td>
</tr>
<tr>
<td>Employee Name:</td>
<td>
<asp:TextBox ID="txtName"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Age:</td>
<td>
<asp:TextBox ID="txtAge" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Address:</td>
<td>
<asp:TextBox ID="txtAddress"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td> </td>
<td>
<asp:Button ID="btnSave"
runat="server"
Text="Save"
onclick="btnSave_Click"
/>
<asp:Button ID="btnReset"
runat="server"
Text="Reset"
onclick="btnReset_Click"
/>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2">
<asp:Repeater ID="rptEmp" runat="server"
onitemdatabound="rptEmp_ItemDataBound">
<HeaderTemplate>
<table border="1">
<tr style="background-color:#f2f2f2; color:#000; height:35px;" align="center">
<th>Employee Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="background-color:white;"
align="center">
<td><%#Eval("EmpName") %></td>
<td id="tdID" runat="server"><%#Eval("Age")
%></td>
<td><%#Eval("Address") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</td>
</tr>
</table>
</fieldset>
</div>
In code
behind file write the code as;
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
using System.Data;
using
System.Data.SqlClient;
using
System.Configuration;
using
System.Web.UI.HtmlControls;
public partial class ColoredRepeater : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["EmpCon"].ConnectionString);
protected void
Page_Load(object sender, EventArgs e)
{
if
(!Page.IsPostBack)
{
BindRepeater();
}
}
protected void
btnSave_Click(object sender, EventArgs e)
{
SqlCommand
cmd = new SqlCommand();
try
{
cmd = new
SqlCommand("SaveEmp_SP",
con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@EmpName", txtName.Text.Trim());
cmd.Parameters.AddWithValue("@age", txtAge.Text.Trim());
cmd.Parameters.AddWithValue("@Address", txtAddress.Text.Trim());
con.Open();
cmd.ExecuteNonQuery();
con.Close();
Clear_Controls();
BindRepeater();
}
catch (Exception ex)
{
ScriptManager.RegisterStartupScript(this, this.GetType(),
"Message", "alert('Error occured: " + ex.Message.ToString() + "');", true);
}
finally
{
cmd.Dispose();
con.Close();
con.Dispose();
}
}
private void
BindRepeater()
{
DataTable
dt = new DataTable();
SqlDataAdapter
adp = new SqlDataAdapter();
try
{
adp = new
SqlDataAdapter("GetEmp_SP",
con);
adp.SelectCommand.CommandType = CommandType.StoredProcedure;
adp.Fill(dt);
if
(dt.Rows.Count > 0)
{
rptEmp.DataSource = dt;
rptEmp.DataBind();
}
else
{
rptEmp.DataSource = null;
rptEmp.DataBind();
}
}
catch (Exception ex)
{
ScriptManager.RegisterStartupScript(this, this.GetType(),
"Message", "alert('Error occured: " + ex.Message.ToString() + "');", true);
}
finally
{
con.Close();
dt.Clear();
dt.Dispose();
adp.Dispose();
}
}
protected void
btnReset_Click(object sender, EventArgs e)
{
Clear_Controls();
}
private void
Clear_Controls()
{
txtName.Text = string.Empty;
txtAge.Text = string.Empty;
txtAddress.Text = string.Empty;
}
protected void
rptEmp_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
{
if
(e.Item.ItemType == ListItemType.AlternatingItem
|| e.Item.ItemType == ListItemType.Item)
{
HtmlTableCell
td = (HtmlTableCell)e.Item.FindControl("tdID");
DataRowView
drv = e.Item.DataItem as DataRowView;
int
age = Convert.ToInt32(drv["Age"]);
if
(age >30)
{
td.Attributes.Add("style", "background-color:#000;color:#FFFFFF;");
}
else
{
td.Attributes.Add("style", "background-color:#47ceef;color:#FFFFFF;");
}
}
}
}
}
Asp.Net
VB Section:
Design of
the page will be same as in Asp.net
C# section but replace the lines
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
<asp:Button ID="btnReset" runat="server" Text="Reset" onclick="btnReset_Click" />
with the
following lines
<asp:Button ID="btnSave" runat="server" Text="Save"/>
<asp:Button ID="btnReset" runat="server" Text="Reset" />
In the
code behind file(e.g. default.aspx.vb) write the code as:
Imports System.Data
Imports
System.Data.SqlClient
Imports
System.Configuration
Imports
System.Web.UI.HtmlControls
Partial Public Class ColoredRepeater
Inherits System.Web.UI.Page
Dim con As
SqlConnection = New
SqlConnection(ConfigurationManager.ConnectionStrings("EmpCon").ConnectionString)
Protected Sub
Page_Load(ByVal sender As
Object, ByVal e
As EventArgs)
If Not Page.IsPostBack Then
BindRepeater()
End If
End Sub
Protected Sub
btnSave_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim cmd
As SqlCommand
= New SqlCommand()
Try
cmd = New
SqlCommand("SaveEmp_SP",
con)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@EmpName", txtName.Text.Trim())
cmd.Parameters.AddWithValue("@age", txtAge.Text.Trim())
cmd.Parameters.AddWithValue("@Address", txtAddress.Text.Trim())
con.Open()
cmd.ExecuteNonQuery()
con.Close()
Clear_Controls()
BindRepeater()
Catch
ex As Exception
ScriptManager.RegisterStartupScript(this,
Me.GetType(), "Message",
"alert('Error occured: " +
ex.Message.ToString() + "');", True)
Finally
cmd.Dispose()
con.Close()
con.Dispose()
End Try
End Sub
Private Sub
BindRepeater()
Dim dt As DataTable = New DataTable()
Dim adp
As SqlDataAdapter
= New SqlDataAdapter()
Try
adp = New
SqlDataAdapter("GetEmp_SP",
con)
adp.SelectCommand.CommandType = CommandType.StoredProcedure
adp.Fill(dt)
If
dt.Rows.Count > 0 Then
rptEmp.DataSource = dt
rptEmp.DataBind()
Else
rptEmp.DataSource = Nothing
rptEmp.DataBind()
End If
Catch
ex As Exception
ScriptManager.RegisterStartupScript(this,
Me.GetType(), "Message",
"alert('Error occured: " +
ex.Message.ToString() + "');", True)
Finally
con.Close()
dt.Clear()
dt.Dispose()
adp.Dispose()
End Try
End Sub
Protected Sub
btnReset_Click(ByVal sender As Object, ByVal e As EventArgs)
Clear_Controls()
End Sub
Private Sub
Clear_Controls()
txtName.Text = String.Empty
txtAge.Text = String.Empty
txtAddress.Text = String.Empty
End Sub
Protected Sub
rptEmp_ItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)
{
If
e.Item.ItemType = ListItemType.AlternatingItem
Or e.Item.ItemType = ListItemType.Item
Then
Dim
td As HtmlTableCell
= CType(e.Item.FindControl("tdID"), HtmlTableCell)
Dim
drv As DataRowView
= e.Item.DataItem as DataRowView
Dim
age As Integer
= Convert.ToInt32(drv("Age"))
If
age > 30 Then
td.Attributes.Add("style", "background-color:#000;color:#FFFFFF;")
Else
td.Attributes.Add("style", "background-color:#47ceef;color:#FFFFFF;")
End
If
End If
}
End Sub
End Class
0 comments:
Post a Comment