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
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.
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)?
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
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/.