How do you change the cell color of Cardview?

[Shin]

Good afternoon.

I want to change the color according to the Data value of a certain column in Cardview.
Cardview does not have a CellFormatting in the Gridview or Listview.

I change the color of the entire item using Cardview's VisualItemFormatting.

 

        private void RadCardView1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
        {
            if (e.VisualItem.Data["EIFSTATUS"].Equals("OFF"))
            {
                e.VisualItem.BackColor = Color.Red;
                e.VisualItem.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
            }
        }

But I do not want it.

I would like to change Backcolor only for "OFF" value only when the column value of "EIFSTATUS" is "OFF" instead of whole.

I want to change it like the Grid screen below.

 

private void RadGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            if (e.CellElement.ColumnInfo.HeaderText == "EIFSTATUS")
            {
                if (e.CellElement.RowInfo.Cells["EIFSTATUS"].Value.Equals("OFF"))
                {
                    e.CellElement.DrawFill = true;
                    e.CellElement.GradientStyle = GradientStyles.Solid;
                    e.CellElement.BackColor = Color.Red;
                }
            }
        }

I would appreciate your help.

[Hristo]

Hello Shin,

Thank you for writing.

You can handle the CardViewItemFormatting event where you can perform an additional check for the field name of the item. Please check the second example of the following documentation article providing an example: https://docs.telerik.com/devtools/winforms/cardview/customizing-appearance/formatting-items#formatting-cardviewitiem.

I hope this information is useful. Let me know if you need further assistance.

Regards,
Hristo
Progress Telerik

[Shin]

Thanks for your answer, but that's not what I want.
In the second example of the link
I want to change Backcolor only when

item.FieldName == "CustomerID" and its value is "ALFKI".

I do not know what to do in that case.
I would appreciate your reply again.

[Hristo]

Hello Shin,

Thank you for writing back.

The value can be extracted from the visual item and its data object which is also passed as an argument in the CardViewItemFormatting event: 

private void radCardView1_CardViewItemFormatting1(object sender, CardViewItemFormattingEventArgs e)
{
    string value = e.VisualItem.Data["CustomerID"].ToString();
    CardViewItem item = e.Item as CardViewItem;
    if (item != null && item.FieldName == "CustomerID" && value == "ALFKI")
    {
        e.Item.NumberOfColors = 1;
        e.Item.ForeColor = Color.Coral;
        e.Item.BorderColor = Color.LightBlue;
        e.Item.Font = font;
    }
    else
    {
        e.Item.ResetValue(LightVisualElement.NumberOfColorsProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.Item.ResetValue(LightVisualElement.ForeColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.Item.ResetValue(LightVisualElement.BorderColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.Item.ResetValue(LightVisualElement.FontProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

I am also attaching a screenshot showing the result on my end Let me know if you have other questions.

Regards,
Hristo
Progress Telerik

[Shin]

Thank you very much.

Can not you just change the color of the string "ALFKI"?

[Hristo]

Hi Shin,

I am glad that I managed to help. If you would like to also change only the value part which is located in the editor element, you can do it as per the code snippet below: 

private void radCardView1_CardViewItemFormatting2(object sender, CardViewItemFormattingEventArgs e)
{
    CardViewItem item = e.Item as CardViewItem;
    if (item == null)
    {
        return;
    }

    string value = e.VisualItem.Data["CustomerID"].ToString();
    if (item != null && item.FieldName == "CustomerID" && value == "ALFKI")
    {
        item.EditorItem.NumberOfColors = 1;
        item.EditorItem.ForeColor = Color.Coral;
        item.EditorItem.BorderColor = Color.LightBlue;
        item.EditorItem.Font = font;
    }
    else
    {
        item.EditorItem.ResetValue(LightVisualElement.NumberOfColorsProperty, Telerik.WinControls.ValueResetFlags.Local);
        item.EditorItem.ResetValue(LightVisualElement.ForeColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        item.EditorItem.ResetValue(LightVisualElement.BorderColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        item.EditorItem.ResetValue(LightVisualElement.FontProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

Let me know if you need further assistance.

Regards,
Hristo
Progress Telerik