Assigning UserControlURL in a TabClick event

The UserControlUrl property is validated and reconstructed by ITemplate logic, which at the time of particular server event can already exist. In order to trigger reconstruction of the ITemplate and display the UserControl, the DataBind() method of UltraWebTab should be called at the end.

switch (e.Tab.Key)
{
case "UC1":
e.Tab.ContentPane.UserControlUrl= = "WebUserControl1.ascx";
UltraWebTab1.DataBind();
break;
case "UC2":
e.Tab.ContentPane.UserControlUrl== "WebUserControl2.ascx";
UltraWebTab1.DataBind();
break;
}

set a TargetURL for a Tabs ContentPane based on a value in another Tabs ContentPane

Private Sub UltraWebTab1_TabClick(ByVal sender As System.Object, ByVal e As Infragistics.WebUI.UltraWebTab.WebTabEvent) Handles UltraWebTab1.TabClick
Dim oTab As Infragistics.WebUI.UltraWebTab.Tab
Dim tb As TextBox
Dim sText As String

oTab = UltraWebTab1.Tabs(0)
tb = oTab.ContentPane.Controls(0)
sText = tb.Text()

If e.Tab.Text = "New Tab 2" Then
e.Tab.ContentPane.TargetUrl = sText
End If

End Sub

the easiest way to communicate between controls on different tabs in the Infragistics WebTab

When creating a WebTab, you may be tempted to take the easy route of filling up the tabs by setting the TargetURL property of each tab to a page you've already created.

There is nothing wrong with this method...unless you require communication between those tabs, in which case setting the TargetURL will essentially hide the contents of those tabs from the parent page. This happens because setting the TargetURL places that target page in an IFRAME on the parent page, and since the structure within frames is invisible to the containing page in ASP.NET, it is then very difficult to access child controls).

Your next option would be to place the controls directly on the tabs using the template editor. While this improves your abilities to access controls, attaching events to those controls becomes a bit cumbersome, requiring you to rewire the event handlers on each Page Load event.

Your third option is to place all your controls within a Web User Control, and then place the user control into the tab via the template editor. By doing this, you'll maintain your ability to handle events (via the user controls' code behind page) and your ability to access child controls (either by making objects themselves public or by creating methods and accessors to modify properties). The attached samples illustrate how to communicate between user controls on different tabs and how to access child controls from the main page.

Embed a close button in UltraWebTab

One way to improve the look & feel of an ASP.NET web application that uses UltraWebTab is to give the user the ability to customize his workspace. Allowing the user to close tabs that he is not using may improve the usability of your web application. These step-by-step instructions provide this close functionality for an UltraWebTab, using a custom close button embedded right inside the tab.

Additional Information

This is done by embedding HTML in the displayed text of the tab. Use this technique in ASP.NET wherever you want to insert custom client-side scripting or HTML elements in areas that are not exposed as properties of the control (like the selectable tab area in UltraWebTab).

Step-By-Step Example

1. Set the key property for each tab you want to be able to close.
   
   This must be done for our client-side functions to work. This process can be modified to work without keys for each tab, but it works best with the keys set.
   
   
2. Write a JavaScript function to close a tab, given a tab key passed in as an argument.
   
   This function will be called from the custom close button, in the context of the tab containing the button.
   In order for this to work, you must call tab.setEnabled(false) and then tab.setVisible(false). This is because when a tab is selected, it cannot be hidden. Disabling the tab first will ensure that it can be hidden.

javascript code
function closeTab(tabKey) {
var myUltraWebTab = igtab_getTabById('UltraWebTab1');
myUltraWebTab.Tabs[tabKey].setEnabled(false);
myUltraWebTab.Tabs[tabKey].setVisible(false);
}

Create an image for your close button. You will need to provide your own image to represent the custom close button. In this example, a JPEG called "redX.jpg" is used. Embed the following code in the TEXT of each tab: JavaScript (replace "tab1key" with the appropriate tab key): " After doing this, your igtab:tab element should look something like this: ASP.NET:

" >

The images can be added automatically at any time by iterating through the Tabs collection. Place this script in the body.onload event of the document, and the images will all be inserted for you:

function embedCloseButtons() {
var myUltraWebTab = igtab_getTabById('UltraWebTab1');
for (t = 0; t < currenttab =" myUltraWebTab.Tabs[t];" src="http://www.blogger.com/%27redX.jpg%27" onclick="'closeTab("">");
}
}


The effect of this step is: an HTML IMG tag, with the closeTab() function attached to its onclick event, embedded in the text of your tab-- in other words, an embedded Close button for your UltraWebTab.