Problem with RadTreeView and RadContextMenu

18 posts, 1 answers
  1. Stephan
    Stephan avatar
    14 posts
    Member since:
    Nov 2013

    Posted 03 Mar 2014 Link to this post

    Hi there.
    I have modified the demo of RadTreeView and now i have problems with including a RadContextMenu.

    I want to have different menus for root and child nodes. But when i implement an event like Click or ItemClick my application doesn't build up. I get a white browser window.

    What is Wrong with my application?

    MainPage.xml:
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
     
        <Border BorderBrush="{StaticResource BorderBrush}" BorderThickness="0 0 0 1">
            <TextBlock Text="Übersicht" Style="{StaticResource TitleStyle}"/>
        </Border>
     
        <telerik:RadTreeView x:Name="xTreeView" Grid.Row="1"
                Padding="5" BorderThickness="0"
                IsEditable="True" SelectionMode="Single"
                IsSingleExpandPath="True" IsExpandOnSingleClickEnabled="True"
                ItemTemplate="{StaticResource TypeTemplate}"
                ItemEditTemplate="{StaticResource EditTemplate}"/>
    </Grid>

    TreeViewTemplates.xaml
    <DataTemplate x:Key="ComputerTemplate">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Seriennummer}" Margin="5,0" >
                <!--<telerik:RadContextMenu.ContextMenu>
                    <telerik:RadContextMenu ItemClick="Click">
                        <telerik:RadMenuItem Header="Gerät bearbeiten">
                            <telerik:RadMenuItem.IconTemplate>
                                <DataTemplate>
                                    <Image Source="Images/edit.png" Stretch="UniformToFill" />
                                </DataTemplate>
                             </telerik:RadMenuItem.IconTemplate>
                         </telerik:RadMenuItem>
                     </telerik:RadContextMenu>
                </telerik:RadContextMenu.ContextMenu>-->
            </TextBlock>
        </StackPanel>
    </DataTemplate>
     
    <telerik:HierarchicalDataTemplate x:Key="TypeTemplate"
                ItemsSource="{Binding Computers}"
                ItemTemplate="{StaticResource ComputerTemplate}">
        <TextBlock Text="{Binding Name}" >
            <telerik:RadContextMenu.ContextMenu>
                <telerik:RadContextMenu>
                    <telerik:RadMenuItem Header="Gerät hinzufügen" Click="RadMenuClick">
                        <telerik:RadMenuItem.IconTemplate>
                            <DataTemplate>
                                <Image Source="Images/add.png" Stretch="UniformToFill" />
                            </DataTemplate>
                        </telerik:RadMenuItem.IconTemplate>
                     </telerik:RadMenuItem>
                 </telerik:RadContextMenu>
             </telerik:RadContextMenu.ContextMenu>
        </TextBlock>
    </telerik:HierarchicalDataTemplate>


    I have commended out the first part only for testing. The second part with the RadMenuClick makes that the application doesnt build.
    Does anyone have an idea what im making wrong?
  2. Stephan
    Stephan avatar
    14 posts
    Member since:
    Nov 2013

    Posted 03 Mar 2014 in reply to Stephan Link to this post

    ok i solved this problem but got a new one.

    If i right-click on an item it isn't selected.

    i tried a few codes like:

    private void OnContextMenuClick(object sender, RoutedEventArgs args)
    {
        RadMenuItem menuItem = ((RadRoutedEventArgs)args).OriginalSource as RadMenuItem;
        RadTreeViewItem treeViewItem = FindParentOfType<RadTreeViewItem>(menuItem);
     
        if (treeViewItem != null)
        {
            this.xTreeView.SelectedItem = treeViewItem;
            treeViewItem.Focus();
            treeViewItem.IsExpanded = true;
        }

    }

    this will select the item and focus it but the data isn't shown.
    It only select the item without showing its data.

    What am I doing wrong now?
  3. DevCraft banner
  4. Stephan
    Stephan avatar
    14 posts
    Member since:
    Nov 2013

    Posted 03 Mar 2014 in reply to Stephan Link to this post

    just saw my mistake. thx anyway


    but now I have a question about editing.

    i have a grid.
    1: treeview, 2:projectcontrol which shows details.

    how can i make changes in the projectcontrol if i click editing in the contextmenu from my treeview?
  5. Boris
    Admin
    Boris avatar
    276 posts

    Posted 05 Mar 2014 Link to this post

    Hello Stephan,

    From your reply I got the impression that when the Edit button from the ContextMenu is clicked you need to change the focus to your ProjectControl where you display a more detailed information about the RadTreeViewItem.  If this is the case, why not using the ContextMenu.ItemClick event and programmatically focus the controls you will use ?

    Is it possible for you to send us some snapshots / wireframes that will provide more information about your scenario ?

    Regards,
    Boris Penev
    Telerik

    DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

  6. Stephan
    Stephan avatar
    14 posts
    Member since:
    Nov 2013

    Posted 05 Mar 2014 in reply to Boris Link to this post

    Hi Boris,

    i have solved it another way. i attached a jpeg.
    i have created another template for editing. instead of textbloxks i use textboxes. but it could look better, but dont know how.

    private void OnContextMenuClick(object sender, RoutedEventArgs args)
    {
        RadMenuItem menuItem = ((RadRoutedEventArgs)args).OriginalSource as RadMenuItem;
        RadTreeViewItem treeViewItem = FindParentOfType<RadTreeViewItem>(menuItem);
     
        XmlNodeItem edit = (XmlNodeItem)treeViewItem.DataContext;
     
        if (treeViewItem.IsSelected == true)
            treeViewItem.IsSelected = false;
     
        if (treeViewItem.ToString().Contains("Type"))
        {
            // Code zum hinzufügen neuer Computer
        }
        else
        {
            edit.Change = true;
     
            if (treeViewItem != null)
                treeViewItem.IsSelected = true;
     
            edit.Change = false;
        }
    }

    first i check if the item is selected( could also be a rightclick). then i check the item. my root is from type Type and the childs are Computer.
    after that i change the change attribute of this object to true and select it again. this will select the edit-template. and then i change the change value to false.

    i think there is already a better way to implement this, but now i dont know one.
    i have 3 new questions about this.

    1: if i rightclick a treeviewitem everything is fine but if i right click behind the text my context menu doesnt appear. i tried the horizontalcontentalignment = "stretch" but nothing happens. how can i achieve this goal?

    2: is there a better way to edit those entries in the projectcontrol?

    and 3: if i change the value and click to another textbox everything is okay but if i change a text and click another item in the treeview the text entered before isnt saved. why?
  7. Stephan
    Stephan avatar
    14 posts
    Member since:
    Nov 2013

    Posted 05 Mar 2014 in reply to Stephan Link to this post

    sorry forgot the image
  8. Boris
    Admin
    Boris avatar
    276 posts

    Posted 10 Mar 2014 Link to this post

    Hello Stephan,

    In order to fulfill your requirements you can get the clicked item using the RadContextMenu.GetClickedItem<T>() extension method. Then you can set the item in edit mode using the RadTreeViewItem BeginEdit() method:

    private void OnContextMenuClick(object sender, RoutedEventArgs args)
            {
                RadMenuItem menuItem = ((RadRoutedEventArgs)args).OriginalSource as RadMenuItem;
     
                RadTreeViewItem treeViewItem = (menuItem.Menu as RadContextMenu).GetClickedElement<RadTreeViewItem>();
                if (treeViewItem != null)
                {
                    treeViewItem.BeginEdit();
                }
            }
    Using this approach you shouldn't have any issues committing the changes in the RadTreeViewItem Headers.

    As for your first issue - in order to get the HorizontalContentAlignment = "Stretch" to work properly you should remove the StackPanel or if that is not an option you can set its Orientation  to Vertical. Basically the StackPanel Width is measured with infinity and therefore it cannot stretch to take the available size of the TreeViewItem.

    I attached a sample project demonstrating the above suggestions. I wasn't able to reproduce any of the other two issues you described within it so can you please have a look at it and let me know if it works for you. If the solution doesn't properly demonstrate your scenario, you can modify it accordingly and we will gladly take a closer look at it.

    Regards,
    Boris Penev
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  9. Stephan
    Stephan avatar
    14 posts
    Member since:
    Nov 2013

    Posted 25 Mar 2014 in reply to Boris Link to this post

    Hi Boris,

    sorry for that long time without an answer, i was sick.

    As for your sugesstion - i dont wan't to change the header of the item. i change the detail of it for example the header is the serialnumber. if i right-click on it and choose edit the details will shown up on the right-side of the window and i can start changing manufacturer, serialnumber, user... i solved it with textboxes but it still don't look nice.
    It is really simple. I want to show and edit data from a mysql-database. left side the serialnumber and right-side the details. After editting this data it should be saved in the database again. I have to do this with a webservice.

    If I right-click the headers font i can choose between change or add. If I click a bit more at the rightside where no font is it shows me the silverlight menu. That was for the stretch part.

    best regards
    Stephan
  10. Boris
    Admin
    Boris avatar
    276 posts

    Posted 28 Mar 2014 Link to this post

    Hello Stephan,

    My apologies for misleading you in the previous post - actually the project did not demonstrate the proper use of ContextMenu alongside the RadTreeViewItems. That is why I attached two sample projects to demonstrate two different approaches for showing the ContextMenu when clicking the whole area of the RadTreeViewItems.
    In the TreeViewWithRadContextMenuExample project I define an ItemTemplate with a ContextMenu for each RadTreeViewItem. Please not that the TextBlock is a direct child of the DataTemplate and the StackPanel is removed.

    <DataTemplate x:Key="ComputerTemplate">
                <!--<StackPanel>-->
                    <TextBlock Text="{Binding Seriennummer}" Margin="5,0" >
                        <telerik:RadContextMenu.ContextMenu>
                            <telerik:RadContextMenu >
                                ...
                             </telerik:RadContextMenu>
                        </telerik:RadContextMenu.ContextMenu>
                    </TextBlock>
                <!--</StackPanel>-->
            </DataTemplate>
    On the other hand, in the ContextMenuWithTreeViewDemo it uses a single ContextMenu in the RadTreeView. You can also check such approach in these Demos - Custom Context Menu and ContextMenu-TreeView Integration.

    As for the best way of editing the detailed information - we cannot say for sure that there is a universal approach for this scenario. This is more like design question than a technical one. However, you can also consider to edit the detailed information in a Edit Dialog Window with Save / Cancel buttons.

    Regards,
    Boris Penev
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  11. Stephan
    Stephan avatar
    14 posts
    Member since:
    Nov 2013

    Posted 02 Apr 2014 in reply to Boris Link to this post

    Hello Boris,

    Thank you for your demos.
    I have included the ContextMenu in my TreeViewTemplate so I can set the options for the different types of the treeview.

    Your idea with the Edit Dialog Window is great. I try to include that in my application. Thanks alot for that

    Best Regards
    Stephan Buder
  12. Stephan
    Stephan avatar
    14 posts
    Member since:
    Nov 2013

    Posted 02 Apr 2014 in reply to Stephan Link to this post

    Hello again,

    may you tell me how I could open a new window?
    I dont find anything.

    i want the edittemplate i already have as new window. it should be opend when I click in the contextmenu at edit item.

    EditTemplate:
    <DataTemplate x:Key="EditComputerDetailsTemplate">
            <Border Height="610" Width="1050" BorderBrush="{StaticResource BorderBrush}" BorderThickness="1"
                    DataContext="{Binding Path=SelectedItem, ElementName=xTreeView}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="350" />
                        <ColumnDefinition Width="350" />
                        <ColumnDefinition Width="350" />
                    </Grid.ColumnDefinitions>
     
                    <Border BorderBrush="{StaticResource BorderBrush}" Grid.ColumnSpan="3" BorderThickness="0 0 0 1">
                        <TextBlock Text="Details" Style="{StaticResource TitleStyle}" />
                    </Border>
     
                    <StackPanel Margin="10 0" Grid.Row="1" Grid.Column="0">
     
                        <TextBlock Text="Herstellerdaten" Style="{StaticResource TitleStyle}" Margin="0 7"  />
                        <Grid>
                            <Grid HorizontalAlignment="Left" Width="330">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="130" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
     
                                <TextBlock Text="Seriennummer:" Style="{StaticResource lefttext_style}" />
                                <TextBox Text="{Binding Path=Seriennummer, Mode=TwoWay}" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                                <TextBlock Text="Hersteller:" Grid.Row="1" Style="{StaticResource lefttext_style}"/>
                                <TextBox Text="{Binding Path=Hersteller, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                                <TextBlock Text="Typen Bezeichnung:" Grid.Row="2" Style="{StaticResource lefttext_style}"/>
                                <TextBox Text="{Binding Path=TypenBezeichnung, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                                <TextBlock Text="Anschaffungsdatum:" Grid.Row="3" Style="{StaticResource lefttext_style}"/>
                                <TextBox Text="{Binding Path=Anschaffungsdatum, Mode=TwoWay}" Grid.Row="3" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                                <TextBlock Text=" " Grid.Row="4" Style="{StaticResource lefttext_style}"/>
                                <TextBlock Text=" " Grid.Row="4" Grid.Column="1" Style="{StaticResource lefttextb_style}"/>
                            </Grid>
                        </Grid>
     
                        <Border Style="{StaticResource separator_style}" />
     
                        <TextBlock Text="Komponenten" Style="{StaticResource TitleStyle}"  Margin="0 0 0 7"/>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="130" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
     
                            <TextBlock Text="CPU:" Style="{StaticResource lefttext_style}"/>
                            <TextBox Text="{Binding Path=CPU, Mode=TwoWay}" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="RAM:" Grid.Row="1" Style="{StaticResource lefttext_style}"/>
                            <TextBox Text="{Binding Path=Speicher, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="1. Festplatte:" Grid.Row="2" Style="{StaticResource lefttext_style}"/>
                            <TextBox Text="{Binding Path=Festplatte1, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="2. Festplatte:" Grid.Row="3" Style="{StaticResource lefttext_style}"/>
                            <TextBox Text="{Binding Path=Festplatte2, Mode=TwoWay}" Grid.Row="3" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                        </Grid>
     
                        <Border Style="{StaticResource separator_style}" />
     
                        <TextBlock Text="Zubehör" Style="{StaticResource TitleStyle}" Margin="0 0 0 7"/>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="130" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
     
                            <TextBlock Text="Netzteile:" Style="{StaticResource lefttext_style}"/>
                            <TextBox Text="{Binding Path=AnzahlNetzteile, Mode=TwoWay}" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="Dockingstation:" Grid.Row="1" Style="{StaticResource lefttext_style}"/>
                            <TextBox Text="{Binding Path=Dockingstation, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="Monitore:" Grid.Row="2" Style="{StaticResource lefttext_style}"/>
                            <TextBox Text="{Binding Path=Monitore, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="Kansington Lock:" Grid.Row="3" Style="{StaticResource lefttext_style}"/>
                            <TextBox Text="{Binding Path=KansingtonLock, Mode=TwoWay}" Grid.Row="3" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                        </Grid>
                    </StackPanel>
                    <StackPanel Margin="10 0" Grid.Row="1" Grid.Column="1">
                        <TextBlock Text="Software" Style="{StaticResource TitleStyle}"  Margin="0 7"/>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="130" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
     
                            <TextBlock Text="Betriebssystem:" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=Betriebssystem, Mode=TwoWay}" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="Avira Antivir:" Grid.Row="1" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=AvAntivir, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="Office:" Grid.Row="2" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=Office, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="Coral Draw:" Grid.Row="3" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=CoralDraw, Mode=TwoWay}" Grid.Row="3" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="VM ware Workstation:" Grid.Row="4" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=VmWareWorkstation, Mode=TwoWay}" Grid.Row="4" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                        </Grid>
     
                        <Border Style="{StaticResource separator_style}" />
     
                        <TextBlock Text="Benutzer" Style="{StaticResource TitleStyle}"  Margin="0 0 0 7"/>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="130" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
     
                            <TextBlock Text="Benutzer 1:" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=Benutzer1, Mode=TwoWay}" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="Benutzer 2:" Grid.Row="1" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=Benutzer2, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="Benutzer 3:" Grid.Row="2" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=Benutzer3, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="Benutzer 4:" Grid.Row="3" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=Benutzer4, Mode=TwoWay}" Grid.Row="3" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                        </Grid>
     
                        <Border Style="{StaticResource separator_style}" />
     
                        <TextBlock Text="Besitzer" Style="{StaticResource TitleStyle}"  Margin="0 0 0 7"/>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="130" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
     
                            <TextBlock Text="Besitzer 1:" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=Besitzer1, Mode=TwoWay}" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="Besitzer 2:" Grid.Row="1" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=Besitzer2, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="Besitzer 3:" Grid.Row="2" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=Besitzer3, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                        </Grid>
                    </StackPanel>
                    <StackPanel Margin="10 0" Grid.Row="1" Grid.Column="2">
                        <TextBlock Text="Zusätze" Style="{StaticResource TitleStyle}"  Margin="0 7"/>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="130" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
     
                            <TextBlock Text="Sonstiges:" Style="{StaticResource lefttext_style}" />
                            <TextBox TextWrapping="Wrap" Text="{Binding Path=Sonstiges, Mode=TwoWay}" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                        </Grid>
                    </StackPanel>
                </Grid>
            </Border>
        </DataTemplate>

    Best Regards
    Stephan
  13. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 07 Apr 2014 Link to this post

    Hi Stephan,

    I am not sure that I understand your requirements. Could you please elaborate more on your particular scenario? Are you saying that you need to open a new window when you click an item from the context menu? What you have in mind when you say:"i want the edittemplate i already have as new window"?

    If you need to open a new RadWindow on click you can follow the approach described in this article. You can simply create a new RadWindow and call its Show() method in the handler of the Click event of the context menu.

    I hope this information is helpful.

    Regards,
    Pavel R. Pavlov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14. Stephan
    Stephan avatar
    14 posts
    Member since:
    Nov 2013

    Posted 07 Apr 2014 in reply to Pavel R. Pavlov Link to this post

    Hi Pavel,

    i have got a few problems with the RadWindow.

    I already does the design of it. I use this window to edit the data of the notebooks. i click the edit-header of the context-menu and it should appear this edit-page to edit the data with save and cancel buttons. but i dont really know how to solve this. it should be opened as a modal window.

    if i open the window the window the main application is overlayed with a black screen. further i dont know how to tell the window that it should load the data of my object and show it in the textboxes.

    regards
    stephan
  15. Stephan
    Stephan avatar
    14 posts
    Member since:
    Nov 2013

    Posted 07 Apr 2014 in reply to Stephan Link to this post

    Now i have only one problem left.

    I tried your application from your demo-program but coudnt get it worked for me.

    How can I achieve that after the edit-click in the context-menu the new window loads the datacontext from the item i want to edit?
    My textboxes are always empty
  16. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 10 Apr 2014 Link to this post

    Hi Stephen,

    Let me try to answer both of your questions. In order to make the RadWindow display the already designed DataTemplate, you need to set it as ContentTemplate to the RadWindow.
    Furthermore, in order to properly fill the desired fields of your custom DataTemplate you need to get the DataContext of the clicked RadTreeViewItem (as stated in your post). This can be done by instantiating the already clicked item and accessing its DataContext property. For more information on that matter you can take a look at this article.

    Once you have the DataContext of the clicked item, you can apply it to the RadWindow. By doing so the bindings in your custom DataTemplate will be triggered and the data will be property filled into the corresponding fields.

    Please give this approach a try and let me know if you need any further assistance.

    Regards,
    Pavel R. Pavlov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  17. Stephan
    Stephan avatar
    14 posts
    Member since:
    Nov 2013

    Posted 10 Apr 2014 in reply to Pavel R. Pavlov Link to this post

    Hi Pavel,

    i already got the item but dont know how to bind it to the window.

    MainPage.xaml.cs
    RadTreeViewItem treeViewItem = FindParentOfType<RadTreeViewItem>(item);
    Notebook edit = (Notebook)treeViewItem.DataContext;
    EditPage page = new EditPage();
    page.DataContext = edit;

    I bind it to the EditPage like this. The Border is around the grid with the boxes within
    <Border Height="610" Width="1050" BorderBrush="{StaticResource BorderBrush}" BorderThickness="1"
                DataContext="{Binding Path=SelectedItem, ElementName=xTreeView}">

    and the textboxes from EditPage
    <TextBox Text="{Binding Path=Hersteller, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Style="{StaticResource righttextb_style}"/>

    but no data is shown when i call the EditPage.
    What i am doing wrong?

    Regards
    Stephan
  18. Stephan
    Stephan avatar
    14 posts
    Member since:
    Nov 2013

    Posted 10 Apr 2014 in reply to Stephan Link to this post

    Oh and how do i set it as ContentTemplate?

    First I set
    <telerik:RadWindow x:Class="TestInventur.EditPage"
            xmlns:local="clr-namespace:TestInventur"
            Header="Please add your data" Height="650" Width="1050"
            WindowStartupLocation="CenterScreen"
            HideMaximizeButton="True" HideMinimizeButton="True" ResizeMode="NoResize"
            ModalBackground="Transparent" Foreground="Black" >
    <telerik:RadWindow.Resources>
         Contains all my different Styles
    </telerik:RadWindow.Resources>

    then i continue with
    <Border Height="610" Width="1050" BorderBrush="{StaticResource BorderBrush}" BorderThickness="1"
                    DataContext="{Binding Path=SelectedItem, ElementName=xTreeView}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="350" />
                    <ColumnDefinition Width="350" />
                    <ColumnDefinition Width="350" />
                </Grid.ColumnDefinitions>
     
                <Border BorderBrush="{StaticResource BorderBrush}" Grid.ColumnSpan="3" BorderThickness="0 0 0 1">
                    <TextBlock Text="Details" Style="{StaticResource TitleStyle}" />
                </Border>
     
                <StackPanel Margin="10 0" Grid.Row="1" Grid.Column="0">
     
                    <TextBlock Text="Herstellerdaten" Style="{StaticResource TitleStyle}" Margin="0 7"  />
                    <Grid>
                        <Grid HorizontalAlignment="Left" Width="330">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="130" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
     
                            <TextBlock Text="Seriennummer:" Style="{StaticResource lefttext_style}" />
                            <TextBox Text="{Binding Path=Seriennummer, Mode=TwoWay}" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
     
                            <TextBlock Text="Hersteller:" Grid.Row="1" Style="{StaticResource lefttext_style}"/>
                            <TextBox Text="{Binding Path=Hersteller, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Style="{StaticResource righttextb_style}"/>
    .
    .
    .

    and this for many details of my object in different groups like hard and software.
  19. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 14 Apr 2014 Link to this post

    Hello Stephan,

    Please take a look at the attached project and see how I implemented the previously mentioned approach.

    I hope this will help you out.

    Regards,
    Pavel R. Pavlov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner