Radtab focus issue

6 posts, 0 answers
  1. Syed
    Syed avatar
    6 posts
    Member since:
    May 2009

    Posted 14 Nov 2012 Link to this post

    I have created a page where a panel item link opens a rad tab and rad multipage. The tab shows on the first click but the page is not loaded during the first click of the panel item.But if I close the tab and re click the link it works perfectly.Any ideas???Thanks in advance.

    Here's the code:
    <%@ 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);
                tab.select();
                AttachCloseImage(tab, "Images/Icons/close.png");
     
                var multiPage = $find("<%=RadMultiPage1.ClientID %>");
     
                multiPage.trackChanges();
     
                var pageView = new Telerik.Web.UI.RadPageView();
                multiPage.get_pageViews().add(pageView);
                pageView.set_contentUrl(url);
                multiPage.commitChanges();
                             
    //            pageView.get_element().innerHTML = "PageView1";
     
          
            }
     
            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>
    <%-- <script type="text/javascript">
         function pageLoad() {
             var multiPage = $find("<%=RadMultiPage1.ClientID %>");
     
             multiPage.trackChanges();
     
             var pageView = new Telerik.Web.UI.RadPageView();
             multiPage.get_pageViews().add(pageView);
             pageView.get_element().innerHTML = "PageView1";
     
             multiPage.commitChanges();
         
    </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" BorderWidth="0px" 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="230px" CssClass="menu" Scrolling="Y">
                        <div style="height:4%; margin:3px 1px 0px 3px;">
                            <telerik:RadTextBox  EmptyMessage="Search Menu...." ID="searchbox" runat="server" Width="175px">
                                 
                            </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"
                           CssClass="radpanelbar" Width="233px" height="95.5%">
                            <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('Test.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" Height="100%" >
                            <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>
                        <script type="text/javascript">
                            function pageLoad() {
     
                                var $ = $telerik.$;
                                var height = $(window).height();
     
                                var multiPage = $find("<%=RadMultiPage1.ClientID %>");
                                var totalHeight = height - 100;
                                multiPage.get_element().style.height = totalHeight + "px";
     
                            }
                        </script>
     
     
                    </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>
  2. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 19 Nov 2012 Link to this post

    Hello Syed,

    I have tried to replicate the experienced issue, but to no avail. In addition, I have recorded a video, which demonstrates the behavior at my end. Please correct me, if I had misunderstood your scenario.

    All the best,
    Nencho
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Syed
    Syed avatar
    6 posts
    Member since:
    May 2009

    Posted 19 Nov 2012 Link to this post

    Hi Nencho,
    Thanks for the reply.The video shows the exact thing i'm trying to do.Have you change some code to get this work.I was not able to do it.Plus I have another issue a scroll appears for the tabs that are generated.Please check the attached image.Thanks.

    Check Image


       
  5. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 22 Nov 2012 Link to this post

    Hello Syed,

    I have prepared a sample project for you, demonstrating the behavior at my end. Could you try it and let me know if it works properly at your end? As for the second question, I can see that you manage the height of the RadMultiPage in the PageLoad. The set Height exceeds the height of the Pane, therefore the scroll appears. Please find the attached sample.

    Greetings,
    Nencho
    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.
  6. Syed
    Syed avatar
    6 posts
    Member since:
    May 2009

    Posted 25 Nov 2012 Link to this post

    I have tried tab issue.Its working perfect but the height issue is not solved.Check out the image.

    Sample Image
  7. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 28 Nov 2012 Link to this post

    Hi Syed,

    Unfortunately, I am still unable to replicate the experienced issue. Here is a video I recorded for you, demonstrating the behavior at my end. Could you provide us the declaration of the UserHome.aspx, so I could replicate the exact rendering, that you observe at your end? Could you confirm that you reproduce the issue with the provided sample from my previous post? I noticed that you are doing some height calculations in the pageLoad client method. Please comment the code out and test your project again.

    All the best,
    Nencho
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017