This is a migrated thread and some comments may be shown as answers.

GridViewDataColumn Background with color enumeration and selected row

8 Answers 337 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 27 Mar 2009, 06:43 PM

Was trying to do a quick spike that changed the Background of the grid and in haste I used a named color instead of the hex value

<telerik:GridViewDataColumn Background="Black" IsReadOnly="True"   
DataType="{x:Null}" HeaderText="Company Name" UniqueName="CompanyName" /> 

instead of

 

<telerik:GridViewDataColumn Background="#10000000" IsReadOnly="True"   
DataType="{x:Null}" HeaderText="Company Name" UniqueName="CompanyName" /> 

and the selected row was no longer visible.  Finding the hex value for Black is not difficult, so if you bump into this issue that is the workaround.  It seems the issue is related to the Alpha portion of the color.  The named colors have alpha set to Opaque, so you must set the alpha channel to something less than FF.  I'm currently using E5 (90%) which makes a very faint highlight.

 

 

8 Answers, 1 is accepted

Sort by
0
Hristo Deshev
Telerik team
answered on 30 Mar 2009, 10:28 AM
Hi Jon,

That's a cool technique to achieve a highlight effect for the cells in a column. Thanks for sharing it!

All the best,
Hristo Deshev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Jon
Top achievements
Rank 1
answered on 30 Mar 2009, 09:52 PM
I borrowed the code from the C# Examples and modified it to show the issue as well as another problem I'll address in a separate posting.  Notice that the selected row is visible using ColorThree and ColorFour, but not visible using ColorOne and ColorTwo.  The only difference is the alpha channel of Three and Four are 50.  Wouldn't it be better if the GridViewDataColumn modified the Named Color to the alpha modified version by default?

<Window x:Class="ThemeIssue.Window1" 
    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:GridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView" 
    Title="Dynamic Resource Troubles">  
<Grid> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="50" /> 
            <RowDefinition /> 
        </Grid.RowDefinitions> 
        <StackPanel Grid.Row="0" Margin="5" 
                    Orientation="Horizontal"   
                    Background="{DynamicResource ColorOne}" 
                    HorizontalAlignment="Center">  
            <TextBlock Name="TextBlock1"   
                       Margin="5" 
                       VerticalAlignment="Center" 
                       Background="{DynamicResource ColorTwo}" 
                       Foreground="{DynamicResource ColorOne}" /> 
            <Button Content="Light" Click="butLight_Click" Margin="5"/>  
            <Button Content="Dark" Click="butDark_Click" Margin="5"/>  
        </StackPanel> 
     
        <telerik:RadGridView Name="RadGridView1" DataLoadMode="Asynchronous" Grid.Row="1" ColumnsWidthMode="Auto" 
                   IsReadOnly="True" AutoGenerateColumns="False">  
            <telerik:RadGridView.Columns> 
                <telerik:GridViewDataColumn   
                    HeaderText="ID"   
                    Background="{DynamicResource ColorTwo}" 
                    DataMemberPath="ID" /> 
                <telerik:GridViewDataColumn   
                    Width="*"   
                    HeaderText="Name"   
                    Background="{DynamicResource ColorOne}" 
                    DataMemberPath="Name" /> 
                <telerik:GridViewDataColumn   
                    DataFormatString="{}{0:c2}"   
                    HeaderText="UnitPrice"   
                    Background="{DynamicResource ColorThree}" 
                    DataMemberPath="UnitPrice" /> 
                <telerik:GridViewDataColumn   
                    DataFormatString="{}{0:d}"   
                    HeaderText="Date"   
                    Background="{DynamicResource ColorFour}" 
                    DataMemberPath="Date" /> 
                <telerik:GridViewDataColumn HeaderText="Discontinued" DataMemberPath="Discontinued">  
                    <telerik:GridViewDataColumn.CellStyle> 
                        <Style TargetType="GridView:GridViewCell">  
                            <Setter Property="Template">  
                                <Setter.Value> 
                                    <ControlTemplate TargetType="GridView:GridViewCell">  
                                        <Border BorderThickness="{TemplateBinding BorderThickness}"   
                                            BorderBrush="{TemplateBinding BorderBrush}"   
                                            Background="{TemplateBinding Background}">  
                                            <CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" 
                                                  IsChecked="{Binding Discontinued}" IsEnabled="False" /> 
                                        </Border> 
                                    </ControlTemplate> 
                                </Setter.Value> 
                            </Setter> 
                        </Style> 
                    </telerik:GridViewDataColumn.CellStyle> 
                </telerik:GridViewDataColumn> 
            </telerik:RadGridView.Columns> 
        </telerik:RadGridView> 
    </Grid> 
</Window> 
 

