Cell and Triggers

[Paul Gallen]

Hi,

I would like to run a storyboard which will effect the border when a user enters a cell. I presume this can be achieved through a trigger.
Alternately / also I would like show a different control template, when the enters the cell and leaves the cell

My problem is that I do not which property to attach the trigger to.

for my column style I am using this ControlTemplate.

 

 

 

 

 

<ControlTemplate x:Key="DataBoundColumnCustom" TargetType="{x:Type telerik:GridViewCell}">

 

 

 

 

 

 

<ControlTemplate.Triggers>

 

 

 

 

 

 

<Trigger>

 

 

 

 

 

 

 

</Trigger>

 

 

 

 

 

 

</ControlTemplate.Triggers>

 

 

 

 

 

 

<Border CornerRadius="2,2,2,2" Background="Cornsilk" Opacity="50" >

 

 

 

 

 

 

</Border>

 

 

 

</ControlTemplate>

 

 

 

 

 

 

[Hristo Deshev]

Hello Paul Gallen,

I guess you want to have  a different template whenever the user hovers the mouse over a cell. To do that, you have to define a trigger for the IsMouseOver property on your cell style. Here is a simple example:

<Style TargetType="{x:Type telerik:GridViewCell}">
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Template" Value="{StaticResource NormalTemplate}">
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Template" Value="{StaticResource MouseOverTemplate}"></Setter>
        </Trigger>
    </Style.Triggers>
</Style>

The style applies NormalTemplate and switches to MouseOverTemplate when the user hovers the mouse.

I am attaching the complete sample project for your reference.

Sincerely yours,
Hristo Deshev
the Telerik team

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

[Paul Gallen]

Hi Hristo,

Thanks for that, I have taken your example and applied to one cell only and it works fine, however.... I am unalbe to edit the contents of that cell. If I remove the style, editing is back.

2nd Question:

Is it possible to have an editable template which exceeds the bounds of the cell e.g. When the user edits the contents of the cell it will appear to pop out of the cell


Thanks


P

[Paul Gallen]

Hi

After looking at the style you sent me, the reason I am unable to edit the cell is because the contentpresenter. I have changed it for a textbox.

        <ControlTemplate x:Key="EditTemplate" TargetType="telerik:GridViewCell">
            <Border Name="CellBorder"
                                    CornerRadius="0,0,0,0"
                                    BorderThickness="2"
                                    Background="Aqua">
                <Border Height="Auto"
                                        Width="Auto"
                                        BorderBrush="Beige"
                                        CornerRadius="5,5,5,5"
                                        BorderThickness="1"
                                        Margin="5,5,5,5">
                    <TextBox
                                        Name="txt"
                                        Width="Auto"
                                        Margin="2,2,2,2"
                                        Foreground="Black"
                                        Text="{TemplateBinding Content}"/>
                </Border>
            </Border>
        </ControlTemplate>

        <Style x:Key="tsEdit" TargetType="{x:Type telerik:GridViewCell}">
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Style.Triggers>
                <Trigger Property="IsInEditMode" Value="True">
                    <Setter Property="Template" Value="{StaticResource EditTemplate}"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

Other Questions are:-

1. Is it possible to have an editable template which exceeds the bounds of the cell? e.g. When the user edits the contents of the cell it will appear to pop out of the cell.
2. Given the above template, after editing the content in the textbox how do I update the underlying datasource?


Thanks

P

[Paul Gallen]

Hi taking this example a bit further, using a popup uielement in my template and using the trigger to determine if the cell is in edit mode, I have come up with this solution.

      <ControlTemplate x:Name="ct" x:Key="EditTemplate" TargetType="telerik:GridViewCell">
            <Popup IsOpen="True"  StaysOpen="False"  Width="400" PlacementTarget="{Binding ElementName=ct}">
            <Border Name="CellBorder"
                                    CornerRadius="0,0,0,0"
                                    BorderThickness="2"
                                    Background="Aqua">
                <Border Height="Auto"
                                        Width="Auto"
                                        BorderBrush="Beige"
                                        CornerRadius="5,5,5,5"
                                        BorderThickness="1"
                                        Margin="5,5,5,5">
                        <StackPanel   Height="100">
                            <Button Content="Button 1" ></Button>
                            <Button Content="Button 2" ></Button>
                            <TextBox
                                        Name="txt"
                                        Width="Auto"
                                        Margin="2,2,2,2"
                                        Foreground="Black"
                                        Text="{Binding Path=Country,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
                            <TextBox
                                        Name="txt2"
                                        Width="Auto"
                                        Margin="2,2,2,2"
                                        Foreground="Black"
                                        Text="{Binding Path=City,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
                        </StackPanel >
                    </Border>
            </Border>
                </Popup>
        </ControlTemplate>

        <Style x:Key="tsEdit" TargetType="{x:Type telerik:GridViewCell}" >

            <EventSetter Event="EditEnded" Handler="EditEndHandler" />
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Style.Triggers>
                <Trigger Property="IsInEditMode" Value="True">
                    <Setter Property="Template" Value="{StaticResource EditTemplate}"></Setter>
                </Trigger>
            </Style.Triggers>

TextBox txt2 is bound to the editing cell content, TextBox txt is bound to the adjacent cell which is not in edit mode. Interestingly when I edit the contents of txt and txt2, only the datasource for txt2 gets updated, so I put an event trigger handler on the style tsEdit and viewed the CellRoutedEventArgs in code after the edit:- The original value before the edit was Mexico, I edited the value and entered London, viewing the CellRoutedEventArgs the e.NewValue = Mexico and the e.OldValue = London. This is completely the reverse of what I have  entered.

