How to add UserControl inside Tab from code behind?
Description
You can create a Tab control with UserControl in ContentSection and add Tab items from code behind. This helps you to load content with multiple controls inside a tab and provides you a clear structured code.
Solution
In order to add the web user control with the user defined structure with multiple controls and elements to a Tab, you can use the LoadControl() method of ASP UserControl class in code behind. Refer to the following steps to create a Tab items from code behind and map user control from code behind.
- Create a Tab element in the ASPX page and required UserControl pages for your application.
- Create an instance for UserControl and pass the virtual path to the LoadControl() method.
- Declare a Syncfusion TabItem instance and define its ID and Text.
- By using the ContentSection property of the TabItem, add the created UserControl instance to corresponding tab item
- Finally, add the tab items to the Tab by using Items.Add() method.
Refer to the following code examples to add UserControl from code behind.
ASPX
<%--Tab element to which items will be added from code behind--%> <ej:Tab ID="Tab" runat="server" Height="400px" Width="600px" HeightAdjustMode="Fill">
CS
protected void Page_Load(object sender, EventArgs e)
{
Syncfusion.JavaScript.Web.TabItem item1 = new Syncfusion.JavaScript.Web.TabItem(); // Instance for Tab item
item1.Id = "Tab_1";
item1.Text = "Tab1";
UserControl control = (UserControl)Page.LoadControl("~/UserControls/WebUserControl4.ascx"); //Specify the path of the created user control page
if (control != null)
{
item1.ContentSection.Controls.Add(control);// Add the UserControl to ContentSection using the instance created
}
Tab.Items.Add(item1);// Add the Tab item to the tab control
// Adding the second tab item
Syncfusion.JavaScript.Web.TabItem item2 = new Syncfusion.JavaScript.Web.TabItem(); // Instance for Tab item
item2.Id = "Tab_2";
item2.Text = "Tab2";
UserControl control1 = (UserControl)Page.LoadControl("~/UserControls/WebUserControl1.ascx"); //Specify the path of the created user control page
if (control != null)
{
item2.ContentSection.Controls.Add(control1);// Add the UserControl to ContentSection using the instance created
}
Tab.Items.Add(item2);// Add the Tab item to the tab control
}
ASCX
<%--Define your UserControl as per requirement. Here is a sample UserControl with multiple elements--%> List Box <br /> <ej:ListBox ID="ListBox" runat="server" Height="230px"> <Items> <ej:ListBoxItems Id="l1" Text="Audi"></ej:ListBoxItems> <ej:ListBoxItems Id="l2" Text="BMW"></ej:ListBoxItems> <ej:ListBoxItems Id="l3" Text="Volkswagen"></ej:ListBoxItems> <ej:ListBoxItems Id="l4" Text="Ferrari"></ej:ListBoxItems> <ej:ListBoxItems Id="l5" Text="Chevrolet"></ej:ListBoxItems> <ej:ListBoxItems Id="l6" Text="Hyundai"></ej:ListBoxItems> <ej:ListBoxItems Id="l7" Text="Jaguar"></ej:ListBoxItems> </Items> </ej:ListBox> <br /> Currency textbox <br /> <ej:CurrencyTextBox ID="CurrencyTextBox" runat="server"></ej:CurrencyTextBox> <br /> Numeric TextBox </br> <ej:NumericTextBox ID="NumericTextBox" runat="server"></ej:NumericTextBox>
The following screenshot displays the Tab with the loaded user control and items created from code behind.
Figure 1: Tab with UserControl and Tab items added from code behind
