Binding ScheduleView to Database part 5: Categories editor

In the previous post we saw how to associate an appointment to category. What about categories editing? How the user can edit the categories?

The solution is very simple: GridView with two columns, one is bound to DisplayName property, and the second is custom column with ColorPicker control, and it bound to CategoryBrush property.

Below is the code of the editor View. The source code is available on my GitHub repository, including the ViewModel, Mvvm DialogService and more.

<UserControl x:Class="DatabaseBindingSample.Views.CategoriesEditorView"
             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"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             >
    <Grid Margin="6">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Border BorderBrush="LightCoral" BorderThickness="1.5" Margin="16" CornerRadius="5">
            <TextBlock Text="Categories" FontSize="16" FontWeight="Black" Foreground="OliveDrab" Margin="10" HorizontalAlignment="Center"/>
        </Border>

        <telerik:RadGridView ItemsSource="{Binding Categories,Mode=OneTime}"
                             ShowGroupPanel="False"
                             AutoGenerateColumns="False"
                             IsFilteringAllowed="False"
                             CanUserInsertRows="True"
                             CanUserDeleteRows="True"
                             NewRowPosition="Top"
                             Margin="15"
                             Grid.Row="1" 
                             MinHeight="240" >
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Description" DataMemberBinding="{Binding DisplayName,Mode=TwoWay}" MinWidth="120"/>
                <telerik:GridViewDataColumn Header="Brush" Width="80">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <Rectangle Fill="{Binding CategoryBrush,Mode=OneWay}" Margin="2 0" Width="12" Height="12"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                    <telerik:GridViewDataColumn.CellEditTemplate>
                        <DataTemplate>
                            <telerik:RadColorPicker SelectedColor="{Binding CategoryColor,Mode=TwoWay}">
                                <telerik:RadColorPicker.ContentTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Rectangle Width="12" Height="12">
                                                <Rectangle.Fill>
                                                    <SolidColorBrush Color="{Binding}" />
                                                </Rectangle.Fill>
                                            </Rectangle>
                                        </Grid>
                                    </DataTemplate>
                                </telerik:RadColorPicker.ContentTemplate>
                            </telerik:RadColorPicker>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellEditTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

        <Button Content="Save" Command="{Binding SaveCommand}" Grid.Row="2" Margin="10" HorizontalAlignment="Center" MinWidth="120"/>
    </Grid>
</UserControl>

This is the result view: