Click here to Skip to main content
15,937,127 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
Hi,

I am using VS 2005 and dynamically generating datatable populating data from an xml file. Now my requirement is:

1)if I click on header,table contents should hide leaving the header

2)Click on header again,table contents should be visible again.

Kindly help me out.

XML
<head id="Head1" runat="server">
    <title>Untitled Page</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <asp:Table ID="TABLE1" CellPadding="3" CellSpacing="0" runat="server" BorderWidth="1px" GridLines="both"></asp:Table>
         <asp:Table ID="TABLE2" CellPadding="3" CellSpacing="0" runat="server" BorderWidth="1px" GridLines="both"></asp:Table>
         <asp:Table ID="TABLE3" CellPadding="3" CellSpacing="0" runat="server" BorderWidth="1px" GridLines="both"></asp:Table>
   </div>
        </div>
    </form>
</body>

C#
protected void Page_Load(object sender, EventArgs e)
    {
        String filePath = Server.MapPath("TimeSlot20101025.xml");
        FileStream sr = new FileStream(filePath, System.IO.FileMode.Open);
        try
        {
            XmlTextReader xtr = new XmlTextReader(sr);
            ds.ReadXml(xtr);
         DataTable objDataTable = new DataTable();
        objDataTable = (DataTable)ds.Tables[tableno].DefaultView.Table;
        TableRow objTableRow = new TableRow();
        TableHeaderCell objTableHeaderCell = new TableHeaderCell();
        TableCell objTableCell = new TableCell();
                TABLE1.Rows.Add(objTableRow);
        objTableRow = new TableRow();
        objTableHeaderCell.ColumnSpan = objDataTable.Columns.Count;
           objTableHeaderCell.Text = objDataTable.Columns[i].ColumnName.ToString();
            objTableHeaderCell.Style.Add("font-weight", "bold");
            objTableHeaderCell.Style.Add("text-align", "left");
            objTableHeaderCell.Width = Unit.Pixel(120);
            objTableHeaderCell.Wrap = false;
            objTableRow.Cells.Add(objTableHeaderCell);
        }
        TABLE1.Rows.Add(objTableRow);
        for (int iRow = 0; iRow < objDataTable.Rows.Count; iRow++)
        {
            objTableRow = new TableRow()
            objTableRow.Cells.Add(objTableCell);
            }
            TABLE1.Rows.Add(objTableRow);
        /*
       .............Same for generating other table dynamically..................
       */
        }
}
        finally
        {
            sr.Close();
            sr.Dispose();
        }
    }

Kindly help me out.
[EDIT]Moved from Answer[/EDIT]
Posted
Updated 9-Feb-11 21:19pm
v3
Comments
Sunasara Imdadhusen 9-Feb-11 8:29am    
Please provide code of you generated table HTML.

check here[^]
Google expand and collapse for more results.
 
Share this answer
 
Comments
Dalek Dave 10-Feb-11 4:19am    
Good Link
Please check
1) jQuery toggle
2) jQuery Plugins
3) Google it for more stuff
Let me know if you need more help on this.
 
Share this answer
 
Comments
Manfred Rudolf Bihy 9-Feb-11 19:55pm    
Your first link seems to be broken. Please check it!
Dalek Dave 10-Feb-11 4:19am    
Good Links.
Monjurul Habib 10-Feb-11 17:36pm    
Too may errors on the code.
I am giving you a simplest example and definitely you will get the solution now. Just try to understand the code below:

Add the jQuery function within the head tag
XML
<script type="text/javascript">
    $(document).ready(function() {
    $("#TableHeader1").click(function() {
        $(".readOnlyRow").toggle();
    });
});
</script>



AND this is the table(for example i just use one table)
XML
<asp:Table ID="Table1" runat="server">
        </asp:Table>


=======.cs========
page load event code


TableHeaderRow thr = new TableHeaderRow();
TableHeaderCell thcell1 = new TableHeaderCell();
thcell1.Style.Add("font-weight", "bold");
thcell1.Style.Add("text-align", "center");
thcell1.Style.Add("background-color", "#F0F0F0");
thcell1.Text = "Column 1";
TableHeaderCell thcell2 = new TableHeaderCell();
thcell2.Style.Add("font-weight", "bold");
thcell2.Style.Add("text-align", "center");
thcell2.Style.Add("background-color", "#F0F0F0");
thcell2.Text = "Column 2";
thcell1.ID = "TableHeader1"; //i am using this id for click

thr.Cells.Add(thcell1);
thr.Cells.Add(thcell2);
Table1.Rows.Add(thr);

for (int i = 0; i < 5; i++)
{
    TableRow tr = new TableRow();
    for (int j = 0; j < 2; j++)
    {
        TableCell tc = new TableCell();
        Label label = new Label();
        label.Text = "RowNo:" + i + " " + "ColumnNo:" + " " + j;
        tc.Controls.Add(label);
        tr.Cells.Add(tc);
    }
    tr.Attributes.Add("class", "readOnlyRow"); // add this class for toggle
    Table1.Rows.Add(tr);
}


If this would be really helpful to you then don't forgot to Vote and Make Answer as Accepted.
 
Share this answer
 
Comments
manushi88 11-Feb-11 5:39am    
Hi Monjurul Habib, First of all thanks for helping me. Problem I am facing is ---Only clicking on first headercell,its working fine.Clicking on rest of the header cells,it is not working.Kindly help me out. Thanks and Regards, Manushi

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900