Images disappear when scrolling in GridView

2 posts, 0 answers
  1. Mark
    Mark avatar
    79 posts
    Member since:
    Apr 2007

    Posted 08 Dec 2009 Link to this post

    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];  


    -- Grid Column XAML
                    <grid:GridViewDataColumn Header="Health" IsReadOnly="True" IsFilterable="False" IsSortable="False">  
                               <controls:HealthIndicatorControl HealthIndicatorData="{Binding HealthIndicators}"></controls:HealthIndicatorControl> 




  2. Rossen Hristov
    Rossen Hristov avatar
    2478 posts

    Posted 11 Dec 2009 Link to this post

    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,
    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.
Back to Top