How to: Find DataTemplate-Generated Elements

5 posts, 1 answers
  1. Bahram
    Bahram avatar
    24 posts
    Member since:
    Feb 2019

    Posted 06 Nov 2019 Link to this post

    Hi there,

    I have a DataTemplate that is added as TitleTemplate to a RadDocumentPane - as you see below. So I need to access to RadToggleButton which is inside my DataTemplate in code behind, can you please tell me how can i do that?

     

        <Window.Resources>
            <DataTemplate x:Key="SyncTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <ContentPresenter Content="{Binding}" Margin="0,5,0,0"/>
                    <telerik:RadToggleButton x:Name="xScrollSync" Grid.Column="1" HorizontalAlignment="Right" Content="XScroll Sync" Width="75" />
                </Grid>
            </DataTemplate>
        </Window.Resources>

     

        <Grid>
    <telerik:RadDocking Margin="0 60 0 30" HorizontalAlignment="Stretch" Height="auto"
                                HasDocumentHost="False" Width="auto" VerticalAlignment="Stretch">
    <telerik:RadSplitContainer telerik:ProportionalStackPanel.RelativeSize="1000, 200">
    <telerik:RadSplitContainer x:Name="ganttViewSplit" InitialPosition="DockedLeft"
                                           HorizontalAlignment="Stretch" Height="auto"
                                           VerticalAlignment="Stretch" telerik:ProportionalStackPanel.RelativeSize="800,200">
            <telerik:RadPaneGroup>
                <telerik:RadDocumentPane x:Name="ganttDoc" TitleTemplate="{StaticResource SyncTemplate}">
                 <telerik:RadDocumentPane.Content>
                                    <Grid>
                                    </Grid>
                          </telerik:RadDocumentPane.Content>
               </telerik:RadDocumentPane>
            </telerik:RadPaneGroup>
       </telerik:RadSplitContainer>
    </telerik:RadDocking>

    </Grid>

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2420 posts

    Posted 07 Nov 2019 Link to this post

    Hello Bahram,

    Usually, elements that are defined in a DataTemplate are modified using data bindings. So, a way to go is to set the Title property of the pane to an object (like string, or a custom class) and bind to its properties in the DataTemplate. Then, when you need to change something, update the object in the Title.

    Another approach would be to use the ChildrenOfType() method. 

    var button = this.ganttDoc.ChildrenOfType<RadToggleButton>().FirstOrDefault(x => x.Name == "xScrollSync");

    Regards,
    Martin Ivanov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Bahram
    Bahram avatar
    24 posts
    Member since:
    Feb 2019

    Posted 07 Nov 2019 in reply to Martin Ivanov Link to this post

    Hi Martin,

     

    Thank you for giving me these solutions. However, I am not sure what do you mean by using data bindings - the first solution. Can you please provide me an example, I would be appreciate it.

    And about the second solution, using  the ChildrenOfType() method, I tried it before and it returns null!

     

    Thanks,

    Bahram Afsharipoor

  4. Answer
    Martin Ivanov
    Admin
    Martin Ivanov avatar
    2420 posts

    Posted 08 Nov 2019 Link to this post

    Hello Bahram,

    With the data bindings solution, I meant that you can define a view model for the pane object and assign it to its Title. For example:

    // Note that if you want changes in the model to get applied to the UI, 
    // you will need to implement the INotifyPropertyChanged interface and raise the PropertyChanged event in the property setters. 
    public class MyPaneTitleModel
    {
    	public string Content { get; set; }
    	public ICommand ButtonCommand { get; set; }
    	public Brush Background { get; set; }
    }
    

    <!-- Note that there are different ways to set the Title property -->
    <telerik:RadDocumentPane x:Name="ganttDoc" Title={Binding MyPanelTitleModelInstance} TitleTemplate="{StaticResource SyncTemplate}">
    
    <DataTemplate x:Key="SyncTemplate">
    	<Grid Background="{Binding Background}">
    		<Grid.ColumnDefinitions>
    			<ColumnDefinition Width="Auto" />
    			<ColumnDefinition />
    		</Grid.ColumnDefinitions>
    		<ContentPresenter Content="{Binding Content}" Margin="0,5,0,0"/>
    		<telerik:RadToggleButton x:Name="xScrollSync" Grid.Column="1" HorizontalAlignment="Right" Content="XScroll Sync" Width="75" Command="{Binding ButtonCommand}" />
    	</Grid>
    </DataTemplate>

    This way when you change a property in the model (that you have access to), the UI will also change.

    this.MyPanelTitleModelInstance.Background = Brushes.Green;

    The ChildrenOfType() extension methods would be able to enumerate the children elements only if the visual tree of the control has been loaded. This is why you should call the methods after the Loaded event of the corresponding control was invoked. If you call the method before this, it won't find anything.

    Regards,
    Martin Ivanov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Bahram
    Bahram avatar
    24 posts
    Member since:
    Feb 2019

    Posted 13 Nov 2019 in reply to Martin Ivanov Link to this post

    Hi Martin,

     

    Thank you for sending me the sample for the data binding solution, that is exactly what I needed.

     

    Thanks,

    Bahram Afsharipoor

Back to Top