This is a migrated thread and some comments may be shown as answers.

Need to show contents of dynamically created tabs on page load

4 Answers 151 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

Shawn asked on 29 Jul 2014, 05:10 PM

Hello,

I have a TabStrip with a RadMultiPage that is loaded dynamically based on a table in my database. This TabStrip can consist of three levels of tabs (parent, middle-child, and bottom-child).

Here's the code that generates the tabs:

if (!IsPostBack)

{

rtabstripTabs.DataFieldID = "tabID";

rtabstripTabs.DataFieldParentID = "parentTabId";

rtabstripTabs.DataTextField = "tabLabel";

rtabstripTabs.DataValueField = "filePath";

rtabstripTabs.DataSource = tabs;

rtabstripTabs.DataBind();

}

Here's the HTML for the TabStrip:

<telerik:RadTabStrip ID="rtabstripTabs" runat="server" OnTabClick="rtabstripTabs_TabClick"

MultiPageID="rmultipageUserContol" EnableEmbeddedSkins="False">

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="rmultipageUserContol" runat="server">

<telerik:RadPageView runat="server" ID="rpageviewUserControl">

</telerik:RadPageView>

</telerik:RadMultiPage>

The "filePath" is a link to user control pages that will be displayed when the user clicks on a tab.

I'm trying to figure out how to load the user control content in these two scenarios:
1- When the tab (page) first loads I want the content of its user control be displayed automatically. Since the TabStrip is dynamically created the name and value of this tab could be different.

2- When the user clicks on subsequent tabs I want to display the content (user control page) of the first child tab (this could either be a child on the 2nd level or a child on the 3rd level. The tab levels are also dynamic, and depends of the content of the table in the database). I know how to display the content when the user clicks on a tab that has no children.

Any help will be very much appreciated. I am a new Telerik user, and I have not been able to figure out how to do this on my own. Thanks.

4 Answers, 1 is accepted

answered on 31 Jul 2014, 04:19 PM

Well, I figured out how to select and show the content of the first (main) tab when the TabStrip first loads

rtabstripTabs.Tabs[0].Selected = true;

RadTab TabSelected = rtabstripTabs.SelectedTab;

string filePath = TabSelected.Value;

Control ctrl = (Control)LoadControl(filePath);

rpageviewUserControl.Controls.Add(ctrl);

rmultipageUserContol.SelectedIndex = 0;

Now, I need to figure out how to show the contents of the deepest nested tab when one of the top level tabs is clicked. I almost have it working by using the following client-side code:

<script type="text/javascript">

function OnClientTabSelected(sender, eventArgs) {

var tabStrip = sender;

var tab = eventArgs.get_tab();

if (tab.get_tabs().get_count() > 0) {

tab.get_tabs().getTab(0).click();

}

</script>

The code above works sometimes, but then when I click on the other tabs in the TabStrip nothing happens.

Can anyone please help me with this? I've been looking all over this site, but I haven't been able to find the solution. Thanks.