This is a migrated thread and some comments may be shown as answers.

Remove Hover Effect on Specific Rows or Cells

5 Answers 1026 Views
DataGrid
This is a migrated thread and some comments may be shown as answers.
Tyler
Top achievements
Rank 1
Tyler asked on 29 Jun 2018, 03:26 PM
I have two different datagrids where I would like to restrict the hover effect to certain rows/cells. The first is a datagrid with row based selection, where first row is not selectable. The other is a datagrid with cell based selection, where the blank cells are not selectable. In both cases, I'm using a CellDecorationStyleSelector to give these non-selectable areas a unique background, but I can't seem to find a way to disable their hover effect. I know how to disable the hover effect for the whole datagrid--which is a potential backup plan--but I would like to keep the hover effect on the selectable areas if possible. Thanks for any help!

5 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 02 Jul 2018, 04:03 PM
Hi Tyler,

Have you tried the Style in the Hover Control section of the Implicit Styling documentation article? This will be applied to both row and cell selection modes.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Tyler
Top achievements
Rank 1
answered on 02 Jul 2018, 06:40 PM

Hi Lance,

Thanks for sharing that link. I was actually already using that same implicit styling code for the overall datagrid's hover effect. Is there some way to apply it differently to specific cells/rows, though? I only want cells that the user can interact with to have the hover effect. They only way I know to selectively style cells/rows is through CellContentStyleSelector and CellDecorationStyleSelector, but those only affect foreground and background, respectively, not the hover effect. Thanks again for your thoughts on this, and please let me know if I'm missing something here.

0
Accepted
Lance | Manager Technical Support
Telerik team
answered on 02 Jul 2018, 09:00 PM
Hi Tyler,

Thank you for the additional context. The DataGridHoverControl has no concept of the data context of the cell/row, you'll need to implement this on the cell template level in your custom template (outside of the DataGrid API).

For example using Composition API or use the VisualStateManager on the template's contents (simple example below) or use XamlBehaviors


Example 

Here's an example of using a custom storyboard animation. First, make sure the opacity of the hover control is 0 so that your custom animation is the only visible coloring:

<grid:RadDataGrid.Resources>
    <Style TargetType="primitives:DataGridHoverControl">
        <Setter Property="Opacity"
             Value="0" />
    </Style>
</grid:RadDataGrid.Resources>

Then you can set up your cell content template elements with a custom animation:

<grid:DataGridTemplateColumn>
    <grid:DataGridTemplateColumn.CellContentTemplate>
        <DataTemplate>
            <Grid PointerEntered="Grid_PointerEntered"
                  PointerExited="Grid_PointerExited">
                <Grid.Background>
                    <SolidColorBrush x:Name="myGridBackground" Color="Transparent" />
                </Grid.Background>
                <Grid.Resources>
                    <Storyboard x:Name="EnterStoryboard">
                        <ColorAnimation From="Transparent"
                                        To="OrangeRed"
                                        Duration="0:0:1"
                                        Storyboard.TargetName="myGridBackground"
                                        Storyboard.TargetProperty="Color" />
                    </Storyboard>
                    <Storyboard x:Name="ExitStoryboard">
                        <ColorAnimation From="OrangeRed"
                                        To="Transparent"
                                        Duration="0:0:1"
                                        Storyboard.TargetName="myGridBackground"
                                        Storyboard.TargetProperty="Color" />
                    </Storyboard>
                </Grid.Resources>
 
                <StackPanel HorizontalAlignment="Center">
                    <TextBlock Text="Name"/>
                    <TextBlock Text="{Binding Name}" />
                    <TextBlock Text="IsEditable"/>
                    <TextBlock Text="{Binding IsEditable}"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </grid:DataGridTemplateColumn.CellContentTemplate>
</grid:DataGridTemplateColumn>

Here are the event handlers that fire the storyboards depending on the value of the DataContext

private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    if (sender is Grid grid && grid.DataContext is Person person)
    {
        if (person.IsEditable)
        {
            Storyboard sb = grid.Resources["EnterStoryboard"] as Storyboard;
            sb.Begin();
        }
    }
}
 
private void Grid_PointerExited(object sender, PointerRoutedEventArgs e)
{
    if (sender is Grid grid && grid.DataContext is Person person)
    {
        if (person.IsEditable)
        {
            Storyboard sb = grid.Resources["EnterStoryboard"] as Storyboard;
            sb.Begin();
        }
    }
}

In the demo above, the Person model and view model are defined as:

public class ViewModel
{
    public ObservableCollection<Person> Data { get; set; }
 
    public ViewModel()
    {
        Data = new ObservableCollection<Person>()
        {
            new Person() { Name = "Anna",IsEditable = true},
            new Person() { Name = "Tom"},
            new Person() { Name = "Jack", IsEditable = true},
            new Person() { Name = "Emmy"}
        };
    }
}
 
public class Person
{
    public string Name { get; set; }
    public bool IsEditable { get; set; }
}


Summary

There are a bunch of different ways you can do this, Storyboards are just one. However, each of them are just general UWP programming approached are reside outside the control of Telerik components, you'll need to decide on which is best for your scenario.

I hope this helps!

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Lance | Manager Technical Support
Telerik team
answered on 02 Jul 2018, 09:02 PM
Hello Tyler,

Sorry for the double reply, just noticed I had the wrong storyboard name in the Exit event handler, it should be ExitStoryboard

 
private void Grid_PointerExited(object sender, PointerRoutedEventArgs e)
{
    if (sender is Grid grid && grid.DataContext is Person person)
    {
        if (person.IsEditable)
        {
            Storyboard sb = grid.Resources["ExitStoryboard"] as Storyboard;
            sb.Begin();
        }
    }
}

Now the demo will work as expected :)

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Tyler
Top achievements
Rank 1
answered on 02 Jul 2018, 09:31 PM
Thank you Lance! That does indeed work. I appreciate you spelling out that example for me!
Tags
DataGrid
Asked by
Tyler
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Tyler
Top achievements
Rank 1
Share this question
or