Display Data based on TabControl Header

7 posts, 0 answers
  1. Ramesh
    Ramesh avatar
    22 posts
    Member since:
    Oct 2013

    Posted 17 Dec 2013 Link to this post

              

                                  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

  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 19 Dec 2013 Link to this post

    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 >>
  3. DevCraft banner
  4. Ramesh
    Ramesh avatar
    22 posts
    Member since:
    Oct 2013

    Posted 20 Dec 2013 Link to this post

      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  
  5. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 23 Dec 2013 Link to this post

    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 >>
  6. Ramesh
    Ramesh avatar
    22 posts
    Member since:
    Oct 2013

    Posted 23 Dec 2013 Link to this post

    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 ?

  7. Milena
    Admin
    Milena avatar
    204 posts

    Posted 26 Dec 2013 Link to this post

    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 >>
  8. Ramesh
    Ramesh avatar
    22 posts
    Member since:
    Oct 2013

    Posted 27 Dec 2013 Link to this post

      Hi Milena,

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

    Regards
    Ramesh
Back to Top
DevCraft banner