Show image based on value in a different column

[Bryan]

What would be the appropriate approach for displaying an image in column 1 with the value of column 2.

For example, if column 2 is a status column and when the status is "GOOD" I want image1 to be displayed but when its "BAD" I want image2 to be displayed. How would I handle this? What approach would have the best performance when there are a large number of rows? We have one grid that contains over 100,000 rows of data.

Thanks for the help.

 

Bryan

[Jack]

Hi Bryan,

You should just handle the CellFormatting event and set the desired image. Here is a sample:

void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement.ColumnInfo.HeaderText == "Name")
    {
        if ((int)e.CellElement.RowInfo.Cells["Value1"].Value > 5)
        {
            e.CellElement.Image = Resources.green;
        }
        else
        {
            e.CellElement.Image = Resources.red;
        }
    }
}

I hope this helps. If you need further assistance, feel free to ask.

Greetings,
Jack
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[runningnet]

I have the code below that adds an image based on the value of a cell.  The issue is that with about 18 columns and 11K rows when you scroll down the grid to where this image is being added to cells the scrolling slows or shutters.  I've tried also to loop on the databindingcomplete event through the rows and set the images then but when I scroll the images disappear.  Is there a way to get the images to not disappear when you scroll if added on a  DataBindingComplete? such as this?

 

private

 

void grdExamHistory_DataBindingComplete(object sender, GridViewBindingCompleteEventArgs e)

 

{

 

    foreach

 

(GridViewRowInfo row in this.grdExamHistory.Rows)
    {
    }
}

Currently I have the following but it is slow when scrolling when you hit records where the image is applied.

 

 

private void grdExamHistory_ViewCellFormatting(object sender, CellFormattingEventArgs e)

 

{

 

if (Program.mainForm.IsDoneLoadingForm)

 

{

 

try

 

 

 

 

 

{

 

if (e.CellElement.ColumnInfo.HeaderText == "STAT")

 

{

 

string pri = (e.CellElement != null && e.CellElement.RowIndex != -1 && e.CellElement.RowInfo.Cells["ReqPriority"] != null && e.CellElement.RowInfo.Cells["ReqPriority"].Value != null && e.CellElement.RowInfo.Cells["ReqPriority"].Value.ToString().Length > 0) ? e.CellElement.RowInfo.Cells["ReqPriority"].Value.ToString() : "";

 

 

if (pri == "1")

 

{

e.CellElement.Image = imageList1.Images[0];

e.CellElement.ToolTipText =

"STAT EXAM";

 

}

 

else if (pri == "2")

 

{

e.CellElement.Image = imageList1.Images[1];

e.CellElement.ToolTipText =

"SUPER STAT EXAM";

 

}

}

}

 

catch (Exception ex)

 

{

 

MailSender.EmailException("MDExamHistory_ViewCellFormatting", ex);

 

}

}

}

[Jack]

Hello runningnet,

Thank you for contacting us. I looked at your code and I found that some parts can be optimized. For example, accessing the RowIndex property is a slow operation. Accessing a cell by its name can be also slow when there is a large number of columns. So, I changed your code a little. Please consider the following snippet:

private void grdExamHistory_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
    if (Program.mainForm.IsDoneLoadingForm)
    {
        if (e.CellElement.RowElement is GridDataRowElement && e.CellElement.ColumnInfo.HeaderText == "STAT")
        {
            object cellValue = e.CellElement.RowInfo.Cells["ReqPriority"].Value;
            string pri = cellValue != null && cellValue.ToString().Length > 0 ? cellValue.ToString() : "";
            if (pri == "1")
            {
                e.CellElement.Image = imageList1.Images[0];
                e.CellElement.ToolTipText = "STAT EXAM";
            }
            else if (pri == "2")
            {
                e.CellElement.Image = imageList1.Images[1];
                e.CellElement.ToolTipText = "SUPER STAT EXAM";
            }
        }
    }
}

As you suggested, the alternative solution is to iterate over the rows and change the image at once. This can be made after setting the data source by using an additional image column. Here is a sample:

this.radGridView1.DataSource = myDataSource;

this.radGridView1.Columns["STAT"].IsVisible = false;
this.radGridView1.Columns.Add(new GridViewImageColumn("STAT2", ""));

foreach (GridViewRowInfo row in this.radGridView1.Rows)
{
    object cellValue = row.Cells["ReqPriority"].Value;
    string pri = cellValue != null && cellValue.ToString().Length > 0 ? cellValue.ToString() : "";
    if (pri == "1")
    {
        row["STAT2"].Image = imageList1.Images[0];
    }
    else if (pri == "2")
    {
        row["STAT2"].Image = imageList1.Images[1];
    }
}

Nevertheless, this code will increase somewhat the speed of your application, currently RadGridView is not optimized to show a large number of columns. We know about this limitation and we are working on a new version that will solve the issue. Please find more information in this blog article.

Regards,

Jack
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.