[Solved] GridViewCell.Background

[Richard Harrigan]

Is it possible to set the background to an image with a hot spot?   What I would like to do is set the background to look somewhat like what you get when Cell.IsValid is set to false.  I want to add comments to a cell and would like a visual to let the end user know that a comment is available.  I would also need to get an event when the user moves over the hot spot and popup the comment.

Thanks

Rich

[Vanya Pavlova]

Hello Richard,

 
There are a couple approaches you may use in this case. When you handle CellValidating event of RadGridView you may apply your own style  when the cell is not valid. The sample below demonstrates a very simple approach that you may use:

MainPage.xaml:

<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <Grid.Resources>
            <Style x:Key="st1" TargetType="telerik:GridViewCell">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:GridViewCell">
                            <Image Source="image01.png" Width="100" Height="100" Stretch="Fill">
            <ToolTipService.ToolTip>
                 <ToolTip Width="140" Height="140">
                  <ToolTip.RenderTransform>
                        <ScaleTransform x:Name="ScaleTransofrm1" CenterX="50"/>
                  </ToolTip.RenderTransform>
                  <ToolTip.Triggers>
                        <EventTrigger>
                              <BeginStoryboard>
                                    <Storyboard>
                                          <DoubleAnimation
Storyboard.TargetName="ScaleTransofrm1" Storyboard.TargetProperty="ScaleX"
From="0" To="1" Duration="0:00:00.5"/>
                                    </Storyboard>
                              </BeginStoryboard>
                        </EventTrigger>
                  </ToolTip.Triggers>
             <TextBlock Text="Here you can put your own custom text"/>
            </ToolTip>
             </ToolTipService.ToolTip>
        </Image>
            </ControlTemplate>
        </Setter.Value>
        </Setter>
        </Style>
    </Grid.Resources>
        <telerik:RadGridView AutoGenerateColumns="False" ItemsSource="{Binding Collection}" CellValidating="RadGridView_CellValidating">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="ID" UniqueName="c1" DataMemberBinding="{Binding Property1}"/>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>

    </Grid>

MainPage.xamls.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication151
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();
        }
        private void RadGridView_CellValidating(object sender, Telerik.Windows.Controls.GridViewCellValidatingEventArgs e)
        {
            if ( e.Cell.Column.UniqueName == "c1" )
            {
               int newValue = Int32.Parse( e.NewValue.ToString() );
               if ( newValue < 0 || newValue > 100 )
               {
                e.IsValid = false;
               e.ErrorMessage = "The entered value must be between 0 and 100";
               e.Cell.Style=this.LayoutRoot.Resources["st1"]as Style;
              }
            }
        }
    }
}

Feel free to extend it in the way you need and I would be glad If I can assist you further.

Best wishes,
Vanya Pavlova
the Telerik team

[Richard Harrigan]

Hi Vanya,

Wow, that was a lot of work you did, I will study it.  Since I want this to be permanent for all cells with comments would it be possible to use your approach with the RowLoaded event?

Thanks
Rich

[Vanya Pavlova]

Hello Richard,

 
The sample below demonstrates how to use previously defined CellStyle in RadGridView's RowLoaded event:

private void gridView_RowLoaded(object sender, Telerik.Windows.Controls.GridView.RowLoadedEventArgs e)
        {
            // TODO: Add event handler implementation here.
            var grid=e.GridViewDataControl as RadGridView;
            if(grid!=null)
            {
                var cells =gridView.ChildrenOfType<GridViewCell>().Where(c => c.Column.UniqueName == "c1").ToList();
                 cells.ForEach(c => c.Style=this.Resources["st1"] as Style);
            }
        }

Just define the columns and set the UniqueName to the one you wish to apply this style.

Regards,
Vanya Pavlova
the Telerik team

[Richard Harrigan]

I tried this and got the following xaml error:

Failed to create a System Type from the text 'telerik:GridViewCell'. 
<Style x:Key="st1" TargetType="telerik:GridViewCell">
Am I missing a reference?  The xaml follows:

Rich

<UserControl x:Class="ColumnSqlData.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <DataTemplate x:Key="ComboItemTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="100" />
                </Grid.ColumnDefinitions>
                <Border Background="#77AAAAAA">
                    <TextBlock Text="{Binding ID}" />
                </Border>
                <Border Grid.Column="1"
                        Margin="4,0,0,0"
                        Background="#77AAAAAA">
                    <TextBlock Text="{Binding Name}" />
                </Border>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" Margin="10">
        <Grid.Resources>
            <Style x:Key="st1" TargetType="telerik:GridViewCell">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:GridViewCell">
                            <Image Source="Images/CommentVisual.png" Width="100" Height="100" Stretch="Fill">
                                <ToolTipService.ToolTip>
                                    <ToolTip Width="140" Height="140">
                                        <ToolTip.RenderTransform>
                                            <ScaleTransform x:Name="ScaleTransform1" CenterX="50" />
                                        </ToolTip.RenderTransform>
                                        <ToolTip.Triggers>
                                            <EventTrigger>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetName="ScaleTransform1" Storyboard.TargetProperty="ScaleX"
                                                                         From="0" To="1" Duration="0:00:00.5" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </ToolTip.Triggers>
                                    </ToolTip>
                                </ToolTipService.ToolTip>
                            </Image>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Button Name="NewRow"
                Content="New Row"
                Click="Command_Click"
                Grid.Column="0"
                Margin="0,0,0,10" />
        <Button Name="RemoveRow"
                Content="Remove Selected Row"
                Click="Command_Click"
                Grid.Column="1"
                Margin="0,0,0,10" />
        <Button Name="Test"
                Content="Test"
                Click="Command_Click"
                Grid.Column="2"
                Margin="0,0,0,10" />

        <telerik:RadGridView x:Name="RadGridView1"
                             AutoExpandGroups="True"
                             Grid.Row="1"
                             Grid.ColumnSpan="3"
                             AutoGenerateColumns="False" />
    </Grid>
</UserControl>

[Vanya Pavlova]

Hi Richard,

 
As part of RadGridView GridViewCell is located in Telerik.Windows.Controls.GridView namespace and you should use the following:

xmlns:telerik="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"

In order to avoid such conflicts I would suggest you to use the URI telerik namespace:

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

I will be waiting for your response.

Best wishes,
Vanya Pavlova
the Telerik team

[Richard Harrigan]

Hi,

I made the change to the xaml and that fixed the reference.  However I have to remaining problems.

1.  The bitmap in the cell does not look good when the column width  is to large or to small.  I tried to make a bitmap that looks something like what is used in a cell with a validation error.  In the validation bitmap (maybe its not a bitmap?) the red triangle in the upper right hand corner does not change size when the column size changes.  The red border does however stretch.  My Bitmap only has the triangle with no border outline.  I need the triangle to be stationary in the upper right hand corner and not change in size when the column width changes..

2.  The data in the cell is not visible.

Thanks
Rich

[Vanya Pavlova]

Hello Richard,

 
When you perform validation in RadGridView on a cell level this triangle and the corresponding message that appeared represents the validation tooltip and it is incorporated in GridViewCell's template. In our case we are creating a custom control template for GridViewCell with limited capabilities. If you need to get the full capabilities of GridViewCell you need to edit its template and to change the validation tooltip in the way you need, in this case you will get the data correctly displayed and your own custom validation tooltip.


If you need any further assistance let me know.

All the best,
Vanya Pavlova
the Telerik team

[Richard Harrigan]

Ok.  For know, I will just change the cells backgrond color to indicate a commented cell.   The ability to use a bitmap for a cells background might be a nice feature to add in the future? 

Thanks
Rich