I have a gridview that is bound to a database table, but the css I have to use was designed for html:table. I was wondering if there was an easy way to convert the gridview into a html table so that I can display it with the stylesheet I was given.
thanks
here's a sample of the html table my partner wrote for a mockup. I'd like to emulate how the style is applied.
<div class="content1">
<table class="yep">
<thead>
<tr>
<th>Case #</th>
<th>Unit #</th>
<th>Date</th>
<th>Type of Call</th>
<th>Gender</th>
<th>Age</th>
<th>View PCR</th>
<th><button class="btn">Create Incident</button></th>
</tr>
</thead>
<tbody>
<tr>
<td>123456788</td>
<td>102935734</td>
<td>07/28</td>
<td>Critical Care</td>
<td>Male</td>
<td>25</td>
<td><a class="btn em" href="table_view.html">View PCR</a></td>
<td class="check"><input type="checkbox"></td>
</tr>
here's my gridview:
<asp:GridView ID="GridView1" runat="server" CssClass="yep" AutoGenerateColumns="False" DataKeyNames="Case #" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="Case #" HeaderText="Case #" ReadOnly="True" SortExpression="Case #" />
<asp:BoundField DataField="Unit #" HeaderText="Unit #" SortExpression="Unit #" />
<asp:BoundField DataField="Date" HeaderText="Date" SortExpression="Date" />
<asp:BoundField DataField="Type of Call" HeaderText="Type of Call" SortExpression="Type of Call" />
<asp:BoundField DataField="Gender" HeaderText="Gender" SortExpression="Gender" />
<asp:BoundField DataField="Age" HeaderText="Age" SortExpression="Age" />
<asp:BoundField DataField="View PCR" HeaderText="View PCR" SortExpression="View PCR" />
<asp:TemplateField HeaderText="Selection">
<ItemTemplate>
<asp:CheckBox ID="Selections" runat="server" OnCheckedChanged="CheckBox1_CheckedChanged" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Try this:
<asp:TemplateField HeaderText="Selection">
<ItemTemplate>
<asp:Button ID="Selections" runat="server" OnClick="Selections_Click" CssClass="btn" />
</ItemTemplate>
</asp:TemplateField>
Note: The CssClass attribute will assign the btn class to the rendered output.
Related
Hello guys i am working with obout gridview and i am trying to make an edit template for my grid, i looked up on their site but i still cant solve a problem with updating the needed rows .
When i pick a row to edit i got a template with different look that has 4 textboxes that should be connected to 4 of the cells on the choosen row of the grid. The problem those textboxes aint getting updated and even when i as a user fill them up and click update i can see on debugger that they are strings of "".
This is the grid altough maybe there is something else that needs to be done to solve this? i am kinda new to this, Thanks in advance!
<cc1:Grid ID="budgetGrid" runat="server"
EnableTypeValidation="false" CallbackMode="true" Serialize="true" AutoPostBackOnSelect="false"
AllowGrouping="True" FolderStyle="~/styles/premiere_blue"
OnUpdateCommand="UpdateRecord"
DataSourceID="budgetSql" GroupBy="year,departmentName" ShowColumnsFooter="True"
ShowGroupFooter="True" ShowMultiPageGroupsInfo="False"
AllowAddingRecords="False" PageSize="-1" AllowPageSizeSelection="False"
AllowPaging="False">
<GroupingSettings AllowChanges="False" />
<Columns>
<cc1:Column ID="Column1" runat="server" AllowEdit="true" HeaderText="Edit"
width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="column0" HeaderText="ID" readonly="true" Visible="false" runat="server" DataField="id" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column2" HeaderText="Department" readonly="true" Visible="false" runat="server" DataField="departmentName" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column3" HeaderText="Sub Dep" readonly="true" runat="server" DataField="subDepName" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column11" HeaderText="Q1Bud" readonly="false" runat="server" DataField="Q1B" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
<TemplateSettings RowEditTemplateControlId="budgetQ1" RowEditTemplateControlPropertyName="value" />
</cc1:Column>
<cc1:Column ID="Column8" HeaderText="Q2Bud" readonly="false" runat="server" DataField="Q2B" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
<TemplateSettings RowEditTemplateControlId="budgetQ2" RowEditTemplateControlPropertyName="value" />
</cc1:Column>
<cc1:Column ID="Column9" HeaderText="Q3Bud" readonly="false" runat="server" DataField="Q3B" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
<TemplateSettings RowEditTemplateControlId="budgetQ3" RowEditTemplateControlPropertyName="value" />
</cc1:Column>
<cc1:Column ID="Column10" HeaderText="Q4Bud" readonly="false" runat="server" DataField="Q4B" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
<TemplateSettings RowEditTemplateControlId="budgetQ4" RowEditTemplateControlPropertyName="value" />
</cc1:Column>
<cc1:Column ID="Column4" HeaderText="Q1App" readonly="true" runat="server" DataField="Q1A" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column5" HeaderText="Q2App" readonly="true" runat="server" DataField="Q2A" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column6" HeaderText="Q3App" readonly="true" runat="server" DataField="Q3A" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column7" HeaderText="Q4App" readonly="true" runat="server" DataField="Q4A" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column13" HeaderText="Year" readonly="true" Visible="false" runat="server" DataField="year" FooterStyle-Font-Size="Smaller" Width="60">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
</Columns>
<TemplateSettings RowEditTemplateId="tplRowEdit" />
<Templates>
<cc1:GridTemplate runat="server" ID="tplRowEdit">
<Template>
<table class="rowEditTable">
<tr>
<td valign="top">
<fieldset style="width: 275px; height: 175px;">
<legend>Budget Amount</legend>
<table class="rowEditTable">
<tr>
<br />
<td>Quarter 1:</td>
<td> <cc1:OboutTextBox runat="server" ID="budgetQ1" Width="150"></cc1:OboutTextBox>
</td>
</tr>
<tr>
<td>Quarter 2:</td>
<td>
<cc1:OboutTextBox runat="server" ID="budgetQ2" Width="150"></cc1:OboutTextBox>
</td>
</tr>
<tr>
<td>Quarter 3:</td>
<td>
<cc1:OboutTextBox runat="server" ID="budgetQ3" Width="150"></cc1:OboutTextBox>
</td>
</tr>
<tr>
<td>Quarter 4:</td>
<td>
<cc1:OboutTextBox runat="server" ID="budgetQ4" Width="150"></cc1:OboutTextBox>
</td>
</tr>
<tr>
<td colspan="2">
<br />
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="Save" onclick="budgetGrid.save()" />
<input type="button" value="Cancel" onclick="budgetGrid.cancel()" />
</td>
</tr>
</table>
</Template>
</cc1:GridTemplate>
</Templates>
</cc1:Grid>
I found a solution some time ago , i created the gridview in the page load event from zero and by doing so i got full control on all the changes editing etc, which seem to cause many problems while trying to do so with existing gridview on the html view.
I am using a ModalPopupExtender in a GridView. When the user clicks link button in the grid to update the row values, the modal popup opens. The user updates the values and click on the update button.
I have used validation controls in the modal popup, but the when the user click update button the form submits with out validating the controls.
I tried with ValidationGroup as it's mentioned in some forums but no luck. Can any one help how to fix this or any good examples.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</div><asp:Button ID="btnShowPopup" runat="server" Text="Button" style="display:none"/><div >
<asp:GridView ID="GridView2" runat="server" BackColor="White"
BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="4"
AutoGenerateColumns="False" ForeColor="Black" Width="100%"
onrowcreated="GridView2_RowCreated" onrowdatabound="GridView2_RowDataBound">
<Columns>
<asp:BoundField DataField="ShortDescription" HeaderText="ShortDescription" ReadOnly="True" ><ItemStyle Width="32%" /></asp:BoundField>
<asp:BoundField DataField="Planned" HeaderText="Planned" ReadOnly="True" >
<ItemStyle Width="5%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="Actual" HeaderText="Actual" ReadOnly="True" >
<ItemStyle Width="5%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="Error" HeaderText="Error" ReadOnly="True" >
<ItemStyle Width="5%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="Volume" HeaderText="Vol" ReadOnly="True"
DataFormatString="{0:#%}" >
<ItemStyle Width="3%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="Mix" HeaderText="Mix" ReadOnly="True"
DataFormatString="{0:#%}" >
<ItemStyle Width="3%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="PMReason" HeaderText="Reason" ><ItemStyle Width="9%" /></asp:BoundField>
<asp:BoundField DataField="PMComment" HeaderText="Comment" ><ItemStyle Width="9%" /></asp:BoundField>
<asp:BoundField DataField="PMPlanned" HeaderText="Planned" >
<ItemStyle Width="5%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="PMActual" HeaderText="Actual" ReadOnly="True" >
<ItemStyle Width="5%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="PMError" HeaderText="Error" >
<ItemStyle Width="5%"
HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="PMVolume" HeaderText="Vol" ReadOnly="True"
DataFormatString="{0:#%}" >
<ItemStyle Width="3%" HorizontalAlign="Right" /></asp:BoundField>
<asp:BoundField DataField="PMMix" HeaderText="Mix" ReadOnly="True"
DataFormatString="{0:#%}" >
<ItemStyle Width="3%" HorizontalAlign="Right" /></asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="btnSelect" runat="server" CausesValidation="false"
ImageUrl="~/Images/edit.png"
ImageAlign="AbsMiddle" Height="15px" Width="15px"
onclick="btnSelect_Click" />
</ItemTemplate>
<ItemStyle Width="3%" />
</asp:TemplateField>
<asp:BoundField DataField="ReportRowId" Visible="False" />
</Columns>
<FooterStyle BackColor="#CCCC99" ForeColor="Black" />
<PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</div>
<cc2:ModalPopupExtender ID="gv_ModalPopupExtender" runat="server"
TargetControlID="btnShowPopup"
PopupControlID="pnlModalPanel"
CancelControlID="btnCancel"
BackgroundCssClass="modalBackground"/>
<asp:Panel ID="pnlModalPanel" runat="server" Style="display: none;" BackColor="Red">
<table>
<tr>
<th colspan="2" align="center" style="color:White; font-size:larger"> POST MITIGATION </th>
</tr>
<tr>
<td>
<asp:Label ID="lblRowId" runat="server" Style="display: none;"></asp:Label> </td>
<td></td>
</tr>
<tr>
<td>
<asp:Label ID="lblDevice" runat="server"
ForeColor="White" Font-Bold="True">Device:</asp:Label> </td>
<td><asp:TextBox ID="txtDevice" runat="server" Width="150px" ReadOnly="true"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Label ID="lblPlanned" runat="server"
ForeColor="White" Font-Bold="True">Planned:</asp:Label> </td>
<td><asp:TextBox ID="txtPlanned" runat="server" Width="150px" ReadOnly="true"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Label ID="lblActual" runat="server"
ForeColor="White" Font-Bold="True">Actual:</asp:Label> </td>
<td><asp:TextBox ID="txtActual" runat="server" Width="150px"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Label ID="lblError" runat="server"
ForeColor="White" Font-Bold="True">Error:</asp:Label> </td>
<td><asp:TextBox ID="txtError" runat="server" Width="150px" ReadOnly="true"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Label ID="lblReason" runat="server"
ForeColor="White" Font-Bold="True">Reason:</asp:Label> </td>
<td>
<asp:DropDownList ID="ddlReason" runat="server" Width="150px" ValidationGroup="valReason">
<asp:ListItem>-- Select Reason --</asp:ListItem>
<asp:ListItem></asp:ListItem>
<asp:ListItem>Availability LT</asp:ListItem>
<asp:ListItem>Availability ST</asp:ListItem>
<asp:ListItem>Competitor Response</asp:ListItem>
<asp:ListItem>Credit</asp:ListItem>
<asp:ListItem>Plan Issue</asp:ListItem>
<asp:ListItem>Props Change</asp:ListItem>
<asp:ListItem>SCL Request</asp:ListItem>
<asp:ListItem>Launch Delay</asp:ListItem>
<asp:ListItem>Launch Forward</asp:ListItem>
<asp:ListItem>Phasing</asp:ListItem>
<asp:ListItem>Opportunity-Positive</asp:ListItem>
<asp:ListItem>Opportunity-Negative</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvReason" ValidationGroup="valReason" runat="server" Text="*" ErrorMessage="RequiredFieldValidator"
ControlToValidate="ddlReason" Display="Dynamic" ForeColor="White" InitialValue="-- Select Reason --"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>
<asp:Label ID="lblComment" runat="server"
ForeColor="White" Font-Bold="True">Comment:</asp:Label> </td>
<td><asp:TextBox ID="txtComment" TextMode="MultiLine" Height="50px" runat="server" Width="150px"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="btnUpdate" runat="server" CausesValidation="true" ValidationGroup="valReason"
Text="Update Mitigation" onclick="btnUpdate_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel"/></td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
It worked when I removed the update button from the panel and replaced it with the new button.
But I am not sure why it didn't work before and why its working now. Its all the same code. Looks very strange to me.
I have a gridview that returns values from a directory path such as :
<table width="40%" border="0" style="margin-left:auto; margin-right:auto;">
<tr>
<td align="center">
<asp:GridView ID="gvFileList" runat="server" AutoGenerateColumns="false" AllowSorting="true">
<columns>
<asp:boundfield datafield="Name" headertext="File Name"/>
<asp:boundfield datafield="Extension" headertext="File Type"/>
<asp:boundfield datafield="Length" headertext="Length"/>
<asp:boundfield datafield="LastCreateTime" headertext="Date"/>
</columns>
</asp:GridView>
</td>
</tr>
</table>
How can I get the values under the "Name" column to have a url similar to "javascript:OpenSecure('abcd.doc') ?
Update:
Given the HTML code below, I am unable to see the hyperlink in the Name field.
<asp:GridView ID="gvInvoiceList" runat="server" AutoGenerateColumns="false" AllowSorting="true">
<columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate><asp:Hyperlink ID="acctInvoiceRpt" NavigateUrl='<%# SetNavigateUrl(Eval("Name")) %>' runat="server"></asp:Hyperlink><%#Eval("Name")%></ItemTemplate>
</asp:TemplateField>
<asp:boundfield datafield="Extension" headertext="File Type"/>
Convert Name field to <ItemTemplate> and try adding a hyperlink
<asp:HyperLink ID="hplName" runat="server" NavigateUrl='<%# "javascript:OpenSecure(''' + Eval("Name") ''') %>' Text='<%# Eval("Name") %>'/>
You would need a custom column for that:
http://msdn.microsoft.com/en-us/library/ms228046.aspx
Hey I am trying to recreate the following HTML
<table border="0" cellspacing="0" cellpadding="2" width="100%" id="productListTable">
<tr>
<th rowspan="2">Product Name</th>
<th rowspan="2" >Pack Size</th>
<th rowspan="2" >Trade Price</th>
<th colspan="2" style="border:none;">Discount</th>
<th rowspan="2" >Actual Price</th>
<th rowspan="2">Stock</th>
<th rowspan="2">Quantity</th>
</tr>
<tr class="sub">
<th >PLC</th>
<th >Total</th>
</tr>
In my Gridview the first tr is no problem as this can just be standard header text in my columns but I am wondering how I can add this sub tr
<tr class="sub">
<th >PLC</th>
<th >Total</th>
</tr>
And also how to add this style, to my existing column
<th colspan="2" style="border:none;">Discount</th>
Heres my gridview at the moment
<asp:GridView ID="productListTable" runat="server" DataSourceID="srcProductListPerCustomer" AutoGenerateColumns="False" AlternatingRowStyle-CssClass="tr_dark" HeaderStyle-CssClass="header_req" BorderWidth="0px" GridLines="None" AllowPaging="true" PageSize="25" EmptyDataText="No records." AllowSorting="false" Width="100%" DataKeyNames="product_ID_key" OnRowDataBound="productListTable_RowDataBound" OnRowCommand="productListTable_RowCommand" >
<Columns>
<asp:TemplateField HeaderText="Product Name" HeaderStyle-Width="250px" SortExpression="productName" ItemStyle-CssClass="product_name" >
<ItemTemplate>
<asp:Label ID="ProductNameField" runat="server" Text='<%# Eval("productName").ToString() %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Pack Size" HeaderStyle-Width="70px" SortExpression="packSize">
<ItemTemplate>
<asp:Label ID="PackSizeField" runat="server" Text='<%# Eval("packSize").ToString()%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Trade Price" HeaderStyle-Width="130px" SortExpression="address">
<ItemTemplate>
<asp:Label ID="TradePriceField" runat="server" Text='<%# DisplayMoney(Eval("tradePrice").ToString())%>'></asp:Label>
<asp:Label ID="TradePriceFieldHidden" runat="server" Text='<%# Eval("tradePrice").ToString()%>' Visible="false"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Discount" HeaderStyle-Width="60px" SortExpression="discount">
<ItemTemplate>
<asp:Label ID="DiscountField" runat="server" Text='<%# Eval("discount").ToString() + "%" %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Actual Price" HeaderStyle-Width="130px" SortExpression="actualPrice">
<ItemTemplate>
<asp:Label ID="ActualPriceField" runat="server" Text='<%# DisplayMoney(Eval("actualPrice").ToString())%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Stock" HeaderStyle-Width="130px" SortExpression="stock_indicator">
<ItemTemplate>
<asp:Label ID="StockField" runat="server" Text='<%# DisplayStockLevel(Eval("stock_indicator").ToString()) %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtQuantity" Columns="5"></asp:TextBox><br />
<asp:LinkButton runat="server" ID="btnRemove" Text="Remove" CommandName="Remove" CommandArgument='<%# Eval("product_ID_key") %>' style="font-size:12px;" Visible="false"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle CssClass="header_req" />
<AlternatingRowStyle CssClass="tr_dark" />
<PagerStyle CssClass="pagination" />
<PagerSettings PageButtonCount="3" FirstPageText="First" LastPageText="Last" NextPageText="Next" PreviousPageText="Previous" Mode="NumericFirstLast" />
</asp:GridView>
I'm not sure about your current scenario, but it seems like you might want to take a look at the ListView control.
Out of the box GridView tends to create a ton of extra HTML to get it to look right. I'm not sure you'll ever be able to get exactly what you're looking for that way.
I did see that you have some paging stuff in there; if you go the ListView route, you'll want to use a DataPager as well.
I would use a ListView instead. It's a little more flexible, and you can just spit out table rows through the item template. It won't be the prettiest HTML ever, but if you're looking to use one of the provided ASP.NET controls for the job, that's probably the most forgiving.
I think you can get away with something like this:
<table cellpadding="3" cellspacing="0">
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<tr>
<td>Test</td>
<td>Test again</td>
</tr>
</ItemTemplate>
</asp:DataList>
</table>
I have a block of code, that essentially is this:
<asp:DataGrid>
<Columns>
...
<asp:BoundColumn HeaderText="Bar" ...>
<itemstyle CssClass="foo">
</asp:BoundColumn>
And this outputs
<table>
<tr>
<td>Bar</td>
<td class="foo">...</td>
<td class="foo">...</td>
<td class="foo">...</td>
....
But I want this:
<table>
<tr>
<td class="foo">Bar</td>
<td>...</td>
<td>...</td>
<td>...</td>
....
But I can't seem to achieve it. I'll bet this is simple but I'm having trouble finding it anywhere.
I tried this, but the output was the same:
<asp:DataGrid>
<Columns>
...
<asp:BoundColumn ItemStyle-CssClass="foo" HeaderText="Bar" ...>
</asp:BoundColumn>
Help appreciated!
You want HeaderStyle-CssClass instead of ItemStyle-CssClass.
<asp:BoundColumn HeaderStyle-CssClass="foo" HeaderText="Bar" ...>
</asp:BoundColumn>
Try Header Style:
<asp:BoundField DataField="bar" HeaderText="bar" SortExpression="bar">
<ItemStyle CssClass="fooItem" />
<HeaderStyle CssClass="fooHeader" />
</asp:BoundField>
or if its applied to all headers
<Columns>
...
</Columns>
...
<HeaderStyle CssClass="foo" />
<RowStyle CssClass="fooRow" />
<AlternatingRowStyle CssClass="fooAltRow" />
...