Virtualization or filtering binding problem

[FENWICK]

Hi,

I have a gridview with a GridViewDataColumn with a custom CellTemplate. The SelectedItem binding works fine but when I scroll or filter, the selectedItem binding lost. I have made some tests and when I open my ComboBox to the first time, the binding is already lost.

<tlk:RadGridView Grid.Column="1"  Margin="10,5,10,10" EditTriggers="CellClick"

                                AutoGenerateColumns="False" ShowGroupPanel="False" x:Name="_ListElementMateriel" >

    <tlk:GridViewDataColumn UniqueName="ModeleMateriel" DataMemberBinding="{Binding ModeleMateriel.NomModele, Mode=TwoWay}" Header="Modèle" >

          <tlk:GridViewDataColumn.CellTemplate>

            <DataTemplate>

              <ComboBox x:Name="_cbModele"  DisplayMemberPath="NomModele" ItemsSource="{Binding ModelesPossibles}"                   
                                                        SelectedItem="{Binding ModeleMateriel}" />

            </DataTemplate>

          </tlk:GridViewDataColumn.CellTemplate>

        </tlk:GridViewDataColumn>     

</tlk:RadGridView>

I found a workaround : When a value change, i set my binding each time... but it's not a good solution.

Have you an idea ?

EDIT : This problem seems to come from the use of GridViewDataColumn and custom template with a combobox with binding. I use DataColumn to take advantage of the distinctvalue filter.

Thanks to your reply

[Dimitrina]

Hello,

The grid utilizes horizontal and vertical virtualization and introduces container recycling for a further improvement of speed and memory footprint. That means that when a row is scrolled out of view, it is destroyed and it is created again once it is back in view.

Greetings,
Didie
the Telerik team

[FENWICK]

In fact, when I wrote the mode on my combobox binding, the binding is not lost. But SelectedItem is null when I scrolled or filtered...

I need to have silverlight combobox bind in two way and I want to keep using column filter. what's the solution? 
My binding for the combobox is : {Binding ModeleMateriel,Mode=TwoWay"} 
and for the column DataMemberBinding={Binding ModeleMateriel.NomModele,Mode=OneWay}


PS : I'm in latest release SL4 (Q3 2011)

[Dimitrina]

Hello,

 The Binding is lost because the SelectedItem becomes null once the cell containing the ComboBox is removed.

Kind regards,
Didie
the Telerik team

[Keith]

I am having the same problem. I have a GridView with 3 GridViewDataColumns that have cell templates containing NumericUpDown controls. The Minimum and Maximum properties of the NumericUpDown controls are bound to min and max properties in the underlying object. When the GridView first loads, all is fine, but as soon as I scroll down to the bottom and scroll back up, these min and max bindings are completely wiped and the NumericUpDown controls become completely unusable!

If I make EnableRowVirtualisation=False on the GridView, the problem goes away, but the grid takes an unacceptable amount of time to load as every row is having to be loaded, not just those in the view port.

My understanding of row virtualisation is that when you scroll, rows that disappear out of the view port are unloaded, and those that appear are loaded. This should be true when scrolling in either direction, up or down. However, in subscribing to the loaded and unloaded events for the NumericUpDown controls, what I observed doesn't fit with this paradigm . Firstly, the loaded event doesn't seem to fire for every NumericUpDown control appearing into view, only a handful of them, and quite randomly at that! Further, the unloaded event is NEVER fired.

This is immensely frustrating! Can you explain why having EnableRowVirtualisation=True screws up data bindings and how to get around the problem?

Keith

[FENWICK]

In my last post, I noted the binding is not lost but SelectedItem is null. So Why the binding is not refreshed when the combobox rebuild ?
Even if I wrote EnableVirtualizationRow the problems occurs when I filter or sort on a column.

What's is the solution ? 

Thanks

[FENWICK]

I found a bad solution but works : 
 
In Xaml, I defined a OneWay binding to SelectedItem

<tlk:GridViewDataColumn UniqueName="ModeleMateriel" Header="Modèle" IsReadOnly="True" DataMemberBinding="{Binding ModeleMateriel.NomModele}">
          <tlk:GridViewDataColumn.CellTemplate>
            <DataTemplate>
              <ComboBox DisplayMemberPath="NomModele" ItemsSource="{Binding ModelesPossibles}" SelectedItem="{Binding ModeleMateriel, Mode=OneWay}" SelectionChanged="ComboBox_SelectionChanged"/>
            </DataTemplate>
          </tlk:GridViewDataColumn.CellTemplate>
        </tlk:GridViewDataColumn>

And in c#, I re set the binding if It's lost and I change my value manually :

private void ComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
  var combo = sender as ComboBox;
  if (combo != null)
  {
    var elem = combo.DataContext as ElementMateriel;
    if (elem != null && elem.ModeleMateriel != combo.SelectedItem)
      elem.ModeleMateriel = combo.SelectedItem as ModeleMateriel;
    if (combo.GetBindingExpression(ComboBox.SelectedItemProperty) == null)
      combo.SetBinding(ComboBox.SelectedItemProperty, new Binding(ElementMateriel.ModelePropertyName));
  }
}

