From RadTreeView to RadGridView

2 posts, 0 answers
  1. Tor
    Tor avatar
    3 posts
    Member since:
    Jun 2013

    Posted 07 Jun 2013 Link to this post

    I'm trying to drag items from a TreeGridView to a RadGridView, such that a single item will be stored in a single cell.

    I have predefined columns with headers "A" to "Z" and want to drop items from the treeview to a single column, i.e. drop an item to column A and another item to column H, such that the rest of the columns are empty.

    All of this should happen on a single row under the headers. I also don't want to be able to drag the column headers.

    Are there any good solutions to this problem? I'm not sure what to do. Maybe there is a better View to use?
    This is what I have so far:

    using System;
    using System.Collections;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.Linq;
    using System.Windows;
    using System.Windows.Media;
    using Telerik.Windows.Controls;
    using Telerik.Windows.Controls.DragDrop;
    using Telerik.Windows.Controls.TreeView;
    using System.Windows.Controls;
    using System.Windows.Data;
    namespace Telerik.Windows.Examples.DragAndDrop.WPF.TreeToGrid
        public partial class Example : System.Windows.Controls.UserControl
            MyCollection results = new MyCollection();
            public Example()
                // Set the items source of the controls:
                allProductsView.ItemsSource = CategoryViewModel.Generate();
                //IList orderSource = new ObservableCollection<string>();
                //orderView.ItemsSource = orderSource;
                //foreach (ProductViewModel product in ProductViewModel.Generate(6))
                //    wishlistSource.Add(product);
                // Allow dropping into the ListBox and GridView only if the
                // dragged items are all products:
                RadDragAndDropManager.AddDropQueryHandler(orderView, OnDropQuery);
                // Change the drag cue and choose an action for the sucessful drop
                // in the Order GridView:
                RadDragAndDropManager.AddDropInfoHandler(orderView, OnGridViewDropInfo);
                // Allow dragging of the Wishlist and Order items:
                RadDragAndDropManager.AddDragQueryHandler(orderView, OnOrderDragQuery);
                // Handle the case when items are dragged away from  the ListBox
                // and the Order:
                RadDragAndDropManager.AddDragInfoHandler(orderView, OnOrderDragInfo);
                List<String> details = new List<string>();
                char a = 'A';
                char z = 'Z';
                for (char cntr = a; cntr <= z; cntr++)
                    details.Add(cntr + "");
                //-----set binding here or in Xaml------------------------
                Binding binding = new Binding();
                binding.Source = results;
                orderView.SetBinding(RadGridView.ItemsSourceProperty, binding);
            private void AddColumns(List<String> myColumns)
                //RadGridView viewLayout = new RadGridView();
                //GridView viewLayout = new GridView();
                for (int i = 0; i < myColumns.Count; i++)
                    orderView.Columns.Add(new Telerik.Windows.Controls.GridViewColumn
                        Header = myColumns[i],
                        IsResizable = false,
                        //BindingGroup = new BindingGroup(),
                        //DisplayMemberBinding = new Binding(" ")
                orderView.CanUserInsertRows = false;
            private void OnOrderDragInfo(object sender, DragDropEventArgs e)
                IEnumerable draggedItems = e.Options.Payload as IEnumerable;
                if (e.Options.Status == DragStatus.DragInProgress)
                    //Set up a drag cue:
                    TreeViewDragCue cue = new TreeViewDragCue();
                    //Here we need to choose a template for the items:
                    cue.ItemTemplate = this.Resources["ProductTemplate"] as DataTemplate;
                    cue.ItemsSource = draggedItems;
                    e.Options.DragCue = cue;
                else if (e.Options.Status == DragStatus.DragComplete)
                    IList source = this.orderView.ItemsSource as IList;
                    foreach (object draggedItem in draggedItems)
            private void OnOrderDragQuery(object sender, DragDropQueryEventArgs e)
                if (this.orderView != null)
                    IList selectedItems = this.orderView.SelectedItems;
                    e.QueryResult = selectedItems.Count > 0;
                    e.Options.Payload = selectedItems;
                e.QueryResult = true;
                e.Handled = true;
            private void OnGridViewDropInfo(object sender, DragDropEventArgs e)
                ICollection draggedItems = e.Options.Payload as ICollection;
                // Get the drag cu that the TreeView or we have created
                TreeViewDragCue cue = e.Options.DragCue as TreeViewDragCue;
                if (e.Options.Status == DragStatus.DropPossible)
                    // Set a suitable text:
                    cue.DragActionContent = String.Format("Add {0} item{1} to Order", draggedItems.Count, draggedItems.Count > 1 ? "s" : String.Empty);
                    cue.IsDropPossible = true;
                    this.orderView.Background = this.Resources["DropPossibleBackground"] as Brush;
                else if (e.Options.Status == DragStatus.DropImpossible)
                    cue.DragActionContent = null;
                    cue.IsDropPossible = false;
                else if (e.Options.Status == DragStatus.DropComplete)
                    IList items = this.orderView.ItemsSource as IList;
                    foreach (object draggedItem in draggedItems)
                if (e.Options.Status != DragStatus.DropPossible)
                    this.orderView.Background = new SolidColorBrush(Colors.White);
            private void OnDropQuery(object sender, DragDropQueryEventArgs e)
                // We allow drop only if the dragged items are products:
                ICollection draggedItems = e.Options.Payload as ICollection;
                bool result = draggedItems.Cast<object>().All((object item) => item is ProductViewModel);
                e.QueryResult = result;
                e.Handled = true;
                // Note that here we agree to accept a drop. We will be notified
                // in the DropInfo event whether a drop is actually possible.
        public class ExampleTemplateSelector : DataTemplateSelector
            public override DataTemplate SelectTemplate(object item, DependencyObject container)
                if (item is ProductViewModel)
                    return ProductTemplate;
                else if (item is CategoryViewModel)
                    return CategoryTemplate;
                return null;
            public DataTemplate ProductTemplate { get; set; }
            public DataTemplate CategoryTemplate { get; set; }
        public class CategoryViewModel
            public static IList Generate()
                var apiOutput1 = new CategoryViewModel();
                apiOutput1.Title = "List items";
                var apiOutput2 = new CategoryViewModel();
                apiOutput2.Title = "Item Price";
                var userDefFields = new CategoryViewModel();
                userDefFields.Title = "User fields";
                IList result = new List<object>();
                return result;
            public CategoryViewModel()
                Items = new ObservableCollection<object>();
            public string Title { get; set; }
            public IList Items { get; set; }
        public class ProductViewModel
            public ProductViewModel(string name, string desc)
                Name = name;
                Description = desc;
            public string Name { get; set; }
            public string Description { get; set; }
            public override string ToString()
                return Name.ToString();
        public class MyCollection : ObservableCollection<List<string>>
            public MyCollection()
                : base()

    <UserControl x:Class="Telerik.Windows.Examples.DragAndDrop.WPF.TreeToGrid.Example"
            <telerik:MetroColors x:Key="MetroColors" />
            <SolidColorBrush x:Key="AccentBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.AccentColor}" />
            <SolidColorBrush x:Key="BasicBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.BasicColor}" />
            <SolidColorBrush x:Key="StrongBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.StrongColor}" />
            <SolidColorBrush x:Key="MainBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.MainColor}" />
            <SolidColorBrush x:Key="MarkerBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.MarkerColor}" />
            <SolidColorBrush x:Key="ValidationBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.ValidationColor}" />
            <DataTemplate x:Key="WishlistProduct">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                    <TextBlock Text=", (" Foreground="Gray" />
                    <TextBlock Text="{Binding UnitPrice}" Foreground="Gray" />
                    <TextBlock Text=")" Foreground="Gray" />
            <HierarchicalDataTemplate x:Key="CategoryTemplate" ItemsSource="{Binding Items}">
                <StackPanel Orientation="Horizontal">
                    <Image Width="16" Height="16" Source="../../Images/DragAndDrop/folder_icon.png" Margin="3"
                            VerticalAlignment="Center" />
                    <TextBlock Text="{Binding Title}" Foreground="{StaticResource MainBrush}" Margin="2" VerticalAlignment="Center" />
            <DataTemplate x:Key="ProductTemplate">
                <DockPanel Margin="2" MaxWidth="200">
                    <TextBlock Text="{Binding Name}" FontWeight="Bold" Foreground="{StaticResource MainBrush}" DockPanel.Dock="Top" />
                    <!--<TextBlock Text="{Binding Description}" DockPanel.Dock="Left"
                            Margin="2 0 0 0" Foreground="{StaticResource MainBrush}" TextWrapping="Wrap" /> -->
            <example:ExampleTemplateSelector x:Key="ExampleTemplateSelector"
                    CategoryTemplate="{StaticResource CategoryTemplate}"
                    ProductTemplate="{StaticResource ProductTemplate}" />
            <Style TargetType="nav:RadTreeViewItem" x:Key="TreeViewItemStyle">
                <Setter Property="IsExpanded" Value="True" />
            <!--Note: With this style we make the ListBoxItems draggable:-->
            <Style TargetType="gridViewElements:GridViewRow" x:Key="OrderItemStyle">
                <Setter Property="dragDrop:RadDragAndDropManager.AllowDrag" Value="True" />
        <Grid x:Name="LayoutRoot">
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="3*" />
            <!--All Products-->
            <Border BorderBrush="#C8C9CC" BorderThickness="2" CornerRadius="6" Margin="46 46 0 46" Background="White">
                    <Border DockPanel.Dock="Top" Background="{StaticResource AccentBrush}" CornerRadius="4 4 0 0">
                        <TextBlock Text="All Products" Margin="20 5 5 5" Foreground="{StaticResource MainBrush}" FontSize="14"/>
                    <nav:RadTreeView x:Name="allProductsView"
                            ItemTemplateSelector="{StaticResource ExampleTemplateSelector}"
                            ItemContainerStyle="{StaticResource TreeViewItemStyle}"
                            IsDragDropEnabled="True" Background="{StaticResource AccentBrush}" Padding="5"/>
            <Border BorderBrush="#C8C9CC" BorderThickness="2" CornerRadius="6" Margin="46 46 0 46"
                    Background="White" Grid.Column="1">
                    <Border DockPanel.Dock="Top"
                            Background="{StaticResource AccentBrush}" CornerRadius="4 4 0 0">
                        <TextBlock Text="Order" Foreground="{StaticResource MainBrush}" Margin="20 5 5 5" FontSize="14" />
                    <!--NOTE: The GridView is a drop target, we set the AllowDrop to true.-->
                    <telerik:RadGridView x:Name="orderView" dragDrop:RadDragAndDropManager.AllowDrop="True"
                                         CanUserInsertRows="False" IsReadOnly="True" CanUserFreezeColumns="False"

  2. Nick
    Nick avatar
    593 posts

    Posted 10 Jun 2013 Link to this post

    Hello Tor,

    I replied to you other thread ( 

    May I ask you to keep communication about a single issue in one thread in order to avoid confusion and miscommunication? 

    Thank you in advance! 


    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top