[Solved] Having a Asp:Panel visible/invisible by ajax

[mouhcine]

Hi, i have a problem here.

i have a radiobutton Yes / No, and when it's changed i want it to Show/Hide an Asp:Panel with textbox/things inside.

For now, i have an "autopostback = true", and it refresh the whole page, and not only the asp:panel.

I'm looking for an ajax component which can solve the problem

I've tried to include my Asp:panel AND my radiobutton(the one with autopostback) inside a telerik:RadAjaxPanel so i think the autopostback will be intercepted by ajax if i understood everything.

I have added a <telerik:RadAjaxLoadingPanel> at the bottom of the page, with nothing inside, i dont even know what is it.
but i think its usefull..

I have also added a <telerik:RadAjaxManager> at the top of the page, even if i dont know wich element i have to put in the
"AjaxControlID" thing and the AjaxUpdatedControl ControlID" thing.

And i have a event on my radiobutton to call a function in wich i set the ASP:panel visible/invisible accordingly to the radiobutton checked or not.

this is a mess, this is not working, the whole page is still refreshing.

my need is quite simple, no databinding, nothing, but i cant manage anything.

Pls some help here.

[Iana Tsolova]

Hello mouhcine,

I suggest that you wrap the Panel you want to show/hide into another Panel and ajaxify it as in the below sample page:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadioButtonList1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="RadioButtonList1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista" />
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true">
    <asp:ListItem Text="Visible"></asp:ListItem>
    <asp:ListItem Text="Invisible" Selected="True"></asp:ListItem>
</asp:RadioButtonList>
<asp:Panel ID="Panel1" runat="server">
    <asp:Panel ID="Panel2" runat="server" Visible="false">
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </asp:Panel>
</asp:Panel>

For your convenience I am attaching the whole sample page.
Additionally, find more about RadAjax in the below articles:

http://www.telerik.com/help/aspnet-ajax/ajxajaxmanager.html
http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/loadingimages/defaultcs.aspx

All the best,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.