How to put Horizontal scroll bar for dynamic html table Header in code behind

Last Reply on Jul 18, 2012 05:12 AM By Mudassar

Posted on Jul 18, 2012 02:12 AM

HI experts,

I am creating the dynamic html table in the code behind ,in this i want to put horizontal and vertical scroll bar for my table header .

here my html table header first column is fixed from second column onwords dynamic so  i have to put  horizontal  and vertical scroll bar.

Thanks in advance.

Raj.

Posted on Jul 18, 2012 05:12 AM Modified on on Jul 18, 2012 05:14 AM

You can put vertical scrollbar and keep header fixed using jQuery Scrollable Plugin but not horizontal

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type = "text/javascript" src = "scripts/ScrollableGridPlugin.js?22_12"></script>
    <script type = "text/javascript">
        $(document).ready(function () {
            $('#Table1').Scrollable({
                ScrollHeight: 50
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Panel ID = "Panel1" runat = "server">
    
    </asp:Panel>
    </form>     
</body>
</html>

 

  protected void Page_Load(object sender, EventArgs e)
    {
        Table table = new Table();
        table.ID = "Table1";
        table.BorderStyle = BorderStyle.Solid;

        //Add Header Row
        TableRow row = new TableRow();
        TableHeaderCell headerCell = new TableHeaderCell();
        headerCell.Text = "Item";
        row.BackColor = Color.Green;

        row.Controls.Add(headerCell);
        headerCell = new TableHeaderCell();
        headerCell.Text = "Price";
        row.Controls.Add(headerCell);
        table.Controls.Add(row);

        //Add DataRow
        row = new TableRow();
        TableCell cell = new TableCell();
        cell.Text = "Shirt";
        row.Controls.Add(cell);
        cell = new TableCell();
        cell.Text = "200";
        row.Controls.Add(cell);
        row.BackColor = Color.Yellow;
        table.Controls.Add(row);

        //Add Colspan Row
        row = new TableRow();
        row.BorderStyle = BorderStyle.Solid;
        cell = new TableCell();
        cell.Text = "Colspan Row";
        cell.ColumnSpan = 2;
        row.Controls.Add(cell);
        row.BackColor = Color.Brown;
        table.Controls.Add(row);

        //Add DataRow
        row = new TableRow();
        cell = new TableCell();
        cell.Text = "Tie";
        row.Controls.Add(cell);
        cell = new TableCell();
        cell.Text = "30";
        row.Controls.Add(cell);
        table.Controls.Add(row);
        row.BackColor = Color.Beige;
        Panel1.Controls.Add(table);
}

Demo

ItemPrice
Shirt 200
Colspan Row
Tie 30