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

Trying to Add Tabs Dynamically

2 Answers 334 Views

TabStrip

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

Jason Bourdette asked on 17 Jan 2015, 03:23 AM

I have been looking at the TabStrip - Add/Remove Tabs demo and trying to modify to work with RadMenu and a Radspliter. I have condensed all the code into 1 single simple file. Any help would be great. When i click the RadMenu to add a new it adds a new tab but the corresponding pageview doesnt display. Then if i click over to the third tab, and back to the second tab, the second tab now shows the contents from the third tab.

Thanks, any advise or help would be great!!

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>

<%@ Register Src="WebUserControl.ascx" TagPrefix="uc1" TagName="NewMessage" %>

<!DOCTYPE html>

<script runat="server">

protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e) {

DataTable dt = new DataTable();

dt.Columns.Add("EmployeeID");

dt.Columns.Add("LastName");

dt.Columns.Add("FirstName");

dt.Columns.Add("Title");

dt.Columns.Add("ReportsTo");

dt.Rows.Add(new object[] { 1, "Davalio", "Nancy", "Sales Representative", 2 });

dt.Rows.Add(new object[] { 2, "Fuller", "Andrew", "Vice President, Sales", null });

dt.Rows.Add(new object[] { 3, "Leverling", "Janet", "Sales Representative", 2 });

dt.Rows.Add(new object[] { 4, "Peacock", "Margaret", "Sales Representative", 2 });

(sender as RadGrid).DataSource = dt;

}

protected void RadMenu1_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e) {

if (e.Item.Text == "Add Tab")

{

AddPageView(true, ID.ToString());

AddTab("New Message");

}

private void AddTab(string title)

{

RadTab tab = new RadTab() { Text = title };

RadTabStrip1.Tabs.Insert((RadTabStrip1.Tabs.Count - 1), tab);

RadTabStrip1.DataBind();

RadTabStrip1.SelectedIndex = tab.Index;

}

private void AddPageView(bool isNew, string pvId)

{

RadPageView pageView = new RadPageView();

pageView.ID = "NewMessage" + pvId;

RadMultiPage1.PageViews.Add(pageView);

RadMultiPage1.SelectedIndex = pageView.Index;

}

protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)

{

if (e.PageView.ID.Contains("NewMessage"))

{

RadButton b = new RadButton();

b.Text = "NEW TAB!!";

e.PageView.Controls.Add(b);

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style>

html,

body,

form {

height: 100%;

margin: 0px;

padding: 0px;

}

.header {

height: 20px;

background: blue;

color: white;

}

.menu {

height: 40px;

background: black;

color: white;

}

.footer {

height: 20px;

background: blue;

color: white;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableTheming="True">

</telerik:RadScriptManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function onClientTabSelecting(sender, args) {

var tab = args.get_tab();

if (tab.get_pageView()) {

tab.set_postBack(false);

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadMultiPage1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div class="header">Footer</div>

<div class="menu">

<telerik:RadMenu ID="RadMenu1" runat="server" EnableScreenBoundaryDetection="false" ClickToOpen="false"

onitemclick="RadMenu1_ItemClick" EnableOverlay="true" EnableRoundedCorners="true" EnableShadows="true" Flow="Horizontal">

<Items>

<telerik:RadMenuItem runat="server" Text="Menu" GroupSettings-ExpandDirection="Down" OffsetX="5">

<Items>

<telerik:RadMenuItem runat="server" Text="Add Tab"/>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</div>

<telerik:RadSplitter runat="server" id="InnerSplitter" Orientation="Vertical" VisibleDuringInit="false" Height="800px" Width="100%" Skin="Vista" >

<telerik:RadPane ID="LeftMenuPane" runat="server" Scrolling="None" Height="100%" Width="27%" ShowContentDuringLoad="false" >

<telerik:RadTabStrip ID="RadTabStrip2" ShowBaseLine="True" runat="server" MultiPageID="RadMultiPage2" Skin="Office2007" SelectedIndex="0" OnClientTabSelecting="onClientTabSelecting">

<Tabs>

<telerik:RadTab runat="server" Text="Tab1" PageViewID="PageView6" Font-Bold="true" >

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage2" runat="server" SelectedIndex="0" Width="100%">

<telerik:RadPageView ID="RadPageView6" runat="server" width="100%" Height="760px" >

<%-- >>RADGRID--%>

<telerik:RadGrid ID="RadGrid1" Height="100%" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"

AllowSorting="true">

<MasterTableView Width="100%" TableLayout="Fixed" AutoGenerateColumns="false">

<Columns>

<telerik:GridBoundColumn DataField="EmployeeID" HeaderText="EmployeeID"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LastName" HeaderText="LastName"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Title" HeaderText="Title"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ReportsTo" HeaderText="ReportsTo"></telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

</ClientSettings>

</telerik:RadGrid>

<%-- <<RADGRID--%>

</telerik:RadPageView>

</telerik:RadMultiPage>

</telerik:RadPane>

<telerik:RadSplitBar runat="server" id="RadSplitBar4" Height="700px" />

<telerik:RadPane ID="RightMenuPane" runat="server" Scrolling="None" Height="100%" ShowContentDuringLoad="true" >

<telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1">

<Tabs>

<telerik:RadTab runat="server" Text="Root RadTab1" PageViewID="PageView1">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Root RadTab3" PageViewID="PageView3">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage id="RadMultiPage1" runat="server" SelectedIndex="0" Width="400">

<telerik:RadPageView id="PageView1" runat="server">

TAB

</telerik:RadPageView>

<telerik:RadPageView id="PageView3" runat="server" ContentUrl="http://www.telerik.com">

</telerik:RadPageView>

</telerik:RadMultiPage>

</telerik:RadPane>

</telerik:RadSplitter>

<div class="menu">Footer</div>

</form>

</body>

</html>

2 Answers, 1 is accepted

answered on 20 Jan 2015, 03:53 PM

Hello,

The problem with your code is that the newly created tab does not associate itself correctly with the corresponding PageView. After dynamically creating a new PageView you have to then provide its ID to the
new RadTab. So you have to store it and then set it as a value of the PageViewID property of the tab. In the following code snippet I don't have it stored in a variable but I am directly adding it to the tab's PageViewID property in your AddTab method.

private void AddTab(string title)

{

RadTab tab = new RadTab() { Text = title, PageViewID = "NewMessage__Page"};

RadTabStrip1.Tabs.Insert((RadTabStrip1.Tabs.Count - 1), tab);

RadTabStrip1.DataBind();

RadTabStrip1.SelectedIndex = tab.Index;

}

Regards,
Ivan Danchev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.