Apply theme color to GridView in ReadOnly state

[Shengyang]

I found out that the ReadOnlyBackgroundBrush from Theme setting is not applied in GridView.

In some grid I have a whole column that should not be edited from the User, while some grid is only editable when the user has the right to do it and some rows are ReadOnly depending on the state of the Row.

Are there theme colors that are dedicated for GridView or is there a generic way to apply a color to GridView and it's cells/rows in ReadOnly state? 

[Stenly]

Hello Shengyang,

The RadGridView control and its elements (primarily the rows and cells) do not have a specified color that will be applied when they are read only.

With this in mind, this behavior can be achieved via Styles that target the GridViewRow and GridViewCell elements. For the cells, you can use the IsReadOnlyBinding property of the column, and for the rows - the IsReadOnlyBinding property of RadGridView. Then, via a custom Style that targets the GridViewRow/GridViewCell, you can add a new DataTrigger and bind via RelativeSource to the property that controls whether the instance will be readonly, and if it is true, you can specify a background.

The following code snippets show this suggestion's implementation on a cell level:

public class Item : ViewModelBase
{
    private bool isReadOnly;

    public string Name { get; set; }
    public int Age { get; set; }

    public bool IsReadOnly
    {
        get { return this.isReadOnly; }
        set { this.isReadOnly = value; this.OnPropertyChanged(nameof(this.IsReadOnly)); }
    }
}

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" CellStyle="{StaticResource ReadOnlyStyle}" IsReadOnlyBinding="{Binding IsReadOnly}"/>

<Style x:Key="ReadOnlyStyle" TargetType="telerik:GridViewCell">
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=DataContext.IsReadOnly}" Value="True">
            <Setter Property="Background" Value="LightGray"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

The produced result is as follows:

For the rows, the approach will be similar, however, the IsReadOnlyBinding property RadGridView will be utilized:

<telerik:RadGridView ItemsSource="{Binding Items}" RowStyle="{StaticResource ReadOnlyStyle}"
                     IsReadOnlyBinding="{Binding IsReadOnly}" 
                     AutoGenerateColumns="False">
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Age}"/>
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

<Style x:Key="ReadOnlyStyle" TargetType="telerik:GridViewRow">
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=DataContext.IsReadOnly}" Value="True">
            <Setter Property="Background" Value="LightGray"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

This will produce the following result:

With this being said, I hope the provided information will be of help to you.

Regards,
Stenly
Progress Telerik

[Shengyang]

Hi Stenly,

thank you for your answer.

Is there also a way to access to the IsReadOnly property of the GridViewDataColumn to mark all cells of that column to be read only?

Thanks

Shengyang Liu

[Stenly]

Hello Shengyang,

The GridViewCell element contains information about its parent column via its DataColumn property. To use it in a Style, you can add a new DataTrigger that uses the RelativeSource property of the Binding instance and bind to the IsReadOnly property of the DataColumn.

The following code snippets show this suggestion's implementation:

<Style x:Key="ReadOnlyCellsStyle" TargetType="telerik:GridViewCell">
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=DataColumn.IsReadOnly}" Value="True">
            <Setter Property="Background" Value="LightGray"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" IsReadOnly="True" CellStyle="{StaticResource ReadOnlyCellsStyle}"/>

The produced result is as follows:

Could you give this suggestion a try?