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

Ajax MasterPage

1 Answer 109 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 11 Sep 2010, 07:25 PM
I have setup an ajax masterpage which has a skinmanager and a radformdecorator on it.

I only have one aspx page which dynamically loads in user controls into the content placeholder based on the tab selected.

Below are two questions I am currently stuck on if anyone can help me.

  1. Inside MyAccount.ascx I have a combo box which allows the user to select a skin to use which is working fine for the skin manager, but I keep receiving an error when trying to hook up the radformdecorator.
  2. Inside Header.ascx I am dynamically adding the following tabs 'home' and 'contact us' on the first page load and not on any postback. This stops the tabs from repeating everytime the page is posted back. However depending on who logs in, i need to add another two tabs to the radtabstrip, 'My Account' if a user logs in and 'Admin' if an admin logs in. Also they need to be removed when they log out. Can this be done?

Master Page HTML:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<%@ Register TagPrefix="UC" TagName="Header" Src="~/Header.ascx" %>
<!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>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager" runat="server" />        
        <telerik:RadSkinManager runat="server" ID="RadSkinManager" Enabled="true" ></telerik:RadSkinManager
        <telerik:RadAjaxManager ID="RadAjaxManager" runat="server" />  
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="1000"  Skin="Vista" IsSticky="true">
        <asp:Image ID="Image1" runat="server" ImageUrl="~/loading.gif" AlternateText="Loading.." /></telerik:RadAjaxLoadingPanel>
        <telerik:RadFormDecorator runat="server" ID="RadFormDecorator" EnableAjaxSkinRendering="true" DecoratedControls="All" Enabled="true" /> 
  
        <div>
         <UC:Header ID="Header" runat="server" />  <br />
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">        
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

Header.ascx HTML:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Header.ascx.vb" Inherits="Header" %>
<asp:Panel runat="server" ID="PanelHeader">
    <table>
        <tr>
            <td>
                <telerik:RadTabStrip ID="HeaderTabStrip" runat="server" SelectedIndex="0" EnableAjaxSkinRendering="true"></telerik:RadTabStrip>
            </td>
        </tr>
    </table>
</asp:Panel>
  
<script type="text/javascript">
// the code below will allow the tab to be reselected
Telerik.Web.UI.RadTab.prototype.select = function (e)
{   
    var parent = this.get_parent();
    if (!parent)
    {
        this._cachedSelected = true;
        return true;
    }
       
    var shouldNavigate = this._shouldNavigate();
    var selectedTab = parent.get_selectedTab();
    var tabStrip = this.get_tabStrip();
       
//these lines are commented so the tabstrip postbacks even if you click on the selected tab
//      if (!shouldNavigate && selectedTab == this && !tabStrip.get_clickSelectedTab())
//          return false;
           
    if (tabStrip._raiseCancelEvent("tabSelecting", this, e)) 
        return false;
   
    var suppressVisualUpdate = this._shouldPostBack() || (shouldNavigate && (!this.get_target() || this.get_target() == "_self"));
       
    if (!e)
        suppressVisualUpdate = false;
           
    if (selectedTab && selectedTab != this)
        selectedTab.unselect(suppressVisualUpdate, e);
           
    parent._setSelectedIndex(this.get_index());
    tabStrip._registerSelectedTab(this);
   
    if (!suppressVisualUpdate)
    {
        this._updateAppearance(true);
        this._updateSiblings(true);
        this._setChildListDisplay("");
           
        if (this._scroller)
        {
            this._scroller._showArrows();
        }
        else
        {
            tabStrip._scrollInitInProgress = true;
            this._initScrolling();
            tabStrip._scrollInitInProgress = false;
        }
        if (tabStrip._reorderTabsOnSelect)
            Telerik.Web.UI.RadTabStrip._reorderTabs(parent.get_childListElement(), this.get_element());
    }       
       
    if (tabStrip.get_multiPage())
        this._selectPageView(suppressVisualUpdate);
       
    tabStrip._raiseEvent("tabSelected", this, e);
    return true;
}
</script>

Header.ascx Code behind:

Imports Telerik.Web.UI
  
