Cell Element with Rad Image Scrolling Issue

[Caleb]

Hello!

I have a grid that adds a little triangle image to cells that contain note information. The triangles are rendering properly and show the correct content when hovering over them but as soon as you begin to scroll the grid the triangles start to appear on other cells that they shouldn't. I have attached some images showing the issue. The first triangle is correct but then the subsequent ones are added when you start to scroll down or minimize the window and then maximize it again. The code I'm using is below and I can't figure out what the problem could be. 

Thanks for any help!

 

private void gridOptions_CellFormatting(object sender, CellFormattingEventArgs e)
{
  if (e.Column.Name == "colText")
  {
    if (!string.IsNullOrEmpty(OptionRowNotes(tJobOption.fAuditNotes, e.Row))
      && e.CellElement.Children.Count == 0)
    {
      var image = new RadImageItem();
      image.Image = Resources.RedTriangle;
      image.ToolTipText = OptionRowNotes(tJobOption.fAuditNotes, e.Row);
      image.PositionOffset = new SizeF(e.CellElement.ColumnInfo.Width - 10, -1);
      image.ZIndex = 1;
      e.CellElement.Children.Add(image);
    }
  }
}

[Dimitar]

Hi Caleb,

Thank you for writing.

The grid is using UI Virtualization. This means that the cell elements are reused and this is why the cells are mixed. In this case, you need to provide an else statement and remove the image if is not needed. Detailed information is available here: Formatting Cells | RadGridView.

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Telerik by Progress

[Caleb]

Thank you so much! Virtualization was the issue and I didn't know the grid was using that to render the rows. So I just made a small change and now everything is fine! Thanks again!

private void gridOptions_CellFormatting(object sender, CellFormattingEventArgs e)
{
  if (e.Column.Name == "colText")
  {
     // Add a triangle if the row contains note data.

    if (!string.IsNullOrEmpty(OptionRowNotes(tJobOption.fAuditNotes, e.Row))
      && e.CellElement.Children.Count == 0)
    {
      var image = new RadImageItem();
      image.Image = Resources.RedTriangle;
      image.ToolTipText = OptionRowNotes(tJobOption.fAuditNotes, e.Row);
      image.PositionOffset = new SizeF(e.CellElement.ColumnInfo.Width - 10, -1);
      image.ZIndex = 1;
      e.CellElement.Children.Add(image);
    }
    else
    {
      // Remove the image element if no note found for row.
      e.CellElement.Children.Clear();
    }
  }
}

[Dimitar]

Hi Caleb,

Please note that you need to add the else statement to the other if as well. The same effect will occur if the user is scrolling horizontally for example.

Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Telerik by Progress

[Mario]

hello Dimitar,

 

I have the same case, but my problem is when I try to edit a cell that doesn't add an image to it (attached reference images)

I can only edit when the cell has an image.

 

[Nadya | Tech Support Engineer]

Hello, Mario,

According to the provided brief information, I was not able to reproduce this behavior. By default, the columns in RadGridView are not read-only. All columns which are read-only in the data source will be read-only in the grid as well. Could you make sure that your data source is not read-only or you set ReadOnly property of a column somewhere in your project?

If you are experiencing further difficulties I would kindly ask you to provide more information about how you set up the grid on your end. It would be of great help if you can provide a code snippet as well.

Looking forward to your reply.

Regards,
Nadya
Progress Telerik