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

Question

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 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?

Ralph Willgoss · Answer 1 · 2011-12-19T01:38:25.647

42

Add the ItemStyle property to your field:

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

edited Dec 19 '11 at 01:38

answered Dec 15 '11 at 23:43

Ralph Willgoss

11,750
4
64
67

score 21 · Accepted Answer · edited May 15 '17 at 10:06

21

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:

edited May 15 '17 at 10:06

Jon L

569
2
9
17

answered Aug 12 '10 at 12:49

Tobiasopdenbrouw

13,811
1
22
27

Giuseppe Accaputo · Answer 3 · 2010-08-12T13:04:28.840

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>
...

score 4 · Answer 4 · answered Jul 10 '14 at 21:59

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.

score 1 · Answer 5 · answered Jul 05 '13 at 01:56

1

my answer

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

answered Jul 05 '13 at 01:56

mabel

11
1

score 1 · Answer 6 · answered Apr 08 '15 at 03:20

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

score 0 · Answer 7 · answered Jun 15 '13 at 19:15

0

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.

answered Jun 15 '13 at 19:15

Zarepheth

2,465
2
32
49

score 0 · Answer 8 · answered Aug 12 '10 at 12:51

0

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

http://msdn.microsoft.com/de-de/library/system.web.ui.webcontrols.gridview.rowcreated.aspx

answered Aug 12 '10 at 12:51

Yves M.

3,330
14
12

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

8 Answers8

Linked