Create Rounded LinkButton inside ASP.Net GridView using CSS

Hi ramco1917,

You need to set LinkButton CSS style border-radius to 100% and padding to 0.2em 0.4em.

Note: For this sample i have used temporary DataTable. For more details refer How to create Temporary Table in ASP.Net using C# and VB.Net.

HTML

<asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="CurrentPerson" HeaderText="CurrentPerson" />
        <asp:BoundField DataField="CurrentDate" HeaderText="CurrentDate" />
    </Columns>
</asp:GridView>

<style type="text/css">
    .red_button {
        border-radius: 100%;
        padding: 0.2em 0.4em;
        background-color: red;
        color: white;
    }

    .green_button {
        border-radius: 100%;
        padding: 0.2em 0.4em;
        background-color: green;
        color: white;
    }
</style>

Namespace

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    this.BindGrid();
}
 
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[0].HorizontalAlign = HorizontalAlign.Center;
        for (int i = 0; i < e.Row.Cells.Count; i++)
        {
            var row = (DataRowView)e.Row.DataItem;
            var currentPerson = row[0].ToString();
            var currentDate = row.DataView.Table.Columns[i].ColumnName;
            var commandArgument = currentPerson + ":" + currentDate;
            LinkButton button = new LinkButton();
            button.Text = row[i].ToString();
            button.CommandName = "Select";
            button.CommandArgument = commandArgument;
            button.OnClientClick = "GetModuleData(this)";
            if (row[i].ToString().ToUpper() == "A")
            {
                button.CssClass = "red_button";
            }
            if (row[i].ToString().ToUpper() == "S")
            {
                button.CssClass = "green_button";
            }
            e.Row.Cells[i].Controls.Add(button);
            e.Row.Cells[i].HorizontalAlign = HorizontalAlign.Center;
        }
    }
}
 
private void BindGrid()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[2] {
                        new DataColumn("CurrentPerson"),
                        new DataColumn("CurrentDate") });
    dt.Rows.Add("A", "08/07/2022");
    dt.Rows.Add("S", "10/07/2022");
    gvDetails.DataSource = dt;
    gvDetails.DataBind();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Me.BindGrid()
End Sub
 
Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        e.Row.Cells(0).HorizontalAlign = HorizontalAlign.Center
 
        For i As Integer = 0 To e.Row.Cells.Count - 1
            Dim row = CType(e.Row.DataItem, DataRowView)
            Dim currentPerson = row(0).ToString()
            Dim currentDate = row.DataView.Table.Columns(i).ColumnName
            Dim commandArgument = currentPerson & ":" & currentDate
            Dim button As LinkButton = New LinkButton()
            button.Text = row(i).ToString()
            button.CommandName = "Select"
            button.CommandArgument = commandArgument
            button.OnClientClick = "GetModuleData(this)"
 
            If row(i).ToString().ToUpper() = "A" Then
                button.CssClass = "red_button"
            End If
 
            If row(i).ToString().ToUpper() = "S" Then
                button.CssClass = "green_button"
            End If
 
            e.Row.Cells(i).Controls.Add(button)
            e.Row.Cells(i).HorizontalAlign = HorizontalAlign.Center
        Next
    End If
End Sub
 
Private Sub BindGrid()
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn(1) {New DataColumn("CurrentPerson"), New DataColumn("CurrentDate")})
    dt.Rows.Add("A", "08/07/2022")
    dt.Rows.Add("S", "10/07/2022")
    gvDetails.DataSource = dt
    gvDetails.DataBind()
End Sub

Screenshot