Daniel Anderson Daniel Anderson - 10 months ago 156
ASP.NET (C#) Question

Formatting the header of a GridView control using Bootstrap

I've tried the other solutions offered here for formatting the header of an ASP.NET GridView control using Bootstrap, and I still can't get it to work properly. I'm trying to make sure the header text of each column is centered, and it isn't happening, despite my best efforts. I also need the zebra-striping to work for alternating rows, but that doesn't work either, although the hover on rows works. Finally, the code that should fire when a row is selected doesn't fire, although there are no compile errors, so I don't get it.

Here's the HTML for the GridView:

<div class="row">
<asp:GridView ID="gvPlans" runat="server" AllowPaging="true" AllowSorting="true"
PageSize="10" DataKeyNames="PlanID" AutoGenerateColumns="false"
CssClass="table table-striped " DataSourceID="objPlans"
OnPreRender="gvPlans_PreRender" OnSelectedIndexChanged="gvPlans_SelectedIndexChanged">
<asp:BoundField DataField="PlanTitle" HeaderText="Title" ItemStyle-Width="55%"
ItemStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="BasePrice" HeaderText="Price"
ItemStyle-Width="15%" DataFormatString="{0:c}" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField DataField="MonthlyFee" HeaderText="Fee"
ItemStyle-Width="15%" DataFormatString="{0:c}" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField DataField="TotalPrice" HeaderText="Total"
ItemStyle-Width="15%" DataFormatString="{0:c}" ItemStyle-HorizontalAlign="Right" />

Following the advice of several other posts, I added a PreRender event that should fix the problem. There's also an event to capture when a row is selected. Here's the code for that:

protected void gvPlans_PreRender(object sender, EventArgs e)
gvPlans.UseAccessibleHeader = true;
gvPlans.HeaderRow.TableSection = TableRowSection.TableHeader;
gvPlans.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
{ }

protected void gvPlans_SelectedIndexChanged(object sender, EventArgs e)
GridViewRow row = gvPlans.SelectedRow;

planID = Convert.ToInt32(gvPlans.SelectedDataKey.Value);
Plan plan = PlanDB.Get(planID);

I've added code to each of the data column declarations to set the header column to center, and it doesn't work either. Using the code above, here's what I get:

enter image description here

I would note that the formatting for the columns themselves works fine, as evidenced by the right-alignment of the number columns.

To summarize, I can't get the zebra-striping or the header column alignment to work, and the "SelectedIndexChanged" event doesn't fire. I'll be danged if understand why this is such a pain! Any help would be appreciated.

Answer Source

If you say the header text doesn't align in the center position, I think it's very likely to mean that your header style got overwritten by some other CSS styles.

If I remember correctly, in Bootstrap, it by default aligns tr elements to the left with following CSS rule.

th {text-align: left;}

So you will need to overwrite it yourself and set text-align to center.

GridView does provide a way to set zebra-stripe-like style, which in its own term is called alternating row style.

What you can try is to configure your GridView control like this

<asp:GridView ID="gvPlans" runat="server" AllowPaging="true" AllowSorting="true"PageSize="10" DataKeyNames="PlanID" AutoGenerateColumns="false" CssClass="table table-striped " DataSourceID="objPlans" OnPreRender="gvPlans_PreRender" OnSelectedIndexChanged="gvPlans_SelectedIndexChanged">
    <RowStyle CssClass="MyRowStyle" />
    <AlternatingRowStyle CssClass="MyAltRowStyle" />

Then you can define your rules in those CSS classes, like


The SelectedIndexChanged event is raised when a row's Select button is clicked, but after the GridView control handles the select operation. This enables you to provide an event-handling method that performs a custom routine, such as updating a status label with the currently selected row, whenever this event occurs.

So in your case, you can either add the missing Select button in your markup code yourself or enable GridView to add it for you.

<asp:ButtonField Text="Select" CommandName="Select" />
// or 
Set AutoGenerateSelectButton="True" in the GridView