Display Data based on TabControl Header

[Ramesh]

          

                              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

[Martin Ivanov]

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

[Ramesh]

  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  

[Martin Ivanov]

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

[Ramesh]

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 ?

[Milena]

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

[Ramesh]

  Hi Milena,

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

Regards
Ramesh