RadProgressBarElement in a grid column but with values between -100% and 100%

3 Answers 23 Views
GridView ProgressBar
Eric Moreau
Top achievements
Rank 2
Veteran
Iron
Eric Moreau asked on 20 May 2021, 12:42 PM

Hi

I have found examples showing how to use a RadProgressBarElement in a grid column. I added one to my project and it is working, well almost.

If all my values are positive (ie between 0 and 100), the column shows correctly.

But my values are between -100 and 100. I have set the Minimum property to -100. I see some values with a red zone (which is ok). But shouldn't the green zone only start at 0 (right in the middle)?

3 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 21 May 2021, 10:56 AM
Hello, Eric,

According to the provided information, I suppose that you are using the following custom implementation for RadGridView: https://docs.telerik.com/devtools/winforms/controls/gridview/cells/creating-custom-cells 

You can specify the Minimum/Maximum for the RadProgressBarElement in the CreateChildElements method. Thus, you can specify the range [-100,100]. However, if a negative value is assigned, the second (red) indicator will be used for illustrating negative values. Please have a look at the below screenshots for better illustration how different negative values are represented in the range [-100,100]:

 

Consider that at 0 value, the green and red indicators are equal and they overlap with each other. With value = 100, the green indicator fills the entire progressbar. With value = -100, you don't see any green indicator. For value = -75, you are expected to see 1/4 green indicator and 3/4 red indicator.

However, if you need to illustrate the negative values in a different way, I would recommend you to use [0,100] range for the progress bar and if a negative value is available in the cell, just switch the indicator color to red, but keep a positive value. Please refer to the following implementation: 

        public RadForm1()
        {
            InitializeComponent();
            new RadControlSpyForm().Show();
            ProgressBarColumn customColumn = new ProgressBarColumn("Progress column");
            this.radGridView1.Columns.Add(customColumn);

            this.radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;

            this.radGridView1.Rows.Add(25);
            this.radGridView1.Rows.Add(76);
            this.radGridView1.Rows.Add(-25);
            this.radGridView1.Rows.Add(-45);
        }

        public class ProgressBarCellElement : GridDataCellElement
        { 
            public ProgressBarCellElement(GridViewColumn column, GridRowElement row) : base(column, row)
            {
            }
            
            private RadProgressBarElement radProgressBarElement;

            protected override void CreateChildElements()
            {
                base.CreateChildElements();

                radProgressBarElement = new RadProgressBarElement();
                radProgressBarElement.Minimum = 0;
                radProgressBarElement.Maximum = 100;
                this.Children.Add(radProgressBarElement);
            }
            
            protected override void SetContentCore(object value)
            {
                if (this.Value != null && this.Value != DBNull.Value)
                {
                    int progress = Convert.ToInt16(value);
                    this.radProgressBarElement.IndicatorElement1.GradientStyle = GradientStyles.Solid;
                    if (progress > 0)
                    {
                        this.radProgressBarElement.Value1 = progress;
                        this.radProgressBarElement.IndicatorElement1.BackColor = Color.Lime; 
                    }
                    else
                    { 
                      this.radProgressBarElement.Value1 = progress*-1;
                         this.radProgressBarElement.IndicatorElement1.BackColor = Color.Red;
                    }
                  
                    this.radProgressBarElement.Text = this.Value + "";
                }
            }
    
            protected override Type ThemeEffectiveType
            {
                get
                {
                    return typeof(GridDataCellElement);
                }
            }
            
            public override bool IsCompatible(GridViewColumn data, object context)
            {
                return data is ProgressBarColumn && context is GridDataRowElement;
            }
        }
        
        public class ProgressBarColumn : GridViewDataColumn
        {
            public ProgressBarColumn(string fieldName) : base(fieldName)
            {
            }

            public override Type GetCellType(GridViewRowInfo row)
            {
                if (row is GridViewDataRowInfo)
                {
                    return typeof(ProgressBarCellElement);
                }
                return base.GetCellType(row);
            }
        }

 

