Infragistics Challange in UI for ASP.NET AJAX

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

Infragistics Challange

7 Answers 111 Views

PanelBar

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

Michael Josiah asked on 03 May 2008, 09:26 AM

Hi guys, I have challanged an Infragistics customer to attempt to replicate very closely the Outlook 2007 application. Being an ex IG customer I thought this was impossible with their controls as their implentation of the webcombo and lack of splitter (back then) meant that it could just not be done. The guy has accepted the challange and in less than 5 hours achieved this

http://outlook.visualstudiotutorials.com/

Now there has been a counter challange and I have been asked to prove the Telerik controls can do the same thing. I have accepted the challange and will start immediately. However I have hit a little stumbling block. Using this example

http://www.telerik.com/DEMOS/ASPNET/Prometheus/Panelbar/Examples/ApplicationScenarios/OutlookNavigation/DefaultCS.aspx

i have begun my own implementation. In my implementation the panelbar exists on the left side of a splitter whilst the grid is on the right. However I am not quite sure how to make the panel bar extend to the full height of the splitter. What height settings do I need to apply to the multipage and the panelbar so that they fill the entire height and width of the left pane.

7 Answers, 1 is accepted

answered on 06 May 2008, 09:14 AM

OutlookNavigation.zip

Hello all,

Please find a sample project illustrating the approach.

Do not hesitate to ask us if you have any other questions related to the controls.

Regards,
Rosi
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Accepted

answered on 08 May 2008, 12:02 PM

Updated.zip

Hi Michael Josiah,
You can use the following approach - when the RadSplitter is initialized, just calculate the Height of the RadPanelbar and set it as Height for its parent RadPane; then lock that RadPane:

    
            function OnClientLoaded(sender, args)  
        
            {  
        
                var splitter = $find("<%= SplitterTreeView.ClientID %>");  
        
                var topPane = splitter.getPaneById("<%= RadPaneTV.ClientID %>");  
        
                var bottomPane = splitter.getPaneById("<%= RadPane1.ClientID %>");  
        
                var panelbarElementHeight = $get("<%= RadPanelbar1.ClientID %>").offsetHeight;  
        
                var delta = panelbarElementHeight - bottomPane.get_height();  
        
                bottomPane.set_height(panelbarElementHeight);  
        
                topPane.set_height(topPane.get_height() - delta);  
        
                bottomPane.lock();  
        
            }

    
             <telerik:RadSplitter ID="SplitterTreeView" runat="server" Orientation="Horizontal" Skin="Outlook"   
        
                  OnClientLoaded="OnClientLoaded">

    
            <telerik:RadPanelBar ID="RadPanelbar1" runat="server" ExpandMode="SingleExpandedItem" 
        
                OnClientItemClicking="OnClientItemClicking" OnClientMouseOver="panelMouseOver" 
        
                Skin="Office2007" Width="195px">

I have attached a modified version of the page for your reference. I have additionally added VisibleDuringInit="false" for the RadSplitters in order to hide all initial resize operations.

Regards,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 10 May 2008, 06:46 PM

@Michael,
Ok so since you are trying to go up against me I really shouldn't tell you this "however" in the spirit of challenge etc. let me say this.

The RadSplitter has a OffSet property which will allow you to pull off what I am doing (i actually had to build that using css for the IG demo) but with the RadSplitter you don't need to do that you can just say offset="20px" etc.

And the number 1 thing to remember is the alot of the stuff I am doing requires you to throw the browser into quirks mode so change your doctype to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Which will also allow you to do tr style="height:100%;" which is the trick for alot of the effects you are seeing...

Hope this helps can't wait to see your demo... Once you are done let me know and I will post it on my website for you...

Christopher