Wednesday, March 28, 2012

Programmatically Creating TabContainer and Adding Tabs

Plan - create a TabContainer via codebehind. Then read from a SQL DB (in this case NorthWind) and use the each CategoryName as a TabPanel.

Problem - Nothing displays. However, when I place TabContainer and TabPanel controls on the page during design, then run the code, I get the tabs with Category Names, but the first tab is the default name of the one I placed on the page during design.

Thoughts/suggestions?

Forgot to add the code (DUH):

Imports AjaxControlToolkit
Imports System.Data.SqlClient
Imports System.Configuration
Partial Class _Default
Inherits System.Web.UI.Page

Dim connectionString As String = "Data Source=MATT\SQLExpress;Initial Catalog=LucaSQL;Integrated Security=True;"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If (Not Page.IsPostBack) Then
ReadCategories(connectionString)

End If
End Sub

Private Sub ReadCategories(ByVal connectionString As String)
Dim queryString As String = _
"SELECT CategoryID, CategoryName FROM dbo.Categories"

Using connection As New SqlConnection(connectionString)
Dim command As New SqlCommand(queryString, connection)
connection.Open()

Dim reader As SqlDataReader = command.ExecuteReader()
'Dim tc As New TabContainer

' Call Read before accessing data.
While reader.Read()
Dim CategoryName As String = reader("CategoryName")
Dim tab As New TabPanel
tab.HeaderText = CategoryName
tc.Tabs.Add(tab)

End While

' Call Close when done reading.
reader.Close()
End Using
End Sub
End Class


Hi,

In this case, you need to change its visibility with javascript. For example:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
protected void Page_Load(object sender, EventArgs e)
{
for (int i = 0; i < 3; i++)
{
TabPanel tp = new TabPanel();
tp.HeaderText = "tp" + i.ToString();
tp.Controls.Add(new TextBox());
TabContainer1.Tabs.Add(tp);
}
}
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function pageLoad()
{
$get("TabContainer1").style.visibility = "visible";
}
</script>

</head>
<body>
<form id="form1" runat="server">
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<div>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
</ajaxToolkit:TabContainer>
<br />
<br />
<br />
<br />
</div>
</form
</body>
</html>

No comments:

Post a Comment