RadGridView randomly changes cell content

[Hendrik]

Hi,

I'm using the CellLoaded event to customize a RadGridView. Setting a background brush and foreground + fontweight for the TextBlock in the cell works as expected. I'm also using the AutoGeneratingColumn event to set a DataTemplate for a column.

Now I want to use DataTemplates for individual cells. But when I do so I have to set a DataTemplate for every cell, every time it's rendered. If I'm not setting a DataTemplate I get a random content from a random cell, everytime a cell is scrolled into view. If I'm using DataTemplates for all cells I can't edit the cells anymore.

 

Is there anything I can do to stop the RadGridView messing up my cells? Changing the virtualization settings didn't changed anything, even if I disabled virtualization (VirtualizingPanel.IsVirtualizing="False").

 

This is my GridView now:

<telerik:RadGridView AutoGenerateColumns="True"
                     VirtualizingPanel.VirtualizationMode="Recycling"                                     
                     Grid.Row="1"
                     x:Name="Gv"
                     Margin="0 20 10 0"
                     SelectionMode="Extended"
                     SelectionUnit="Cell"
                     CellLoaded="GvCellLoaded"
                     BeginningEdit="GvEditBegins"
                     CellEditEnded="CellEditEnded"
                     AutoExpandGroups="True"
                     GroupRenderMode="Flat"
                     ValidatesOnDataErrors="None"
                     telerik:TouchManager.TouchMode="None"
                     CanUserSortColumns="False"
                     CanUserSortGroups="False"
                     IsReadOnly="False"
                     AllowDrop="True"
                     ItemsSource="{Binding Items}"
                     FrozenColumnsSplitterVisibility="Collapsed"
                     ContextMenuOpening="GvContextMenuOpening"
                     ScrollViewer.VerticalScrollBarVisibility="Visible"
                     ScrollViewer.HorizontalScrollBarVisibility="Visible"
                     PreviewMouseRightButtonDown="GvRightMouseDown"
                     PreviewMouseLeftButtonDown="GvMouseDown"
                     PreviewMouseLeftButtonUp="GvMouseUp"
                     AutoGeneratingColumn="GvAutoGenerate">

[Stenly]

Hello Hendrik,

Generally, it is not suggested to work directly with the visual elements of RadGridView due to the UI Virtualization logic of the control, which is turned on by default:

WPF DataGrid - UI Virtualization - Telerik UI for WPF  

Instead of modifying the GridViewCell elements directly by working them in the CellLoaded event, the suggested way is to utilize the following properties of each column of RadGridView:

• CellStyle and CellStyleSelector
• CellTemplate and CellEditTemplate
• CellTemplateSelector and CellEditTemplateSelector

On a side note, to disable the UI virtualization mechanism of RadGridView set the EnableColumnVirtualization and EnableRowVirtualization properties to False, Their default values are True.

I hope the provided information will be of help to you. If you need any further help, would it be possible to share a sample project that showcases the unwanted behavior?

Regards,
Stenly
Progress Telerik

[Hendrik]

Thank you, the CellTemplateSelector is what I need. But I don't define the DataTemplates in the xaml directly but in the .cs file itself, so I can calculate some stuff there. If anybody tries to do the same and struggles with the binding, here is how I made this work:

    public class StudySelectionCellTemplateSelector : DataTemplateSelector
    {
        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            if (container is not GridViewCell cell)
            {
                return null;
            }

            string tag = cell.Column.Tag.ToString();

            if (cell.ParentRow.Item is not DataRow row)
            {
                return null;
            }

            double percentage = SomeMethodToGetTheValue();

            string alignment = tag.Contains("FC") ? "Right" : "Left";
            string brush = tag.Contains("FC") ? "#50289EBC" : "#50de007e";
            string rec = percentage > 0 ? $"<Rectangle Fill='{brush}' Height='20' Width='{percentage}' HorizontalAlignment='{alignment}' />" : string.Empty;

            string xaml = $@"
<DataTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
              xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
              xmlns:telerik=""http://schemas.telerik.com/2008/xaml/presentation"">
    <Grid Width='100' MaxWidth='100'>
        {rec}
        <TextBlock Text='{{Binding RelativeSource={{RelativeSource Mode=FindAncestor, AncestorType={{x:Type telerik:GridViewCell}}}}, Path=Value}}' VerticalAlignment='Center' HorizontalAlignment='Right' />
    </Grid>
</DataTemplate>";

            DataTemplate template = (DataTemplate)XamlReader.Parse(xaml);

            return template;
        }
    } 

[Martin Ivanov]

Thank you for sharing your solution. I can add also the following resource on creating/using DataTemplates in the C# code.