How do I add a CSS class to a BoundField, so I can find it with jQuery?

I want to add a class name to some of my BoundFields in the GridView control; so that once the GridView is data-bound and rendered I can obtain something like:

<td class="Tag1">Some data came from data source</td>

The purpose of doing such a thing is to be able to find all the <td> elements that are "Tag1" in this way:

var allTag1td = $('td.Tag1');

So, how can I add this class to the BoundField so that it is rendered in this way?

I've done someting like this in the RowCreated_Event. I had to style the cells according to they values.

[To see links please register here]

You can set a row's cell `CssClass` property to `Tag1` when the row's created (`RowCreated` event).

*Page.aspx*:

<asp:GridView OnRowCreated="grid_RowCreated" AutoGenerateColumns="true" runat="server" ID="grid"></asp:GridView>

Code-behind file, *Page.aspx.cs*:

protected void grid_RowCreated(object sender, GridViewRowEventArgs e) {
foreach (TableCell cell in e.Row.Cells)
cell.CssClass = "Tag1";
}

The code will set the `class` attribute of each `td` in your table to `Tag1`; the markup of the rendered page will look like the one you're looking for:

<td class="Tag1"></td>
<td class="Tag1"></td>
...

Add the ItemStyle property to your field:<br/>

<asp:BoundField DataField="Count" HeaderText="Count">
<ItemStyle CssClass="yourclass"></ItemStyle>
</asp:BoundField>

Make sure to set the `ItemStyle` CssClass property rather than one of the others. I made the mistake of setting the `ControlStyle` CssClass property and it wasn't until I read this post that I realized my mistake.

my answer

`<asp:BoundField DataField="id" HeaderText="" SortExpression="id">
<ItemStyle Width="10%" CssClass="hide"/>
<headerstyle CssClass="hide"> </headerstyle>
</asp:BoundField>`

You can convert to TemplateField then use a Label and Add any style you want.

`<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Field") %>' CssClass="YourStyle" />
</ItemTemplate>
</asp:TemplateField>`

OR

` <asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Field") %>' Style="line-height: 1.4" />
</ItemTemplate>
</asp:TemplateField>`



It works for me.

For adding a boundfield in code behind (this is VB, but similar for C#) try:

bf = New BoundField()
bf.DataField = "FieldName"
bf.HeaderText = "Header"
bf.SortExpression = "FieldName(could be different)"
bf.ItemStyle.CssClass = "NoWrap"
MyGrid.Columns.Add(bf)

If you want to make CssClass data dependent you would need a templatefield Eg:

tf = New WebControls.TemplateField()
tf.HeaderText = "Whatever"
tf.SortExpression = "Whatever"
tf.ItemTemplate = New MyItemTemplate("DataField", "CssDataField")
AssessmentGrid.Columns.Add(tf)

MyItemTemplate implements ITemplate in the App_Code folder E.g:

Imports Microsoft.VisualBasic

Public Class MyItemTemplate
Implements System.Web.UI.ITemplate
'Normally Template type would be in here but we are only do Item
'(no edit, delete or header etc)
Dim DataField1 As String 'Displayed data
Dim DataField2 As String 'CssClass

Sub New(ByVal Field1 As String, ByVal Field2 As String)
DataField1 = Field1
DataField2 = Field2
End Sub

Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) _
Implements System.Web.UI.ITemplate.InstantiateIn
Dim ml As New Label()
ml.ID = DataField1
ml.Text = ""
ml.CssClass = ""
AddHandler ml.DataBinding, New EventHandler(AddressOf Item_DataBinding)
container.Controls.Add(l)
End Sub

Protected Sub Item_DataBinding(ByVal sender As Control, ByVal e As System.EventArgs)
Dim bound_value_object As Object
Dim data_item_container As IDataItemContainer = sender.NamingContainer
Dim Parent As TableCell = sender.Parent
Dim l As Label = sender
bound_value_object = DataBinder.Eval(data_item_container.DataItem, DataField1)
l.Text = bound_value_object.ToString
bound_value_object = DataBinder.Eval(data_item_container.DataItem, DataField2)
Parent.CssClass = bound_value_object.ToString
End Sub
End Class

You could apply CssClass to the label direct, but original question had it on the cell

Can you not directly set the itemstyle property of your boundfield in the aspx?

(TableItemstyle has a CssClass property)

<asp:BoundField ItemStyle-CssClass="Tag1"/>

See:

-

[To see links please register here]

-

[To see links please register here]