Change the rows background-color rows based on cell

2 Answers 700 Views
GridView Styling
Simon
Top achievements
Rank 1
Simon asked on 06 Apr 2022, 11:40 AM

Hello,

The feature is to Change the part of rows background-color based on a cell

I want to set the BackColor of a row to a specific color based on information from a field.

The structure is different from classic Winform.

Can you help me please ?

2 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 06 Apr 2022, 11:57 AM
Hello, Simon,

RadGridView provides different options for customizing its cells according to certain criteria:

- Cells and rows can be styled based on data conditions using ConditionalFormattingObjects: https://docs.telerik.com/devtools/winforms/controls/gridview/cells/conditional-formatting-cells 

- The CellFormatting event is used to access and change the styles of the data cells. In the event args you have access to the RowInfo from where you can extract the desired cell value and make teh condition: https://docs.telerik.com/devtools/winforms/controls/gridview/cells/formatting-cells 

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

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Simon
Top achievements
Rank 1
commented on 06 Apr 2022, 01:09 PM

Hello Dess,

Thank you for your fast reply. I think I was not clear with
my question.

I have a radGridView with different lines and columns. One
column is showing a date and according to how far this date is still away, I
would like to apply a kind of rule to adapt the background color of the full
line, not only the cell (I expressed myself not correctly in my prior post).

I’ve seen the documentation which in which you’re using that
based on events. Could you provide me a small example where I can see how you’re
using these events ? Because for me it’s not clear in which moment a
CellFormatting event fires for example.

Thank you again in advance and have a nice day !
Dess | Tech Support Engineer, Principal
Telerik team
commented on 07 Apr 2022, 05:11 AM

Hello, Simon,

The CellFormatting event is expected to be fired many times whenever the user interacts with RadGridView, e.g. after scrolling or hovering a row/cell. I have prepared a sample code snippet for your reference demonstrating how to change the color of the row considering a DateTime value in the row. Please refer to the below sample: 
        public RadForm1()
        {
            InitializeComponent();

            GridViewTextBoxColumn idColumn = new GridViewTextBoxColumn("Id");
            this.radGridView1.Columns.Add(idColumn);
            GridViewTextBoxColumn nameColumn = new GridViewTextBoxColumn("Name");
            this.radGridView1.Columns.Add(nameColumn);
            GridViewDateTimeColumn dateColumn = new GridViewDateTimeColumn("Date");
            this.radGridView1.Columns.Add(dateColumn);
            this.radGridView1.CellFormatting += radGridView1_CellFormatting;
            for (int i = 0; i < 50; i++)
            {
                this.radGridView1.Rows.Add(Guid.NewGuid().ToString(), "Name" + i, DateTime.Now.AddDays(i).AddHours(i));
            }
        }

        private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            DateTime date;
            if (DateTime.TryParse(e.Row.Cells["Date"].Value + "", out date))
            {
                if (date.DayOfWeek == DayOfWeek.Saturday)
                {
                    e.CellElement.DrawFill = true;
                    e.CellElement.GradientStyle = GradientStyles.Solid;
                    e.CellElement.BackColor = Color.Yellow;
                }
                else if (date.DayOfWeek == DayOfWeek.Sunday)
                {
                    e.CellElement.DrawFill = true;
                    e.CellElement.GradientStyle = GradientStyles.Solid;
                    e.CellElement.BackColor = Color.Orange;
                }
                else
                {
                    e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
                    e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
                    e.CellElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
                }
            }
            else
            {
                e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
                e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
                e.CellElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
            }
        }

0
Jana
Top achievements
Rank 2
Iron
Iron
Iron
answered on 08 Apr 2022, 09:39 AM

Hello Dess,

 

Thank you for your example, we tried your solution and it works well and exactly as we've imaged.

I just have one question: We use our GridView in a way in which it can't be modified by the user, it is for displaying purposes only. Is there a possibility to link your solution also to another event of the GridView? For example each time when a line is created or something like this. Because we've made some tests in our app and the cellFormatting event is fired quiet often, but in our case we need this only once by row. We modified your example to use it with the rowFormatting event, but this event is fired pretty often as well.

Here some more details: The gridView is located in a modal popup. Each time the popup is opened, the displayed rows are added programmatically and according to their value in a date column, we would like to apply different colors. So we need to launch this mechanism only once for all lines as soon as the popup is opened or once by line as soon as a line is created.

Thank you again and have a nice weekend!

 

Dinko | Tech Support Engineer
Telerik team
commented on 12 Apr 2022, 11:59 AM

Hello Jana,

This is the general way to customize the rows and cells inside the RadGridView. You are right that these events are called quite often but if we move the logic somewhere else we will receive undesired styling of rows/cells. For example, due to the virtualization mechanism of the control, the visual element is not changed only the data underneath it. So when the user scrolls the control we need to re-evaluate the rows/cells data which will call the mentioned formatting events for the rows and cells. You could consider using Conditional Formatting Rows/ Cells which will style the row/cell based on data conditions. However, keep in mind that the nature of Conditional Formatting limits the situations in which it can be used. The general approach is to use events.

Tags
GridView Styling
Asked by
Simon
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Jana
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or