Highlighting cells with modified and unsaved data

[Ravi]

Hi There,

when user edits the cell or paste some data into the cell then
Case1: we have to display a yellow background in the GridView Cell.
Case2: If user undo changes then we have to get the cell into normal state.
Case3: when user press Save button the yellow background should gets the normal state.

This should be done by style so that it can apply globally to all our RadGridViews. 

Is there any way that we can achieve this? if you can provide a sample project that would be greatly appreciated. 

Thank you very much in advance.

Regards,
Srinivas.

[Dimitrina]

Hello,

You can paint the cell's editor in Yellow while editing its value. 

One way to do so is to apply a style targeting the editor. The default editor for data of type string or int is a standard TextBox. For example:

<Style TargetType="TextBox" BasedOn="{StaticResource TextBoxStyle}">
    <Setter Property="Background" Value="Yellow"></Setter>
</Style>

      
Another way to do so is to apply a Style targeting GridViewEditorPresenter. 
For example:

<Style TargetType="telerik:GridViewEditorPresenter" BasedOn="{StaticResource GridViewEditorPresenterStyle}">
    <Setter Property="Background" Value="Yellow"></Setter>
 </Style>

For both the options you should use our Implicit Styles. 

Does any of the suggestions work for you?

Regards,
Didie
Telerik

[Ravi]

Hi Didie,

Thanks for reply,
i have a small question on textbox style, if i make the text box implicit then it will effect in other areas also, so what do think? if we use textbox way then should i have to write any code to activate the background color? 

you mentioned about GridViewEditorPresenter will it recognize the undo ? and if i need to follow this way is there any thing that i need to maintain from code ?

Regards,
Srinivas.

[Dimitrina]

Hello Srinivas,

Indeed this Style will be applied for all the TextBoxes defined in its scope. The other option is to set EditorStyle for the columns.

As I understand "Undo" means the cell to get back to its previous non-edit state with the previous value it held. If so, then the answer to your question is yes.

 

Regards,
Didie
Telerik

[Ravi]

Hi Didle,

I have created a style for  grid:GridViewEditorPresenter and it is a implicit style but when i edit the cell nothing is happening. when i tried to apply this style using style key to the GridViewDataColumn then if i edit the cell i see a exception "'GridViewEditorPresenter' TargetType does not match type of element 'TextBox'." 

Below is the style which i have created for GridViewEditorPresenter:

<ControlTemplate x:Key="GridViewEditorPresenterTemplate" TargetType="{x:Type grid:GridViewEditorPresenter}">
       <Grid>
           <VisualStateManager.VisualStateGroups>
               <VisualStateGroup x:Name="ValueStates">
                   <VisualState x:Name="Valid"/>
                   <VisualState x:Name="InvalidFocusedState">
                       <Storyboard>
                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                               <DiscreteObjectKeyFrame KeyTime="0">
                                   <DiscreteObjectKeyFrame.Value>
                                       <Visibility>Visible</Visibility>
                                   </DiscreteObjectKeyFrame.Value>
                               </DiscreteObjectKeyFrame>
                           </ObjectAnimationUsingKeyFrames>
                       </Storyboard>
                   </VisualState>
               </VisualStateGroup>
           </VisualStateManager.VisualStateGroups>
           <ContentPresenter Margin="1,1,1,2" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
           <Border x:Name="ValidationErrorElement" Visibility="Collapsed" CornerRadius="0" BorderBrush="{StaticResource ControlOuterBorder_Invalid}" BorderThickness="1" Margin="1,1,1,2">
               <ToolTipService.ToolTip>
                   <ToolTip x:Name="validationTooltip" Placement="Right" Content="{TemplateBinding ErrorMessage}" Template="{StaticResource GridViewEditorPresenter_ValidationToolTipTemplate}"/>
               </ToolTipService.ToolTip>
               <Grid Height="12" HorizontalAlignment="Right" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12" Background="Transparent">
                   <Path Fill="{StaticResource ControlOuterBorder_Invalid}" Margin="1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z"/>
                   <Path Fill="{StaticResource ControlInnerBorder_Invalid}" Margin="1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8"/>
               </Grid>
           </Border>
       </Grid>
   </ControlTemplate>

   <Style x:Key="GridViewEditorPresenterStyle" TargetType="{x:Type grid:GridViewEditorPresenter}">
       <Setter Property="Template" Value="{StaticResource GridViewEditorPresenterTemplate}"/>
       <Setter Property="VerticalAlignment" Value="Stretch"/>
       <Setter Property="HorizontalAlignment" Value="Stretch"/>
       <Setter Property="VerticalContentAlignment" Value="Center"/>
       <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
       <Setter Property="Padding" Value="1"/>
       <Setter Property="Background"
               Value="Yellow" />
   </Style>
   <Style TargetType="{x:Type grid:GridViewEditorPresenter}" BasedOn="{StaticResource GridViewEditorPresenterStyle}"/>

