[Solved] Images disappear when scrolling in GridView

[Mark]

I have a GridView which contains a template column with a custom control which loads a variable number of images from the web site.   The images initally load correctly, but disappear when you scroll. 

The HealthIndicatorControl contains a stack panel to which images are dynamically loaded and added into the panel.  I am manually binding the HealthIndicatorControl is the RowLoaded event and setting a property on the HealthIndicatorControl.

Any ideas?
-------  Row Loaded event handler

 

        void grdSites_RowLoaded(object sender, RowLoadedEventArgs e)
        {
           if (e.Row.Cells != null)
            {
               if (e.Row.Cells.Count >= STATIC_COLUMN_COUNT)
                {
                    GridViewCellBase cellBase = e.Row.Cells[STATIC_COLUMN_COUNT - 1];

                    IList<HealthIndicatorControl> childItems = cellBase.ChildrenOfType<HealthIndicatorControl>();

                    if (childItems.Count > 0)
                    {
                        HealthIndicatorControl control = childItems[0];
                        e.Row.DataContext).JobSiteDTO.HealthIndicators;
                    }
                }
            }
        }

 

-- Grid Column XAML

                <grid:GridViewDataColumn Header="Health" IsReadOnly="True" IsFilterable="False" IsSortable="False">
                    <grid:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                           <controls:HealthIndicatorControl HealthIndicatorData="{Binding HealthIndicators}"></controls:HealthIndicatorControl>
                        </DataTemplate>
                    </grid:GridViewDataColumn.CellTemplate>
                </grid:GridViewDataColumn>

 

 

 

[Rossen Hristov]

Hi MJ,

With the introduction of virtualization of RadGridView many things have changed. Containers (rows and cells) are recycled and reused. That is why you should not be using the RowLoaded event anymore. This is because one cell can host many different data instances during its lifetime. The correct way to do this is define a CellStyle for the column of your choice and through this CellStyle change the cell template. Then you modify the DataTemplate in a way to suite your needs.

To demonstrate this I have prepared a very simple project that paints cells according to some property of the business object. I guess that in your case you will need to create an IValueConverter which will return the images based on the business object property. Then you will bind your custom control to the business object property by using this converter. In my sample project the the converter takes a football player Position and based on it returns a Brush to paint the background of the cell. You can see this in the cell template. I guess that  yours should so something similar.

The bottom-line is that you should do everything through the cell template and not on RowLoaded.

Please, examine my sample project (which is over-simplified of course) and let me know if you have any questions or troubles in implementing this approach.

All the best,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.