hide/show different usercontrols based on dropdown value selection

[praveen]

I have an dropdown list and a div. This div contains two usercontrols.
Based on the value selected in the dropdown i want to Display only one usercontrol in the div.
How should I achieve it. please tell what are the settings i will have to do in the RadAjaxManager and all the required things that i need to make?

For example

  <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Telerik" Visible="true"
            InitialDelayTime="40" />
  <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server"  >
   <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="selUserControl"  EventName="OnSelectedIndexChanged">
     <UpdatedControls>
      <telerik:AjaxUpdatedControl ControlID="divUserControlSection" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
    </telerik:AjaxSetting>
    </AjaxSettings>
  </telerik:RadAjaxManagerProxy>
 <div>
  <div>
      <telerik:RadComboBox ID="selUserControl" CausesValidation="false" runat="server"
                        AppendDataBoundItems="false"  DataTextField="Text" DataValueField="Value"
                        OnSelectedIndexChanged="selUserControl_SelectedIndexChanged" AutoPostBack="true">
    </telerik:RadComboBox>
  </div>
  <div class="label-container" id="objectTypeSection" runat="server">
   <uc:UserControl1 id="usercontrol1" runat="server">
   <uc:UserControl2 id="usercontrol2" runat="server">
  </div> 
 </div> 
   
   

[Princy]

Hello Praveen,

You can achieve this by accessing the UserControl in SelectedIndexChanged event as shown below.
C#:

protected void selUserControl_SelectedIndexChanged(object sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
{

    RadComboBox box = sender as RadComboBox;

    Div item = (Div)box.NamingContainer;

    UserControl userControl = (UserControl)item.FindControl("UserControl1");

    userControl.Visible = false;

}

        

Thanks,
Princy.