[Solved] Multiple Item sources for gridviewcomboboxcolumn

[jbaird]

We have a requirement where a datagrid contains 2 columns.  The first is a non-changing read only column of default values; the second is a combobox where the itemssource depends on the value in the 1st column.  In other words, I have a select that returns a comprehensive list of items from a database and then I need to do a Linq select to create a sublist from the main one and assign its value to the combobox in the corresponding row until I have processed all the items in column 1.

col 1          combo column
item 1   --- list item a ---- combo bound to list item b
                 list item b
item2  --   list item c  ---- combo bound to list item c
                list item d

Hope this makes sense.  How can I do this?

John

[Pavel Pavlov]

Hello John,

I have prepared a small sample application for you . Please see the project attached.

It has two columns in a RadGridView. The second column contains comboboxes and their itemssource depends on the value of the first column .

Since the built-in ComboboxColumn does not support different itemssources per row it is not suitable for this scenario. Instead we redefine the template of the GridView cell placing a user control with a combobox within. You may find the logic that populates the comboboxes in ComboBoxContainer.xaml.cs.

In case you have any troubles adapting this to your project don't hesitate to contact me .


Kind regards,
Pavel Pavlov
the Telerik team

[anwar]

Hello Pavel,

Thanks for your sample, it help me to set multiple itemsources for gridviecombobox column, but i am setting the itemsources for each row dynamically and the  ComboBoxContainer combobox_loaded event firing all the rows and resets the combobox selected value.

Here is what i am doing.
I have a Treeview control and a gridview control in my page. I can drag and drop the node from treeview to grid view, based on the node type i am setting the aggregate column(combobox) values in my grid.
Node Type     Aggregate Column
Numeric           Sum
                        Count
                        Average, etc...

String             Group By
                        Count, etc..

Date                First
                        Next, etc...

Run the application and drag and drop the node to grid view, change the combobox value to Count (first row), next drag and drop the second row, now the first roow loosing the selected value.

Can you please help me how to stop loading the selected rows.

Thanks,
Anwar

[Pavel Pavlov]

Hi anwar,

Can you please send me your application so I can see where the trouble is. I will do my best to provide a descent solution.

Kind regards,
Pavel Pavlov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[anwar]

Hello Pavel,

I am unable to attach my solution, i am getting the following error when i try to attach the .zip file
Attach file

(optional)

File is not of correct type.

I took your ComboBoxesPerRow solution from the previous post and updates are listed below.

TreeDragDropGrid.xaml

<UserControl x:Class="ComboBoxesPerRow_SL.TreeDragDropGrid"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:telerikDragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
    xmlns:local="clr-namespace:ComboBoxesPerRow_SL"
    Width="Auto" Height="Auto">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>

        <telerikNavigation:RadTreeView
                x:Name="tvMetalayerTree"
                BorderThickness="1"
                IsLineEnabled="True"
                IsEditable="False"
                SelectionMode="Multiple"
                IsDragTooltipEnabled="True"
                IsDragDropEnabled="True"
                telerikDragDrop:RadDragAndDropManager.AllowDrag="True"
                telerikDragDrop:RadDragAndDropManager.AllowDrop ="True"
                PreviewDragEnded="tvMetalayerTree_PreviewDragEnded"
                ScrollViewer.VerticalScrollBarVisibility="Auto"
                Grid.Row="0" Grid.Column="0"
                Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top">

        </telerikNavigation:RadTreeView>

        <telerik:RadGridView x:Name="gvObjects" AutoGenerateColumns="False"
                             Grid.Row="0" Grid.Column="1"
                             telerikDragDrop:RadDragAndDropManager.AllowDrop="True">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn HeaderText="Continent" DataMemberBinding="{Binding Continent, Mode=TwoWay}" />
                <telerik:GridViewDataColumn HeaderText="Country" DataMemberBinding="{Binding SelectedCountry, Mode=TwoWay}" >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <local:ComboBoxContainer Width="100" Height="24" />
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</UserControl>

TreeDragDropGrid.cs

 

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

using Telerik.Windows;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.DragDrop;
using Telerik.Windows.Controls.TreeView;

using System.Text;
using System.Windows.Markup;

namespace ComboBoxesPerRow_SL
{
    public partial class TreeDragDropGrid : UserControl
    {
        HierarchicalDataTemplate _itemTemplate;
        int treeDepth = 4; //max depth of the tree

        private ObservableCollection<MyBusinessObject> gridviewsource;
        public ObservableCollection<MyBusinessObject> GridViewSource
        {
            get { return gridviewsource; }
            set { gridviewsource = value; }
        }

