Binding from RadDataForm DataTemplate to DataContext ViewModel

6 posts, 1 answers
  1. Michael
    Michael avatar
    35 posts
    Member since:
    Jan 2012

    Posted 28 Nov 2012 Link to this post

    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
  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 03 Dec 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Michael
    Michael avatar
    35 posts
    Member since:
    Jan 2012

    Posted 03 Dec 2012 Link to this post

    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"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="680" 
         
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
         
        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





  5. Michael
    Michael avatar
    35 posts
    Member since:
    Jan 2012

    Posted 04 Dec 2012 Link to this post

    Any chance to get fix this?
  6. Answer
    Maya
    Admin
    Maya avatar
    4062 posts

    Posted 06 Dec 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Michael
    Michael avatar
    35 posts
    Member since:
    Jan 2012

    Posted 06 Dec 2012 Link to this post

    Hi Maya,

    big thx for the sample project.

    this behavior works for me!

    best
    mike
Back to Top
DevCraft banner