using System;  
using System.Collections.Generic;  
using System.ComponentModel;  
using System.Linq;  
using System.Windows;  
using System.Windows.Media;  
 
namespace ThemeIssue  
{  
    /// <summary> 
    /// Interaction logic for Window1.xaml  
    /// </summary> 
    public partial class Window1  
    {  
        private DateTime start;  
        private ResourceDictionary lightColors = new ResourceDictionary();  
        private ResourceDictionary darkColors = new ResourceDictionary();  
 
        public Window1()  
        {  
            CreateResourceDictionaries();  
            Resources.MergedDictionaries.Add(lightColors);  
 
            InitializeComponent();  
 
            start = DateTime.Now;  
 
            Loaded += Example_Loaded;  
 
            RadGridView1.DataLoaded += RadGridView1_DataLoaded;  
            RadGridView1.SortDescriptions.PropertyChanged += ResetTime;  
            RadGridView1.GroupDescriptions.PropertyChanged += ResetTime;  
        }  
 
        private void CreateResourceDictionaries()  
        {  
            var light = new SolidColorBrush(Colors.Yellow);  
            var dark = new SolidColorBrush(Colors.Green);  
            var lightAlpha = new SolidColorBrush(ModifyAlpha(light, 50));  
            var darkAlpha = new SolidColorBrush(ModifyAlpha(dark, 50));  
 
            lightColors.Add("ColorOne", dark);  
            lightColors.Add("ColorTwo", light);  
            lightColors.Add("ColorThree", darkAlpha);  
            lightColors.Add("ColorFour", lightAlpha);  
 
            darkColors.Add("ColorOne", light);  
            darkColors.Add("ColorTwo", dark);  
            darkColors.Add("ColorThree", lightAlpha);  
            darkColors.Add("ColorFour", darkAlpha);  
        }  
 
        private Color ModifyAlpha(SolidColorBrush light, byte alpha)  
        {  
            Color lightlightModified = light.Color;  
            lightModified.A = alpha;  
            return lightModified;  
        }  
 
        private void ResetTime(object sender, PropertyChangedEventArgs e)  
        {  
            start = DateTime.Now;  
        }  
 
        private void Example_Loaded(object sender, RoutedEventArgs e)  
        {  
            RadGridView1.ItemsSource = new MyBusinessObjects().GetData(100);  
        }  
 
        private void RadGridView1_DataLoaded(object sender, EventArgs e)  
        {  
            RadGridView1.FilterDescription.PropertyChanged += FilterDescription_PropertyChanged;  
            TextBlock1.Text = String.Format("Total time to load data: {0} ms",  
                                            Math.Round((DateTime.Now - start).TotalMilliseconds));  
        }  
 
        private void FilterDescription_PropertyChanged(object sender, PropertyChangedEventArgs e)  
        {  
            RadGridView1.FilterDescription.PropertyChanged -FilterDescription_PropertyChanged;  
            ResetTime(sender, e);  
        }  
 
        private void butLight_Click(object sender, RoutedEventArgs e)  
        {  
            Resources.MergedDictionaries.Clear();  
            Resources.MergedDictionaries.Add(lightColors);  
        }  
 
        private void butDark_Click(object sender, RoutedEventArgs e)  
        {  
            Resources.MergedDictionaries.Clear();  
            Resources.MergedDictionaries.Add(darkColors);  
        }  
    }  
 
    public class MyBusinessObjects  
    {  
        private string[] names = new string[]  
                                     {  
                                         "Côte de Blaye", "Boston Crab Meat",  
                                         "Singaporean Hokkien Fried Mee", "Gula Malacca", "Rogede sild",  
                                         "Spegesild", "Zaanse koeken", "Chocolade", "Maxilaku", "Valkoinen suklaa"  
                                     };  
 
        private double[] prizes = new double[]  
                                      {  
                                          23.2500, 9.0000, 45.6000, 32.0000,  
                                          14.0000, 19.0000, 263.5000, 18.4000, 3.0000, 14.0000  
                                      };  
 
        private DateTime[] dates = new DateTime[]  
                                       {  
                                           new DateTime(2007, 5, 10), new DateTime(2008, 9, 13),  
                                           new DateTime(2008, 2, 22), new DateTime(2009, 1, 2),  
                                           new DateTime(2007, 4, 13),  
                                           new DateTime(2008, 5, 12), new DateTime(2008, 1, 19),  
                                           new DateTime(2008, 8, 26),  
                                           new DateTime(2008, 7, 31), new DateTime(2007, 7, 16)  
                                       };  
 
        private bool[] bools = new bool[] {true, false, true, false, true, false, true, false, true, false};  
 
