Create a Custom TimeSpanPickerColumn

Environment

Product

RadGridView for WPF

Description

How to implement a GridViewDataColumn, which can display, edit and filter a property of type TimeSpan.

Solution

To achieve this we will inherit GridViewDataColumn, override the CreateCellEditElement and CreateFieldFilterEditor methods and use a RadTimeSpanPicker in order to manipulate the TimeSpan values.

Example 1: Sample model and viewmodel

C#

    public class Player : ViewModelBase
    {
        private string name;
        private int number;
        private TimeSpan timePlayed;

        public Player(string name, int number, TimeSpan timeSpan) : base()
        {
            this.name = name;
            this.number = number;
            this.timePlayed = timeSpan;
        }

        public string Name
        {
            get { return this.name; }
            set
            {
                if (value != this.name)
                {
                    this.name = value;
                    this.OnPropertyChanged("Name");
                }
            }
        }

        public int Number
        {
            get { return this.number; }
            set
            {
                if (value != this.number)
                {
                    this.number = value;
                    this.OnPropertyChanged("Number");
                }
            }
        }

        public TimeSpan TimePlayed
        {
            get
            {
                return this.timePlayed;
            }
            set
            {
                if (this.timePlayed != value)
                {
                    this.timePlayed = value;
                    this.OnPropertyChanged("TimePlayed");
                }
            }
        }

        public static ObservableCollection<Player> GetPlayers()
        {
            ObservableCollection<Player> players = new ObservableCollection<Player>();
            Player player;

            player = new Player("Player 1",  1, new TimeSpan(5, 2, 4));
            players.Add(player);

            player = new Player("Player 2", 2, new TimeSpan(3, 1, 2));
            players.Add(player);
        
            player = new Player("Player 3", 3, new TimeSpan(7, 6, 3));
            players.Add(player);

            player = new Player("Player 4", 4, new TimeSpan(1, 5, 8));
            players.Add(player);

            return players;
        }
    }
    
    public class MyViewModel : ViewModelBase
    {
        private ObservableCollection<Player> players;

        public ObservableCollection<Player> Players
        {
            get
            {
                if (this.players == null)
                {
                    this.players = Player.GetPlayers();
                }

                return this.players;
            }
        }
    }

Example 2 demonstrates how we can utilize the CreateCellEditElement and CreateFieldFilterEditor methods of the GridViewDataColumn. This allows us to return a new instance of a RadTimeSpanPicker and bind its Value property accordingly.

Example 2: Custom TimeSpanPickerColumn

C#

    public class TimeSpanPickerColumn : GridViewDataColumn
    {
        public override FrameworkElement CreateCellEditElement(GridViewCell cell, object dataItem)
        {
            var timeSpanPicker = new RadTimeSpanPicker();
            timeSpanPicker.TimeSpanComponents.Add(new HourTimeSpanComponent() { Step = 1 });
            timeSpanPicker.TimeSpanComponents.Add(new MinuteTimeSpanComponent() { Step = 1 });
            timeSpanPicker.TimeSpanComponents.Add(new SecondTimeSpanComponent() { Step = 1 });

            var valueBinding = new Binding(this.DataMemberBinding.Path.Path)
            {
                Mode = BindingMode.TwoWay,
            };
            timeSpanPicker.SetBinding(RadTimeSpanPicker.ValueProperty, valueBinding);

            return timeSpanPicker;
        }

        public override FrameworkElement CreateFieldFilterEditor()
        {
            var timeSpanPicker = new RadTimeSpanPicker();

            timeSpanPicker.TimeSpanComponents.Add(new HourTimeSpanComponent() { Step = 1 });
            timeSpanPicker.TimeSpanComponents.Add(new MinuteTimeSpanComponent() { Step = 1 });
            timeSpanPicker.TimeSpanComponents.Add(new SecondTimeSpanComponent() { Step = 1 });

            Binding selectedValueBinding = new Binding("Value")
            {
                Mode = BindingMode.TwoWay,
                FallbackValue = null,
                Converter = new TimeSpanFilterEditorConverter(),
            };
            timeSpanPicker.SetBinding(RadTimeSpanPicker.ValueProperty, selectedValueBinding);

            return timeSpanPicker;
        }

        private class TimeSpanFilterEditorConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                if (Object.Equals(value, Telerik.Windows.Data.FilterDescriptor.UnsetValue))
                {
                    // When the filter is turned off this is what your editor will get. 
                    return null;
                }

                return value;
            }

            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                if (value == null)
                {
                    // When your editor wants to turn off the filter this is what it should return. 
                    return FilterDescriptor.UnsetValue;
                }

                return value;
            }
        }
    }

Example 3: Using the custom TimeSpanPickerColumn

XAML

    <Grid>
        <Grid.DataContext>
            <my:MyViewModel />
        </Grid.DataContext>

        <telerik:RadGridView ItemsSource="{Binding Players}" 
                             AutoGenerateColumns="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Number}"/>
                <my:TimeSpanPickerColumn DataMemberBinding="{Binding TimePlayed}" />
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>

The "my" namespace refers to the namespace where the "TimeSpanPickerColumn" and "MyViewModel" classes are defined.

Figure 1: Editing TimeSpanPickerColumn in the Fluent theme

Figure 2: Filtering TimeSpanPickerColumn in the Fluent theme

See Also

• Create Custom Editor with RadGridView
• Create a Custom Field Filter Editor