ListView change cell forecolor

[Brandon]

I have a list view that has numbers in the cells. If the number is negative I would like the text to turn red.

Is the list view capable of this?

I can change the row text color, but not a single cell.

I am also using a ListViewDataItem variable as well.

[Stefan]

Hi Brandon,

Thank you for writing.

The correct event for the desired purpose will be the VisualItemFormatting event. Here is a sample:

void radListView1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
{
    if (e.VisualItem.Data != null && Convert.ToInt16(e.VisualItem.Data["col1"]) < 0)
    {
        e.VisualItem.BackColor = Color.Red;
        e.VisualItem.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
    }
    else
    {
        e.VisualItem.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.GradientStyleProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

I hope this helps. Should you have any other questions, do not hesitate to contact us.
 
Regards,
Stefan
the Telerik team

[Brandon]

The code below colors the entire line red..

I only want to color a single cell if the cell value is red.

e.VisualItem.BackColor = Color.Red;

[Stefan]

Hello Brandon,

Please excuse me for the confusion. I do now know why I though you want to style the whole row.

However, here is the answer - to style a cell you need to use the CellFormatting event of the control. Here is a sample:

void radListView1_CellFormatting(object sender, ListViewCellFormattingEventArgs e)
{
    DetailListViewDataCellElement cell = e.CellElement as DetailListViewDataCellElement;

    if (cell != null && cell.Data.Name == "col1" && Convert.ToInt32(cell.Row["col1"]) < 0)
    {
        cell.BackColor = Color.Yellow;
        cell.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

Let me know if there is anything else I can do for you.
 
All the best,
Stefan
the Telerik team

[Brandon]

That was what I needed.

To further extend on your solution I have dynamically named columns except for the first 2 columns. This would be how to do it with dynamically named columns:

private void radListView1_CellFormatting(object sender, ListViewCellFormattingEventArgs e)
{
    DetailListViewDataCellElement cell = e.CellElement as DetailListViewDataCellElement;


    if (cell != null && cell.Data.Name != "col1" && cell.Data.Name != "col2" && Convert.ToDecimal(cell.Row[cell.Data.Name].ToString()) < 0)
    {
        cell.ForeColor = Color.Red;
        cell.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, Telerik.WinControls.ValueResetFlags.Local);
    }

}

[Dylan Lennox]

hello i see how to change the selected color but how do you change the border of the selected item aswell but only the selected border not all borders

ill try to be more specific when you select the item it creates a border around it i would like to change that

[Ivan Todorov]

Hi Dylan,

Thank you for contacting us.

If you are not using DetailsView, then you should handle the VisualItemFormatting event as shown below:

void radListView1_VisualItemFormatting(object sender, Telerik.WinControls.UI.ListViewVisualItemEventArgs e)
{
    if (e.VisualItem.Data.Selected)
    {
        e.VisualItem.BorderColor = Color.Red;
        e.VisualItem.BorderGradientStyle = Telerik.WinControls.GradientStyles.Solid;
    }
    else
    {
        e.VisualItem.ResetValue(LightVisualElement.BorderColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.BorderGradientStyleProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

In case you are using DetailsView, then you should handle the CellFormatting event as the following code snippet demonstrates:

void radListView1_CellFormatting(object sender, ListViewCellFormattingEventArgs e)
{
    DetailListViewDataCellElement dataCell =  e.CellElement as DetailListViewDataCellElement;

    if (dataCell != null && dataCell.Row.Selected)
    {
        dataCell.BorderColor = Color.Red;
        dataCell.BorderGradientStyle = Telerik.WinControls.GradientStyles.Solid;
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.BorderColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.BorderGradientStyleProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

I hope this helps. Feel free to ask if you have any additional questions.

Regards,
Ivan Todorov
the Telerik team

[Dylan Lennox]

thank you very much

[Ammar]

Hello dear,

I want only to change FontStyle and ForeColor for a single cell depend on a such value, so if there possibllity to doing this out of 

radListView1_CellFormatting event, check my code:

Dim item As ListViewDataItem

item = New ListViewDataItem
item(0) = "Color Red"
item(1) = "Red"

RadListView1.Items.Add(item)
item = Nothing

 

so i need to something like this:

item(1).ForeColor = Color.Red
item(1).Font = New Font("Arial", 8.25, FontStyle.Bold)

 

I hope you can help me, regards.

[Dimitar]

Hello Ammar,

Since RadListView is using UI Virtualization you cannot style the items outside of the formatting events. Please note that you have access to the data item in the formatting events. An example is available here: Formatting Items.

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Telerik by Progress

[Ammar]

thanks dear.

[pierre-jean]

Hello

the previous posts help me a lot, but I need to change the backcolor of the cell based on the value of another cell in the same row.

and I fail to find how to access another cell in the same row ...

Thanks in advance

Pierre-Jean

[Dess | Tech Support Engineer, Principal]

Hello, Pierre-Jean, 

I have prepared a sample code snippet demonstrating how to access the DataBoundItem associated with the row and from there to access a value of another cell (e.g. "CategoryID"):

        public RadForm1()
        {
            InitializeComponent();
            this.radListView1.CellFormatting += radListView1_CellFormatting;
        }

        private void radListView1_CellFormatting(object sender, ListViewCellFormattingEventArgs e)
        {
            DetailListViewDataCellElement dataCell = e.CellElement as DetailListViewDataCellElement;
            if (dataCell != null && e.CellElement.Data.Name == "ProductName")
            {
                DataRowView rowView = dataCell.Row.DataBoundItem as DataRowView;
                if ((int)rowView.Row["CategoryID"] == 1)
                {
                    e.CellElement.BackColor = Color.Yellow;
                    e.CellElement.DrawFill = true;
                    e.CellElement.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
                }
                else
                { 
                    e.CellElement.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
                    e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, Telerik.WinControls.ValueResetFlags.Local);
                    e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, Telerik.WinControls.ValueResetFlags.Local); 
                }
            }
            else
            { 
                e.CellElement.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
                e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, Telerik.WinControls.ValueResetFlags.Local);
                e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, Telerik.WinControls.ValueResetFlags.Local); 
            }
        }

        private void RadForm1_Load(object sender, EventArgs e)
        { 
            this.productsTableAdapter.Fill(this.nwindDataSet.Products);

            this.radListView1.DataSource = this.productsBindingSource;
            this.radListView1.ViewType = ListViewType.DetailsView;
        }

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[pierre-jean]

Hello

Just what I was missing

Thanks a lot

Pierre-Jean