Tab navigation buttons issue

5 posts, 0 answers
  1. Jerome MAILLEY
    Jerome MAILLEY avatar
    33 posts
    Member since:
    Jul 2009

    Posted 26 Mar 2018 Link to this post

    Hi,

    I'm facing an issue with the RadTabControl. In fact, when I have the number of tab is too big to be displayed in the available width, the right/left navigation stay disabled. Please have a look to the attached screenshot.

    Nothing particular in my code :

    TabNavigationControl.xaml

    <UserControl x:Class="AS.Cpm.Silverlight.Client.UserControls.TabNavigationControl"
        xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
        xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
        xmlns:userControl="clr-namespace:AS.Cpm.Silverlight.Client.UserControls"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
      <UserControl.Resources>
        <Style x:Key="ClosableStyle" TargetType="telerik:RadTabItem" BasedOn="{StaticResource RadTabItemStyle}">
          <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
          <Setter Property="HeaderTemplate">
            <Setter.Value>
              <DataTemplate>
                <Grid>
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                  </Grid.ColumnDefinitions>
                  <ContentControl Content="{Binding Title}" />
                  <telerik:RadButton Grid.Column="1"
                                     Width="16"
                                     Height="16"
                                     Margin="3 0 0 0"
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     userControl:RoutedEventHelper.EnableRoutedClick="True"
                                     Content="x"
                                     Padding="0"
                                     IsEnabled="{Binding IsCloseEnabled}"
                                     Style="{StaticResource NoBorderRadButtonStyle}"/>
                </Grid>
              </DataTemplate>
            </Setter.Value>
          </Setter>
          <Setter Property="ContentTemplate">
            <Setter.Value>
              <DataTemplate>
                <Grid>
                  <!--add a frame!-->
                  <navigation:Frame Padding="5,5,5,5" x:Name="Frame" Source="{Binding Uri}"
                    VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
                    JournalOwnership="OwnsJournal" Grid.Row="1" Grid.Column="1">
                    <navigation:Frame.UriMapper>
                      <uriMapper:UriMapper>
                        <uriMapper:UriMapping Uri="/ModuleExecution" MappedUri="/Views/Modules/ModuleEditionView.xaml"/>
                        <uriMapper:UriMapping Uri="/Refresh/Module/{pageName}/{param}" MappedUri="/Views/ModuleMenu.xaml?Menu={pageName}&Refresh={param}"/>
                        <uriMapper:UriMapping Uri="/Refresh/{pageName}/{param}" MappedUri="/Views/{pageName}View.xaml?Refresh={param}"/>
                        <uriMapper:UriMapping Uri="/Module/{pageName}" MappedUri="/Views/ModuleMenu.xaml?Menu={pageName}"/>
                        <uriMapper:UriMapping Uri="/FormulaEdition" MappedUri="/Views/Formulas/FormulaEditionView.xaml"/>
                        <uriMapper:UriMapping Uri="/GeneralLedger" MappedUri="/Views/GeneralLedger/GeneralLedgerView.xaml"/>
                        <uriMapper:UriMapping Uri="/Asp/{pageName}" MappedUri="/Views/AspPlaceHolder.xaml?Page={pageName}"/>
                        <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}View.xaml"/>
                      </uriMapper:UriMapper>
                    </navigation:Frame.UriMapper>
                  </navigation:Frame>
                </Grid>
              </DataTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </UserControl.Resources>
        <Grid x:Name="LayoutRoot">
        </Grid>
    </UserControl>

     

    TabNavigationControl.xaml.cs :

    private void CreateTabControl()
    {
        LayoutRoot.Children.Clear();
        _tabControl = new RadTabControl();
        _tabControl.ItemContainerStyle = Resources["ClosableStyle"] as Style;
        _tabControl.Align = Telerik.Windows.Controls.TabControl.TabStripAlign.Right;
        _tabControl.IsContentPreserved = true;
        _tabControl.SelectedItemRemoveBehaviour = Telerik.Windows.Controls.TabControl.SelectedItemRemoveBehaviour.SelectLast;
        _tabControl.AllowDragReorder = true;
        _tabControl.SelectionChanged += _tabControl_SelectionChanged;
        LayoutRoot.Children.Add(_tabControl);
        _tabControl.ItemsSource = tabItemsModel;
    }

     

    Thanks for your help,
       

     

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2156 posts

    Posted 29 Mar 2018 Link to this post

    Hello Jerome,

    I used your code to test the reported behavior but I wasn't able to reproduce it. Can you please give the attached project a try and let me know if I am missing something?

    Regards,
    Martin Ivanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jerome MAILLEY
    Jerome MAILLEY avatar
    33 posts
    Member since:
    Jul 2009

    Posted 06 Apr 2018 Link to this post

    Hello Martin,

    First of all, please consider that I'm using the 2016.3.1024.1050 version of Telerik dll. I modified a bit your project to reproduce the issue. You will find it attached to this post.

    The attached file extension is JPG but it's a fake extension. It just allows me to workaround your forum rules. In fact, you must change this extension to ZIP and then unzip the archive to get the project.

    Thanks,

  4. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2156 posts

    Posted 10 Apr 2018 Link to this post

    Hello Jerome,
    <ScrollViewer x:Name="ScrollViewerElement"
            Style="{StaticResource EmptyScrollViewerStyle}"
            VerticalScrollBarVisibility="Disabled"
            BorderThickness="0"
            IsTabStop="False"
            HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}"
            Margin="0">
        <ItemsPresenter/>
    </ScrollViewer>
    It seems that there are custom modifications in the Telerik.Windows.Controls.Navigation.xaml file and this is why the buttons are disabled. Basically, the x:Name of the ScrollViewer in the RadTabControl's template was removed. However, the scrolling logic of the control depends on this Name and if its missing it doesn't work. In order to resolve this you can set the x:Name of the ScrollViewer to "ScrollViewerElement".

    Regards,
    Martin Ivanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Jerome MAILLEY
    Jerome MAILLEY avatar
    33 posts
    Member since:
    Jul 2009

    Posted 10 Apr 2018 in reply to Martin Ivanov Link to this post

    Hello Martin,

    Thanks a lot, it works as expected.

    Regards,

Back to Top