GridViewComboBoxColumn Background Binding Support

[Monte Baker]

I am attempting to change the Background color of a GridViewComboBoxColumn based on the selected value.  I have attempted to do this via inline datatemplate, external datatemplate, background binding and style.  the only success if have had is with external data template, however the column shows up black when the gridview is loaded.

Can you please advise me as to the best method of accomplishing this (I would prefer to use the template as it would allow me to display more than one value, but I am not sure if this is possible do to my application using async ado.net data services).

I am including the code from my sample project below.

App.xaml

 

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:ColorConvertCLS="clr-namespace:ComboBoxInCellTemplateSample"
             x:Class="ComboBoxInCellTemplateSample.App"
             >
    <Application.Resources>
        <ColorConvertCLS:StringtoColorConverter x:Key="colorConverter"/>
    </Application.Resources>
</Application>

MainPage.xaml

 

 

<UserControl
x:Class="ComboBoxInCellTemplateSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
xmlns:input="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:local="clr-namespace:ComboBoxInCellTemplateSample"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <local:ComboBoxSource x:Key="ComboSource" />
        </Grid.Resources>
        <telerik:RadGridView x:Name="MyRadGridView" AutoGenerateColumns="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding ID}" />
                <telerik:GridViewComboBoxColumn MinWidth="100"
                    Header="Standard"
                    UniqueName="1"
                    DataMemberBinding="{Binding CountryID}"
                    SelectedValueMemberPath="ID"
                    DisplayMemberPath="Name"
                    ItemsSourceBinding="{Binding Path=Countries, Source={StaticResource ComboSource}}"
                    />
                <telerik:GridViewDataColumn
                    Header="InLine Template"
                    DataMemberBinding="{Binding CountryID}" >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <input:RadComboBox
                                SelectedValue="{Binding CountryID}"
                                DisplayMemberPath="Name"
                                SelectedValuePath="ID"
                                ItemsSource="{Binding Path=Countries, Source={StaticResource ComboSource}}"
                                Background="{Binding Hex, Converter={StaticResource colorConverter}}"
                                />
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewComboBoxColumn Width="200"
                    Header="Style"
                    UniqueName="1"
                    DataMemberBinding="{Binding CountryID}"
                    SelectedValueMemberPath="ID"
                    DisplayMemberPath="Name"
                    ItemsSourceBinding="{Binding Path=Countries, Source={StaticResource ComboSource}}"
                    >
                    <telerik:GridViewComboBoxColumn.CellStyle>
                        <Style TargetType="telerikGridView:GridViewCell">
                            <Setter Property="Background" Value="#FFCCE2F0" />
                            <!--Setter Property="Background" Value="{Binding Hex, Converter={StaticResource colorConverter}}" /-->
                            <!--Setter Property="Background" Value="{Binding Path=Hex, Converter={StaticResource colorConverter}}" /-->
                        </Style>
                    </telerik:GridViewComboBoxColumn.CellStyle>
                </telerik:GridViewComboBoxColumn>
                <telerik:GridViewComboBoxColumn Width="200"
                    Header="Background"
                    UniqueName="1"
                    DataMemberBinding="{Binding CountryID}"
                    SelectedValueMemberPath="ID"
                    DisplayMemberPath="Name"
                    ItemsSourceBinding="{Binding Path=Countries, Source={StaticResource ComboSource}}"
                    >
                    <telerik:GridViewComboBoxColumn.Background>
                        <SolidColorBrush Color="#FFCCE2F0" />
                        <!--SolidColorBrush Color="{Binding Hex}" /-->
                    </telerik:GridViewComboBoxColumn.Background>
                </telerik:GridViewComboBoxColumn>
                <telerik:GridViewComboBoxColumn Width="200"
                    Header="External Template"
                    UniqueName="ExternalTemplate"
                    DataMemberBinding="{Binding CountryID}"
                    SelectedValueMemberPath="ID"
                    DisplayMemberPath="Name"
                    ItemsSourceBinding="{Binding Path=Countries, Source={StaticResource ComboSource}}"
                    >
                    <telerik:GridViewComboBoxColumn.CellTemplate>
                        <DataTemplate >
                            <local:ScheduleComboTemplate Width="200" Height="Auto"  />
                        </DataTemplate>
                    </telerik:GridViewComboBoxColumn.CellTemplate>
                    <telerik:GridViewComboBoxColumn.CellEditTemplate>
                        <DataTemplate >
                            <local:ScheduleComboTemplate Width="200" Height="Auto"  />
                        </DataTemplate>
                    </telerik:GridViewComboBoxColumn.CellEditTemplate>
                </telerik:GridViewComboBoxColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</UserControl>

MainPage.Xaml.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.Data;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.Text;
using System.Windows.Media.Imaging;
using Telerik.Windows.Data;
using System.ComponentModel;
using System.Collections;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.GridView;
using System.Globalization;


namespace ComboBoxInCellTemplateSample
{
    public class StringtoColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string s = value.ToString();
            //string s = "#FFF3EEEA";
            s = s.Remove(0, 1);
            var a = System.Convert.ToByte(s.Substring(0, 2), 16);
            var r = System.Convert.ToByte(s.Substring(2, 2), 16);
            var g = System.Convert.ToByte(s.Substring(4, 2), 16);
            var b = System.Convert.ToByte(s.Substring(6, 2), 16);
            var color = Color.FromArgb(a, r, g, b);
            if (color != null)
            {
                return new SolidColorBrush(color);
            }
            return value;
        }
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return value;
        }
    }
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            List<Location> locations = new List<Location>();
            locations.Add(new Location() { ID = 1, CountryID = 3 });
            locations.Add(new Location() { ID = 2, CountryID = 2 });
            locations.Add(new Location() { ID = 3, CountryID = 1 });
            this.MyRadGridView.ItemsSource = locations;
            //((GridViewComboBoxColumn)this.MyRadGridView.Columns["ExternalTemplate"]).ItemsSource = ComboBoxSource.GetCountries();
        }
    }


    public class Location
    {
        public int ID { get; set; }
        public int CountryID { get; set; }
    }

    public class Country
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Hex { get; set; }
    }
}

ComboBoxSource.cs

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


namespace ComboBoxInCellTemplateSample
{
    public class ComboBoxSource
    {

        private List<Country> countries;
        public List<Country> Countries
        {
            get
            {
                if (this.countries == null)
                {

                    this.countries = new List<Country>();
                    countries.Add(new Country() { ID = 1, Name = "USA", Hex = "#FFD7E1E4" });
                    countries.Add(new Country() { ID = 2, Name = "Italy", Hex = "#FFB9D0D0" });
                    countries.Add(new Country() { ID = 3, Name = "Germany", Hex = "#E66F7070" });
                }

                return this.countries;
            }
        }
        public static List<Country> GetCountries()
        {
            List<Country> Countries = new List<Country>();
            Countries.Add(new Country() { ID = 1, Name = "USA", Hex = "#FFD7E1E4" });
            Countries.Add(new Country() { ID = 2, Name = "Italy", Hex = "#FFB9D0D0" });
            Countries.Add(new Country() { ID = 3, Name = "Germany", Hex = "#E66F7070" });
            return Countries;
        }
    }
}

ScheduleComboTemplate.xaml

<UserControl x:Class="ComboBoxInCellTemplateSample.ScheduleComboTemplate"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
    Width="Auto" Height="20">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <DataTemplate x:Key="multiColumntemplate">
                <StackPanel Margin="0" Background="{Binding Hex, Converter={StaticResource colorConverter}}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Path=ID}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="9"  />
                        <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Path=Name}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="9"  />
                        <TextBlock Grid.Row="2" Grid.Column="0" Text="{Binding Path=Hex}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="9"  />
                    </Grid>
                </StackPanel>
            </DataTemplate>
        </Grid.Resources>
        <telerikInput:RadComboBox x:Name="RadCombo1" Margin="0" HorizontalAlignment="Stretch"
            Loaded="MultiColumnCombo_Loaded"
            ItemsSource="{Binding Path=Countries, Source={StaticResource ComboSource}}"
            ItemTemplate="{StaticResource multiColumntemplate}" />
    </Grid>
</UserControl>

ScheduleComboTemplate.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.GridView;


namespace ComboBoxInCellTemplateSample
{
    public partial class ScheduleComboTemplate : UserControl
    {
        public ScheduleComboTemplate()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MultiColumnCombo_Loaded);
        }

        void MultiColumnCombo_Loaded(object sender, RoutedEventArgs e)
        {
            GridViewComboBoxColumn parentColumn = this.ParentOfType<GridViewCell>().Column as GridViewComboBoxColumn;
            this.RadCombo1.ItemsSource = ComboBoxSource.GetCountries();
            this.RadCombo1.SelectedValuePath = parentColumn.SelectedValueMemberPath;
            this.RadCombo1.SelectedValue = this.ParentOfType<GridViewCell>().Value;
        }
    }
}

[Pavel Pavlov]

Hello Monte Baker,

I will gladly prepare a working sample for you . However I will need to know the exact version of the Telerik dlls you are using as lately the GridViewComboBoxColumn logic and templates were subject to some changes.

Regards,
Pavel Pavlov
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Monte Baker]

Below are the dll files i am currently using, I am more than willing to upgrade the solution to SL4 and the latest telerik dlls if this will ease functionality

File:   Telerik.Windows.Controls
Product Version: 2010.1.0309.1030
File Version:  2010.1.309.1030

[Pavel Pavlov]

Hi Monte Baker,

I was trying to prepare a sample for you but the requirement  for multicolumn representation seemed to exceed the built in capabilities of the ComboBox column.
Your feedback  made us consider extending  the API of the  combo column so that it could allow easy setting of the template and item template  in both display and edit mode.

This API will be available in our very next internal build ( Fri, 28)  - within less than 5 days.  

I will leave this thread open and I will send you a sample ( with the updated dlls)  as soon as we have the binaries ready.

Meanwhile,  in case time is critical - let me know. There is a way to achieve such functionality with a regular DataColumn with a customized CellTemplate. We can put a ComboBox inside the cell template and set the required templates and styles.
As your feedback has triggered some improvements to our API, I am updating your Telerik points.

All the best,
Pavel Pavlov
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Pavel Pavlov]

Hi Monte Baker,

A quick update -  We have added an ItemTemplate property  to the ComboBoxColumn.This should allow much easier completion of your scenario. Tomorrow there is a Service Pack scheduled, which will contain the updated API .  In case you need assistance with the new dlls, do not hesitate to contact us.

All the best,
Pavel Pavlov
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Monte Baker]

Hi Pavel Pavlov,

Thank you for your update, I would appreciate some basic guidance in how (from were) I should download the update and how to install it, but even more important for me would be a sample of how the new code should look to accomplish my objectives.

Thank you,

Monte Baker

[Pavel Pavlov]

Hi Monte Baker,

We are in the process of uploading  the new binaries.Later today or tomorrow the fresh dlls will be available for download in your client.net account.  I will leave the thread open and the moment the release is live , I will send you the sample cooked with the fresh binaries.

Sincerely yours,
Pavel Pavlov
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Pavel Pavlov]

Hello Monte Baker,

The attached sample demonstrates both  - conditional background formatting depending on selected value and multicolumn layout for the combo column with the help of the ItemTemplate property.

It is a VS 2010 /SL 4 project.

Regarding the new dlls  - they should be available in your Client.net account.

All the best,
Pavel Pavlov
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.