High performance RadGridView update with cell blinking

[Lorenzo]

Hi,

we recently bought the latest version of RadControls for Winforms and we are using now Q1 2012 version.

I have a not-so-large data set to display using RadGridView, something like 200 rows and 30 columns. After the initial display I receive very often data udpate messages, that contains not all the data, but only the value to update (and the rowIndex and column name to locate the data to update).

For our business it's crucial to be able to update the displayed value immediately when the update message is received and notify that changing the cell style according to some business rules. (green if new value is bigger, yellow if it's equal or red if it's lower; also i need to change border color for that specified cell)

I'm trying using RadGridView in both bounded and unbounded mode to achieve my goal.

With bounded solution, when a message is received, I update the dataTable value (that is the data sorce) and I change the cell style using cellInfo.Style. In this case grid update seems to be a bit slow.
In unbounded mode I defined a custom column with contains cells of a custom type. I overridden the SetContentCore method and inside this method I recover cellInfo object for that cell and I use it to change the style of the cell. The problem is that when a specified value change for one cell, the entire row blink, since SetContentCore is raised for all elements for that row.
In both cases I use a timer that reset the cell style after a while. (unblink)

Before go furhter with code detail implementation, can you give me some tips about the best way to proceed? What is the best approach in order to achieve fastest data update with blinking?
Also, we need to open many RadGridView at the same time, so memory and CPU usage must be limited for each RadGridView.

Thank you very much in advance for your support.

Regards,
Lorenzo

[Richard Slade]

Hello,

Without trying out your project I can't be sure on an answer, but you may want to try wrapping your areas of update with Begin/EndUpdate

this.radGridView1.BeginUpdate();
// do stuff
this.radGridView1.EndUpdate();

Hope that helps
Richard

[Lorenzo]

Hi Richard,

thanks for your fast reply, but I already tried that and performance are still equals.

BeginUpdate() and EndUpdate() works fine when you have to update multiple data and you wanna commit visual changes only after the last update, but I have to update only one cell value and cell style at time.

Regards,
Lorenzo

[Richard Slade]

Hi Lorenzo,

Are you able to provide a basic exmaple using the code formatting block that I could take a look at for you?
Thanks
Richard

[Lorenzo]

Hi Richards,

here some code. It's just one example, I removed some logic.

In bounded mode, when update message is received, I use the following code to update value and style.

// Update DataTable
dataTable.Row[columnIndex] = newValue;

// Update Cell Color
cellInfo.Style.DrawFill = true;
cellInfo.Style.NumberOfColors = 1;
cellInfo.Style.CustomizeFill = true;
cellInfo.Style.DrawBorder = true;
cellInfo.Style.CustomizeBorder = true;
cellInfo.Style.BorderWidth = 1;
cellInfo.Style.BorderColor = Color.Red;
cellInfo.Style.BorderColor2 = Color.Red;
cellInfo.Style.BorderColor3 = Color.Red;
cellInfo.Style.BorderColor4 = Color.Red;
cellInfo.Style.BackColor = Color.Yellow;

Instead, in unbounded mode, I defined my custom column and my custom cell like this:

public class MyRadColumn : GridViewTextBoxColumn
{
public override Type GetCellType(GridViewRowInfo row)
        {
            if (row is GridViewDataRowInfo)
            {
                return typeof(MyRadCell);
            }
            return base.GetCellType(row);
        }
}

public class MyRadCell : GridDataCellElement
{
        protected override void SetContentCore(object value)
        {
// Update cell value
                base.SetContentCore(value);

// Update cell style
                GridViewCellInfo cellInfo = RowInfo.Cells[ColumnInfo.Name];

                cellInfo.Style.DrawFill = true;

cellInfo.Style.NumberOfColors = 1;

cellInfo.Style.CustomizeFill = true;

cellInfo.Style.DrawBorder = true;

cellInfo.Style.CustomizeBorder = true;

cellInfo.Style.BorderWidth = 1;

cellInfo.Style.BorderColor = Color.Red;

cellInfo.Style.BorderColor2 = Color.Red;

cellInfo.Style.BorderColor3 = Color.Red;

cellInfo.Style.BorderColor4 = Color.Red;

                cellInfo.Style.BackColor = Color.Yellow;

        }
}

I build the RadGridView using a code like that...

foreach (Column c in my dataset.....)
 {
                    column = new MyRadColumn(c);
                    radGridView1.Columns.Add(column);
 }

GridViewRowInfo rowInfo;
foreach (Row r in ......)
{
                rowInfo = this.radGridView1.Rows.AddNew();

                foreach (Column c in .....)
                {
                        rowInfo.Cells[c.Name].Value = value(r,c);
                }
}

...and when an update message is received I just use this code to update both value and style of the cell.

radGridView1.Rows[i].Cells[j].Value = receivedNewValue

Thanks,
Lorenzo

[Jack]

Hi Lorenzo,

Thank you for these details.

Yes, as you have observed using the Style property of GridViewCellInfo is slower than handling the CellFormatting event. Every time when you set a property of GridViewCellStyle class, an update is triggered and this causes the row to blink. The best option in this scenario is to use Begin/EndUpdate when updating cell values and to handle the CellFormatting event to apply visual styles. You can store meta information about the cell in GridViewCellInfo.Tag property. 

Please, note that when using custom cell elements, you should set GridCellElement properties directly instead of using the Style property. You should also use the UpdateInfo method instead of the SetContentCore one:

public class MyRadCell : GridDataCellElement
{
    public override void UpdateInfo()
    {
        base.UpdateInfo();

        if (/*some condition*/)
        {
            this.DrawFill = true;
            this.NumberOfColors = 1;
            this.DrawBorder = true;
            this.BorderWidth = 1;
            this.BorderColor = Color.Red;
            this.BorderColor2 = Color.Red;
            this.BorderColor3 = Color.Red;
            this.BorderColor4 = Color.Red;
            this.BackColor = Color.Yellow;
        }
        else
        {
            ResetValue(DrawFillProperty, ValueResetFlags.Local);
            ResetValue(NumberOfColorsProperty, ValueResetFlags.Local);
            ResetValue(DrawBorderProperty, ValueResetFlags.Local);
            ResetValue(BorderColorProperty, ValueResetFlags.Local);
            ResetValue(BorderColor2Property, ValueResetFlags.Local);
            ResetValue(BorderColor3Property, ValueResetFlags.Local);
            ResetValue(BorderColor4Property, ValueResetFlags.Local);
            ResetValue(BackColorProperty, ValueResetFlags.Local);
        }
    }
}

Processing the method is equivalent to handling the CellFormatting event.

I will need to check your project in order to make more specific suggestions.

Kind regards, Jack
the Telerik team