RadListView column backcolor

[Jason]

I have a listview with 5 columns, I want the 4th column of each row of the list box to have a backcolor which is specified by the user, (it's a visual representation of what they will see later in the program)  I created a ListViewDataItem to capture all the info to be displayed in the listview, but I can't seem to get it to change the backcolor of a specific column.

 

please advise.

 

thanks

Jason

[Hristo]

Hi Jason,

Thank you for writing.

The desired result can be achieved by handling the formatting events in RadListView. Since you are having the control set up in DetailsView, you will need to handle the CellFormatting event. Please check the following documentation article providing additional information and an example: https://docs.telerik.com/devtools/winforms/listview/customizing-appearance/formatting-items.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Progress Telerik

[Jason]

What is the trigger to force radlistview.CellFormatting to fire?  I followed the code you linked to, but the CellFormatting event is not firing.

 

thanks

[Jason]

Maybe I need to be more specific. I need a specific column, say column 3, to have a backcolor based on a user selection from another form......I get the cellformatting event, but what I can't figure out is how to iterate through the rows to assign the specific column backcolors

[Hristo]

Hi Jason,

Thank you for writing back.

RadListView is a virtualized control and the formatting events provide means to access the visual elements which are reused for the different data items. By evaluating the underlying data items you should be able to perform a conditional formatting of the cells. It is also important to also reset the value, otherwise, the changed visual settings in the event handler for one UI cell may be copied to another which will not be desired.

The formatting events are triggered in various scenarios, whenever the control receives the focus or any of the data items has updated. Scrolling the control would also raise the event. Generally, it is not necessary to force it programmatically. If you need to, you can do it by forcing a synchronization between the data and the visual items: 

this.radListView1.ListViewElement.SynchronizeVisualItems();

Regarding your actual setup, you do not need to iterate the rows. The formatting event will be fired for each of the cells and then by evaluating the data item, you should be able to change the color. I am sending you attached my test project as well as a short video showing the result on my end.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Progress Telerik

[Jason]

I am already able to do what your test program shows, I can change the color of an entire column.  That is NOT what I am trying to do.  I want to change the back color of individual cells in the same column to be different colors, NOT have them all be the same color.

[Hristo]

Hello Jason,

Thank you for writing back.

You can follow the same approach and style individual cells within the same column. The Data property of the cell exposes the column which you can validate against your data objects by the FieldName. Then you can perform an additional validation for each of the cells.

private void radListView1_CellFormatting(object sender, ListViewCellFormattingEventArgs e)
{
    DetailListViewCellElement cell = e.CellElement as DetailListViewCellElement;
    if (cell.Data.FieldName != "Address")
    {
        return;
    }

    if (cell.Text.StartsWith("5"))
    {
        cell.GradientStyle = GradientStyles.Solid;
        cell.BackColor = Color.Red;
    }
    else if (cell.Text.StartsWith("7"))
    {
        cell.GradientStyle = GradientStyles.Solid;
        cell.BackColor = Color.Blue;
    }
    else
    {
        cell.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
        cell.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
    }
}

Please also check the attached screenshot. In case, you need further assistance or your scenario is different please send me your project so that we can test it locally.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Progress Telerik

[Jason]

Your code assume you know what the text is for a particular cell, I do not know this information.  I would like to use the cell.tag to determine the back color, but it is always null in the CEll_formatting event

 

Here is a sample

ListViewDataItem itm = new ListViewDataItem

itm.SubItems.Add(fontstring);
itm.SubItems.Add(" ");

 itm.Tag = Color.Red;
    listCategories.Items.Add(itm);
                listCategories.CellFormatting += listCategories_CellFormatting;

 private void listCategories_CellFormatting(object sender, ListViewCellFormattingEventArgs e)
    {
        DetailListViewCellElement cell = e.CellElement as DetailListViewCellElement;
     
        if (cell.Tag != null)
        {
            cell.BackColor = Color.Red;
        }
        
    }

 

Thanks

[Hristo]

Hi Jason,

Thank you for writing back.

I would like to point that the SubItems collection should not be used to populate the list view at run-time, that is why it is not browsable. If you follow the approach demonstrated here you will be able to apply a Tag to a data item in the designer and then access it in the formatting event through the data item. Please also note that the data item and visual cell element are two separate objects and Tag of the data item will not be set to the cell element.

You can follow any of the two approaches in the attached project. Since you are populating the items from code you may consider data binding the control. You can also add items in unbound mode: https://docs.telerik.com/devtools/winforms/listview/populating-with-data/unbound-mode.

I hope this helps. Please let me know if you need further assistance.

Regards,
Hristo
Progress Telerik

[Henri]

Why the code above does not work in VB?

I converted the code in C# to VB and I don't get the same behavior.

    Private Sub RadListView1_CellFormatting(sender As Object, e As ListViewCellFormattingEventArgs) Handles RadListView1.CellFormatting
        e.CellElement.ImageLayout = ImageLayout.Zoom '--- this code resize the .svg file from column "Status"

        Dim cell As DetailListViewCellElement = TryCast(e.CellElement, DetailListViewCellElement)

        If cell.Data.HeaderText <> "Truss Mark" Then
            Return
        End If

        If cell.Text.StartsWith("S") Then
            cell.GradientStyle = GradientStyles.Solid
            cell.BackColor = Color.Red
        ElseIf cell.Text.StartsWith("T") Then
            cell.GradientStyle = GradientStyles.Solid
            cell.BackColor = Color.Blue
        Else
            cell.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local)
            cell.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local)
        End If

    End Sub

It is filling the header and not the rows

[Dinko | Tech Support Engineer]

The code will work in VB. Looking at your code snippet I could not find anything which can break the logic. I think there is something else that could break the custom colors. I have also converted the above project to VB and the cells are styled correctly. Can you check the project and let me know what set-up I am missing from your application? You could modify the project to mimic your implementation with dummy data and send it back to me for further investigation.

[Henri]

Hi Dinko, thanks for your answer. I am attaching a runnable project to mimic my implementation.

[Dinko | Tech Support Engineer]

Thank you for the provided project. This behavior comes from using a Fluent theme. Different themes have different structures and settings. In your case, the cells in the Fluent theme are styled in a different way than other themes. To set the color of the cells, you can set the DrawFill property to true.

Private Sub RadListView1_CellFormatting(sender As Object, e As ListViewCellFormattingEventArgs) Handles RadListView1.CellFormatting
    e.CellElement.ImageLayout = ImageLayout.Zoom '--- this code resize the .svg file from column "Sign"

    Dim cell As DetailListViewCellElement = TryCast(e.CellElement, DetailListViewCellElement)

    If cell.Data.HeaderText <> "TM" Then
        Return
    End If

    If cell.Text.StartsWith("TM1") Then
        cell.GradientStyle = GradientStyles.Solid
        cell.BackColor = Color.Red
        cell.DrawFill = True


    ElseIf cell.Text.StartsWith("TM4") Then
        cell.GradientStyle = GradientStyles.Solid
        cell.BackColor = Color.Blue
        cell.DrawFill = True
    Else
        cell.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local)
        cell.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local)
        cell.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local)
    End If
End Sub

Here is the result on my side.

[Henri]

Thanks Dinko, after few other changes I found what I was looking for.