RadGridView with colorpicker?

[sivakanth]

Hello Telerik Team,
                                   I have a doupt in radcolorpicker with radgridview.
We are fan of telerik controls.
         In my last project our master page contains 5 fields including radcolorpicker.our aim is the row details are shown in radgridview with diffrent color.The color value is user gives when adding each  entries.

     Here i am binding in XAML below:-

<Label Content="Color" Height="24"  Margin="5,8,191,0" Name="label24" FontSize="11" Grid.Column="1" Grid.Row="3" VerticalAlignment="Top" />
<telerik:RadColorPicker SelectedColor="{Binding Path=Colour,Mode=TwoWay, UpdateSourceTrigger=LostFocus, NotifyOnValidationError=True, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" Height="24" Margin="124,8,0,0" Name="rclrColour" TabIndex="24" FontSize="11" Grid.Column="1" Grid.Row="3" Width="39" />

The color value is stored in database as hexadecimal value.

i am using RowLoaded event for display color details.

private void rgrdCompanyViewAll_RowLoaded(object sender, Telerik.Windows.Controls.GridView.RowLoadedEventArgs e)
        {
            var row = e.Row as GridViewRow;
            if (row != null)
            {
                    var cell = ((CompanyBO)e.Row.Item).Colour;
                    if (cell != null)
                    {
                        var value = cell;
                        e.Row.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString(value.ToString()));
                    }
            }
        }

Here is my QUESTION:-
Every thing is fine.But the colors display in radgridview are changed each and every minute when i am using scroll bar(vertical).

i make mistake at anywhere?

Pls suggest me?

[Tina Stancheva]

Hi sivakanth,

I am not sure if I understand your issue correctly. Can you please elaborate on how the RadColorPicker controls the Row's Background color?

Also, if you can modify the attached project to reproduce the issue, we will be able to further investigate it. Thank you in advance.

All the best,
Tina Stancheva
the Telerik team

[sivakanth]

Hello Telerik Team,
                               Still i didn't get correct solution for this issue.I will explain You in detail.

I have a single Customer Entry form.Its contains 3 fields.Names are CompanyID,CompanyName,Color.
and only one Add button.Whenever customer give the 3 values then enter Add Button.That time the values are stored in database.
in the entry form i have one radgrid Also.The radGridview display all the datas from database.here i want to set background color in each and every row.The color value user given when adding entries. so my result is retrive all datas from database then display radGridView with diffrent color in every row. 

Here i am using RowLoaded event and apply background setting.
But it display wrong color.when i add more than 20 entries i got this problem.Particularly i am using scroll bar(vertical) to up and down.

I will attach the smple below .Give me correct solution.  

This is my MainWindow Xaml code:

<Window x:Class="ColorPickerSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="563" Width="850">
    <Grid>
        <GroupBox Header="Company Details" Height="103" Margin="12,6,12,0" Name="groupBox1" VerticalAlignment="Top" FontSize="14">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Label Content="Company ID" Height="24" Margin="8,7,0,0" Name="label1" FontSize="11" VerticalAlignment="Top" HorizontalAlignment="Left" Width="88" />
                <Label Background="#FFFFFFCC" Content="{Binding CompanyID,Mode=TwoWay}" Height="24" Margin="118,7,64,0" Name="lblCompanyID" FontSize="11" VerticalAlignment="Top" />
                <Label Content="Company Name" Height="24" Margin="5,7,0,0" Name="label2" FontSize="11" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="110" />
                <TextBox Margin="125,7,8,0" Text="{Binding Path=CompanyName}" Height="24" MaxLength="200" Name="txtCompanyName" TabIndex="1" FontSize="11" Grid.Column="1" VerticalAlignment="Top" />
                <Label Content="Color" Height="24"  Margin="29,8,167,0" Name="label24" FontSize="11" Grid.Column="2" VerticalAlignment="Top" />
                <telerik:RadColorPicker SelectedColor="{Binding Path=Colour,Mode=TwoWay, UpdateSourceTrigger=LostFocus, NotifyOnValidationError=True, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" Height="24" Margin="210,8,0,0" Name="rclrColour" TabIndex="24" FontSize="11" Grid.Column="2" Width="39" />
            </Grid>
        </GroupBox>
        <telerik:RadGridView IsReadOnly="True" AutoGenerateColumns="False" CanUserFreezeColumns="False"  CanUserSortColumns="False" Margin="206,144,343,231" Name="rgrdCompanyViewAll" ShowGroupPanel="False" RowLoaded="rgrdCompanyViewAll_RowLoaded" TabIndex="25">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Path=CompanyID}" Header="Company ID" Width="100" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Path=CompanyName}" Header="Company Name" Width="150" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Path=Colour}" Header="Colour" Width="120"/>
        </telerik:RadGridView.Columns>
        </telerik:RadGridView>
        <Button Content="Save" Height="23" HorizontalAlignment="Left" Margin="338,115,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
    </Grid>
