Point Location of TreeListViewRow

[Joel Palmer]

I have a requirement where I need to pop a window up in order to show the detail of the selected tree node.  I need it to pop up in a location just to the right of what I selected in the TreeListView.

I figure this could be done using the Mouse Location or the Location relative to the selected node.  I haven't been able to get either to work. 

My approach is to pop up a simple Tool window at that location.  The better solution would be to have an EditTemplate that pops into its own window; but, I'm not sure if that is possible.  I have a good EditTemplate (shown) but the user demands that the tree remain very skinny and doesn't want to move things around much because this is a Touch Pad.

I'm open to whatever approach is the easiest code to maintain.  Thanks in advance for your help.

Here are my DataTemplates:

<DataTemplate
    x:Key="TreeNodeTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>

        <Image
            Grid.Column="0"
            Source="{Binding Image, Mode=TwoWay}"
            ToolTip="{Binding Barcode, Mode=TwoWay}"/>

        <Image
            Grid.Column="0"
            Height="20"
            Width="20"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Margin="-20,0,0,0"
            Source="{Binding StatusImage, Mode=TwoWay}"
            ToolTip="{Binding StatusName, Mode=TwoWay}"/>

        <TextBlock
            Grid.Column="1"
            Text="{Binding Name, Mode=TwoWay}"
            Margin="5"
            ToolTip="{Binding Description}"/>
    </Grid>
</DataTemplate>
<DataTemplate
    x:Key="TreeNodeEditTemplate">

    <StackPanel
        Orientation="Horizontal">
        <Image
            Source="{Binding Image, Mode=TwoWay}"
            VerticalAlignment="Top"/>

        <Grid
            Margin="5"
            Background="Cornsilk">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="125"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="28"/>
                    <RowDefinition Height="28"/>
                    <RowDefinition Height="28"/>
                    <RowDefinition Height="28"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>

                <Label
                    Content="ID:"
                    Grid.Column="0"
                    Grid.Row="0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"/>

                <TextBlock
                    Grid.Column="1"
                    VerticalAlignment="Center"
                    Text="{Binding ID, Mode=TwoWay}"/>

                <Label
                    Content="Name:"
                    Grid.Column="0"
                    Grid.Row="1"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"/>

                <TextBox
                    Grid.Column="1"
                    Grid.Row="1"
                    VerticalAlignment="Center"
                    Text="{Binding Name, Mode=TwoWay}"
                    IsEnabled="{Binding IsEditableStatus}"
                    IsReadOnly="{Binding IsEditableStatus, Converter={StaticResource BoolToOppositeBoolConverter}}"/>

                <Label
                    Content="Description:"
                    Grid.Column="0"
                    Grid.Row="2"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"/>

                <TextBox
                    Grid.Column="1"
                    Grid.Row="2"
                    VerticalAlignment="Center"
                    Text="{Binding Description, Mode=TwoWay}"
                    IsEnabled="{Binding IsEditableStatus}"
                    IsReadOnly="{Binding IsEditableStatus, Converter={StaticResource BoolToOppositeBoolConverter}}"/>

                <Label
                    Content="Barcode:"
                    Grid.Column="0"
                    Grid.Row="3"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"/>

                <TextBox
                    Grid.Column="1"
                    Grid.Row="3"
                    VerticalAlignment="Center"
                    Text="{Binding Barcode, Mode=TwoWay}"/>
            </Grid>

            <GroupBox
                Header="Status"
                Grid.Row="4"
                Margin="5">

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="125"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="28"/>
                        <RowDefinition Height="28"/>
                    </Grid.RowDefinitions>

                    <Label
                        Content="CRUD Status:"
                        Grid.Column="0"
                        Grid.Row="0"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Center"/>

                    <TextBlock
                        Grid.Column="1"
                        Grid.Row="0"
                        VerticalAlignment="Center"
                        Text="{Binding StatusName, Mode=TwoWay}"/>

                    <Label
                        Content="Inspect Status:"
                        Grid.Column="0"
                        Grid.Row="1"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Center"/>

                    <TextBlock
                        Grid.Column="1"
                        Grid.Row="1"
                        Text="{Binding InspectStatusName, Mode=TwoWay}"
                        VerticalAlignment="Center"/>
                </Grid>
            </GroupBox>

        </Grid>
    </StackPanel>
</DataTemplate>

 

 

[Stefan]

Hello Joel,

As there is no built-in functionality for such behavior, you will have to implement it by yourself.

A possible approach that I can suggest you is to use a combination of PreviewMouseLeftButtonDown and SelectionChanged event of RadTreeListView.

Within PreviewMouseLeftButtonDown handler  you can use Point in order to preserve the position where the user clicked. Then within the SelectionChanged handler you can instantiate a new RadWindow and set its Content to be whatever control you need for displaying the already defined DataTemplates. Note, that via AddedItems property of SelectionChangeEventArgs you can get the currently selected item.

I am attaching a sample project as a demonstration of the suggested approach for your convenience.

Best Regards,
Stefan
Telerik

[Joel Palmer]

I will take a look.  Thanks for your help.

[Joel Palmer]

I'm pretty sure you didn't test this example.  But, it got me started.  I updated your event handlers as follows

• You need to consider the window position plus the mouse position relative to the window.
• You need to consider the popup window's caption area (top of the window). 
• You need to consider the popup window's margin.  I thought border thickness would give it to me but it doesn't.
• I popped the window with a ShowDialog instead of just Show.

Thanks for your help, Joel.

private void clubsGrid_SelectionChanged(object sender, SelectionChangeEventArgs e)
{
    try
    {
        if (clickPos != null)
        {
            RadWindow window = new RadWindow();
            window.Width = 200;
            window.Height = 300;
            window.Top = clickPos.Y + window.CaptionHeight + 5;
            window.Left = clickPos.X + 5;
            window.WindowStartupLocation = System.Windows.WindowStartupLocation.Manual;
            window.Content = new RadGridView()
            {
                ItemsSource = e.AddedItems
            };


            window.ShowDialog();
        }
    }
    catch (Exception ex)
    {
    }
}

private void clubsGrid_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Point windowPosition =
        e.GetPosition(
            (e.Source as RadTreeListView).ParentOfType<Window>());

    clickPos = new Point(
        this.Left + windowPosition.X,
        this.Top + windowPosition.Y + this.Margin.Top);
}

[Stefan]

Hi Joel,

Please note, that the purpose of the demo application is only to serve you as a starting point for implementing your customizations.

However, I am glad that the suggested approach in it worked for you and you managed to find a working solution.

Feel free to contact us in case you have any other questions on our controls.

Best Regards,
Stefan
Telerik