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

TabStripPlacement along side vertical align

5 Answers 805 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Nemanja
Top achievements
Rank 1
Nemanja asked on 01 Feb 2012, 03:50 PM
Hi There,

I'm finding myself a bit stumped as to how to set the position of the tabs on the tab control if the placement is set to go along the left or right as per the attached image.

what it does right now is place the tabs from the bottom going up, but i would prefer to have them go from the top down...

is there a way to set this??

Thanks,
Nemanja

5 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 02 Feb 2012, 03:47 PM
Hi Nemanja ,

 You can use the Align property. On the other hand, you may also need the TabOrientation property. Please let us know if you need further assistance.

All the best,
Petar Mladenov
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Beetle
Top achievements
Rank 1
answered on 05 Nov 2012, 12:46 PM
Hello,

In Tab Control I need TabItems from the left side, each TabItem should be alighned to the Top. 
This is the current code:

<telerik:RadTabControl TabStripPlacement="Left" TabOrientation="Vertical" Align="Justify" >
            <telerik:RadTabItem Header="Calendar" Width="70px" />
            <telerik:RadTabItem Header="Colors" Width="70px" VerticalAlignment="Top"/>
            <telerik:RadTabItem Header="Quote" Width="70px" VerticalAlignment="Top" />
        </telerik:RadTabControl>

For Align property there is no "Top" value. But I need tabitems to be aligned to the top and every item should follow each other without gaps. Could you please advise how to implement it?
0
Pavel R. Pavlov
Telerik team
answered on 06 Nov 2012, 02:06 PM
Hello Beetle,

The Align property has Right value which can be used in your case. Check this snippet and let me know if it works for you.

<telerik:RadTabControl TabOrientation="Vertical" TabStripPlacement="Left" Align="Right">
    <telerik:RadTabItem Width="Auto" Height="Auto"  Header="Calendar" />
    <telerik:RadTabItem Width="Auto" Height="Auto" Header="Colors" />
    <telerik:RadTabItem Width="Auto" Height="Auto" Header="Quote" />
</telerik:RadTabControl>

Keep in mind that the TabStripPlacement property applies a rotation transformation to the RadTabStrip control so the Right and Left values of the Align property are "transforming" into Top and Bottom values.

Kind regards,
Pavel R. Pavlov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Beetle
Top achievements
Rank 1
answered on 07 Nov 2012, 10:32 AM
Thank you for a reply, your advice helped me and it works.

However I have one more question, I have three TabItems aligned to the Top (from above described situation) and I need to add another TabItem aligned to the Bottom.
Is it possible to do like this ?
0
Pavel R. Pavlov
Telerik team
answered on 12 Nov 2012, 01:41 PM
Hello Beetle,

By default the RadTabControl uses a TabWrapPanel which places the items next to each other. Using this default panel you can display the items either on the one side of the TabControl.TabStrip panel or align them to be justified and take up all available space of the TabStrip panel.

However, you can change the TabWrapPanel with RadDockPanel and place an item on the right (remember that "right" will transform into "bottom"). Take a look at the attached project and let me know if it works for you.

Kind regards,
Pavel R. Pavlov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
TabControl
Asked by
Nemanja
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Beetle
Top achievements
Rank 1
Pavel R. Pavlov
Telerik team
Share this question
or