This is a migrated thread and some comments may be shown as answers.

How to: Find DataTemplate-Generated Elements

4 Answers 531 Views
Docking
This is a migrated thread and some comments may be shown as answers.
Bahram
Top achievements
Rank 1
Bahram asked on 07 Nov 2019, 12:23 AM

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>

4 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 07 Nov 2019, 06:49 AM

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.
0
Bahram
Top achievements
Rank 1
answered on 07 Nov 2019, 05:52 PM

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

0
Accepted
Martin Ivanov
Telerik team
answered on 08 Nov 2019, 08:22 AM

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.
0
Bahram
Top achievements
Rank 1
answered on 13 Nov 2019, 10:03 PM

Hi Martin,

 

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

 

Thanks,

Bahram Afsharipoor

Tags
Docking
Asked by
Bahram
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Bahram
Top achievements
Rank 1
Share this question
or