Is there a real solution ?

Thanks

[Dimitrina]

Hi,

 I can suggest you to use the GridViewComboBoxColumn and set the SelectedValueMemberPath.

All the best,
Didie
the Telerik team

[FENWICK]

I can't use GridViewComboBoxColumn because I need the Silverlight Combobox style and no click to edit my value. All other cell on my row isn't in edit mode.

[Nurali]

I'm also having serious problems depending of this issue.I have designed animated arrows which 
they show the medical information status such as high,low or critical...

I have some visual-states in my Arrow control and a dependency property named CriticalLevel. I bind the data to CriticalLevel when CriticalLevel changes, (I handle it with PropertyChanged event in ctor).I choose right state for the control. But for virtualization I lose my binding and things get worse! It shows a random state,(I think the state of above row's).

I disabled row-virtualization. (Before disabling it I faced of scrolling problem,when I scroll arrows shows wrong direction) 

Then I needed using paging. I use Telerik's QueryableDomainServiceCollectionView . 

This time I'm having wrong directed arrows when I navigate with RadDataPager. It is medical data and very important for us.

What do you recommend ? 

[Dimitrina]

Hello,

How do you choose the right state for the control? Have you set any properties for the visual GridViewCell element? 
 

Kind regards,
Didie
the Telerik team

[Nurali]

Hi,

I decide the state when a property on my control (named CriticalLevel) changes. 
I handle it by PropertyChanged event located on my ctor of control.

I'm sharing complete code,

<pdfw:BaseUserControl 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:pdfw="clr-namespace:PDFW.SL;assembly=PDFW.UI.SL.Controls" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:ee="http://schemas.microsoft.com/expression/2010/effects" x:Name="baseUserControl" x:Class="AHBSBus.Controls.AlertArrow"
    mc:Ignorable="d" d:DesignWidth="150" d:DesignHeight="200">
  
	<Grid x:Name="LayoutRoot">
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="VisualStateGroup">
				<VisualStateGroup.Transitions>
					<VisualTransition GeneratedDuration="0">
						<Storyboard>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="path">
								<DiscreteObjectKeyFrame KeyTime="0">
									<DiscreteObjectKeyFrame.Value>
										<Visibility>Collapsed</Visibility>
									</DiscreteObjectKeyFrame.Value>
								</DiscreteObjectKeyFrame>
							</ObjectAnimationUsingKeyFrames>
						</Storyboard>
					</VisualTransition>
					<VisualTransition GeneratedDuration="0:0:0.7" To="Critical2">
						<ei:ExtendedVisualStateManager.TransitionEffect>
							<ee:FadeTransitionEffect/>
						</ei:ExtendedVisualStateManager.TransitionEffect>
					</VisualTransition>
					<VisualTransition GeneratedDuration="0:0:0.7" To="CriticalNegative2">
						<ei:ExtendedVisualStateManager.TransitionEffect>
							<ee:FadeTransitionEffect/>
						</ei:ExtendedVisualStateManager.TransitionEffect>
					</VisualTransition>
                    <VisualTransition GeneratedDuration="0:0:0.7" To="CriticalNegative1">
						<ei:ExtendedVisualStateManager.TransitionEffect>
							<ee:FadeTransitionEffect/>
						</ei:ExtendedVisualStateManager.TransitionEffect>
					</VisualTransition>
					<VisualTransition GeneratedDuration="0:0:0.7" To="Critical1">
						<ei:ExtendedVisualStateManager.TransitionEffect>
							<ee:FadeTransitionEffect/>
						</ei:ExtendedVisualStateManager.TransitionEffect>
					</VisualTransition>
				</VisualStateGroup.Transitions>
				<VisualState x:Name="Critical2"/>
				<VisualState x:Name="Critical1">
					<Storyboard>
						<ColorAnimation Duration="0" To="#FFFF9800" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="CriticalNegative2">
					<Storyboard>
						<DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="path" d:IsOptimized="True"/>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="CriticalNegative1">
					<Storyboard>
						<DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="path" d:IsOptimized="True"/>
						<ColorAnimation Duration="0" To="#FFFF9800" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="BaseState" >
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="LayoutRoot">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
			
		</VisualStateManager.VisualStateGroups> 
		<VisualStateManager.CustomVisualStateManager>
			<ei:ExtendedVisualStateManager/>
		</VisualStateManager.CustomVisualStateManager> 
		<Path x:Name="path" Data="M176,56 L119.5,135.5 L159.5,127.5 L143.5,223.5 L207.5,223.5 L191.5,127.5 L231.5,135.5 L175.5,55.5" Stretch="Fill" UseLayoutRounding="False" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" Fill="Red" >
			<Path.RenderTransform>
				<CompositeTransform/>
			</Path.RenderTransform>	
		</Path>			
	</Grid>
</pdfw:BaseUserControl>

Here is the codebehind of control

    public partial class AlertArrow : BaseUserControl
    {
 
        public AlertArrow()
        {
            InitializeComponent();
            bool result = VisualStateManager.GoToState(this, "BaseState", true);
 
//This event is our special event when property's value really changes it fires
            this.PropertyChangedAdvanced += (s, a) =>
                {
                    if (a.PropertyName == "CriticalLevel")
                    {
                        var value = (int)a.NewValue;
                        switch (value)
                        {
                            case 0:
                                result = VisualStateManager.GoToState(this, "BaseState", true);
                                break;
                            case 1:
                                result = VisualStateManager.GoToState(this, "Critical1", true);
                                break;
                            case 2:
                                result = VisualStateManager.GoToState(this, "Critical2", true);
                                break;
                            case -1:
                                result = VisualStateManager.GoToState(this, "CriticalNegative1", true);
                                break;
                            case -2:
                                result = VisualStateManager.GoToState(this, "CriticalNegative2", true);
                                break;
                            default:
                                result = VisualStateManager.GoToState(this, "BaseState", true);
                                break;
                        }
                    }
                };
            
        }
 
        public static DependencyProperty CriticalLevelProperty = RegisterDependencyProperty<int>("CriticalLevel", MethodBase.GetCurrentMethod().ReflectedType,0);
 
        [System.ComponentModel.Category("DataSel")]
        public int CriticalLevel { get { return GetDependencyValue<int>(CriticalLevelProperty); } set { SetDependencyValue(CriticalLevelProperty, value); } }
    }

[Dimitrina]

Hi,

You say that you have problems navigating with the RadDataPager. Then you explain about your control (named CriticalLevel).

In the pasted code I do not see any telerik control. Would you please clarify if you have an issue with a particular control that we ship?
 

Greetings,
Didie
the Telerik team

[Nurali]

Hi,
You are right .But, we derived your components ,beside this there are most of other things we interested so sharing the code you wanted became hard. Anyway I'm sharing the code how you want to see with little changes.

Paging supported by Telerk's QueryableDomainServiceCollectionView

  public QueryableDomainServiceCollectionView<MeasurenmentViewItem> SuspectedItems ...

<telerik:RadDataPager Grid.Column="0" Source="{Binding SuspectedItems}" PageSize="15" />  

<telerik:RadGridView ItemsSource="{Binding SuspectedItems}" .../>
...
<telerik:RadGridViewDataColumn Header="{Binding Source={StaticResource ResourceWrapper}, Path=MedicalResources.MeasurementWegtValue}">
<telerik:RadGridViewDataColumn.CellTemplate>
<DataTemplate>
                                                              <controls:AlertArrow Margin="5,0" Grid.Column="1" CriticalLevel="{Binding CriticalLevel}" />
</DataTemplate>
</telerik:RadGridViewDataColumn.CellTemplate>
</teelerik:RadGridViewDataColumn>

I hope I succeeded clarifying it this time,

Regards !

[Dimitrina]

Hello,

I am not sure why you got visual problems. Generally it is not a good practice to work with the visual elements of the GridView. As you know, when the row virtualization is set to True,  then the rows (cells) are reused . You may find more information about virtualization in this help article. You should work on the data item instead (if possible).

Would you please isolate the issue in a demo project and send it to us? You can check this blog post for a reference on how to isolate a problem in a sample project.

All the best,
Didie
the Telerik team