Binding from RadDataForm DataTemplate to DataContext ViewModel

[Michael]

Hallo Telerik Team,

I have a problem to bind the SelectedIndex property of a RadTabControl to the ViewModel.

I have a RadTabControl in a RadDataForm and I'm using ReadOnlyTemplate, EditTemplate and NewItemTemplate.
My problem is, that when the user selects a tab in ReadOnlyTemplate to see the data and then press the edit button to edit that data in the selected tab the SelectedIndex of the RadTabControl in the EditTemplate is not the SelectedIndex of the ReadOnlyTemplate.
So the TabControl in the EditTemplate switch back to Default (In my case index 0).
I want that the index of the TabControl will be the same when switching in Edit- or NewItem-mode.

Is there a way to get that to run?

Thx Mike

[Maya]

Hi Michael,

Generally, you can try binding the index of the selected tab to a property in your ViewModel for example. However, in order to provide more information, I will need a bit more details. Could you specify how you define your data form ? What is the implementation of your ViewModel ?
Basically, any relevant information or code-snippet would be helpful. 

Kind regards,
Maya
the Telerik team

[Michael]

Hi Maya,

following a code-snippet of my xaml and viewmodel!
the xaml is not complete but it will show you how i would implement the gridview - using the readonlytemplate, edittemplate and newitemtemplate - and the tabcontrols inside the templates.

XAML:

