Repainting grid with RadHorizontalLinearGauge inside column CellTemplate

[Gina]

Hello,
I have a problem with grid repainting/coloring the RadHorizontalLinearGauge that is inside my colum cell template when the datasource of the grid is changed. Let me explain my scenario, I have the following class:

public class Strand : BaseObject
    {
        private long stranNo;
        public long StrandNo
        {
            get { return this.stranNo; }
            set { this.stranNo = value; this.OnPropertyChanged("StrandNo"); }
        }

        private string strandName;
        public string StrandName
        {
            get { return this.strandName; }
            set { strandName = value; this.OnPropertyChanged("StrandName"); }
        }

        private List<GridData> gridData;
        public List<GridData> GridData
        {
            get { return gridData; }
            set { gridData = value; this.OnPropertyChanged("GridData"); }
        }

        private bool isSelected;
        public bool IsSelected
        {
            get { return isSelected; }
            set { isSelected = value; this.OnPropertyChanged("IsSelected"); }
        }
    }

As you can see, it has 4 properties and one of them is the list of data to be binded on the grid. My view model contains only the list of Strands. So I made an itemcontrol that has as source the list of strands and creates a radio group button for each element in the list. The ItemsSource of the grid is binded to the selectedStrand, and the data are changing in base of the selected radio button. Here is the xaml

<Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <ItemsControl ItemsSource="{Binding Strands}" Grid.Row="0">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <RadioButton Content="{Binding StrandName}" Margin="5" IsChecked="{Binding IsSelected}" GroupName="Strands"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
                <Button Content="Rebind" Margin="5" Grid.Row="1" MaxWidth="80" Click="RebindButton_Click"/>
                <GroupBox Header="Grid" Margin="5" Grid.Row="2">
                    <telerik:RadGridView x:Name="Grid"
                                     Margin="5"
                                     IsFilteringAllowed="True"
                                     IsReadOnly="True"
                                     CanUserFreezeColumns="True"
                                     CanUserReorderColumns="False"
                                     CanUserResizeColumns="True"
                                     RowIndicatorVisibility="Collapsed"
                                     AutoGenerateColumns="False"
                                     ScrollViewer.CanContentScroll="True"
                                     ScrollViewer.VerticalScrollBarVisibility="Visible"
                                     ItemsSource="{Binding SelectedStrand.GridData}">
                        <telerik:RadGridView.Columns>
                            <telerik:GridViewDataColumn Header="Name"
                                                    DataMemberBinding="{Binding Name}"
                                                    HeaderTextAlignment="Center"
                                                    Width="Auto" />
                            <telerik:GridViewDataColumn Header="Value"
                                                    DataMemberBinding="{Binding Value}"
                                                    HeaderTextAlignment="Center"
                                                    TextAlignment="Left"
                                                    Width="Auto" />
                            <telerik:GridViewDataColumn Header="Gauge"
                                                HeaderTextAlignment="Center"
                                                Width="*" >
                                <telerik:GridViewDataColumn.CellTemplate>
                                    <DataTemplate>
                                        <telerik:RadHorizontalLinearGauge Margin="5" Height="15">
                                            <telerik:HorizontalLinearScale
                                                Min="{Binding MinGaugeValue, Source={StaticResource Model}}"
                                                Max="{Binding MaxGaugeValue, Source={StaticResource Model}}"
                                                LabelFormat="{}{0}"
                                                LabelLocation="OverCenter"
                                                FontSize="8"
                                                FontFamily="Comic Sans MS"
                                                FontStyle="Normal"
                                                MajorTickLocation="OverOutside"
                                                MiddleTickLocation="OverOutside"
                                                MinorTickLocation="OverOutside"
                                                RangeLocation="OverCenter"
                                                MajorTickRelativeHeight="0.2"
                                                MiddleTickRelativeHeight="0.1"
                                                MinorTickRelativeHeight="0.05"
                                                MiddleTicks="1"
                                                RelativeHeight="1"
                                                RelativeWidth="1"
                                                RelativeX="0"
                                                RelativeY="0.5"
                                                Foreground="Black"
                                                Ranges="{Binding VariableRanges, Converter={StaticResource variableRangeToTelerikRanges}}">
                                                <telerik:LinearScale.Indicators>
                                                    <telerik:Marker telerik:ScaleObject.Location="Inside"
                                                    telerik:ScaleObject.RelativeWidth="0.04*"
                                                    telerik:ScaleObject.RelativeHeight="0.5*"
                                                    Value="{Binding Value}"/>
                                                </telerik:LinearScale.Indicators>
                                            </telerik:HorizontalLinearScale>
                                        </telerik:RadHorizontalLinearGauge>
                                    </DataTemplate>
                                </telerik:GridViewDataColumn.CellTemplate>
                            </telerik:GridViewDataColumn>
                        </telerik:RadGridView.Columns>
                    </telerik:RadGridView>
                </GroupBox>
            </Grid>

The first time that the application starts everything is ok and for all the rows the gauges are colored as you can see in gaugefirstload.jpg. But when the other radio button is selected and the grid's itemssource is changed the gauges are drawn inside the grid cells but there are not colored and I see them black & white as in GaugeAfterRadioChanged.jpg. When I play with the scroll the coloring of the gauges is casual as in GaugeAfterRadioChangedAndScroll.jpg. I tried to use the Rebind() of the grid, but it didn't help. Is there some event or something that can be used to force the grid to repaint itself and color the gauges when radio button changes?
I can send you the sample solution that I made and where you can see this behaviour, maybe it woud be easier for you to understand and simulate the problem, just tell me how cause the zipped solution has around 30mb.
Thanks
Kindly regards
Gina

[Pavel Pavlov]

Hi Gina,

I can not debug the code without having a runnable project at my side , however I may suggest the following good practices.

1. Have the source data objects implement the INotifyPropertyChanged interface . And raise the property changed event for each relevant property. This way RadGridView will sense any changes

2. Have your source collection to be INotifyCollectionChanged ( for example ObservableCollection) . This would additionally help RadGridView ( and other ItemsControl) sense any additions /removals in the source collections

If those two do not help, please provide a runnable project exposing the issue and I will be glad to step trough it and see what went wrong.


Regards,
Pavel Pavlov
the Telerik team