Here is the way that i applied the style key to the DataColumn:

<telerik:GridViewDataColumn DataMemberBinding="{Binding LastName}"
      EditorStyle="{StaticResource GridViewEditorPresenterStyle}"
      Header="Last Name"
      />

Can you please let me know where i am doing mistake ?

Regards,
Srinivas.

[Vanya Pavlova]

Hello Srinivas,


The EditorStyle property of a column is related to the corresponding editor, not to the GridViewEditorPresenter itself. By that reason you are getting error, which points to a TargetType mismatch.
Using implicit styles and not only you may slightly modify the template of this element, wrap it in a Border in order to apply the desired Background, as follows.

<ControlTemplate x:Key="GridViewEditorPresenterTemplate" TargetType="grid:GridViewEditorPresenter">
        <Border Background="{TemplateBinding Background}">
            <Grid>
                <ContentPresenter Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
......
             </Grid>
        </Border>
    </ControlTemplate

In fact, this is a kind of workaround for a problem related to the style of GridViewEditorPresenter.
By that reason I am updating your Telerik points accordingly.
Will you verify how this works for you?


I look forward to hearing from you!


Regards,
Vanya Pavlova
Telerik

[Ravi]

Hi Vanya Pavlova,

Thank you for reply,

I have tried your workaround, now the yellow background is displaying,
when we double click on the cell then we are seeing the yellow background but we want to display the yellow background only if a user edit the content or added new value in the cell and the yellow background should be there until user save it, So is there any way to achieve this?

feel free to ask me if you need any more information.

Regards,
Srinivas.

[Nedyalko Nikolov]

Hi,

You can easily achieve your goals with a few lines of code.

If you want to set a yellow background when user starts to edit a cell you could use RadGridView.PreparedCellForEdit event, find the proper editor (TextBox) and change the background inside TextBox.TextChanged event.
If you want to set a yellow background to cell if it is edited by the user - just handle RadGridView.CellEditEnded event compare NewData and OldData and set cell background to yellow.
On save button click you can clear the background - cell.ClearValue(Control.BackgroundProperty)

Let me know if this does not help.

Regards,
Nedyalko Nikolov
Telerik

[Darryl]

Hello Nedyalko,

I am having a very similar issue; I can get the background to change either on CellEdit_Ended event, or through a behaviour based on the event but when I scroll the background is cleared.  I have even attempted turing off the EnableColumnVirtualization for this grid but the problem remains the same.  If I make a change to a cell on a row and then go to a cell on another row near the bottom of the data set (simulating the users need to scroll); When I scroll back up the changed data remains, but the background has been reset.  I am using the  2013.3 1016 version of the Silverlight tools from Telerik (We are in a build cycle for user test so I cannot update to the December version yet.)  any suggestions?

[Hristo]

Hi Darryl,

There are two possible solutions to your issue.
The first one is to use style selectors in order to change the default style of the cell. For more information about this topic you can read the following articles: link1, link2.

The second solution is to disable both row and column virtualization. However, this is not recommended because it can lead to performance problems when there is a lot of data.

The reason why the style is lost is that when the user scrolls down, the rows are reused. Similarly, during horizontal scroll the columns are reused. Column/Row reusing means that all  visual elements will be recycled and reused when they go beyond the visible area and then come back into view.

The UI virtualization topic is discussed in more details on the following link.

Regards,
Hristo
Telerik

[Darryl]

Thanks for getting back with me.

I have looked at using the style selector but I need to know if the data in the cell has changed before I change the background color.  I guess that a workaround would be to create a property, for each field that I need to monitor, on the ViewModel and set that if the value changes.  I have the style currently changing in an Attached Behaviour that is attached to the CellEditEnded Event, I guess I thought that would work like the Style Selector.

[Hristo]

Hi Darryl,

You can solve your issue by using template selectors. The selectors will need a different Boolean property for each field that you change. However, you can also have only one property for row changes, and with it you can change the background of the entire row.

You can also see our online demos about style template selector on the following link: link.
I have also attached a demo project with template selectors.

Regards,
Hristo
Telerik

[Darryl]

Thank you for getting back to me.

I will take a look at the selectors in the demo projects and reconfigure my UI to use them and see if it addresses the issue.  I could not download the sample because I have nothing to extract a rar where i am, so if you could repost it as a .zip that would be fantastic.  Thanks again. 

[Hristo]

Hello Darryl,

I am attaching the sample as a zip file.

Regards,

Hristo

Telerik