Point Location of TreeListViewRow

5 posts, 1 answers
  1. Joel Palmer
    Joel Palmer avatar
    164 posts
    Member since:
    May 2009

    Posted 10 Aug 2015 Link to this post

    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>

     

     

  2. Answer
    Stefan X1
    Admin
    Stefan X1 avatar
    517 posts

    Posted 11 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Joel Palmer
    Joel Palmer avatar
    164 posts
    Member since:
    May 2009

    Posted 11 Aug 2015 Link to this post

    I will take a look.  Thanks for your help.
  5. Joel Palmer
    Joel Palmer avatar
    164 posts
    Member since:
    May 2009

    Posted 11 Aug 2015 Link to this post

    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);
    }

  6. Stefan X1
    Admin
    Stefan X1 avatar
    517 posts

    Posted 12 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready