ASP.NET table with variable number of columns
I need to display some tabular data where no more than three columns should be displayed, but sometimes only 1 or 2 are needed. So far I have:
<asp:FormView ID="myFormView" runat="server" DataSourceID="myXmlDataSource">
<ItemTemplate>
<table cellspacing="0" cellpadding="0" class="myTableStyle">
<colgroup>
<col class="myCol1Style" />
<col class="myCol2Style" />
<col class="myCol3Style" />
</colgroup>
<thead>
<tr>
<th class="myCol1HeaderStyle">Column 1</th>
<th class="myCol2HeaderStyle">Column 2</th>
<th class="myCol3HeaderStyle">Column 3</th>
</tr>
</thead>
<tr>
<td>
<p>Column 1 data goes here</p>
</td>
<td>
<p>Column 2 data goes here</p>
</td>
<td>
<p>Column 3 data goes here</p>
</td>
</tr>
</table>
</ItemTemplate>
</asp:FormView>
<asp:XmlDataSource ID="myXmlDataSource" runat="server" />
Column 1 will always be closed, but in some cases I need to hide column 2 and / or 3.
What would be the best way to handle this?
source to share
I would suggest using a GridView control with "AutoGenerateColumns" set to true instead of a FormView control. Then bind it to a data source and always specify the same number of columns as your data source.
If you need to hide columns based on custom events rather than data in them, then the GridView will ultimately give you a lot more control over the rows / columns.
source to share
A simple solution is to use a GridView etc. that can generate columns automatically from the data source. If you cannot use this, then if you can use jquery, then I have a method that I am using in my code.
Define different classes for the first, second and third columns. define three protected variables or use a hidden set of classes. Register this array as a javascript array using ClientScriptManager
. Then on page load use jquery to hide columns or tds with classes in the array.
FROM#:
protected string SecondCol="true";
protected string ThirdCol = "true";
void BinData(){
////
////DataBinding Code
////
if(!SecondColumnNeeded) SecondCol="false";
if(!ThirdColumnNeeded) ThirdCol="false";
}
ASPX:
<tr>
<td>
<p>Column 1 data goes here</p>
</td>
<td class="second">
<p>Column 2 data goes here</p>
</td>
<td class="third">
<p>Column 3 data goes here</p>
</td>
</tr>
<script type="text/javascript">
var s="<%= SecondCol %>";
var t="<%= ThirdCol %>";
$(document).ready(function(){
if(s==="true"){
$("td.second").hide();//or remove
}
//similarly remove third column and column headers also
});
</script>
hope this helps you :)
source to share