Infragistics Challange

[Michael Josiah]

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.

[Cedric]

haha
I'll not say to Cris that you're asking for help :P

Hope you'll kick his a s s!

Cedric

[Michael Josiah]

hahahaha yeah lets keep that to ourselves lol lol. Telerik guys come on and help out, just been praising you guys on the IG board.

[Rosi]

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

[Michael Josiah]

Thanks for this, but the problem I am facing exists for this one too. Try and resize your browser with this example and you will see that the items are either hidden away or it leaves a big white gap at the bottom. You have basically replicated my issue. Any ideas how to keep the look consistent when resizing the browser. Basically all items needs to be visible when resizing and the panelbar needs to fixed to the bottom of the page so that resizing does not cause an empty space below the panelbar.

[Tsvetie]

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

[Michael Josiah]

Perfect, now this is why I joined Telerik. Ill let you know how the Challenge goes. Should be easy from here on in. Great tools guys.

[DarkProfit]

@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