Columns and CSS Customization in GridView

Customization in GridView: A Comprehensive Guide

GridView is a versatile control in ASP.NET that allows you to display and manage data in a tabular format. While GridView provides many built-in features, customization is often required to meet specific design and functionality requirements.

In this blog post, we'll explore how to customize GridView using TemplateFields, CSS styles, and events with detailed examples.

1. Using TemplateField for Custom Layouts

TemplateField allows you to define custom layouts for GridView columns. You can use different controls (e.g., labels, textboxes, dropdowns) and apply custom logic.

Example: Customizing a Column with TemplateField

Replace BoundField with TemplateField to customize the layout:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="ID">
            <ItemTemplate>
                <asp:Label ID="lblID" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Age">
            <ItemTemplate>
                <asp:Label ID="lblAge" runat="server" Text='<%# Eval("Age") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txtAge" runat="server" Text='<%# Bind("Age") %>'></asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

2. Applying CSS Styles

You can apply CSS styles to GridView to customize its appearance. Use the CssClass property to apply styles to the GridView and its components.

Example: Applying CSS Styles

Define CSS classes and apply them to the GridView:

<style>
    .custom-grid {
        width: 100%;
        border-collapse: collapse;
    }
    .custom-grid th, .custom-grid td {
        padding: 10px;
        border: 1px solid #ddd;
    }
    .custom-grid th {
        background-color: #f4f4f4;
        font-weight: bold;
    }
    .custom-grid tr:hover {
        background-color: #f9f9f9;
    }
</style>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="custom-grid">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Age" HeaderText="Age" />
    </Columns>
</asp:GridView>

3. Handling Events

GridView provides several events that you can handle to add custom logic. Some commonly used events include RowDataBound, RowCommand, and RowEditing.

Example: Handling RowDataBound Event

Use the RowDataBound event to customize rows based on data:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Custom logic for each row
        int age = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "Age"));
        if (age > 30)
        {
            e.Row.BackColor = System.Drawing.Color.LightYellow;
        }
    }
}

4. Adding Custom Buttons and Actions

You can add custom buttons (e.g., Edit, Delete, View) to GridView and handle their click events using the RowCommand event.

Example: Adding a Custom Button

Add a custom button column and handle its click event:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowCommand="GridView1_RowCommand">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Age" HeaderText="Age" />
        <asp:TemplateField HeaderText="Action">
            <ItemTemplate>
                <asp:Button ID="btnView" runat="server" Text="View" CommandName="ViewDetails" CommandArgument='<%# Eval("ID") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Handle the RowCommand event in the code-behind:

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "ViewDetails")
    {
        string id = e.CommandArgument.ToString();
        // Perform custom action (e.g., redirect to details page)
        Response.Redirect($"Details.aspx?id={id}");
    }
}

5. Conditional Formatting

You can apply conditional formatting to GridView rows or cells based on data values.

Example: Conditional Formatting

Use the RowDataBound event to apply conditional formatting:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        int age = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "Age"));
        if (age > 30)
        {
            e.Row.Cells[2].BackColor = System.Drawing.Color.LightGreen;
        }
    }
}

Conclusion

Customization is a powerful feature of GridView that allows you to tailor its appearance and behavior to meet specific requirements. By using TemplateField, applying CSS styles, handling events, and adding custom buttons, you can create dynamic and user-friendly web applications. Experiment with the examples provided and explore more advanced techniques to enhance your skills.

IndianTechnoEra