|
Specifying a CssClass for a Button in a ButtonColumn
| For More Information... | |
For more information on this FAQ, check out the following resources:
|
All Web controls - such as the Label Web control, the TextBox Web control, the DataGrid Web control, and so on - are
derived from the WebControl class, meaning that all share a base set of common properties and methods. One such
property that is common to all Web controls is the CssClass property. The CssClass property can be
set to the class name in a CSS stylesheet. All that this property does is add the class attribute to the
rendered HTML element, setting the class attribute to the value specified in the CssClass property. For
example, if you have a Label Web control defined like so:
|
<![CDATA[
<asp:Label runat="server" id="lblMessage" CssClass="someClassName" Text="Hi there!" />
]]>
|
The following HTML will be emitted to the user's Web browser:
|
<![CDATA[
<span id="lblMessage" class="someClassName">Hi there!</span>
]]>
|
Note that the span element has a class attribute set to the same value that the Label Web control's
CssClass property is set to.
Applying CSS Styling Information to a Button in a DataGrid
The DataGrid, like all Web controls, has a CssClass property, which is quite useful for specifying cascading stylesheet
information for the DataGrid itself. However, what if you are interested in specifying a stylesheet for the Button controls rendered
in a DataGrid's ButtonColumn class? Initially, you might try to do the following:
|
<![CDATA[
<asp:DataGrid id="dgArticles" runat="server" AutoGenerateColumns="False"
...>
<Columns>
<asp:ButtonColumn Text="Bleh" ButtonType="PushButton" CssClass="someClass" />
...
</Columns>
</asp:DataGrid>
]]>
|
Unfortunately, the ButtonColumn class is not derived from the WebControl class, and therefore does not have a
CssClass property. In fact, if you try to use the above code you will get a runtime error when visiting the ASP.NET
Web page, complaining that the ButtonColumn does not have a CssClass property.
In order to specify the Button's CssClass property, we must programmatically reference the Button in the DataGrid's
ItemCreated event, and set its CssClass property there. (Note that the the DataGrid, DataList, and Repeater
each have an ItemCreated event that fires once for every created "row"; for more information on the DataGrid lifecycle,
be sure to read: Understanding the Differences Among the DataGrid,
DataList, and Repeater.) The following code illustrates how to create an event handler for the DataGrid's ItemCreated
event and how to programmatically access the Button Web control and set its CssClass property:
|
<![CDATA[
<script runat="server">
...
Sub dgArticles_ItemCreated(sender As Object, e As DataGridItemEventArgs)
If e.Item.ItemType = ListItemType.Item OR _
e.Item.ItemType = ListItemType.AlternatingItem then
'Get the button. The Button can be found in the 0th Cell (since it
'is in the first DataGrid column), and it's the 0th control
Dim myButton as Button = CType(e.Item.Cells(0).Controls(0), Button)
myButton.CssClass = "buttonStyle"
End If
End Sub
</script>
<STYLE>
.buttonStyle
{
FONT-WEIGHT: bold;
FONT-SIZE: 9pt;
TEXT-TRANSFORM: capitalize;
COLOR: white;
FONT-FAMILY: Verdana;
BACKGROUND-COLOR: navy
}
</STYLE>
<form runat="server">
<asp:DataGrid id="dgArticles" runat="server" AutoGenerateColumns="False"
OnItemCreated="dgArticles_ItemCreated">
<Columns>
<asp:ButtonColumn Text="Do Something" ButtonType="PushButton" />
...
</Columns>
</asp:DataGrid>
</form>
]]>
| | VB.NET |
A couple things to notice: first, notice that to wire up the DataGrid's ItemCreated event to the
dgArticles_ItemCreated event handler we set in the DataGrid declaration OnItemCreated="dgArticles_ItemCreated".
The dgArticles_ItemCreated event handler starts by ensuring that we are dealing with either an Item or AlternatingItem.
This is because the DataGrid's ItemCreated event fires for every row created in the DataGrid, including the header
and footer. Since the header and footer don't have a button associated with them, we don't want to apply this button code to this rows.
Next, the Button is programmatically referenced by accessing the e.Item object's first column (using Cells(0))
and then by accessing that cell's first control (Controls(0)). Finally, the Button's CssClass property is
set to the name of a class defined in a stylesheet specified in the page.
|
Using a LinkButton Instead? |
Note that if you do not set the ButtonColumn's ButtonType to PushButton that a LinkButton will be created
instead of a Button. In this case, you would need to change the code to specify myButton's type as LinkButton,
as well as change the cast in the CType() function from Button to LinkButton.
|
A live demo is available, showing how the CSS class can be set for the ButtonColumn. When viewing
the live demo, be sure to check out the resulting HTML (by going to View/Source). You will see that the Button in the ButtonColumn
renders as an input tag with its class attribute set to buttonStyle.
| 
