Showing /hiding RadControls in AJAX

[Bharani Mani]

Hello,
          I have an UpdatePanel in Ajax, Inside which I have a RadSlider. When I clicked on a button I want to display RadSlider. On Click of the button, I showed RadSlider in javascript but when a postback returns, the RadSlider disappears. does anyone know how to display/hide controls in Ajax??.. I went through this example

http://demos.telerik.com/aspnet-ajax/ajax/examples/common/showingwebcontrols/defaultcs.aspx

But I think it is very complicated. Should it be this complicated?..


Thanks,
Bharani

[Bharani Mani]

If I use the Visible property of the control I can show/hide the control. But I want to use javascript to show the control first in javascript and then in backend C# code. When Visible is set to false, the control is not rendered to the client and I cant access the control in javascript. Is there a way out of this where you want to use Ajax and access the control in javascript.

Thanks,
Bharani

[Georgi Tunev]

Hello Bharani,

When Visible is set to false, the controls are not rendered on the page at all, so you can't show them with JavaScript.
What I would suggest in such scenario is to choose from one of the following approaches:

1. Use JavaScript to hide / show the content. In such case, I would recommend to put the controls in a container element like DIV with its style set to "display:none". Then, when you need to show the panel, you can use jQuery (or plain JavaScript) to clear the style. Such approach is used in this demo to hide / show the additional thumbnails (check the toggleExpand() function). 
2. Use Ajax to show / hide the controls with Ajax request like shown in the demo that you have examined. The approach is actually very simple - all you need to do is to
   
   1. use a container like asp:panel (make sure its VIsible property is set to true) and add the controls there with their Visible property set to false. 
   2. Ajaxify the container with RadAjaxManager or RadAjaxPanel (again shown in the demo)
   3. Whenever you need to show the controls, just set their Visible property to true from the server - since you are using Ajax, the page will not be reloaded (which I believe is what you are trying to avoid).

Greetings,
Georgi Tunev
the Telerik team