This is a migrated thread and some comments may be shown as answers.

How do you change the cell color of Cardview?

5 Answers 35 Views
CardView
This is a migrated thread and some comments may be shown as answers.
Shin
Top achievements
Rank 1
Shin asked on 25 Jun 2018, 02:56 AM

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.

5 Answers, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 25 Jun 2018, 10:00 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Shin
Top achievements
Rank 1
answered on 26 Jun 2018, 01:45 AM

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.

0
Accepted
Hristo
Telerik team
answered on 26 Jun 2018, 06:35 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Shin
Top achievements
Rank 1
answered on 26 Jun 2018, 07:33 AM

Thank you very much.

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

0
Hristo
Telerik team
answered on 26 Jun 2018, 12:52 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
CardView
Asked by
Shin
Top achievements
Rank 1
Answers by
Hristo
Telerik team
Shin
Top achievements
Rank 1
Share this question
or