<CoreClientUI:HXWindowPage
    x:Class="Hainzl.Web.Silverlight.Haicmon.Hardware.HardwareForm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="680"

    xmlns:Intersoft="http://intersoft.clientui.com/schemas"

    xmlns:Telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:TelerikDataForm="clr-namespace:Telerik.Windows.Controls.Data.DataForm;assembly=Telerik.Windows.Controls.Data"
    xmlns:TelerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"

    xmlns:Local="clr-namespace:Hainzl.Web.Silverlight.Haicmon.Hardware"
    xmlns:Core="clr-namespace:Hainzl.Web.Silverlight.Core;assembly=Hainzl.Web.Silverlight.Core"
    xmlns:CoreClientUI="clr-namespace:Hainzl.Web.Silverlight.Core.ClientUIErweiterungen;assembly=Hainzl.Web.Silverlight.Core.ClientUIErweiterungen"
    xmlns:WcfRia="clr-namespace:Hainzl.Web.Server.Haicmon.WCFRIA;assembly=Hainzl.Web.Silverlight.Core"

    xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls">

    <CoreClientUI:HXWindowPage.DataContext>
        <Local:HardwareViewModel x:Name="xHardwareViewModel" />
    </CoreClientUI:HXWindowPage.DataContext>

    <CoreClientUI:HXWindowPage.Resources>
        <Local:ResourceWrapperHardware x:Key="ResourceWrapperHardware"/>
    </CoreClientUI:HXWindowPage.Resources>

    <Grid x:Name="LayoutRoot">

        <Telerik:RadTabControl x:Name="xHardwareTabControl" DisplayMemberPath="Content" DropDownDisplayMode="Visible"
                               ScrollMode="Viewport" BorderThickness="0" SelectionChanged="OnCMUTabControl_SelectionChanged"
                               SelectedIndex="{Binding HardwareTabControlSelectedIndex, Mode=TwoWay}"
                               VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <Telerik:RadTabItem Header="CMU">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" MinHeight="186" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="415"/>
                    </Grid.RowDefinitions>

                    <Telerik:RadGridView x:Name="xCMUDataGrid" Grid.Row="0" RowHeight="25"
                                         CanUserFreezeColumns="False" RowIndicatorVisibility="Collapsed"
                                         IsEnabled="True" IsReadOnly="True"
                                         ItemsSource="{Binding DataView, ElementName=xCMUDataGridDDS}"
                                         IsBusy="{Binding IsBusy, ElementName=xCMUDataGridDDS}"
                                         AutoGeneratingColumn="OnRadGridViewAutoGeneratingColumn"
                                         HorizontalAlignment="Stretch" VerticalContentAlignment="Top"
                                         AutoGenerateColumns="False" RowDetailsVisibilityMode="Visible">
                        <Telerik:RadGridView.Columns>
                            .
                            .
                            .
                            .
                        </Telerik:RadGridView.Columns>
                    </Telerik:RadGridView>

                    <Telerik:RadDataPager x:Name="xCMUDataPager"
                                          Grid.Row="1"
                                          Source="{Binding DataView, ElementName=xCMUDataGridDDS}"
                                          DisplayMode="All"
                                          IsTotalItemCountFixed="True"
                                          HorizontalAlignment="Stretch"/>

                    <Telerik:RadDataForm x:Name="xCMURadDataForm"
                                         Grid.Row="2" AutoEdit="False"
                                         ItemsSource="{Binding DataView, ElementName=xCMUDataGridDDS}"
                                         AutoGenerateFields="False"
                                         Header="{Binding Source={StaticResource ResourceWrapperCore},
                                                          Path=ApplicationStrings.DetailAnsicht}"
                                         EditEnding="OnCMURadDataForm_EditEnding"
                                         DeletingItem="OnCMURadDataForm_DeletingItem"
                                         ValidatingItem="OnCMURadDataForm_ValidatingItem"
                                         BeginningEdit="OnCMURadDataForm_BeginningEdit"
                                         AddedNewItem="OnCMURadDataForm_AddedNewItem">

                        <Telerik:RadDataForm.ReadOnlyTemplate>
                            <DataTemplate>
                                <Telerik:RadTabControl x:Name="xCMUTabControl" VerticalAlignment="Top" Grid.Row="0"
                                                       DisplayMemberPath="Content" DropDownDisplayMode="Visible" Height="318"
                                                       ScrollMode="Viewport" BorderThickness="0">
                                    <Telerik:RadTabItem DropDownContent="{Binding Source={StaticResource ResourceWrapperCore},
                                                                                  Path=ApplicationStrings.Allgemein}"
                                                        Header="{Binding Source={StaticResource ResourceWrapperCore},
                                                                         Path=ApplicationStrings.Allgemein}"
                                                        Padding="10 2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                        <Telerik:RadTabItem.Content>
                                            .
                                            .
                                            .
                                        </Telerik:RadTabItem.Content>
                                    </Telerik:RadTabItem>

                                    <Telerik:RadTabItem DropDownContent="{Binding Source={StaticResource ResourceWrapperHardware},
                                                                                  Path=ApplicationStrings.NetzwerkEinstellungen}"
                                                        Header="{Binding Source={StaticResource ResourceWrapperHardware},
                                                                         Path=ApplicationStrings.NetzwerkEinstellungen}"
                                                        Padding="10 2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                        <Telerik:RadTabItem.Content>
                                            .
                                            .
                                            .
                                        </Telerik:RadTabItem.Content>
                                    </Telerik:RadTabItem>

                                    <Telerik:RadTabItem DropDownContent="{Binding Source={StaticResource ResourceWrapperHardware},
                                                                                  Path=ApplicationStrings.Module}"
                                                        Header="{Binding Source={StaticResource ResourceWrapperHardware},
                                                                         Path=ApplicationStrings.Module}"
                                                        Padding="10 2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                        <Telerik:RadTabItem.Content>
                                            .
                                            .
                                            .
                                        </Telerik:RadTabItem.Content>
                                    </Telerik:RadTabItem>
                                </Telerik:RadTabControl>
                            </DataTemplate>
                        </Telerik:RadDataForm.ReadOnlyTemplate>
                        <Telerik:RadDataForm.EditTemplate>
                            <DataTemplate>
                                <Telerik:RadTabControl x:Name="xCMUTabControl" VerticalAlignment="Top" Grid.Row="0"
                                                       DisplayMemberPath="Content" DropDownDisplayMode="Visible" Height="303"
                                                       ScrollMode="Viewport" BorderThickness="0" SelectionChanged="OnCMUTabControl_SelectionChanged"
                                                       SelectedIndex="{Binding CMUTabControlSelectedIndex, Mode=TwoWay}">
                                    <Telerik:RadTabItem DropDownContent="{Binding Source={StaticResource ResourceWrapperCore},
                                                                                  Path=ApplicationStrings.Allgemein}"
                                                        Header="{Binding Source={StaticResource ResourceWrapperCore},
                                                                         Path=ApplicationStrings.Allgemein}"
                                                        Padding="10 2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                        <Telerik:RadTabItem.Content>
                                            .
                                            .
                                            .
                                        </Telerik:RadTabItem.Content>
                                    </Telerik:RadTabItem>

                                    <Telerik:RadTabItem DropDownContent="{Binding Source={StaticResource ResourceWrapperHardware},
                                                                                  Path=ApplicationStrings.NetzwerkEinstellungen}"
                                                        Header="{Binding Source={StaticResource ResourceWrapperHardware},
                                                                         Path=ApplicationStrings.NetzwerkEinstellungen}"
                                                        Padding="10 2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                        <Telerik:RadTabItem.Content>
                                            .
                                            .
                                            .
                                        </Telerik:RadTabItem.Content>
                                    </Telerik:RadTabItem>

                                    <Telerik:RadTabItem DropDownContent="{Binding Source={StaticResource ResourceWrapperHardware},
                                                                                  Path=ApplicationStrings.Module}"
                                                        Header="{Binding Source={StaticResource ResourceWrapperHardware},
                                                                         Path=ApplicationStrings.Module}"
                                                        Padding="10 2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                        <Telerik:RadTabItem.Content>
                                            .
                                            .
                                            .
                                        </Telerik:RadTabItem.Content>
                                    </Telerik:RadTabItem>

                                </Telerik:RadTabControl>
                            </DataTemplate>
                        </Telerik:RadDataForm.EditTemplate>
                        <Telerik:RadDataForm.NewItemTemplate>
                            <DataTemplate>
                                <Telerik:RadTabControl x:Name="xCMUTabControl" VerticalAlignment="Top" Grid.Row="0"
                                                       DisplayMemberPath="Content" DropDownDisplayMode="Visible" Height="318"
                                                       ScrollMode="Viewport" BorderThickness="0">
                                    <Telerik:RadTabItem DropDownContent="{Binding Source={StaticResource ResourceWrapperCore},
                                                                                  Path=ApplicationStrings.Allgemein}"
                                                        Header="{Binding Source={StaticResource ResourceWrapperCore},
                                                                         Path=ApplicationStrings.Allgemein}"
                                                        Padding="10 2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                        <Telerik:RadTabItem.Content>
                                            .
                                            .
                                            .
                                        </Telerik:RadTabItem.Content>
                                    </Telerik:RadTabItem>

                                    <Telerik:RadTabItem DropDownContent="{Binding Source={StaticResource ResourceWrapperHardware},
                                                                                  Path=ApplicationStrings.NetzwerkEinstellungen}"
                                                        Header="{Binding Source={StaticResource ResourceWrapperHardware},
                                                                         Path=ApplicationStrings.NetzwerkEinstellungen}"
                                                        Padding="10 2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                        <Telerik:RadTabItem.Content>
                                            .
                                            .
                                            .
                                        </Telerik:RadTabItem.Content>
                                    </Telerik:RadTabItem>

                                    <Telerik:RadTabItem DropDownContent="{Binding Source={StaticResource ResourceWrapperHardware},
                                                                                  Path=ApplicationStrings.Module}"
                                                        Header="{Binding Source={StaticResource ResourceWrapperHardware},
                                                                         Path=ApplicationStrings.Module}"
                                                        Padding="10 2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                        <Telerik:RadTabItem.Content>
                                            .
                                            .
                                            .
                                        </Telerik:RadTabItem.Content>
                                    </Telerik:RadTabItem>

                                </Telerik:RadTabControl>
                            </DataTemplate>
                        </Telerik:RadDataForm.NewItemTemplate>
                    </Telerik:RadDataForm>
                </Grid>
            </Telerik:RadTabItem>
        </Telerik:RadTabControl>
    </Grid>