Partial Class Header
    Inherits System.Web.UI.UserControl
  
    Protected Sub HeaderTabStrip_TabClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTabStripEventArgs) Handles HeaderTabStrip.TabClick
        Dim ctrlID As String = Nothing
        Select Case e.Tab.Value
            Case 0
                ctrlID = "Home.ascx"
                Exit Select
            Case 1
                ctrlID = "MyAccount.ascx"
                Exit Select
            Case 2
                ctrlID = "Admin.ascx"
                Exit Select
            Case 3
                ctrlID = "ContactUs.ascx"
                Exit Select
        End Select
  
        If TypeOf (Page) Is BasePage Then
            Dim CPage As BasePage = CType(Page, BasePage)
            Dim PanelContent As Panel = DirectCast(CPage.Content("ContentPlaceHolder1").FindControl("PanelContent"), Panel)
            If (PanelContent IsNot Nothing) Then
                CPage.LoadUserControl(ctrlID, PanelContent)
            Else
                ' load an error message here
            End If
        End If
  
    End Sub
  
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  
        If (Not Page.IsPostBack) Then
            ' make these tabs DB driven based on user role!
            ' I want My Account and Admin tabs to only appear if user is logged in and based on their role.
            AddTab("Home", 0, True)
            AddTab("My Account", 1, True)
            AddTab("Admin", 2, True)
            AddTab("Contact Us", 3, True)
        End If
  
        Dim AjaxManager As RadAjaxManager = RadAjaxManager.GetCurrent(Page)
        Dim panel As Panel = DirectCast(Me.Page.Master.FindControl("ContentPlaceHolder1").FindControl("PanelContent"), Panel)
        If (panel IsNot Nothing) Then
            AjaxManager.AjaxSettings.AddAjaxSetting(HeaderTabStrip, panel)
        End If
        AjaxManager.AjaxSettings.AddAjaxSetting(HeaderTabStrip, PanelHeader)
          
    End Sub
  
    ' adds the tab to the tab strip
    Private Sub AddTab(ByVal ID As String, ByVal val As Integer, ByVal bVisible As Boolean)
        Dim tab As RadTab = New RadTab()
        tab.Value = val
        tab.Text = ID.Replace(" ", "")
        tab.Visible = bVisible
        HeaderTabStrip.Tabs.Add(tab)
    End Sub
End Class

MyAccount.ascx html

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="MyAccount.ascx.vb" Inherits="MyAccount" %>
My Account UC<br /><br />
  
Skin: 
  
<telerik:RadComboBox ID="DDLSkinChooser" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DDLSkinChooser_SelectedIndexChanged" EnableAjaxSkinRendering="true" >
    <Items>
        <telerik:RadComboBoxItem runat="server" Text="WebBlue" Value="WebBlue" />
        <telerik:RadComboBoxItem runat="server" Text="Vista" Value="Vista" />
        <telerik:RadComboBoxItem runat="server" Text="Black" Value="Black" />
        <telerik:RadComboBoxItem runat="server" Text="Outlook" Value="Outlook" />
        <telerik:RadComboBoxItem runat="server" Text="Hay" Value="Hay" />
    </Items>
</telerik:RadComboBox><br /><br />
  
<asp:Button runat="server" ID="btnTest" Text="My Test" />

MyAccount.ascx code behind:

Imports Telerik.Web.UI
  
Partial Class MyAccount
    Inherits System.Web.UI.UserControl
  
    Protected Sub DDLSkinChooser_SelectedIndexChanged(ByVal o As Object, ByVal e As Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs) Handles DDLSkinChooser.SelectedIndexChanged
        RadSkinManager.GetCurrent(Page).Skin = e.Text
        Dim RadFormDecorator As RadFormDecorator = DirectCast(Page.Master.FindControl("RadFormDecorator"), RadFormDecorator)
        If (RadFormDecorator IsNot Nothing) Then
            RadFormDecorator.Skin = e.Text
            RadFormDecorator.EnableAjaxSkinRendering = True
        End If
        DDLSkinChooser.EnableAjaxSkinRendering = True
        Dim radtab As RadTabStrip = CType(Me.Page.Master.FindControl("Header").FindControl("HeaderTabStrip"), RadTabStrip)
        If (radtab IsNot Nothing) Then
            radtab.EnableAjaxSkinRendering = True
        End If
    End Sub
  
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim AjaxManager As RadAjaxManager = RadAjaxManager.GetCurrent(Page)
        Dim panel As Panel = CType(Me.Page.Master.FindControl("ContentPlaceHolder1").FindControl("PanelContent"), Panel)
  
        If (panel IsNot Nothing) Then
            AjaxManager.AjaxSettings.AddAjaxSetting(DDLSkinChooser, panel)
        End If
  
        ' Adding this in for radformdecorator produces an error
        'Dim RadFormDecorator As RadFormDecorator = DirectCast(Page.Master.FindControl("RadFormDecorator"), RadFormDecorator)
        'If (RadFormDecorator IsNot Nothing) Then
        'AjaxManager.AjaxSettings.AddAjaxSetting(DDLSkinChooser, RadFormDecorator)
        'End If
  
  
        Dim PanelHeader As Panel = CType(Me.Page.Master.FindControl("Header").FindControl("PanelHeader"), Panel)
        If (PanelHeader IsNot Nothing) Then
            AjaxManager.AjaxSettings.AddAjaxSetting(DDLSkinChooser, PanelHeader)
        End If
  
    End Sub
End Class

Any help would be greatly appreciated.

Thank you.

1 Answer, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 14 Sep 2010, 12:00 PM
Hi Michael,

I tried replicating the first issue in the attached sample but to no avail. Can you check it out and let me know if I missed something out?

Regarding your second question: You can try adding the RadTabs and RadPageViews dynamically on Page_Load in order to achieve your goal:

http://demos.telerik.com/aspnet-ajax/tabstrip/examples/applicationscenarios/dynamicpageview/defaultcs.aspx

Best wishes,
Iana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Ajax
Asked by
Michael
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Share this question
or