This is a migrated thread and some comments may be shown as answers.

Cell Element with Rad Image Scrolling Issue

5 Answers 166 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Caleb
Top achievements
Rank 1
Caleb asked on 22 Feb 2017, 12:49 AM

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")
  {

     // 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);
    }
  }
}

5 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 22 Feb 2017, 11:16 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Caleb
Top achievements
Rank 1
answered on 22 Feb 2017, 04:08 PM

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();
    }
  }
}
0
Dimitar
Telerik team
answered on 23 Feb 2017, 06:25 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Mario
Top achievements
Rank 1
answered on 25 Jul 2020, 02:13 PM

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.

 

0
Nadya | Tech Support Engineer
Telerik team
answered on 29 Jul 2020, 12:51 PM

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

Tags
GridView
Asked by
Caleb
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Caleb
Top achievements
Rank 1
Mario
Top achievements
Rank 1
Nadya | Tech Support Engineer
Telerik team
Share this question
or