Hi mvadukul,
I have created sample code which fulfill your requirement.
HTML
<form id="form1" runat="server">
<div>
<br />
<br />
<center>
<asp:GridView ID="gvEmployees" AutoGenerateColumns="false" runat="server" OnRowDataBound="gvEmployees_RowDataBound">
<Columns>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderText="Flag">
<ItemTemplate>
<div>
<asp:Label ID="lblFlagName" Text='<%#Eval("FlagColor") %>' Visible="false" runat="server" />
<ul class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
<asp:Label ID="lblflag" class="fa fa-flag fa-1x" runat="server" />
<span class="caret"></span></a>
<ul class="dropdown-menu" style="min-width: 50px; left: -1; min-height: 120px; padding: 20px 0;
margin: 4px 0 0; border: 3px solid rgba(6, 172, 179, 0.15);">
<center>
<li>
<asp:LinkButton ID="btnBlack" OnClick="OnClick" CommandName="Black" runat="server"><i style="color: black" class="fa fa-flag fa-1x"></i>
</asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="btnRed" OnClick="OnClick" CommandName="Red" runat="server"> <i style="color: Red" class="fa fa-flag fa-1x"></i>
</asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="btnGreen" OnClick="OnClick" CommandName="Green" runat="server">
<i style="color: Green" class="fa fa-flag fa-1x"></i>
</asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="btnYellow" OnClick="OnClick" CommandName="Yellow" runat="server">
<i style="color: Yellow" class="fa fa-flag fa-1x"></i>
</asp:LinkButton>
</li>
</center>
</ul>
</ul>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Customer Details">
<ItemTemplate>
<asp:Label ID="lblId" Text='<% #Eval("Id")%>' runat="server" />
<asp:Label ID="lblEmployeeName" Text='<% #Eval("Name")%>' runat="server" />
<asp:Label ID="Label1" Text='<%#Eval("Country")%>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</center>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
</div>
</form>
C#
private string config = ConfigurationManager.ConnectionStrings["Sqlconn"].ToString();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.GetData();
}
}
private void GetData()
{
SqlConnection con = new SqlConnection(config);
SqlCommand cmd = new SqlCommand("Select * From CustomersTest", con);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
sda.Fill(dt);
gvEmployees.DataSource = dt;
gvEmployees.DataBind();
}
protected void OnClick(object sender, EventArgs e)
{
string colorName = (sender as LinkButton).CommandName;
GridViewRow row = (sender as LinkButton).NamingContainer as GridViewRow;
int Id = Convert.ToInt32((row.FindControl("lblId") as Label).Text);
SqlConnection con = new SqlConnection(config);
SqlCommand cmd = new SqlCommand("Update CustomersTest Set FlagColor=@FlagColor WHERE Id=@Id", con);
cmd.Parameters.AddWithValue("@FlagColor", colorName);
cmd.Parameters.AddWithValue("@Id", Id);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
this.GetData();
}
protected void gvEmployees_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string colorName = (e.Row.FindControl("lblFlagName") as Label).Text;
(e.Row.FindControl("lblflag") as Label).Style.Add("color", colorName);
}
}
Vb.net
Private config As String = ConfigurationManager.ConnectionStrings("Sqlconn").ToString()
Protected Sub Page_Load(sender As Object, e As EventArgs)Handles Me.Load
If Not IsPostBack Then
Me.GetData()
End If
End Sub
Private Sub GetData()
Dim con As New SqlConnection(config)
Dim cmd As New SqlCommand("Select * From CustomersTest", con)
Dim sda As New SqlDataAdapter(cmd)
Dim dt As New DataTable()
sda.Fill(dt)
gvEmployees.DataSource = dt
gvEmployees.DataBind()
End Sub
Protected Sub OnClick(sender As Object, e As EventArgs)
Dim colorName As String = TryCast(sender, LinkButton).CommandName
Dim row As GridViewRow = TryCast(TryCast(sender, LinkButton).NamingContainer, GridViewRow)
Dim Id As Integer = Convert.ToInt32(TryCast(row.FindControl("lblId"), Label).Text)
Dim con As New SqlConnection(config)
Dim cmd As New SqlCommand("Update CustomersTest Set FlagColor=@FlagColor WHERE Id=@Id", con)
cmd.Parameters.AddWithValue("@FlagColor", colorName)
cmd.Parameters.AddWithValue("@Id", Id)
con.Open()
cmd.ExecuteNonQuery()
con.Close()
Me.GetData()
End Sub
Protected Sub gvEmployees_RowDataBound(sender As Object, e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim colorName As String = TryCast(e.Row.FindControl("lblFlagName"), Label).Text
TryCast(e.Row.FindControl("lblflag"), Label).Style.Add("color", colorName)
End If
End Sub
Sql
CREATE TABLE CustomersTest
( Id INT
,Name VARCHAR(50)
,Country VARCHAR(50)
,FlagColor VARCHAR(20)
);
Insert into CustomersTest Values(1,'Mudassar Khan','India','Black');
Insert into CustomersTest Values(2,'Maria','Austria','Black');
Insert into CustomersTest Values(3,'Christina Berglund','Austria','Black');
Insert into CustomersTest Values(4,'Thomas Hardy','Brazil','Black');
Insert into CustomersTest Values(5,'Ana Trujillo','UK','Black');
Screenshot
