RadTabControl Change in data context , not loading the items till selection

4 posts, 0 answers
  1. Ankush
    Ankush avatar
    8 posts
    Member since:
    Oct 2012

    Posted 16 Sep 2013 Link to this post

    Hello ,

    i am using radtabcontrol , in which when initially control is loaded everything works fine, but if i change the datacontext when control is still active , the data is not loaded with in the tabs , but tabs are visible, once i click on the tab data is visible.

    following screenshots may help 
    1. initial load when first time data is loaded.(intialload
    2.when datacontext is changed(datacontextchanged)
    3. when i click on any tab once data is loaded(afterclickingatab)

    i want my ui to look like 3 when datacontext change happens , do you have any idea why this is happening ?

    my xaml look like this -
    <Window x:Class="TabPanelInstanceValidator.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
            xmlns:tabPanelInstanceValidator="clr-namespace:TabPanelInstanceValidator"
            Title="MainWindow" Height="350" Width="525">
     
        <telerik:RadTabControl ItemsSource="{Binding}" DisplayMemberPath="header"  >
            <telerik:RadTabControl.ContentTemplate>
                <DataTemplate>
                    <telerik:RadDocking>
                        <telerik:RadDocking.DocumentHost>
                            <telerik:RadGridView  AutoGenerateColumns="False" ShowGroupPanel="False"  ItemsSource="{Binding Elements}"   >
                              <telerik:RadGridView.Columns>
                                <telerik:GridViewDataColumn DataMemberBinding="{Binding Path}"  Width="*" Header="elements"></telerik:GridViewDataColumn>
                                </telerik:RadGridView.Columns>
                                <telerik:RadGridView.RowStyle>
                                    <Style TargetType="telerik:GridViewRow">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate>
                                                <telerik:RadExpander ExpandDirection="Down" Name="check"  Header="{Binding Path}">
                                                    <GroupBox>
                                                        <GroupBox.Header>
                                                            <CheckBox>ShowAll</CheckBox>
                                                        </GroupBox.Header>
                                                            <tabPanelInstanceValidator:CustomRadGridView  AutoGenerateColumns="False"  AssignableColumns="{Binding}"  DataContext="{Binding FeedData}"  RowIndicatorVisibility="Hidden" >
                                                        </tabPanelInstanceValidator:CustomRadGridView>
                                                    </GroupBox>
                                                    </telerik:RadExpander>
                                                
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </telerik:RadGridView.RowStyle>
     
                              
                            </telerik:RadGridView>
                        </telerik:RadDocking.DocumentHost>
                        <telerik:RadSplitContainer InitialPosition="DockedLeft">
                            <telerik:RadPaneGroup>
                                <telerik:RadPane IsPinned="False" CanFloat="False" Header="Legend">
                                    <StackPanel>
                                    <Button Click="ButtonBase_OnClick">changedatacontext</Button>
                                    <TextBlock>test</TextBlock>
                                    </StackPanel>
                                </telerik:RadPane>
                            </telerik:RadPaneGroup>
                        </telerik:RadSplitContainer>
     
                    </telerik:RadDocking>
                </DataTemplate>
            </telerik:RadTabControl.ContentTemplate>
     
        </telerik:RadTabControl>
     
     
    </Window>
    
    the code behind for same is -
    
    using System;
    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Input;
     
    namespace TabPanelInstanceValidator
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                List<Rules> abc = new List<Rules>();
                abc.Add(new Rules("interface Rule")
                {
                    Elements = new List<ElementRule>() { new ElementRule("Motor|Control")
                                                             {
                                                                FeedData = new List<RuleCollect>()
                                                             {
                                                                new RuleCollect()
                                                                    {
                                                                        element = "sample",
                                                                        rules = new List<Rule>()
                                                                                    {
                                                                                        new Rule()
                                                                                            {
                                                                                                name = "RuleTest",
                                                                                                status = "Required"
                                                                                            },
                                                                                            new Rule()
                                                                                            {
                                                                                                name = "RuleTest2",
                                                                                                status = "Optional"
                                                                                            }
                                                                                    }
                                                                    },
                                                                  new RuleCollect()
                                                                    {
                                                                        element = "sample1",
                                                                        rules = new List<Rule>()
                                                                                    {
                                                                                        new Rule()
                                                                                            {
                                                                                                name = "RuleTest",
                                                                                                status = "Required"
                                                                                            },
                                                                                             new Rule()
                                                                                            {
                                                                                                name = "RuleTest2",
                                                                                                status = "Required"
                                                                                            }
                                                                                    }
                                                                    },
                                                             }}
                                                                                              ,new ElementRule("Motor|SuperVision") {
                                                                FeedData = new List<RuleCollect>()
                                                             {
                                                                new RuleCollect()
                                                                    {
                                                                        element = "sample",
                                                                        rules = new List<Rule>()
                                                                                    {
                                                                                        new Rule()
                                                                                            {
                                                                                                name = "RuleTest",
                                                                                                status = "Required"
                                                                                            },
                                                                                            new Rule()
                                                                                            {
                                                                                                name = "RuleTest2",
                                                                                                status = "Optional"
                                                                                            }
                                                                                    }
                                                                    },
                                                                  new RuleCollect()
                                                                    {
                                                                        element = "sample1",
                                                                        rules = new List<Rule>()
                                                                                    {
                                                                                        new Rule()
                                                                                            {
                                                                                                name = "RuleTest",
                                                                                                status = "Required"
                                                                                            }
                                                                                    }
                                                                    },
                                                             }}}
                });
                abc.Add(new Rules("element rules")
                {
                    Elements = new List<ElementRule>() { new ElementRule("Motor|sbdk1")
                                                                                              {
                                                                                                   FeedData = new List<RuleCollect>()
                                                             {
                                                                new RuleCollect()
                                                                    {
                                                                        element = "sample",
                                                                        rules = new List<Rule>()
                                                                                    {
                                                                                        new Rule()
                                                                                            {
                                                                                                name = "RuleTest",
                                                                                                status = "Required"
                                                                                            },
                                                                                            new Rule()
                                                                                            {
                                                                                                name = "RuleTest2",
                                                                                                status = "Optional"
                                                                                            }
                                                                                    }
                                                                    },
                                                                  new RuleCollect()
                                                                    {
                                                                        element = "sample1",
                                                                        rules = new List<Rule>()
                                                                                    {
                                                                                        new Rule()
                                                                                            {
                                                                                                name = "RuleTest",
                                                                                                status = "Required"
                                                                                            },
                                                                                             new Rule()
                                                                                            {
                                                                                                name = "RuleTest2",
                                                                                                status = "Required"
                                                                                            }
                                                                                    }
                                                                    },
                                                             }}, new ElementRule("Motor|sbdk2")
                                                                     {
                                                                        FeedData = new List<RuleCollect>()
                                                             {
                                                                new RuleCollect()
                                                                    {
                                                                        element = "sample",
                                                                        rules = new List<Rule>()
                                                                                    {
                                                                                        new Rule()
                                                                                            {
                                                                                                name = "RuleTest",
                                                                                                status = "Required"
                                                                                            },
                                                                                            new Rule()
                                                                                            {
                                                                                                name = "RuleTest2",
                                                                                                status = "Optional"
                                                                                            },
                                                                                            new Rule()
                                                                                                {
                                                                                                    name = "RuleTest3",
                                                                                                    status = "Prohibited"
                                                                                                }
                                                                                    }
                                                                    },
                                                                  new RuleCollect()
                                                                    {
                                                                        element = "sample1",
                                                                        rules = new List<Rule>()
                                                                                    {
                                                                                        new Rule()
                                                                                            {
                                                                                                name = "RuleTest",
                                                                                                status = "Required"
                                                                                            },
                                                                                             new Rule()
                                                                                            {
                                                                                                name = "RuleTest2",
                                                                                                status = "Required"
                                                                                            }, new Rule()
                                                                                                {
                                                                                                    name = "RuleTest3",
                                                                                                    status = "Prohibited"
                                                                                                }
                                                                                    }
                                                                    },
                                                             }  
                                                                     } }
                });
                this.DataContext = abc;
            }
     
          
     
            private void UIElement_OnMouseEnter(object sender, MouseEventArgs e)
            {
                throw new NotImplementedException();
            }
     
            private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
            {
                List<Rules> abc = new List<Rules>();
                abc.Add(new Rules("interface Rule")
                {
                    Elements = new List<ElementRule>() { new ElementRule("Motor|Control")
                                                             {
                                                                FeedData = new List<RuleCollect>()
                                                             {
                                                                new RuleCollect()
                                                                    {
                                                                        element = "sample",
                                                                        rules = new List<Rule>()
                                                                                    {
                                                                                        new Rule()
                                                                                            {
                                                                                                name = "RuleTest",
                                                                                                status = "Required"
                                                                                            },
                                                                                            new Rule()
                                                                                            {
                                                                                                name = "RuleTest2",
                                                                                                status = "Optional"
                                                                                            }
                                                                                    }
                                                                    },
                                                                  new RuleCollect()
                                                                    {
                                                                        element = "sample1",
                                                                        rules = new List<Rule>()
                                                                                    {
                                                                                        new Rule()
                                                                                            {
                                                                                                name = "RuleTest",
                                                                                                status = "Required"
                                                                                            },
                                                                                             new Rule()
                                                                                            {
                                                                                                name = "RuleTest2",
                                                                                                status = "Required"
                                                                                            }
                                                                                    }
                                                                    },
                                                             }}
                                                                                              ,new ElementRule("Motor|SuperVision") {
                                                                FeedData = new List<RuleCollect>()
                                                             {
                                                                new RuleCollect()
                                                                    {
                                                                        element = "sample",
                                                                        rules = new List<Rule>()
                                                                                    {
                                                                                        new Rule()
                                                                                            {
                                                                                                name = "RuleTest",
                                                                                                status = "Required"
                                                                                            },
                                                                                            new Rule()
                                                                                            {
                                                                                                name = "RuleTest2",
                                                                                                status = "Optional"
                                                                                            }
                                                                                    }
                                                                    },
                                                                  new RuleCollect()
                                                                    {
                                                                        element = "sample1",
                                                                        rules = new List<Rule>()
                                                                                    {
                                                                                        new Rule()
                                                                                            {
                                                                                                name = "RuleTest",
                                                                                                status = "Required"
                                                                                            }
                                                                                    }
                                                                    },
                                                             }}}
                });
                abc.Add(new Rules("testrule")
                            {
                                Elements = new List<ElementRule>() { new ElementRule("check")}
                            });
              
                this.DataContext = abc;
                
               // aa.SelectedIndex = 1;
     
            } 
        }
    }
    
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 19 Sep 2013 Link to this post

    Hi Ankush,

    When you change the DataContext of the RadTabControl the current selection is lost. This is why you see the layout reported in your second picture.

    However, you can overcome this behavior by exposing a boolean property in your ViewModel so you can bind the IsSelected property of the RadTabItem control to the one defined in your business data. Please note that the binding should be TwoWay. You can define a style like this:

    <Style TargetType="telerik:RadTabItem">
        <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
    </Style>
    Furthermore, you can set the boolean property to True for the tab that you need to be selected by default.

    On the other hand, in order to visualize the RadPane hidden you can try setting its CanFloat property to True or leave the default value unchanged.

    Please try the suggested approach out and let us know if you need any further assistance.

    Regards,
    Pavel R. Pavlov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    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. UI for WPF is Visual Studio 2017 Ready
  4. Ankush
    Ankush avatar
    8 posts
    Member since:
    Oct 2012

    Posted 21 Sep 2013 Link to this post

    Hello ,
    I tried the approach you have suggested after doing so , i am facing a targetinvocation exception , i am not sure why that is happening,
    following is the xaml snippet for your reference-

    <Window x:Class="TabPanelInstanceValidator.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
            xmlns:tabPanelInstanceValidator="clr-namespace:TabPanelInstanceValidator"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
            <DataTemplate x:Key="InterfaceElementTemplate">
                <telerik:RadDocking>
                    <telerik:RadDocking.DocumentHost>
                        <telerik:RadGridView  AutoGenerateColumns="False" RowIndicatorVisibility="Collapsed" ShowGroupPanel="False"  ItemsSource="{Binding Elements}"   >
                            <telerik:RadGridView.Columns>
                                <telerik:GridViewDataColumn DataMemberBinding="{Binding Path}"  Width="*" Header="elements"></telerik:GridViewDataColumn>
                            </telerik:RadGridView.Columns>
                            <telerik:RadGridView.RowStyle>
                                <Style TargetType="telerik:GridViewRow">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate>
                                                <telerik:RadExpander IsExpanded="True" ExpandDirection="Down" Name="check"  Header="{Binding Path}">
                                                    <GroupBox>
                                                        <GroupBox.Header>
                                                            <CheckBox>ShowAll</CheckBox>
                                                        </GroupBox.Header>
                                                        <!--<tabPanelInstanceValidator:CustomRadGridView ShowGroupPanel="False"  AutoGenerateColumns="False"  AssignableColumns="{Binding}" ItemsSource="{Binding FeedData}"  DataContext="{Binding FeedData}"  RowIndicatorVisibility="Collapsed" >-->
                                                        <tabPanelInstanceValidator:CustomRadGridView ShowGroupPanel="False"  AutoGenerateColumns="False"  AssignableColumns="{Binding}" DataContext="{Binding FeedData}"  RowIndicatorVisibility="Collapsed" >
                                                        <tabPanelInstanceValidator:CustomRadGridView.FilterDescriptors>
                                                           <telerik:FilterDescriptor Member="isValid" Value="False"></telerik:FilterDescriptor>
                                                       </tabPanelInstanceValidator:CustomRadGridView.FilterDescriptors>
                                                        </tabPanelInstanceValidator:CustomRadGridView>
                                                    </GroupBox>
                                                </telerik:RadExpander>
                                          
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </telerik:RadGridView.RowStyle>
     
     
                        </telerik:RadGridView>
                    </telerik:RadDocking.DocumentHost>
                    <telerik:RadSplitContainer InitialPosition="DockedLeft">
                        <telerik:RadPaneGroup>
                            <telerik:RadPane IsPinned="False" CanFloat="False" Header="Legend">
                                <StackPanel>
                                    <Button Click="ButtonBase_OnClick">changedatacontext</Button>
                                    <TextBlock>test</TextBlock>
                                </StackPanel>
                            </telerik:RadPane>
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>
     
                </telerik:RadDocking>
            </DataTemplate>
            
            <DataTemplate x:Key="ParameterTemplate">
                <telerik:RadGridView  AutoGenerateColumns="False" RowIndicatorVisibility="Collapsed" ShowGroupPanel="False"  ItemsSource="{Binding Elements}"   >
                    <telerik:RadGridView.Columns>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Path}"  Width="*" Header="elements"></telerik:GridViewDataColumn>
                    </telerik:RadGridView.Columns>
                    <telerik:RadGridView.RowStyle>
                        <Style TargetType="telerik:GridViewRow">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <telerik:RadExpander IsExpanded="True" ExpandDirection="Down" Name="check"  Header="{Binding Path}">
                                            <telerik:RadGridView  ShowGroupPanel="False"  ItemsSource="{Binding FeedData}"  RowIndicatorVisibility="Collapsed" >
                                            </telerik:RadGridView>
                                        </telerik:RadExpander>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </telerik:RadGridView.RowStyle>
     
     
                </telerik:RadGridView>
            </DataTemplate>
     
            <tabPanelInstanceValidator:TabTemplateSelector x:Key="tabTemplateSelector"></tabPanelInstanceValidator:TabTemplateSelector>
        </Window.Resources>
     
        <telerik:RadTabControl CheckBox.Checked ="ToggleButton_OnChecked" CheckBox.Unchecked="ToggleButton_OnUnchecked"  ItemsSource="{Binding}" ContentTemplateSelector="{StaticResource tabTemplateSelector}" DisplayMemberPath="header"  >
           <telerik:RadTabControl.ItemContainerStyle>
               <Style TargetType="telerik:RadTabItem">
                    <Setter Property="IsSelected" Value="{Binding ToSelect,Mode=TwoWay}"></Setter>
               </Style>
           </telerik:RadTabControl.ItemContainerStyle>
     
        </telerik:RadTabControl>
     
     
    </Window>

  5. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 23 Sep 2013 Link to this post

    Hi Ankush,

    From the provided snippet I can see that you bind the IsSelected property of the RadTabItem control to property defined in your ViewModel.

    However, I cannot be sure that you set your custom ToSelect property to True whenever you change the DataContext of the RadTabControl. Please note that you need to set it only to one item from the new DataContext. There is no need to set it to all of the items, because only one item can be selected at a time.

    Please make sure that you manually set the selection when you change the DataContext and let me know if it works in your particular case.

    Regards,
    Pavel R. Pavlov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    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 >>
Back to Top