[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 956
  • Last Modified:

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>
0
digitalconvict
Asked:
digitalconvict
  • 3
  • 3
1 Solution
 
jplevyakCommented:
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>
0
 
digitalconvictAuthor 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>
0
 
jplevyakCommented:
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>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
digitalconvictAuthor 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.
0
 
jplevyakCommented:
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
--------------------------------------------------------------
0
 
digitalconvictAuthor 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!
0
 
geoffswebCommented:
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?
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now