Datagrid text cell edit styling

[Andres]

How can I style how the text cell appears when editing the value?

It currently looks like this:

 

I want it to be transparent with black text

[Andres]

Tried with the following code but it won't respond to Background changes, only TextColor

<telerik:DataGridTextColumn HeaderText="Location" 
                                PropertyName="Location">
    <telerik:DataGridTextColumn.CellEditorStyle>
        <Style TargetType="telerik:RadEntry">
            <Setter Property="ReserveSpaceForErrorView" Value="False" />
            <Setter Property="Margin" Value="2" />
            <Setter Property="Background" Value="White"/>
            <Setter Property="BackgroundColor" Value="White"/>
            <Setter Property="TextColor" Value="Red"/>

        </Style>
    </telerik:DataGridTextColumn.CellEditorStyle>
</telerik:DataGridTextColumn>

[Yana]

Hello Andres,

I am sorry for my confusion regarding this ticket.  Indeed, the RadEntry background color cannot be changed directly, as it is applied through visual states. Please try it like this:

<telerik:DataGridTextColumn.CellEditorStyle>
    <Style TargetType="telerik:RadEntry">
        <Setter Property="ReserveSpaceForErrorView" Value="False" />
        <Setter Property="Margin" Value="2" />
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Black, Dark=White}" />
                            <Setter Property="TextColor" Value="{AppThemeBinding Light=White, Dark=Black}" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Focused">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Green, Dark=Blue}" />
                            <Setter Property="TextColor" Value="{AppThemeBinding Light=White, Dark=Black}" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Pink" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="PointerOver">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Gray, Dark=Red}" />
                            <Setter Property="TextColor" Value="{AppThemeBinding Light=White, Dark=Black}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</telerik:DataGridTextColumn.CellEditorStyle>

and let me know how it goes.

Regards,
Yana
Progress Telerik

[Andres]

Yana, 

This works great! One last thing. Is there anywhere else I can place this so I don't need to add the code in every TextColumn and have it applied for all datagrids throught my app?

[Yana]

I am afraid that wouldn't be possible. Anyway, you can define the CellEditorStyle as a resource and reference it as a StaticResource for each TextColumn. 

I hope this would be an acceptable solution.

[Andres]

Can you please show me how to do that?

[Yana]

Just add the Style with a x:Key to the page or App.xaml resources:

 

<Style x:Key="MyCellEditorStyle"
        TargetType="telerik:RadEntry">
    <Setter Property="ReserveSpaceForErrorView" Value="False" />
    <Setter Property="Margin" Value="2" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Black, Dark=White}" />
                        <Setter Property="TextColor" Value="{AppThemeBinding Light=White, Dark=Black}" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Green, Dark=Blue}" />
                        <Setter Property="TextColor" Value="{AppThemeBinding Light=White, Dark=Black}" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Pink" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Gray, Dark=Red}" />
                        <Setter Property="TextColor" Value="{AppThemeBinding Light=White, Dark=Black}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

And set it to the TextColumn's CellEditorStyle:

<telerik:DataGridTextColumn PropertyName="Country"
                        CellEditorStyle="{StaticResource MyCellEditorStyle}"/>

 

[Andres]

Thanks a lot

[Yana]

Hi Andres,

CellEditorStyle sets the style to the concrete editor, in the case of TextColumn - to the RadEntry.  You would need to use CellDecorationStyle property to apply a background to the cell:

<telerik:DataGridTextColumn.CellDecorationStyle>
    <telerik:DataGridBorderStyle BackgroundColor="#E0F2F1" />
</telerik:DataGridTextColumn.CellDecorationStyle>

Please try it like this and let me know how it goes.

Regards,
Yana
Progress Telerik

[Andres]

Yana,

What I want to edit is the concrete editor, meaning the RadEntry, as pointed in your response. However, the Editor is not responding to the changes I made.

This is how it looks with the change you proposed. I need the editor that's in dark grey to look white.

[Andres]

BTW - This is only happening on Windows. My system is in dark mode as well.

[Andres]

Yana,

What I want to edit is the concrete editor, meaning the RadEntry, as pointed in your response. However, the Editor is not responding to the changes I made.

This is how it looks with the change you proposed. I need the editor that's in dark grey to look white.