Obviously I have not coded this correctly, can you advise?


Thanks


P

[Valeri Hristov]

Hello Paul,

I am afraid that we might have slipped in the wrong direction with those samples. Could you please define what do you want to achieve in the end so I try to provide a specific sample? As far as I understand, you are trying to create some sort of edit form, that contains all fields in a row, am I right? Something like this:
http://demos.telerik.com/aspnet-ajax/grid/examples/styles/editrowstyle/defaultcs.aspx

All the best,
Valeri Hristov
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.

[Paul Gallen]

Hi Hristo,

basically yes. When the user enters the cell to edit the content, I require a form to pop up so they can edit the cell value and also the form to provide additional functionality (buttons Lists etc). Other functionality would be, when they move off the cell onto another row, for example, this form needs to close.

I have nearly managed to get it working, but I think I am missing some vital code.

Thanks


P

[Paul Gallen]

Hi

Is there any movement on this?



Thanks

P

[Hristo Deshev]

Hello Paul Gallen,

I cobbled together a sample solution that, I think, does what you desire. It is based on an old example of ours that we used to call "custom cell editor." The idea is to use a Popup control in the cell template and put the PART_EditorPresenter ContentPresenter control inside. An additional trigger is needed that would display the popup when the cell enters edit mode as well. Here is my template:

<ControlTemplate x:Key="NormalTemplate" TargetType="{x:Type telerik:GridViewCell}">
    <Border
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    Background="{TemplateBinding Background}">
        <Grid>
            <ContentPresenter Visibility="Visible" Margin="{TemplateBinding Padding}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"/>
            <Popup Name="EditorPopup"
                   Visibility="Collapsed"
                   Placement="Center"
                   AllowsTransparency="True">

                <Border
                        BorderBrush="#FFE2E5FF"
                        BorderThickness="1,1,1,1"
                        CornerRadius="3,3,3,3"
                        Margin="1,1,1,1"
                        VerticalAlignment="Stretch"
                        Height="Auto">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,0.034" StartPoint="0.5,1">
                            <GradientStop Color="#FFB8C7EA" Offset="0"/>
                            <GradientStop Color="#FFBAC3FF" Offset="1"/>
                            <GradientStop Color="#FF636EAB" Offset="0.831"/>
                            <GradientStop Color="#FF9BADD4" Offset="0.831"/>
                        </LinearGradientBrush>
                    </Border.Background>
                <HeaderedContentControl Header="Edit:">
                    <Grid x:Name="customCellBackground" Width="200" Height="100">
                        <Grid.Resources>
                            <Style TargetType="{x:Type TextBox}">
                                <Setter Property="BorderBrush">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FF5990FF" Offset="0"/>
                                            <GradientStop Color="#FFFFFFFF" Offset="0.111"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="TextWrapping" Value="Wrap" />
                                <Setter Property="VerticalAlignment" Value="Center" />
                                <Setter Property="HorizontalAlignment" Value="Stretch" />
                                <Setter Property="Margin" Value="24, 24, 24, 24" />
                            </Style>
                        </Grid.Resources>

                        <ContentPresenter Name="PART_EditorPresenter" />
                    </Grid>
                </HeaderedContentControl>
                </Border>
            </Popup>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Value="True" Property="IsInEditMode">
            <Setter Property="IsOpen" TargetName="EditorPopup" Value="True"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

I am attaching my sample project for your reference.

Kind regards,
Hristo Deshev
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.

[Calvin]

I'd like to accomplish something similar....but only after a slight delay.  After the user hovers over a cell for say 350 milliseconds, I would like to surface a pallet of buttons surrounding the cell (but not actually contained within the cell).  That is, I don't want the cell's row size or the cell's column size to increase in order to accommodate the button pallet.

Selected-object-surrounding button pallets are embedded in CAD systems such as Siemens NX and Dassault Systèmes SolidWorks.  I've found this UI pattern to be highly convenient.

So that's what I'd like to do; but I'm not quite sure how to get there using the RadGridView control.

Suggestions would be much appreciated.  Many thanks!

[Maya]

Hello Calvin,

In order to achieve the desired result, you may try the following - create a separate user control and set the buttons you require inside. Afterwards, you may handle the MouseEnter event of the grid, verify whether the underlying object is of type GridViewRow and display a Popup, whose child is the user control you have created. The time for displaying the Popup may be controlled by a timer.

Kind regards,
Maya
the Telerik team

[Calvin]

Thanks Maya.

How does one verify whether the underlying object is of type GridViewRow?

Both the Source and OriginalSource properties of the MouseEventArgs in the grid's MouseEnter event always point to the the RadGridView rather than a GridViewRow.

Also, is there a way to get a reference to the cell which the mouse is moving over?

[Maya]

Hello Calvin,

You may try something like follows:

void clubsGrid_RowLoaded(object sender, RowLoadedEventArgs e)
        {
            var row = e.Row as GridViewRow;

            if (row != null)
            {
                row.MouseEnter += new MouseEventHandler(row_MouseEnter);
            }
        }

        void row_MouseEnter(object sender, MouseEventArgs e)
        {
            var sourceElement = e.OriginalSource as FrameworkElement;
        }

Best wishes,
Maya
the Telerik team