I believe that it would fit you scenario. However, if you need any other custom representation, it would be greatly appreciated if you can provide more details and a sample screenshot how the negative values are expected to be presented in the progressbar.

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Eric Moreau
Top achievements
Rank 2
Veteran
Iron
commented on 21 May 2021, 11:11 AM

Hi. Thanks for the comment.

Not really what I am looking for.

Would it be possible to show negative values starting from the middle of the progress bar going to the left (in red)?

And if it's a positive value, starting from the middle and going to the right (in green)?
Eric Moreau
Top achievements
Rank 2
Veteran
Iron
commented on 21 May 2021, 12:31 PM

Hi again. I found Value1 and Value2 properties. Could that somehow help me?
0
Eric Moreau
Top achievements
Rank 2
Veteran
Iron
answered on 23 May 2021, 04:20 PM

I had some time this morning and decided to play around with my issue. I found a way but not sure it is the most effective way of achieving it!

What do you think?


Private Sub grdContribution_CellPaint(sender As Object, e As GridViewCellPaintEventArgs) Handles grdContribution.CellPaint
    If (grdContribution.Columns("ProgressBarImage").Index.Equals(e.Cell.ColumnIndex) AndAlso e.Cell.RowIndex >= 0) Then
        Dim decValue As Decimal = e.Cell.RowElement.RowInfo.CellToDecimal("Weight")

        Dim brush As New SolidBrush(Color.Lime)
        Dim intMargin As Integer = 2
        Dim g As Graphics = e.Graphics
        Dim intX As Integer = e.Cell.Bounds.Width \ 2
        Dim intY As Integer = intMargin
        Dim intWidth As Integer = CInt(((e.Cell.Bounds.Width / 200) * decValue))
        Dim intHeight = e.Cell.Bounds.Height - (intMargin * 2)

        If decValue < 0 Then
            brush.Color = Color.Salmon
            intX = intX + intWidth
            intWidth = Math.Abs(intWidth)
        End If

        g.FillRectangle(brush, intX, intY, intWidth, intHeight)

        Dim drawBrush As New SolidBrush(Color.Black)
        Dim sf As New StringFormat()
        sf.LineAlignment = StringAlignment.Center
        sf.Alignment = StringAlignment.Center
        Dim rctBounds As New Rectangle
        If decValue = 0 Then
            rctBounds.X = e.Cell.Location.X
            rctBounds.Y = e.Cell.Location.Y
            rctBounds.Width = e.Cell.Size.Width
            rctBounds.Height = e.Cell.Size.Height
        ElseIf decValue < 0 Then
            rctBounds.X = e.Cell.Location.X
            rctBounds.Y = e.Cell.Location.Y
            rctBounds.Width = e.Cell.Size.Width \ 2
            rctBounds.Height = e.Cell.Size.Height
        Else
            rctBounds.X = e.Cell.Location.X + (e.Cell.Size.Width \ 2)
            rctBounds.Y = e.Cell.Location.Y
            rctBounds.Width = e.Cell.Size.Width \ 2
            rctBounds.Height = e.Cell.Size.Height
        End If
        e.Graphics.DrawString(decValue.ToString("#,##0.00") & "%", e.Cell.Font, drawBrush, rctBounds, sf)
    End If
End Sub


0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 24 May 2021, 01:14 PM
Hello, Eric,

I am really glad to see that you have achieved the custom requirement you have with indicating negative progress in RadGridView cells. Indeed, the CellPaint event is a suitable approach for accomplishing the exact look you need as it allows you to draw in a cell in order to extend the cell appearance and/or provide additional information to the user about the cell data. RadProgressBar doesn't offer such design out of the box.

I have reviewed the provided custom implementation and it seems to be the perfect fit for your scenario. Feel free to use it in your application.  

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
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/.

Tags
GridView ProgressBar
Asked by
Eric Moreau
Top achievements
Rank 2
Veteran
Iron
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Eric Moreau
Top achievements
Rank 2
Veteran
Iron
Share this question
or