RadGridView: ViewCellFormatting

[WEI TZE]

***Updated with simple standalone project attachment (ViewCellFormatting.zip)

Problem Statement:

After initial load of RadGridView with ViewCellFormatting, the appearance looks desaturated/washed out (as shown in Figure 1), until I manually mouseover the rows (as shown in Figure 2 & Figure 3).

Formatting Cells:

private void dgvMap_ViewCellFormatting(object sender, Telerik.WinControls.UI.CellFormattingEventArgs e)
        {
         if (e.CellElement is GridCellElement && e.CellElement.Text.Trim().Length != 0)
            {
               
                    Color c = Color.Black;
                    e.CellElement.ForeColor = Color.Black;
                    e.CellElement.BackColor = c;
                    e.CellElement.DrawFill = true;
            }
        }

 

Figure 1 (Initial Load):

Figure 2 (Manual Mouse Roll Over - partial):

Figure 3 (Manual Mouse Roll Over - Full):

[Dinko | Tech Support Engineer]

Hello WEI TZE,

Thank you for the provided details.

The most common reason behind this is that you need to reset the value of the set properties if the IF clause statement is not fulfilled as demonstrated in the Formatting Cells help article. You can check the following code snippet. 

private void RadGridView1_ViewCellFormatting1(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement is GridCellElement && e.CellElement.Text.Trim().Length != 0)
    {

        Color c = Color.Black;
        e.CellElement.ForeColor = Color.Black;
        e.CellElement.BackColor = c;
        e.CellElement.DrawFill = true;
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.BackColorProperty , ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.DrawFillProperty , ValueResetFlags.Local);
    }
}

If this does not help you can share if you are using a custom cell? If not, could it be possible to isolate this in a standalone project I will gladly to debug it.

Regards,
Dinko | Tech Support Engineer
Progress Telerik

[WEI TZE]

Thanks Dinko,

I have tried resetting the value per recommended but no luck.

Please refer attached for the simple standalone project created (ViewCellFormatting.zip).

***Btw, you might notice the overall performance/responsiveness of the RadGridView is not so smooth, would you mind recommending the potential improvements?

 

private void dgvMap_ViewCellFormatting(object sender, Telerik.WinControls.UI.CellFormattingEventArgs e)
        {
            if (!(e.Row is GridViewDataRowInfo))
            {
                return;
            }

            if (e.CellElement is GridRowHeaderCellElement)
            {

                e.CellElement.Text = string.Format("R{0}", dgvMap.CurrentView.ViewInfo.Rows.IndexOf(e.Row) + 1);
                var element = new RadButtonElement();
                element.Margin = new Padding(3, 3, 3, 3);
                element.Padding = new Padding(2, 0, 2, -2);
                element.ImageAlignment = ContentAlignment.MiddleCenter;
                element.Alignment = ContentAlignment.MiddleCenter;
                element.ForeColor = Color.Black;
                element.Text = string.Format("R{0}", dgvMap.CurrentView.ViewInfo.Rows.IndexOf(e.Row) + 1);
                element.AutoSizeMode = RadAutoSizeMode.Auto;
                element.MinSize = new Size(80, 50);
                e.CellElement.Children.Add(element);
                e.CellElement.ForeColor = Color.White;
                dgvMap.Rows[e.RowIndex].Tag = string.Format("R{0}", dgvMap.CurrentView.ViewInfo.Rows.IndexOf(e.Row) + 1);

            }

            if (e.CellElement is GridCellElement && e.CellElement.Text.Trim().Length != 0)
            {

                    Color c = Color.Black;
                    e.CellElement.ForeColor = Color.Black;
                    e.CellElement.BackColor = c;
                    e.CellElement.DrawFill = true;
            }
            else
            {
                e.CellElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
                e.CellElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
                e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
            }
        }
    }

[Dinko | Tech Support Engineer]

The provided project is greatly appreciated. 

I will start with that in a case you want to add custom elements to the cell of the RadGridView, I would suggest creating a custom cell instead of using the ViewCellFormatting event of the control. The ViewCellFormatting event is fired quite often. For example: on each window resize, scroll, select etc. In your case, the custom RadButtonElement will be added several times to the Children collection of each GridRowHeaderCellElement. The visual elements in the viewport will significantly increase which is leading to a performance hit. As I suggested above, you can create a custom cell and place custom elements inside it. You can check the Creating Custom Cells help article for further information. If this is not an option, at least what you can do is add an additional if statement to add only one-time RadButtonElement in the cell.

private void dgvMap_ViewCellFormatting(object sender, Telerik.WinControls.UI.CellFormattingEventArgs e)
{
    if (!(e.Row is GridViewDataRowInfo))
    {
        return;
    }

    if (e.CellElement is GridRowHeaderCellElement)
    {
        var index = dgvMap.CurrentView.ViewInfo.Rows.IndexOf(e.Row) + 1;

        var element = e.CellElement.Children.FirstOrDefault(x => x is RadButtonElement) as RadButtonElement;
        if (element == null)
        {
            RadButtonElement button = new RadButtonElement();
            button.Margin = new Padding(3, 3, 3, 3);
            button.Padding = new Padding(2, 0, 2, -2);
            button.ImageAlignment = ContentAlignment.MiddleCenter;
            button.Alignment = ContentAlignment.MiddleCenter;
            button.ForeColor = Color.Black;
            // element.Text = string.Format("R{0}", index);
            button.AutoSizeMode = RadAutoSizeMode.Auto;
            button.MinSize = new Size(80, 50);
            button.Text = string.Format("R{0}", index);

            e.CellElement.Children.Add(button);               
        }
        else
        {
            element.Text = string.Format("R{0}", index);
        }

        e.CellElement.ForeColor = Color.White;
        dgvMap.Rows[e.RowIndex].Tag = string.Format("R{0}", index);
    }           
}

As I mentioned, the ViewCellFormatting event will be called for all cells in the control. This includes column header cells, filter cells, etc. If you want to style only the data cells it's better to use the CellFormatting event instead. You can move the logic for data cells in the CellFormatting event.

When using the ViewCellFormatting/CellFormatting events it's up to the developer to style the cells per their requirements. When the BackColor property is set, it will override the color which comes from the theme. So when the mouse is over the cell, the hover state will take the BackColor property value (in your case Black color) and applied to the cells. In mouse over state, the GradientStyle is Solid while in the non-hover state is Linear. You need to set the GradientStyle to Linear to override the default one in mouse over state.

private void DgvMap_CellFormatting(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement.Text.Length != 0)
    {
        e.CellElement.DrawFill = true;
        e.CellElement.ForeColor = Color.Black;
        e.CellElement.BackColor = Color.Black;
        e.CellElement.BackColor2 = Color.White;
        e.CellElement.NumberOfColors = 2;
        e.CellElement.GradientStyle = GradientStyles.Linear;
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.NumberOfColorsProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
    }
}