        public IEnumerable<MyBusinessObject> GetData(int maxItems)  
        {  
            var rnd = new Random();  
 
            return from i in Enumerable.Range(0, maxItems)  
                   select new MyBusinessObject(i, names[rnd.Next(9)], prizes[rnd.Next(9)],  
                                               dates[rnd.Next(9)], bools[rnd.Next(9)]);  
        }  
 
        public class MyBusinessObject  
        {  
            private int id;  
            private string name;  
            private double unitPrice;  
            private DateTime date;  
            private bool discontinued;  
 
            public MyBusinessObject(int ID, string Name, double UnitPrice, DateTime Date,  
                                    bool Discontinued)  
            {  
                this.ID = ID;  
                this.Name = Name;  
                this.UnitPrice = UnitPrice;  
                this.Date = Date;  
                this.Discontinued = Discontinued;  
            }  
 
            public int ID  
            {  
                get { return id; }  
                set { id = value; }  
            }  
 
            public string Name  
            {  
                get { return name; }  
                set { name = value; }  
            }  
 
            public double UnitPrice  
            {  
                get { return unitPrice; }  
                set { unitPrice = value; }  
            }  
 
            public DateTime Date  
            {  
                get { return date; }  
                set { date = value; }  
            }  
 
            public bool Discontinued  
            {  
                get { return discontinued; }  
                set { discontinued = value; }  
            }  
        }  
    }  
}  
 



0
Kalin Milanov
Telerik team
answered on 01 Apr 2009, 06:55 PM
Hi Jon Masters,

We are aware that the grid does not show MouseOver and Selection states when you set the Background of the DataColumn to a non-transparent color. 

Following your suggestion (and sample code) I am sending you a slight modification which will let you set a NamedColor and apply a transparency to it. Here it is:

XAML
<telerik:GridViewDataColumn x:Name="Col1"   
                    HeaderText="ID"    
                    Background="Red"  
                    DataMemberPath="ID" /> 

C#    
Brush MyColor = Col1.Background; 
Col1.Background = new SolidColorBrush(ModifyAlpha((SolidColorBrush)MyColor, 50)); 

As for your suggestion: We would like to provide customization options and let you set opaque colors to the columns without losing the MouseOver and Selected states. We are keeping high hopes that this feature will be available in one of our upcoming releases. 

Thank you for your suggestion and your interest in our controls.

Kind regards,
Kalin Milanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Gert
Top achievements
Rank 1
answered on 14 Mar 2019, 02:12 PM

Hi and thanks for this gread solution! It solves my problem.

On my attached pic you can see that I lost als behaviors on column 2 and partly on col 3,4.

On the other cols I did the hack with the alpa chanel. 

So after about 10 years is there an easier way to get this behavior?

0
Gert
Top achievements
Rank 1
answered on 14 Mar 2019, 02:13 PM
[quote]Gert said:

Hi and thanks for this gread solution! It solves my problem.

On my attached pic you can see that I lost als behaviors on column 2 and partly on col 3,4.

On the other cols I did the hack with the alpa chanel. 

So after about 10 years is there an easier way to get this behavior?

[/quote]
0
Dinko
Telerik team
answered on 19 Mar 2019, 11:20 AM
Hello Gert,

Thank you for the attached image.

I have double check this behavior on my side using the latest version of our controls. Can you specify which version are you referencing in your project? If it is not the latest one can you try it and let me know if this behavior occurs on your side.

Regards,
Dinko
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Gert
Top achievements
Rank 1
answered on 19 Mar 2019, 01:18 PM

We are using 2018.2.515.45.

I hope you did not missunderstood my first post..!? The alpha-hack works well on all column! 

That I also tried before on column 2,3,4 was like this:

 

<Window.Resources>    
 <Style x:Key="MyCellStyle" TargetType="telerik:GridViewCell">
    <Setter Property="Background" Value="Red"/>
 </Style>
</Window.Resources>
 
<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" CellStyle="{StaticResource MyCellStyle}"/>

 

or

 

https://docs.telerik.com/devtools/wpf/controls/radgridview/styles-and-templates/styling-cell

 

But than I was loosing the selection and mouse over behavior.

 

BR

Gert

0
Dinko
Telerik team
answered on 22 Mar 2019, 10:41 AM
Hello Gert,

Thank you for the additional details. I now understand what you mean. This behavior comes from the fact that setting the Background property of the cell will set the Background property of the Border element on top of the cell. This Border is on top of the selection row Border. At this moment I can't suggest you different workaround from the one which you are currently using.

Regards,
Dinko
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
GridView
Asked by
Jon
Top achievements
Rank 1
Answers by
Hristo Deshev
Telerik team
Jon
Top achievements
Rank 1
Kalin Milanov
Telerik team
Gert
Top achievements
Rank 1
Dinko
Telerik team
Share this question
or