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

Panelbar Item to open rad tab

1 Answer 70 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Syed
Top achievements
Rank 1
Syed asked on 05 Nov 2012, 01:41 PM
I have a rad panelbar.Clicking an Item at the panelbar will open a new tab.So far I was able to generate the new tab.But I need to load an aspx page inside the tab.Please check the attached code.If you check the below code on click of the panelbar item I'm loading a new tab but I'm unable to load the page. Please help.Thanks.  

                                    <telerik:RadPanelItem runat="server" onclick="addtab('Bank.aspx','Login')" Text="Bank">
                                    </telerik:RadPanelItem>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <style type="text/css">
        html, body, form
        {
            background: #fff;
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
            position: absolute;
        }
    </style>
 
    <script type="text/javascript">
        function ReLoadWindow(url, title, width, height) {
 
            var manager = GetRadWindowManager();
            var cWindow = manager.getActiveWindow();
            if (cWindow != null)
                cWindow.close();
 
            var oWindow = radopen(url, null);
            oWindow.SetSize(width, height);
            oWindow.MoveTo(195, 150);
            oWindow.set_title(title);
            oWindow.add_pageLoad(function () { oWindow.set_status("  "); });
        }        
    </script>
    <link href="Styles/Default.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        var tabStrip1;
 
        function OnClientLoad() {
            tabStrip1 = $find('<%= RadTabStrip1.ClientID %>');
 
            for (var i = 0; i < tabStrip1.get_tabs().get_count(); i++) {
                AttachCloseImage(tabStrip1.get_tabs().getItem(i), "Images/Icons/close.png");
                
            }
        }
        function addtab(url, text) {
            var tab = new Telerik.Web.UI.RadTab();
            tab.set_text(text + tabStrip1.get_tabs().get_count());
            tabStrip1.get_tabs().add(tab);
            AttachCloseImage(tab, "Images/Icons/close.png");
 
       
        }
 
        function CreateCloseImage(closeImageUrl) {
            var closeImage = document.createElement("img");
            closeImage.src = closeImageUrl;
            closeImage.alt = "Close this tab";
            return closeImage;
        }
 
        function AttachCloseImage(tab, closeImageUrl) {
            var closeImage = CreateCloseImage(closeImageUrl);
            closeImage.AssociatedTab = tab;
            closeImage.onclick = function (e) {
                if (!e) e = event;
                if (!e.target) e = e.srcElement;
 
                deleteTab(tab);
 
                e.cancelBubble = true;
                if (e.stopPropagation) {
                    e.stopPropagation();
                }
 
                return false;
            }
            tab.get_innerWrapElement().appendChild(closeImage);
        }
 
        function deleteTab(tab) {
            var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
 
            var tabToSelect = tab.get_nextTab();
            if (!tabToSelect)
                tabToSelect = tab.get_previousTab();
 
            tabStrip.get_tabs().remove(tab);
 
            if (tabToSelect)
                tabToSelect.set_selected(true);
        }
 
    </script>
    <div class="page">
       <div class="header01">
            <div class="head_top">
                <div class="homeicon">
                    <asp:HyperLink runat="server" Target="_parent" NavigateUrl="~/Default.aspx">
                        <asp:Image ID="Homeicon" runat="server" ImageUrl="~/Images/home.png"/>
                    </asp:HyperLink>  
                </div>
                <div class="side01">
                    <label class="text02">XERP</label>
                </div>
                <div class="side02">
                    <telerik:RadMenu runat="server" Skin="">
                        <Items>
                            <telerik:RadMenuItem CssClass="dropdowntop">
                                <ItemTemplate>                                     
                                <div class="dropdownside01">
                                    <label class="text01">Hi! Rezwanul Huq</label>
                                    <label class="text01">Wed 15, Oct 2012 15:12</label>                  
                                </div>
                                <div class="dropdownside02">
                                    <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Icons/client.png"/>
                                </div>
                                </ItemTemplate>
                                <Items>
                                    <telerik:RadMenuItem CssClass="Dropdown">
                                        <ItemTemplate>
                                            <div class="DropdownIcon">
                                                <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Icons/message.png" CssClass="DropdownIconAlign" />                                       
                                            </div>                                   
                                            <div class="DropdownText">
                                               <asp:Label ID="Label1" runat="server" class="text03">Inbox</asp:Label>
                                            </div>
                                        </ItemTemplate>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem CssClass="Dropdown">
                                        <ItemTemplate>
                                            <div class="DropdownIcon">
                                                <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Icons/chpassword.png" CssClass="DropdownIconAlign" />                                       
                                            </div>                                   
                                            <div class="DropdownText">
                                               <asp:Label ID="Label1" runat="server" class="text03">Change Password</asp:Label>
                                            </div>
                                        </ItemTemplate>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem CssClass="Dropdown">
                                        <ItemTemplate>
                                            <div class="DropdownIcon">
                                                <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Icons/Settings.png" CssClass="DropdownIconAlign" />                                       
                                            </div>                                   
                                            <div class="DropdownText">
                                               <asp:Label ID="Label1" runat="server" class="text03">Settings</asp:Label>
                                            </div>
                                        </ItemTemplate>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem CssClass="Dropdown">
                                        <ItemTemplate>
                                            <div class="DropdownIcon">
                                                <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Icons/help.png" CssClass="DropdownIconAlign" />                                       
                                            </div>                                   
                                            <div class="DropdownText">
                                               <asp:Label ID="Label1" runat="server" class="text03">Help</asp:Label>
                                            </div>
                                        </ItemTemplate>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem CssClass="Dropdown">
                                        <ItemTemplate>
                                            <div class="DropdownIcon">
                                                <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Icons/Logout.png" CssClass="DropdownIconAlign" />                                       
                                            </div>                                   
                                            <div class="DropdownText">
                                               <asp:Label ID="Label1" runat="server" class="text03">Log Out</asp:Label>
                                            </div>
                                        </ItemTemplate>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem CssClass="Dropdown">
                                        <ItemTemplate>                              
                                            <div class="DropdownText01">
                                               <asp:Label ID="Label1" runat="server" class="text03">Last Login Detail: <br /> Wed 15, Oct 2012 15:12</asp:Label>
                                            </div>
                                        </ItemTemplate>
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenu>
               </div>             
            </div>
       </div>
       <div class="bottom">
            <telerik:RadSplitter ID="RadSplitter1" Width="99.9%" Height="100%" runat="server"
                ResizeMode="EndPane">
                <telerik:RadPane ID="RadPane1" runat="server" Width="18.8%" CssClass="menu" Scrolling="Y">
                    <div style="height:3%; margin:3px 1px 0px 3px;">
                        <telerik:RadTextBox  EmptyMessage="Search Menu...." ID="searchbox" runat="server" Width="178px">
                             
                        </telerik:RadTextBox>
                        <telerik:RadButton ID="searchbtn" runat="server" Skin="" CssClass="SearchButton" >
                            <Icon PrimaryIconWidth="26px" PrimaryIconHeight="26px" PrimaryIconUrl="Images/Icons/search.png" />
                        </telerik:RadButton>
                    </div>
                    <telerik:RadPanelBar ID="RadPanelBarMenu" runat="server" ExpandMode="FullExpandedItem"
                        Height="96%"  Width="100%">
                        <Items>
                            <telerik:RadPanelItem runat="server" Expanded="true" Height="30px" Text="Business Settings" ImageUrl="~/Images/Icons/business_settings.png">
                                <Items>
                                    <telerik:RadPanelItem runat="server" Target="MainPane" Text="Company Setup" onclick="ReLoadWindow('UserHome.aspx','User Management',750,500)">
                                    </telerik:RadPanelItem>
                                    <telerik:RadPanelItem runat="server" onclick="addtab('Bank.aspx','Bank')" Text="Bank">
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Height="30px" Text="Human Resource" ImageUrl="~/Images/Icons/HRM_icon.png">
                                <Items>
                                    <telerik:RadPanelItem runat="server" NavigateUrl="~/HRM/Employee.aspx"
                                        Target="MainPane" Text="Employee">
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Height="30px" Text="Stock & Inventory" ImageUrl="~/Images/Icons/SI.png">
                                <Items>
                                    <telerik:RadPanelItem runat="server" NavigateUrl="~/SI/Items.aspx"
                                        Target="MainPane" Text="Items">
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Height="30px" Text="Security" ImageUrl="~/Images/Icons/security.png">
                                <Items>
                                    <telerik:RadPanelItem runat="server" NavigateUrl="~/Security/SecurityUsers.aspx"
                                        Target="MainPane" Text="User">
                                    </telerik:RadPanelItem>
                                    <telerik:RadPanelItem runat="server" NavigateUrl="~/Account/ChangePassword.aspx"
                                        Target="MainPane" Text="Change Password">
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelBar>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" />
                <telerik:RadPane runat="server" ID="MainPane" BackColor="#f1f5fb" >
                        <telerik:RadTabStrip ID="RadTabStrip1" runat="server"  MultiPageID="RadMultiPage1"
                            SelectedIndex="0" onclientload="OnClientLoad">
                            <Tabs>
                                <telerik:RadTab Text="Dashboard">
                                </telerik:RadTab>
                            </Tabs>
                        </telerik:RadTabStrip>
                        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
                            <telerik:RadPageView ID="RadPageView1" runat="server"  Height="100%" ContentUrl="UserHome.aspx">
                            </telerik:RadPageView>
                        </telerik:RadMultiPage>
 
                </telerik:RadPane>
            </telerik:RadSplitter>
            <telerik:RadWindowManager Visible="true" ID="Singleton"  CssClass="body_bg" EnableAjaxSkinRendering="true" Behavior="Default" VisibleOnPageLoad="false" runat="server" >
                <Windows>
                 
                    <telerik:RadWindow VisibleOnPageLoad="false" CssClass="body_bg" OffsetElementID="MapPane" Modal="false" Left="0px" Top="20px" Width="450px" Height="500px" Behavior="default" NavigateUrl="Widgets/CreateUser.aspx"  runat="server" ID="CreateUser" >
                    </telerik:RadWindow>
                     
               </Windows>
            </telerik:RadWindowManager>
            </div>
 
 
    </div>
    </form>
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 07 Nov 2012, 03:44 PM
Hi Syed,

Please take a look at the following help articles where you can find more information on how to create PageView as well as associate it with a RadTab and set it as selected:

Greetings,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
TabStrip
Asked by
Syed
Top achievements
Rank 1
Answers by
Kate
Telerik team
Share this question
or