We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add UserControl inside Tab from code behind?

Platform: ASP.NET Web Forms |
Control: Tab |
Published Date: January 13, 2015 |
Last Revised Date: May 8, 2019 |
Product Version: 12.4.0.24
Tags: tab, usercontrol

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.

Tab with UserControl and Tab items added from code behind

Figure 1: Tab with UserControl and Tab items added from code behind

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon