asked on

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

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>

jplevyak

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>

digitalconvict

ASKER

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"><Add New Number...></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>

jplevyak

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"><Add New Number...></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>

digitalconvict

ASKER

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.

ASKER CERTIFIED SOLUTION

jplevyak

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

digitalconvict

ASKER

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!

geoffsweb

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?