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

Online Demo show/hide function

3 Answers 101 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
mac
Top achievements
Rank 1
mac asked on 21 Jul 2008, 08:41 PM
this is a little off topic but I am going to try anyway.
in all the online demos, there is a show/hide function that will hide the source code for eg if clicked.(Example Source Code & Description) it will either hide or show the content. Is this one of the telerik controls in action or it a third party JS that you guys are using. I can find another product if needed, but do like your system..
Is it possible to get it to persist in the user's profile or cookie?

mac

3 Answers, 1 is accepted

Sort by
0
Accepted
Kevin Babcock
Top achievements
Rank 1
answered on 22 Jul 2008, 01:31 AM
Hello Mac,

You can get this kind of functionality easily with our RadPanelBar control. Check out these demos to see the RadPanelBar in action. If you want the state to be persisted across page views, all you have to do is simple set the PersistStateInCookie property to true. You'll see a demo that specifically addresses this feature in the demo area.

Here is a quick example I whipped up to show you how to get similar functionality in less than 5 minutes.

<%@ 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"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
    <title>Untitled Page</title> 
</head> 
<body> 
    <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />   
     
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server"  
            PersistStateInCookie="true" 
            Width="300px"
            <Items> 
                <telerik:RadPanelItem Text="Click here to show the content"
                    <Items> 
                        <telerik:RadPanelItem> 
                            <ItemTemplate> 
                                <style="color:White; margin: 10px 5px 10px 5px;"
                                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eros. Donec mattis orci nec enim.  
                                    In ut nibh eu ante dignissim porta. Pellentesque tempus. Proin quis lectus vitae risus auctor  
                                    rutrum. Nullam lobortis pede in odio. Fusce vel orci eu lorem luctus congue. Maecenas vitae erat  
                                    ac ligula semper condimentum. Aliquam leo purus, molestie eu, ornare in, hendrerit sed, enim.  
                                    Nulla facilisi. Mauris velit arcu, tristique ac, eleifend sed, lobortis a, purus. Nunc porttitor  
                                    placerat enim. Etiam malesuada placerat velit. Curabitur in velit. Morbi sagittis nibh id quam.  
                                    Vivamus bibendum purus in turpis. Vestibulum sit amet lectus vitae justo tincidunt tristique.  
                                    Maecenas eu neque sed massa bibendum viverra. 
                                </p> 
                                <style="color:White; margin: 10px 5px 10px 5px;"
                                    Sed id velit. In consectetuer, urna non tempus semper, ipsum eros ultrices ipsum, id condimentum  
                                    nisl nisi at nisl. Mauris faucibus nulla non neque. Donec a sapien. Nullam a mauris ut turpis  
                                    commodo laoreet. Vivamus eget libero ut nunc iaculis tincidunt. Fusce vulputate, arcu eget gravida 
                                    blandit, justo urna luctus tellus, convallis placerat erat diam eu est. Lorem ipsum dolor sit amet,  
                                    consectetuer adipiscing elit. Phasellus enim justo, vestibulum ut, mollis eu, tincidunt sed, pede.  
                                    Cras lacus. Integer ultrices velit. Donec sagittis venenatis lacus. Vivamus quis mi. Fusce nulla.  
                                    Aliquam ipsum nunc, gravida in, ultrices ut, pulvinar et, arcu. 
                                </p> 
                            </ItemTemplate> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
            </Items> 
        </telerik:RadPanelBar> 
         
    </form> 
</body> 
</html> 
 

I hope this was helpful.

Regards,
Kevin Babcock
0
mac
Top achievements
Rank 1
answered on 22 Jul 2008, 03:49 PM
damn you guys are fast. I have my default skin setup to office2007... would this be the reason the wrapping is not hapening? I not that when I switch to vista for eg, the wrapping is successful. no option to hard code this other than change the css .skin itself I am assuming.. thanks for doing this for me btw.

PS: Are you using a custom skin in your online demos? I like the no border effects.
0
Accepted
Kevin Babcock
Top achievements
Rank 1
answered on 23 Jul 2008, 09:07 PM
Hi Mac,

Yes, the no wrapping is happening because of a CSS element setting in the skin stylesheet. If you'd like to use a skin but its not wrapping your text, you can add a CssClass to the RadPanelBar and then in your own CSS set this property:

white-space: normal !important;

In regards to your other questions, yes we use our own custom code to generate the Code Viewer you see at the bottom of the demo pages. The good news is those demos are installed along with the controls, so you can easily access them on your own computer and see how the demo pages are implemented. Simply navigate to the Live Demos folder underneath your product installation folder.

I hope this helps.

Regards,
Kevin Babcock

Tags
General Discussions
Asked by
mac
Top achievements
Rank 1
Answers by
Kevin Babcock
Top achievements
Rank 1
mac
Top achievements
Rank 1
Share this question
or