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

Non-iFrame Window?

15 Answers 156 Views

General Discussions

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

LeBear asked on 06 Apr 2009, 07:39 PM

Hello Telerik:

I would like to have a user control embedded on a page inside of a radWindow-like interface. I would like the user to be able to move it, resize it, minimize it, etc. However, I don't want it to be an iFrame to another page. I just want some controls on the page to reside in that window.

Can I do this with radWindow or radDock - or something else?

If I were to do this with radDock, I would want a Dock that initially fits inside a dockzone that's on a page. However, I would want the user to be able to grab a side/corner to resize it or grab the title bar to move it, or double click on it to maximize/restore it. I'd be fine with restore placing it back in its default position in the dockzone.

I guess if I were to do this with radWindow (without having to user another page/iFrame), I would want the same capabilities.

Thanks.

15 Answers, 1 is accepted

answered on 06 Apr 2009, 08:11 PM

Hey Barry.

RadDock sounds like the way to go for you. It has everything you want except for the double click to collapse/expand it (I think), but that shouldn't be too hard to implement on your own.

RadDock is an 'early' control I think as its client-side code is rather, eh.. 'interesting' in places, but it works nicely enough, if not a little quirky here and there.

RadDock (the actual dock control) supports the use of two templates, one for the title bar and one for the content (which is the one you want use), however, unlike most other Telerik controls with templating support, there is NO designer support for them, so you would have to code the template in source mode or perhaps toss a user control into it.

Regards,

Mike

answered on 08 Apr 2009, 06:53 PM

Hey Barry,

If you are talking about the double click on the title bar to collapse/expand it then it is pretty easy to do. I think i may have the exact code within one of our early concepts for extending the RadDock controls (and later on, entirely replacing them, while retaining the skinning, our functionality makes the Telerik functionality look like a little mosquito in comparison now, but the main reason was the ridiculous javascript Telerik uses, there is some truly scary script in there) .

I'll see if i can find that code and post it later. It is just a bit of simple javascript that adds to their javascript prototype.

Regards,

Mike

Accepted

answered on 17 May 2010, 01:23 PM

Ryan:

Sure, I can share.

First, I create the dock command object on the docks I want to allow to be maximized:

    
            Dim MaxCommand_lob As DockCommand 
        
            MaxCommand_lob = New DockCommand() 
        
            MaxCommand_lob.OnClientCommand = "MaxThis" 
        
            MaxCommand_lob.CssClass = "RadDock_MaximizeIcon" 
        
            MaxCommand_lob.Text = "Maximize to Full-Screen" 
        
            Dock_lob.Commands.Add(MaxCommand_lob)

The CssClass is a customization to show an appropriate icon. The Client Command, MaxThis, is a JavaScript routine that performs the client-side action. It takes the content container of the dock, moves it to the RadWindow that's going to be maximized, and stores a reference to the content container and its parent so that they can be reunited when the RadWindow is closed.

    
            var MaxedElement;

            var MaxedParent;

            function MaxThis(dock_aob, eventArgs) { 
        
                var BigWindow = $find("<%= BigWindow.ClientID %>"); 
        
                var contentArea = document.getElementById('MaxContentArea'); 
        
                MaxedElement = dock_aob.get_contentContainer()  
        
                MaxedParent = MaxedElement.parentNode; 
        
                BigWindow.maximize(true); 
        
                BigWindow.show(); 
        
                BigWindow.set_title(dock_aob.get_title()); 
        
                contentArea.appendChild(MaxedElement); 
        
            }

BigWindow is the RadWindow, and MaxContentArea is a DIV in the Content Template of the RadWindow.

    
            <Telerik:RadWindow  
        
                ID="BigWindow"  
        
                Modal="false"  
        
                runat="server"  
        
                Behaviors="Close"  
        
                VisibleTitlebar="true"  
        
                DestroyOnClose="false"  
        
                Skin="Simple" 
        
                VisibleStatusbar="false"  
        
                InitialBehaviors="Maximize"  
        
                OnClientShow="MaxThisPuppy"  
        
                OnClientResizeEnd="MaxThisPuppy" 
        
                VisibleOnPageLoad="false"  
        
                OnClientClose="ReturnMyChild"> 
        
                <ContentTemplate> 
        
                    <div id="MaxContentArea" style="width:100%; height:100%; background-color:#ffffff;"></div> 
        
                </ContentTemplate>   
        
            </Telerik:RadWindow>

MaxThisPuppy is a routine that simply maximizes the window, and ReturnMyChild (from Star Trek TNG, if you're a fan) is a routine that sends the content of the dock back to its original position on the page - within the dock.

    
            function ReturnMyChild() { 
        
                MaxedParent.appendChild(MaxedElement); 
        
            } 
        
            function MaxThisPuppy(sender, eventArgs) { 
        
                sender.maximize(true); 
        
            }

I hope this helps.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Non-iFrame Window?

15 Answers, 1 is accepted