        public TreeDragDropGrid()
        {
            InitializeComponent();

            gridviewsource = new ObservableCollection<MyBusinessObject>();

            List<MyBusinessObject> myBusinessobjects = new List<MyBusinessObject>();
            myBusinessobjects.Add(new MyBusinessObject("Europe", 0));
            myBusinessobjects.Add(new MyBusinessObject("Asia", 0));
            myBusinessobjects.Add(new MyBusinessObject("Afrika", 0));

            //set treeview datasource
            this.InstantiateTemplates(); // treeview hierarchical/data templates
            tvMetalayerTree.ItemsSource = myBusinessobjects;
            tvMetalayerTree.ItemTemplate = this._itemTemplate;

            //add drag/drop events
            RadDragAndDropManager.AddDropQueryHandler(gvObjects, OnDropQuery);
            RadDragAndDropManager.AddDropInfoHandler(gvObjects, OnDropInfo);

            gvObjects.ItemsSource = GridViewSource;
        }

        void OnDropQuery(object sender, DragDropQueryEventArgs e)
        {
            e.QueryResult = true;
        }

        void OnDropInfo(object sender, DragDropEventArgs e)
        {
            if (e.Options.Status == DragStatus.DropComplete)
            {
                MyBusinessObject obj = (e.Options.Payload as Collection<Object>)[0] as MyBusinessObject;
                gridviewsource.Add(obj);
            }
        }

        private void InstantiateTemplates()
        {
            //root nodes template
            DataTemplate dataTemplate = (DataTemplate)XamlReader.Load(datatemplate);

            HierarchicalDataTemplate[] hierarchicalTemplate;
            hierarchicalTemplate = new HierarchicalDataTemplate[treeDepth - 2];
            int index = 0;
            for (int i = 1; i < treeDepth - 1; i++)
            {
                //add child nodes template - hierarchical template
                hierarchicalTemplate[index] = (HierarchicalDataTemplate)XamlReader.Load(hierarchicaldatatemplate);
                if (i == 1)
                {
                    hierarchicalTemplate[index].ItemTemplate = dataTemplate;
                }
                else
                {
                    hierarchicalTemplate[index].ItemTemplate = hierarchicalTemplate[index - 1];
                }
                index++;
            }

            //add the templates to item template
            this._itemTemplate = (HierarchicalDataTemplate)XamlReader.Load(hierarchicaldatatemplate);
            this._itemTemplate.ItemTemplate = hierarchicalTemplate[index - 1];
        }

        private void tvMetalayerTree_PreviewDragEnded(object sender, RadTreeViewDragEndedEventArgs e)
        {
            e.Handled = true; //set this to true to stop removing the node from the tree
        }

        #region "Properties"
        private string CommonReference
        {
            get
            {
                string strCommon = @"
                                xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
                                xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
                                xmlns:telerik=""clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls""
                                xmlns:telerikNavigation=""clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"">
                                <StackPanel Orientation=""Horizontal"">
                                    <TextBlock Text=""{Binding Continent}"" FontWeight=""Bold"" FontSize=""12"" />
                                </StackPanel>
                                ";
                return strCommon;
            }
        }

        private string datatemplate
        {
            get
            {
                return @" <DataTemplate x:Name=""LayoutRoot"" " + CommonReference + "</DataTemplate>";
            }
        }

        private string hierarchicaldatatemplate
        {
            get
            {
                return @" <telerik:HierarchicalDataTemplate ItemsSource=""{Binding MetadataTreeNodesList}"" " + CommonReference + "</telerik:HierarchicalDataTemplate>";
            }
        }
        #endregion
    }
}

MyBusinessObject.cs

 

 

 public class MyBusinessObject : INotifyPropertyChanged
    {
        public MyBusinessObject(string continent, int selectedCountry)
        {
            this.Continent = continent;
            this.SelectedCountry = selectedCountry;
        }

        private string _continent;
        private int _selectedCountry;

        public string Continent
        {
            get { return _continent; }
            set { _continent = value; OnPropertyChanged("Continent"); }
        }

        public int SelectedCountry
        {
            get { return _selectedCountry; }
            set { _selectedCountry=value; OnPropertyChanged("SelectedCountry");}
        }

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (string.IsNullOrEmpty(propertyName))
            {
                return;
            }
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
    }

Set TreeDragDropGrid.xaml as the startup page.

First Drag the contnent 'Europe' to gridview(first row) and change the country to UK in the country combobox column, next drag 'Asia' and now you will see the selected country(UK) in first row set to blank.

Le t me know if you have any questions.

Thanks,
Anwar

[Pavel Pavlov]

Hello anwar,

Please excuse me for the late answer. We are preparing the new release and are a bit short of resources right now.

I have modified the ComboBoxContainer class from the sample in order to add some persistence logic and store the selected values.

You may find the updated project attached.

All the best,
Pavel Pavlov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.