[Solved] Cell Highlighting

[Jon Bergquist]

Is there an easy way to change the grid highlighting behavior so that instead of row highlighting I can achieve cell highlighting?  A good example of this is the calendar control.  Each mouseover of the cell results in a change of color and then selecting the cell highlights it to a different color.  I looked at the xaml for the calendar but it was confusing to follow.  Is there anyway to simply turn off row highlighting and turn on cell highlighting?

Thanks

[Maarten]

Hello,

I would like to implement the same behaviour as Jon, different selection modes (row / cell).
Could you please give us an indication on how to do this?

Thanks in advance.

Kind regards,


Maarten Thoelen

[Stefan Dobrev]

Hello Jon,

Currently there is no easy way to achieve this in Silverlight. What you can do is to define your columns in XAML and set the CellStyle property of each column. In this style you can redefine the template for each cell so that it will match your scenario.

Hope this helps.

All the best,
Stefan Dobrev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Jon Bergquist]

ok - I am doing that already with this xaml:

<Style x:Key="GridHyperLink" TargetType="gridview:GridViewCell">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>

                        <Grid x:Name="AppointmentCell"  ShowGridLines="False" Margin="0">
                            <HyperlinkButton x:Name="HyperLinkContent" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Navy" Content="{Binding}" Click="HyperlinkButton_Click"></HyperlinkButton>
                            <ContentPresenter Loaded="ContentPresenter_Loaded"/>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

But I still get row level highlighting.   Is there anyway to turn it off?  I can control the mouse events on the contentpresenter loaded event so the stage is set for cell highlighting.

also could you send the xaml for the onmouseover and mousepressed state of the calendar control?  I really want to achieve the same effect on the grid with the squares displaying for each cell.

Thanks

Jon

[Milan]

Hi Jon Bergquist,

Cell hilighting can be achieved with a little bit of work. First you should copy the original style for GridViewCell, in case you want to keep some of the default behaviour. Then you modify the default style so that you get the desired highlight color - I have chosen red for my sample application. After that we copy the default GridViewRow style and just remove the default visual states that make rows to be highlighted. Once we are done with our custom styles for GridViewCell and GridViewRow we simply apply them to the RadGridView.
I have attached a sample application that demonstrates cell highlighting.
Currently the demo allows for only one hilighted cell.

Greetings,
Milan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Jon Bergquist]

That was helpful thanks.  Is there a hover or mouseover state that I can control?  Similar to the calendar control I need to set a brush for the Current state but also for the mouseover state.  I am using the contentpresenter loaded event to attempt this but I'm getting funky behavior:

 private void PART_ContentPresenter_Loaded(object sender, RoutedEventArgs e)
        {
            ContentPresenter presenter = (ContentPresenter)sender;

            Border cell = presenter.FindName("GridViewCellBorder") as Border;
            Brush currentBrush = cell.Background;
            if (cell != null)
            {
                cell.MouseEnter += (s, a) => cell.Background = (Brush)Application.Current.Resources["CellBackgroundBrush"];
                cell.MouseLeave += (s, a) => cell.Background = currentBrush;

            }


        }

My mouseleave is stepping on the Current state and whenever I select a cell and then mouseover to a new cell  the previously selected cell somehow fires the mouseenter event and takes on the gray color.

thanks

Jon

[Milan]

Hello Jon Bergquist,

Currently there is no MouseOver state for GridViewCell. We realize that this is an omission on our side and we will be adding such state in Q1 2009 SP1, which is scheduled to be released in about two weeks.
If having such state is crusial for your application and waiting for SP1 seems inconvenient to you we could send you a custom build.

I wouldn't recommend using the Loaded event and hooking up to the MouseEnter/MouseLeave  since that will create a strong reference between all cells and the object that handles the events. Ultimately that will cause memory leaks.

Your telerik points have been updated.

All the best,

Milan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Jon Bergquist]

Ok - good to know.  I can wait on that.  Would it be possible to give me the default brush color for the row selected state?  I want to use that color for the cell selected state.

Thanks

[Milan]

Hi Jon Bergquist,

Here are the brushes that we use for GridViewRow

<SolidColorBrush x:Key="GridViewRowSelectedBorderBrush" Color="Orange" />
<SolidColorBrush x:Key="GridViewRowCurrentBorderBrush" Color="Orange" />
<SolidColorBrush x:Key="GridViewRowMouseOverBrush" Color="#FFFDE09A" />
<LinearGradientBrush x:Key="GridViewRowSelectedBackground" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFFFD9AA" Offset="1"/>
    <GradientStop Color="#FFFFAB3F" Offset="0"/>
</LinearGradientBrush>

The one that you have requested is the last one.

Best wishes,
Milan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Jon Bergquist]

Hi again.  Sorry I keep harping on this topic of cell formatting but it is turning into a critical requirement for me.  I am using the example you sent earlier to manage the Current state of the cell.  I'm trying to take it a step further so that I can look at the cell contents and determine whether to disable the cell or not.  my approach is to use the AlignmentContentPresenter loaded event to determine the content of the cell and then conditionally disable it or not.  However, I'm not sure how to grab the actual GridViewCell property so I can disable it when I'm in the PART_ContentPresenter_Loaded event.  I'm not even sure if this is the best approach overall.
 

<telerikGrid:AlignmentContentPresenter Loaded="PART_ContentPresenter_Loaded" x:Name="PART_ContentPresenter" TextAlignment="{TemplateBinding TextAlignment}" Visibility="Visible" Margin="{TemplateBinding Padding}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>

I am also unclear on how to retrieve the cell content when the user selects on a cell.  There is no cell-specific event that I can find so can you recommend an approach to this?

Thanks

[Milan]

Hello Jon Bergquist,

You could use the Loaded event but I would advise you take advantage of the RadGridView.RowLoaded event, which is fired for each individual row. You could use this event to go through the cells of each row and examine their content.
Still, if you really like to use AlignmentContentPresenter and hook up to its Loaded event you need to do just e little bit of work to get to a GridViewCell elements. In order to grab a GridViewCell you should search the visual tree and find the first parent of type GridViewCell.
I have attached a modified sample that demonstrates both approaches.

Greetings,
Milan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Jon Bergquist]

Very nice.  We are almost there.  I still need a way to respond to a cell click event.  I played with adding a Hyperlink element to the template definition but when I add it I end up with duplicate content being pushed to the display.  That occurs even when I remove the Content="{TemplateBinding Content}" from the AlignmentContentPresenter element.

So I either need to respond to a click event of the cell or add an element to capture the event.  Here is my attempt at option 2.

 <Grid>
                                    <telerikGrid:AlignmentContentPresenter x:Name="PART_ContentPresenter" TextAlignment="{TemplateBinding TextAlignment}" Visibility="Visible" Margin="{TemplateBinding Padding}" VerticalAlignment="Center" HorizontalAlignment="Stretch"  ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                    <ContentPresenter x:Name="PART_EditorPresenter" Visibility="Collapsed" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="3,0,0,0"/>
                                    <HyperlinkButton HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Navy" Content="{TemplateBinding Content}"  Click="HyperlinkButton_Click"></HyperlinkButton>
                                    <Rectangle Width="{TemplateBinding VerticalLineThickness}" Fill="{TemplateBinding VerticalLineFill}" HorizontalAlignment="Right" Visibility="{TemplateBinding VerticalLineVisibility}"/>
                                    <Rectangle Width="Auto" Height="Auto" x:Name="therect" Margin="0" Visibility="Collapsed" Stroke="#FFFFAB3F" StrokeThickness="2" />
                                    <Rectangle Width="Auto" Height="Auto" x:Name="CurrentBorder" Margin="2" Visibility="Collapsed" Stroke="#FF000000" StrokeThickness="1" StrokeDashOffset="0" StrokeDashCap="Square" StrokeDashArray="2"/>
                                </Grid>

[Milan]

Hello Jon Bergquist,

You might hooh up to the MouseLeftButtonDown event of the top most border like this:

<Border x:Name="GridViewCellBorder" MouseLeftButtonDown="GridViewCellBorder_MouseLeftButtonDown"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    Background="{TemplateBinding Background}">

It worked fine on my machine and I really hope that it will be okay for your scenario.

Kind regards,
Milan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Jon Bergquist]

I think that works though its a little hokey the way I'm retrieving the values:

private void GridViewCellBorder_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Border border = sender as Border;
            //Grid grid = (Grid)border.FindName("GridViewCellGrid");
            ContentPresenter cp = (ContentPresenter)border.FindName("PART_ContentPresenter");
            MessageBox.Show(cp.Content.ToString());

        }

At this point I'm just happy it works!

I'm still waiting to here about another thread re: how to determine when the grid is done loading its data.  I need to know this in order to set the 1st row as disabled.  I can't do that on the row_loaded event because there is now way to tell what row index I'm dealing with.

Thanks

[Milan]

Hello Jon Bergquist,

You can try insing the RadGridView.Loaded event.
That should work.

Regards,
Milan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Jon Bergquist]

I'm still struggling with the GridViewCellBorder_MouseLeftButtonDown event.  Recall that I am using this event to respond to a click of an individual cell.  If I need to get the underlying record and the Column how would I do that?  I was attempting to get the GridViewCell for the action but I'm not sure how to pull that out.  Any guidance on this would be hugely helpful.

Thanks

[Milan]

Hello Jon Bergquist,

Go get a cell reference you just have to use the DependencyObjectExtensions in your MouseLeftButtonDown event handler:

private void GridViewCellBorder_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    DependencyObject border = (DependencyObject)sender;
    GridViewCell cell = border.GetVisualParent<GridViewCell>();
}

Now the cell var is the actual GridViewCell that you clicked on.

All the best,
Milan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Jon Bergquist]

Whenever I use these extension methods I get the following error:

'Telerik.Windows.Data.DependencyObjectExtensions' is inaccessible due to its protection level

[Milan]

Hi Jon Bergquist,

The DependencyObjectExtensions class is declared as internal and that is why you are getting the error message. If you declare it as public you will be able to use it.
Just in case I have attached the updates version of the sample project.

Greetings,
Milan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Jon Bergquist]

Ok - makes sense now.  I still need to get the underlying record, but i don't see how that is possible.  So given a GridViewCell, how would one retrieve the underlying record?  I need this because the bound column is tied to a property path but I need access to the object itself when the border is clicked.

Thanks

[Vlad]

Hi Jon,

Here is an example:

Record record = cell.ParentOfType<GridViewRow>().Record;

Kind regards,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.