How to inherit the red color validation on Custom GridViewDataColumn ?

[Devid]

I have defined a custom TimePickerColum. In my RadGridView I have Validation which when something is not valid shows the row as red and marks the cell which is invalid with a red marker which shows a tooltip when hoovered over.

 

01.public class TimePickerColumn: GridViewDataColumn
02.    {
03.        private Binding timePickerForeground;
04.
05.        private readonly NullToBrushConverter nullToBrushConverter = new NullToBrushConverter();
06.
07.        public TimePickerColumn()
08.        {
09.            base.IsReadOnly = true;
10.        }
11.
12.        public Binding TimePickerBackground { get; set; }
13.
14.        public Binding TimePickerForeground
15.        {
16.            get => this.timePickerForeground;
17.            set
18.            {
19.                value.Converter = this.nullToBrushConverter;
20.                this.timePickerForeground = value;
21.            }
22.        }
23.
24.        public TextAlignment TimePickerTextAlinment { get; set; }
25.
26.        public override FrameworkElement CreateCellElement(GridViewCell cell, object dataItem)
27.        {
28.            if (!(cell.Content is RadTimePicker timePicker))
29.            {
30.                timePicker = new RadTimePicker();
31.                timePicker.SetBinding(RadTimePicker.SelectedValueProperty, DataMemberBinding);
32.                timePicker.SetBinding(RadDatePicker.IsReadOnlyProperty, IsReadOnlyBinding);
33.                timePicker.SetBinding(RadTimePicker.BackgroundProperty, TimePickerBackground);
34.                timePicker.SetBinding(RadTimePicker.ForegroundProperty, TimePickerForeground);
35.                timePicker.TextAlignment = TimePickerTextAlinment;
36.
37.                cell.Padding = new Thickness(0);
38.            }
39.
40.            if (timePicker.DataContext != dataItem)
41.            {
42.                timePicker.DataContext = dataItem;
43.            }
44.
45.            return timePicker;
46.        }
47.    }

The Problem is of visual nature. When a cell other then the time picker cell is invalid, the row turns red but only the TimePicker cell in the row does not turn red. How can I fix this problem ? What am I missing in my TimePickerColumn implementation ? 

If the time picker cell is invalid then it will turn red with the whole row (which is correct).

[Devid]

Any help ? 
What I am looking for is just to show the red validation color on the Custom RadGridView Columns if a neighbor cell is invalid.
As it is now the row shows as invalid but the custom columns are not red colored

[Dilyan Traykov]

Hello Devid,

Thank you for the provided image and code snippet.

Can you please clarify what type of validation you're performing - are you using data annotations, the IDataErrorInfo or INotifyDataErrorInfo interfaces or are you using the RowValidating event?

I've prepared a small sample project to demonstrate how you can show the red validation border, but this only demonstrates how to display the error when it comes from the same column. If you would provide more details on your current setup and how you mark all cells as invalid, I'd be happy to suggest a viable solution for your scenario. If possible, please provide a link to a small sample project or more code snippets so that I can get a better understanding.

I will be looking forward to your reply.

Regards,
Dilyan Traykov
Progress Telerik

[Devid]

[quote]Dilyan Traykov said:Hello Devid,

Thank you for the provided image and code snippet.

Can you please clarify what type of validation you're performing - are you using data annotations, the IDataErrorInfo or INotifyDataErrorInfo interfaces or are you using the RowValidating event?

I will be looking forward to your reply.

Regards,
Dilyan Traykov
Progress Telerik [/quote]

[Devid]

Sorry that I forgot to mention that, I am using INotifyDataErrorInfo Interface

[Devid]

So here is what I am doing. I have a class called ShowQueueCellValue which implements the INotifyDataErrorInfo interface. This is my custom cell of the RadGridView. Below I am showing you just a part of the class:

001.public object Value
002.        {
003.            get { return this.value; }
004.            set
005.            {
006.                bool hasChanged = value != this.value;
007.
008.                this.value = value;
009.
010.                if (hasChanged && Initialized)
011.                {
012.                    if (Column.DestinationQueueField > 0)
013.                    {
014.                        ReplacementEntity.Properties[$"F{(int)Column.DestinationQueueField:00}"] = GetValueForQueue();
015.
016.                        foreach (var cell in GridRow)
017.                        {
018.                            //if (cell != this)
019.                            {
020.                                cell.CheckChanges(Column.DestinationQueueField, ReplacementEntity);
021.                            }
022.                        }
023.                    }
024.                    OnPropertyChanged();
025.                }
026.            }
027.        }
028.
029.public string ErrorMessage
030.        {
031.            get => this.errorMessage;
032.            set
033.            {
034.                this.errorMessage = value;
035.                IsValid = string.IsNullOrWhiteSpace(value) || value == "0";
036.            }
037.        }
038.
039.        public bool IsValid
040.        {
041.            get => isValid;
042.            set
043.            {
044.                if (value != isValid)
045.                {
046.                    isValid = value;
047.                    OnErrorsChanged("Value");
048.                    this.viewModel.OkCommand.RaiseCanExecuteChanged();
049.                }
050.            }
051.        }
052.
094.public IEnumerable GetErrors(string propertyName)
095.        {
096.            if (!IsValid && propertyName == "Value")
097.            {
098.                yield return ErrorMessage;
099.            }
100.        }
101.
102.        public bool HasErrors => !IsValid;
103.
104.        public event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged;
105.
106.        public void OnErrorsChanged(string propertyName)
107.        {
108.            ErrorsChanged?.Invoke(this, new DataErrorsChangedEventArgs(propertyName));
109.        }
110.
111.        public event PropertyChangedEventHandler PropertyChanged;
112.
113.        [NotifyPropertyChangedInvocator]
114.        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
115.        {
116.            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
117.        }

 

In my View I prepare all the necessary things, because it is a customization, so the user can choose a checkbox column or time column or date column and so on. With Date and Time column I am using the Custom Column. So I have noticed this Visual Bug. 

I added 2 gif files to explain better the problem. So as you see when the validation is on the Custom Column everything is working fine. The problem occurs when the the neighbor cell is invalid. If you look closely you will see that actually the custom column did also turn red, but it seems that the red color is behind it. The Columns F05 and F06 (custom columns) are the ones that don't turn correctly red when the whole row is red. I hope you understand now the problem. 

 

[Dilyan Traykov]

Hi Devid,

Thank you for the provided images and code snippet.

Would you find it possible to demonstrate the issue in the sample project I attached to my last reply as I'm having trouble replicating the behavior shown in the images. Since our forum system does not allow for files other than images to be attached you can then upload the project to a storage provider of your choice and provide a download link to it.

Thank you in advance for your cooperation on the matter.

Regards,
Dilyan Traykov
Progress Telerik

[Susmitha]

Hi Dilyan,

In the above sample if I want to change the background color of a GridViewDataColumn(light red shade in the sample), how Can I achieve that.

Thanks in Advance 

Susmitha

[Vladimir Stoyanov]

Hello Susmitha,

Thank you for the shared picture. 

When a GridViewCell is invalid it goes into its invalid visual state. In order to change its look, you can extract and update the ControlTemplate of the GridViewCell element. In the template you can locate the "Background_Invalid" and "Background_Invalid_Unfocused" Borders and style them according to your requirements. 

I hope you find this helpful.

Regards,
Vladimir Stoyanov
Progress Telerik