</Window>

My BO is:

class CompanyBO
    {
        private int? _companyID;
        private string _companyName;
        private string _colour;


        public int? CompanyID
        {
            get { return _companyID; }
            set { _companyID = value; }
        }
        public string CompanyName
        {
            get { return _companyName; }
            set { _companyName = value; }
        }
        public string Colour
        {
            get { return _colour; }
            set { _colour = value; }
        }

    }

My DAL is:

class CompanyDAL
    {
        Meenakshi_PawnEntities db;
        public CompanyDAL()
        {
            db = new Meenakshi_PawnEntities();
        }

        public void Insert(CompanyBO companyEntity)
        {
                Company tableEntity = new Company();
                tableEntity.CompanyName = companyEntity.CompanyName;
                tableEntity.Colour = companyEntity.Colour;
                db.AddToCompanies(tableEntity);
                db.SaveChanges();


        }



        public IQueryable<CompanyBO> FetchAll()
        {
            var companyBOCollection = from c in db.Companies
                                          select new CompanyBO
                                          {
                                              CompanyID = c.CompanyID,
                                              CompanyName = c.CompanyName,

                                              Colour=c.Colour
                                          };
                return companyBOCollection;

         }

    }

My MainWindow.Xaml.cs is:

 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            CompanyBO companyEntity = new CompanyBO();
            this.DataContext = companyEntity;
            this.txtCompanyName.Focus();
            this.Load();

        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            CompanyDAL companyDataEntity = new CompanyDAL();
            companyDataEntity.Insert(this.DataContext as CompanyBO);
            this.Load();
            MessageBox.Show("Company details are added successfully");
            Refresh();
        }

        public void Load()
        {
            CompanyDAL companyDataEntity = new CompanyDAL();
            this.rgrdCompanyViewAll.ItemsSource = companyDataEntity.FetchAll();
        }

        public void Refresh()
        {
            CompanyBO companyEntity = new CompanyBO();
            this.DataContext = companyEntity;
        }
        private void rgrdCompanyViewAll_RowLoaded(object sender, Telerik.Windows.Controls.GridView.RowLoadedEventArgs e)
        {
            var row = e.Row as GridViewRow;
            if (row != null)
            {
                var cell = ((CompanyBO)e.Row.Item).Colour;
                if (cell != null)
                {
                    var value = cell;
                    e.Row.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString(value.ToString()));
                }
            }
        }
    }

I want to display GridView Row colors based on database values.Not overlap other colors when i am using Scrolling(Vertical).

[Pavel Pavlov]

Hi sivakanth,

I think I found the problem.  Can you please try binding the background color, instead of setting it.

It should be something like :
private void rgrdCompanyViewAll_RowLoaded(object sender, Telerik.Windows.Controls.GridView.RowLoadedEventArgs e)

        {

            var row = e.Row as GridViewRow;

            if (row != null)

            {

                var cell = ((CompanyBO)e.Row.Item).Colour;

                if (cell != null)

                {

                    var value = cell; 

                    e.Row.SetBinding(GridViewRow.BackgroundProperty,new Binding("Colour"){ Converter = .....};

                }

            }

        }

* Do not set the source for the binding , just leave it to take the value form its DataContext( the item) .

In case you find troubles implementing this, just let me know and I will give you a small sample.

All the best,
Pavel Pavlov
the Telerik team

[sivakanth]

Hello Pavel Pavlov

        Thank you for your nice reply.
But i didn't Understand?
Could u please post sample solution?