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

Display Data based on TabControl Header

6 Answers 26 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Ramesh
Top achievements
Rank 1
Ramesh asked on 17 Dec 2013, 11:13 AM

          

                              Hi Telrik

Iam using Rad TabControl , based on TabItem value I would like to Visible or collapsed  inner layout control(Grid )

   Iam able to get TabItem Value in my View Mode , unable do Visisble / collaped from View Mode
here x:name="PastYear" (Grid control)  need to visible / collapsed based on TabItem Value how to accomplish this .

my code snipet is

 
<navigation:Page.Resources>
        <vm:MasterViewDetailsViewModel x:Key="MasterVMKey"/>

<DataTemplate x:Key="ContentTemplate">
                    <Grid>
                        <ScrollViewer Grid.Row="1" Height="600"  Grid.RowSpan="3">

<grid x:Name="PatYear"  Visibility={Binding PastYear Mode= "TwoWay"}>

.........some controls

</grid>

<grid x:Name="CurrentYear" Visibility={Binding PastYear Mode= "TwoWay"}>

.........some controls..............

</grid>

                                                                         
   </ScrollViewer>
   </Grid
 </DataTemplate>

       

    </navigation:Page.Resources>
   

       

<telerik:RadTabControl Grid.Row="1"   ItemsSource="{Binding MasterViewDataList,Mode=TwoWay}"
                                   DisplayMemberPath="ReportYear"
                                   ContentTemplate="{StaticResource ContentTemplate}"
                                    SelectedItem="{Binding SelectedReportYear, Mode=TwoWay}">

</telerik:RadTabControl>


KIndly help me

6 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 19 Dec 2013, 01:44 PM
Hello Ramesh,

Thank you for contacting us.

You can change the Visibility of the inner layout of the RadTabControl with a custom value only if you are using a converter. The System.Window.Visibility is an Enumeration and can be assigned directly only to a value of the same type.

In order to create a converter, you need to create a class implementing the IValueConverter interface:
public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if ((bool)value)
        {
            return Visibility.Visible;
        }
        else
        {
            return Visibility.Collapsed;
        }
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Visibility visibility = (Visibility)value;
        switch (visibility)
        {
            case Visibility.Collapsed:
                return false;
            case Visibility.Visible:
                return true;
            default:
                return true;
        }
    }
}

Also you can use the built-in telerik BooleanToVisibilityConverter.

However, if the variable PastYear is not a Boolean you will have to implement your own logic in the converter to return a proper type. 

Here is an example how to use the converter in your xaml definition:
<Grid x:Name="PastYear"  Visibility="{Binding Path=PastYear, Converter={StaticResource BoolToVisibilityConverter}}">
</Grid>

I attached a sample with this implementation.

If you have any further questions, please don't hesitate to contact us again.

Regards,
Martin Ivanov
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Ramesh
Top achievements
Rank 1
answered on 20 Dec 2013, 01:36 PM
  Hi MArtin Ivanov,

  You are genious sir, It working as i expected , but small change i need  when the tabItems loads by default first tabItem content shoud display not after i click or select the first tabItem . 
  Iam attaching screen shots(T_1 and T_2) , Iam looking like screen shot T_2 by default. In my case TabItem Headers are 4, ,5, 6.

  when TabControls loads header 4 content should be displayed.

kindly help me  
0
Martin Ivanov
Telerik team
answered on 23 Dec 2013, 10:28 AM
Hello Ramesh,

The SelectedReportYear property from your MasterViewModel is not initialized at the application start, that's why non of the RadTabControlItem elements are selected by default.

Regards,
Martin Ivanov
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Ramesh
Top achievements
Rank 1
answered on 23 Dec 2013, 12:34 PM
Hi Martin Ivanov,

Thanks in advance for your reply ,

   Can u elaborate little bit more , I did not get you where  I need to Initialize SelectedReportYear Property.

  Kindly see my code snippet ,
View Model:

// Constractor

 

public MasterViewModel()

 

{

m = new MasterModel();

MAsterLIst = new ObservableCollection<MasterModel>();

SelectedReportYear = new MasterModel();

MAsterLIst = m.GetAll();
 

}

 //SelectedReportYear  property
public MasterModel _ReportYear;
       public MasterModel SelectedReportYear
       {
           get
           {
               return _ReportYear;
           }
           set
           {
     _ReportYear = value;
               RaisePropertyChanged("SelectedReportYear");
               if (SelectedReportYear.Year < 5)
               {
                   SelectedReportYear.Hide = false;
               }
               else
               {
                   SelectedReportYear.Hide = true;
      }
      }
       }

Kindly help me where I need to Initialze it .
application level means do i need to chane at App.xaml page ?

0
Milena
Telerik team
answered on 26 Dec 2013, 11:29 AM
Hello Ramesh,

I'm attaching an edited project that demonstrates how to manage the selection of the RadTabItems using your ViewModel.

You need to add a selection property - IsSelected in your ViewModel (MasterModel in your project and in the attached too) to control the selection of each item. Then you should bind this properties in a Style targeting the RadTabItem: 

<Style x:Key="TabItemsStyle" TargetType="telerik:RadTabItem" >
  <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
</Style>
 
<telerik:RadTabControl VerticalAlignment="Top"
                   ItemsSource="{Binding MyModels}"
                   ItemTemplate="{StaticResource ItemTemplate}"
                   ContentTemplate="{StaticResource ContentTemplate}"
                   ItemContainerStyle="{StaticResource TabItemsStyle}">
</telerik:RadTabControl>
I hope this information will help you.

Regards,
Milena
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Ramesh
Top achievements
Rank 1
answered on 27 Dec 2013, 03:14 PM
  Hi Milena,

Thank you so much . It working as I expect ..... once again thank you so much for your support.......

Regards
Ramesh
Tags
TabControl
Asked by
Ramesh
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Ramesh
Top achievements
Rank 1
Milena
Telerik team
Share this question
or