RadListView column backcolor

9 posts, 0 answers
  1. Jason
    Jason avatar
    16 posts
    Member since:
    Nov 2013

    Posted 18 Oct 2017 Link to this post

    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

  2. Hristo
    Admin
    Hristo avatar
    1319 posts

    Posted 19 Oct 2017 Link to this post

    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
    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.
  3. Jason
    Jason avatar
    16 posts
    Member since:
    Nov 2013

    Posted 19 Oct 2017 in reply to Hristo Link to this post

    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

  4. Jason
    Jason avatar
    16 posts
    Member since:
    Nov 2013

    Posted 19 Oct 2017 Link to this post

    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
  5. Hristo
    Admin
    Hristo avatar
    1319 posts

    Posted 20 Oct 2017 Link to this post

    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
    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.
  6. Jason
    Jason avatar
    16 posts
    Member since:
    Nov 2013

    Posted 20 Oct 2017 in reply to Hristo Link to this post

    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.
  7. Hristo
    Admin
    Hristo avatar
    1319 posts

    Posted 23 Oct 2017 Link to this post

    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
    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.
  8. Jason
    Jason avatar
    16 posts
    Member since:
    Nov 2013

    Posted 24 Oct 2017 in reply to Hristo Link to this post

    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

  9. Hristo
    Admin
    Hristo avatar
    1319 posts

    Posted 27 Oct 2017 Link to this post

    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
    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.
Back to Top