Setting IsSelected via DataBinding at Runtime

[Kurt Mang]

Hi guys, doing a trial on the SL suite and I've run into a show-stopper. Hoping somebody can help, because this seems like a basic requirement.

I'm using SL3, MVVM, Prism, latest telerik dlls.

I'm trying to bind a collection of business objects to a RadTabControl via an ObservableCollection. I need to use my own business objects in order to control the tab header rendering - i..e I need a closable tab whose header is generated at runtime with a "close" button to remove tabs. That all works aces.

Tabs display Charts, and users can spin up as many as they want. The business object exposes a Header, Chart (view), ChartID, and (most importantly) Selected (bool) and implementes INotifyPropertyChanged. When a new object is added to the collection I want it displayed in the tab control. No problem. However, it will not, no matter what I do, be set to IsSelected = true.

I have tried every conceivable variation of the following code:

<UserControl.Resources>
        <conv:VisibilityConverter x:Key="VisibilityConverter" />

        <telerik:ContainerBindingCollection x:Key="ClosableTabBindings">
            <telerik:ContainerBinding PropertyName="IsSelected" Binding="{Binding Selected, Mode=TwoWay}" />
        </telerik:ContainerBindingCollection>
        <!--
        <ControlTemplate x:Key="TabItemTemplate" telerik:ContainerBinding.ContainerBindings="{StaticResource ClosableTabBindings}">

        </ControlTemplate>
        -->

        <Style x:Key="ClosableTabStyle" TargetType="telerikNav:RadTabItem" telerik:ContainerBinding.ContainerBindings="{StaticResource ClosableTabBindings}">

            <Setter Property="IsSelected" Value="{Binding}" />

            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Title}"
                                       Style="{StaticResource DataGridTextStyle}" />

                            <!--
                            <TextBlock Text="{Binding Selected}"
                                       Style="{StaticResource DataGridTextStyle}" />
                            -->
                            <Button Content="x"
                                    Tag="{Binding ItemID}"
                                    Click="OnCloseTab"
                                    Margin="2"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center" />
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>

            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <ContentControl Content="{Binding Chart}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>

            <!--
            <Setter Property="IsSelected" Value="{Binding Selected, Mode=TwoWay, ElementName=telerikNav:RadTabItem}" />
            -->
        </Style>

    </UserControl.Resources>

With the Style implemented on the TabControl as:

<telerikNav:RadTabControl Name="tabCharts"
                                  ItemsSource="{Binding Charts}"
                                  ItemContainerStyle="{StaticResource ClosableTabStyle}"
                                  telerik:ContainerBinding.ContainerBindings="{StaticResource ClosableTabBindings}"
                                  DropDownDisplayMode="WhenNeeded"
                                  MinHeight="450"
                                  MinWidth="600"
                                  FontSize="10"
                                  HorizontalAlignment="Stretch"
                                  VerticalAlignment="Stretch"
                                  Margin="14"
                                  Grid.Row="0">
        </telerikNav:RadTabControl>

Doesn't work. I get the old A_G_Parser Error error. I've put the "ContainerBinding" declaration here there and everywhere but it never resolves the problem.

I'd be happy just to have any newly added tabs selected automatically. What I'd really like is to have my Selected property in charge of this though. Any help is greatly appreciated of course.

Thanks - love the controls!

Kurt Mang - North Vancouver BC

[Kurt Mang]

Following up: I'm a little closer to the promised land, but not there yet. I re-read the ContainerBindings KB article and now I've got:

<UserControl.Resources>
        <conv:VisibilityConverter x:Key="VisibilityConverter" />

        <telerik:ContainerBindingCollection x:Key="ClosableTabBindings">
            <telerik:ContainerBinding PropertyName="IsSelected" Binding="{Binding Selected, Mode=TwoWay}" />
        </telerik:ContainerBindingCollection>

        <Style x:Key="ClosableTabStyle"
               TargetType="telerikNav:RadTabItem"
               telerik:ContainerBinding.ContainerBindings="{StaticResource ClosableTabBindings}" >
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Title}"
                                       Style="{StaticResource DataGridTextStyle}" />


                            <TextBlock Text="{Binding Selected}"
                                       Style="{StaticResource DataGridTextStyle}" />

                            <Button Content="x"
                                    Tag="{Binding ItemID}"
                                    Click="OnCloseTab"
                                    Margin="2"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center" />
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>

            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <ContentControl Content="{Binding Chart}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>

        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"
          Visibility="{Binding IsResultsAvailable, Converter={StaticResource VisibilityConverter}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <telerikNav:RadTabControl Name="tabCharts"
                                  ItemsSource="{Binding Charts}"
                                  ItemContainerStyle="{StaticResource ClosableTabStyle}"
                                  DropDownDisplayMode="WhenNeeded"
                                  MinHeight="450"
                                  MinWidth="600"
                                  FontSize="10"
                                  HorizontalAlignment="Stretch"
                                  VerticalAlignment="Stretch"
                                  Margin="14"
                                  Grid.Row="0">

        </telerikNav:RadTabControl>

    </Grid>

I've added the ContainerBindings declaration on the Style, TabControl and both - none of these works. The property value IS correct when a new tab is loaded (based on the value of the TextBlock Text in the Header template). Tabs load, the Header displays properly and the Selected property is correct (and only ever set to True for a a single tab - I "deselect" all other tabs before adding), but the goldurned tabs are not Selected when added. Can't have that.

Thanks in advance!

Kurt

[Kiril Stanoev]

Hello Kurt,

First of all, I'd like to apologize for the late reply. The ContainerBindings need to be set on a DataTemplate, not Style nor TabControl. I have prepared small project that demonstrates their usage in the context of TabControl. Have a look at it and let me know if something is unclear and needs further explanation. I'd be glad to assist you.

Best wishes,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Kurt Mang]

Genius! I suppose I'm not accustomed to seeing attributes / properties applied to a DataTemplate in this manner (yet!). For posterity, I'm posting the working code frag below - hopefully it will save someone a bit of frustration:

<UserControl.Resources>
        <conv:VisibilityConverter x:Key="VisibilityConverter" />

        <telerik:ContainerBindingCollection x:Key="ClosableTabBindings">
            <telerik:ContainerBinding PropertyName="IsSelected" Binding="{Binding Selected, Mode=TwoWay}" />
        </telerik:ContainerBindingCollection>

        <Style x:Key="ClosableTabStyle"
               TargetType="telerikNav:RadTabItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate telerik:ContainerBinding.ContainerBindings="{StaticResource ClosableTabBindings}">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Title}"
                                       Style="{StaticResource DataGridTextStyle}" />


                            <Button Content="x"
                                    Tag="{Binding ItemID}"
                                    Click="OnCloseTab"
                                    Margin="2"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center" />
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>

            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <ContentControl Content="{Binding Chart}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>

        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"
          Visibility="{Binding IsResultsAvailable, Converter={StaticResource VisibilityConverter}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <telerikNav:RadTabControl Name="tabCharts"
                                  ItemsSource="{Binding Charts}"
                                  ItemContainerStyle="{StaticResource ClosableTabStyle}"
                                  DropDownDisplayMode="WhenNeeded"
                                  MinHeight="450"
                                  MinWidth="600"
                                  FontSize="10"
                                  HorizontalAlignment="Stretch"
                                  VerticalAlignment="Stretch"
                                  Margin="14"
                                  Grid.Row="0">

        </telerikNav:RadTabControl>

    </Grid>

Thanks!

Kurt