Cell Element with Rad Image Scrolling Issue

6 posts, 1 answers
  1. Caleb
    Caleb avatar
    6 posts
    Member since:
    Mar 2016

    Posted 21 Feb 2017 Link to this post

    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);
        }
      }
    }
  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    2907 posts

    Posted 22 Feb 2017 Link to this post

    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.
  3. Caleb
    Caleb avatar
    6 posts
    Member since:
    Mar 2016

    Posted 22 Feb 2017 in reply to Dimitar Link to this post

    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();
        }
      }
    }
  4. Dimitar
    Admin
    Dimitar avatar
    2907 posts

    Posted 23 Feb 2017 Link to this post

    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.
  5. Mario
    Mario avatar
    5 posts
    Member since:
    Feb 2020

    Posted 25 Jul in reply to Dimitar Link to this post

    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.

     

  6. Nadya
    Admin
    Nadya avatar
    344 posts

    Posted 29 Jul Link to this post

    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

Back to Top