</CoreClientUI:HXWindowPage>

ViewModel:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Globalization;
using System.Collections.Specialized;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows;

using Telerik.Windows.Controls;

using Hainzl.Web.Silverlight.Core;
using Hainzl.Web.Silverlight.Core.TelerikErweiterungen;

namespace Hainzl.Web.Silverlight.Haicmon.Hardware
{
    public class HardwareViewModel : HaicmonViewModelBase
    {
        /// <summary>
        /// Erstellt eine Instanz.
        /// </summary>
        public HardwareViewModel()
        {
            this.CMUTabControlSelectedIndex = 0;
        }

        /// <summary>
        /// Privates Feld für die HardwareTabControlSelectedIndex Eigenschaft.
        /// </summary>
        private int _HardwareTabControlSelectedIndex;

        /// <summary>
        /// Gibt den zuletzt aktiven Index des HardwareTabControl zurück oder stellt diesen ein.
        /// </summary>
        public int HardwareTabControlSelectedIndex
        {
            get
            {
                return this._HardwareTabControlSelectedIndex;
            }
            set
            {
                if (this._HardwareTabControlSelectedIndex != value)
                {
                    this._HardwareTabControlSelectedIndex = value;
                    this.OnNotifyPropertyChanged("HardwareTabControlSelectedIndex");
                }
            }
        }

        /// <summary>
        /// Privates Feld für die CMUTabControlSelectedIndex Eigenschaft.
        /// </summary>
        private int _CMUTabControlSelectedIndex;

        /// <summary>
        /// Gibt den zuletzt aktiven Index des CMUTabControl zurück oder stellt diesen ein.
        /// </summary>
        public int CMUTabControlSelectedIndex
        {
            get {
                return this._CMUTabControlSelectedIndex;
            }
            set
            {
                if (this._CMUTabControlSelectedIndex != value)
                {
                    this._CMUTabControlSelectedIndex = value;
                    this.OnNotifyPropertyChanged("CMUTabControlSelectedIndex");
                }
            }
        }

        /// <summary>
        /// Private Variable für die Eigenschaft IsBusy.
        /// </summary>
        private bool _IsBusy;

        /// <summary>
        /// Gibt den Status für IsBusy (True,False) zurück oder stellt diesen ein.
        /// </summary>
        public bool IsBusy
        {
            get { return this._IsBusy; }
            set
            {
                if (this._IsBusy != value)
                {
                    this._IsBusy = value;
                    this.OnNotifyPropertyChanged("IsBusy");
                }
            }
        }

    }
}

I hope this help you to solve my problem.

Thx Mike

[Michael]

Any chance to get fix this?

[Maya]

Hi Michael,

I have tried to reproduce the behavior you described, but without any success. Could you take a look at the sample attached to verify whether it covers the same scenario ? Could you get the same behavior on it ? 

All the best,
Maya
the Telerik team

[Michael]

Hi Maya,

big thx for the sample project.

this behavior works for me!

best
mike