We help IT Professionals succeed at work.

Is it possible to add a css class to a datagrid column and if so how?

digitalconvict
on
Medium Priority
1,360 Views
Last Modified: 2010-05-18
Is it possible to add a css class to a datagrid column and if so how?  And if not, then can anyone suggest a workaround, although I don't want to have to set width/height in the code, I want it to be css as much as possible.

At design time I can set the header/footer/item/alternatingItem css classes for my datagrid control.  However I also need to set a class per column in the rendered html.

so the datagrid once rendered should look something like this:

<table class="datagridStyle">
<tr class="oddRow">
<td class="colA">Column A</td>
<td class="colB">Column B</td>
<td class="colC">Column C</td>
</tr>
<tr class="evenRow">
<td class="colA">Column A</td>
<td class="colB">Column B</td>
<td class="colC">Column C</td>
</tr>
</table>
Comment
Watch Question

Commented:
You should be able to include an <ItemStyle> element within any of the Column type elements (BoundColumn, HyperlinkColumn, etc.) which you can declare the CssClass attribute:

<asp:DataGrid runat="server" id="grid">
  <ItemStyle CssClass="rowStyle"/>
  <Columns>
     <asp:BoundColumn>
       <ItemStyle CssClass="cellStyle"/>
     </asp:BoundColumn>
  </Columns>
</asp:DataGrid>

Author

Commented:
It's an unbound datagrid, below is the html code for the datagrid, so I think I need some way of setting the css style programatically when I create the DataColumns in the code do I not?:

                  <asp:datagrid id="activeDataGrid" runat="server" ShowFooter="True" AllowSorting="True" PageSize="4"
                        CssClass="dataTable">
                        <FooterStyle CssClass="dataTableFooter"></FooterStyle>
                        <AlternatingItemStyle CssClass="oddRow"></AlternatingItemStyle>
                        <ItemStyle CssClass="evenRow"></ItemStyle>
                        <HeaderStyle CssClass="dataTableHeader"></HeaderStyle>
                        <Columns>
                              <asp:TemplateColumn>
                                    <HeaderTemplate>
                                          <asp:CheckBox id="activeSelectAll" onclick="javascript:SelectAllCheckboxes(this, 'active');" runat="server"></asp:CheckBox>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                          <asp:CheckBox id="activeItem" runat="server"></asp:CheckBox>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                          <asp:DropDownList id="activeActions" onclick="javascript:HighlightRow(this);" runat="server" CssClass="listActions"
                                                AutoPostBack="True">
                                                <asp:ListItem Value="0">Actions...</asp:ListItem>
                                                <asp:ListItem Value="add">&lt;Add New Number...&gt;</asp:ListItem>
                                                <asp:ListItem Value="expire">Expire</asp:ListItem>
                                                <asp:ListItem Value="delete">Delete</asp:ListItem>
                                          </asp:DropDownList>
                                    </FooterTemplate>
                              </asp:TemplateColumn>
                        </Columns>
                        <PagerStyle CssClass="dataTablePager"></PagerStyle>
                  </asp:datagrid>

Commented:
Adding the <ItemStyle> will work within any type of column:

               <asp:datagrid id="activeDataGrid" runat="server" ShowFooter="True" AllowSorting="True" PageSize="4"
                    CssClass="dataTable">
                    <FooterStyle CssClass="dataTableFooter"></FooterStyle>
                    <AlternatingItemStyle CssClass="oddRow"></AlternatingItemStyle>
                    <ItemStyle CssClass="evenRow"></ItemStyle>
                    <HeaderStyle CssClass="dataTableHeader"></HeaderStyle>
                    <Columns>
                         <asp:TemplateColumn>
                              <ItemStyle CssClass="yourCellStyle"/>   'Added line
                              <HeaderTemplate>
                                   <asp:CheckBox id="activeSelectAll" onclick="javascript:SelectAllCheckboxes(this, 'active');" runat="server"></asp:CheckBox>
                              </HeaderTemplate>
                              <ItemTemplate>
                                   <asp:CheckBox id="activeItem" runat="server"></asp:CheckBox>
                              </ItemTemplate>
                              <FooterTemplate>
                                   <asp:DropDownList id="activeActions" onclick="javascript:HighlightRow(this);" runat="server" CssClass="listActions"
                                        AutoPostBack="True">
                                        <asp:ListItem Value="0">Actions...</asp:ListItem>
                                        <asp:ListItem Value="add">&lt;Add New Number...&gt;</asp:ListItem>
                                        <asp:ListItem Value="expire">Expire</asp:ListItem>
                                        <asp:ListItem Value="delete">Delete</asp:ListItem>
                                   </asp:DropDownList>
                              </FooterTemplate>
                         </asp:TemplateColumn>
                    </Columns>
                    <PagerStyle CssClass="dataTablePager"></PagerStyle>
               </asp:datagrid>

Author

Commented:
In the example you edited above, you have added the css style to the template column.  However at runtime, I will dynamically add more columns to this unbound datagrid.

How do I add a custom css class to each dynamically added column?  The other columns are not visible in the design time html code, so this must, I feel, be done programatically somehow as each column will have a different css class associated with it.
Commented:
It would depend on how you add a column. If you do it by adding to the DataGrid's Columns collection then you can set the CssClass through the new column's ItemStyle:

---------------------------------------------------------------------------------
Dim newColumn As New System.Web.UI.WebControls.TemplateColumn()
newColumn.ItemStyle.CssClass = "yourCellStyle"
activeDataGrid.Columns.Add(newColumn)
---------------------------------------------------------------------------------

If you are adding the column to one of the row item's Cells collection during one of the DataGrid's events (ItemCreated, ItemDataBound), then you can set it on the new TableCell's CssClass property directly:

----------------------------------------------------------
Protected Sub activeDataGrid_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles activeDataGrid.ItemCreated
   Dim newCell As New System.Web.UI.WebControls.TableCell()
   newCell.Text = "Here is my new column"
   newCell.CssClass = "newCellStyle"
   e.Item.Cells.Add(newCell)
End Sub
--------------------------------------------------------------

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
BINGO!

Although I'm actually using the following, your reply certainly showed me the light.

            private void activeDataGrid_ItemDataBound(object sender, DataGridItemEventArgs e)
            {
                  for(int i=0; i<e.Item.Cells.Count; i++)
                        e.Item.Cells[i].CssClass = "col" + (i+1);
            }

It's not an elegant solution by any means but here it is.  I'm using a datatable to create my columns and rows and then binding this to the datagrid at run time, so I needed to set the css class after my columns were autogenerated.

I did say that my datagrid was unbound, which I guess is argueable, but in my defense it's not bound at design time.  Anyway thanks jplevyak for the tips, you get my points!
ok, so when I set the css it seems to be working, but it's not changing the values of the hyperlink properties, which is what I want.  so if the css is just changing the font size or background color, it works... but if I'm trying to change the hyperlink properties, nothing happens.  
So what I'm probably trying to get at is this?
<ItemStyle CssClass="calendar"  /> ... in my code behind?  How do I access this?
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.