How to add a ProgressBar column ?

[Vincent DURET]

Hello,

I would like to know how I can put a progress bar control on each column of a radGridView.
I tried to find a way to put my own control as radHostItem for RibbonBar but I no found a similar way to radGridView.

thanks.
M.C.

[Peter]

Hi Vincent,

Thank you for the feedback.

Unfortunately RadGridView does not support progress bar columns yet.

As a workaround I can suggest inserting a progress bar into the columns of RadGridView using the following code:

    private void Form2_Load(object sender, EventArgs e)
    {
    //...
    //you should subscribe for CellFormatting event
       this.radGridView1.CellFormatting += new CellFormattingEventHandler(radGridView1_CellFormatting );
    //....
    }

void radGridView1_CellFormatting( object sender, CellFormattingEventArgs e )

{

//this example applu progress bar only in column salary

//apply only on data column

if (e.CellElement.ColumnInfo is GridViewDataColumn && ((GridViewDataColumn)e.CellElement.ColumnInfo ).DataField == "salary" )

{

if (!( e.CellElement.RowElement is GridHeaderRowElement ) ) //exclude Header element in the data column

{

if( e.CellElement.Children.Count>0)//the progress bar is already added to cell

return;

RadProgressBarElement element = new RadProgressBarElement();

element.Minimum = 0;//set min value of RadProgressBarElement

element.Maximum = 10;//also max

element.StretchHorizontally = true;

element.StretchVertically = true;

e.CellElement.Children.Add( element );

}

}

}

 
Kind regards,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[piratenwichtl]

Hi Peter,

that is exactly what I am looking for.. but I got some trouble.
Might be just a beginner-problem.. but I cant add a "GridViewDataColumn"(just a textbox, combobox, boolean and so on..) through that control-column chooser to the gridview.

Thats why I add the column manually through coding and use the sample provided. the progressbar gets added and displayed but  the progressbar is stretched about several columns. certainly doesnt look right, but after a whole afternoon playing around, I give up and rather ask you guys, if this is still working with sp2(2007). Or maybe there is a better approach how to do it. I actually would rather like to use the telerik gridview, but if that is not possible i might as well have to go back and use a microsoft datagrid. thanks for your answer in advance
best regards
t

[Peter]

Hello piratenwichtl,

Thank you for sharing your experience about RadGridView.

Every data bound column in the RadGridView is GridViewDataColumn. In the example I used the FieldName (e.t. Column Name) to put the progress bar only in the "Salary" column.

To avoid the incorrect stretching of the ProgressBar you should firstly add the RadProgressBarElement into Cell children, and after that set RadProgressBarElement to StretchHorizontally and StretchVertically:
 element.StretchHorizontally = true;
 element.StretchVertically = true;

I am sending you a simple application that demonstrates how to add RadProgressBarElement into a specific column in RadGridView.


Kind regards,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[piratenwichtl]

Hi Peter,

thank you for you help and that example you send me.
I did everything you said before, but with that example I was able to figure out what causes the ugly stretching.
It seems as soon as you choose a different theme other than nothing or the default control theme (I tried it with vista orange) and start the application, the progressbar appears not as intended.

I will work without a theme for now, but maybe it helps you guys figuring out the bug and improving the control.
best regards
t

[Peter]

Hello piratenwichtl,

I am attaching a new simple application that shows how to fix this behavior of RadProgressBarElement when RadProgressBarElement is placed in RadGridView.
 

Sincerely yours,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[piratenwichtl]

Hi Peter,

thank you. this is really good stuff!!!

best regards

t

[Ron Coffee]

I used this code to add a progress bar to a column.  I cannot seem to change the forcolor or the back color of the progress bar.  I am trying to get green forecolor, and red backcolor.  This code gives me a green progress bar on a grey background.  

void

radMailManagement_CellFormatting(object sender, CellFormattingEventArgs e)

{

if (e.CellElement.ColumnInfo is GridViewDataColumn && !(e.CellElement.RowElement is GridHeaderRowElement))

{

GridViewDataColumn col = (GridViewDataColumn) e.CellElement.ColumnInfo;

if (col.UniqueName == "ProgBar")

{

if (e.CellElement.Children.Count > 0)

return;

RadProgressBarElement elemProgBar = new RadProgressBarElement();

e.CellElement.Children.Add(elemProgBar);

elemProgBar.StretchHorizontally =

true;

elemProgBar.StretchVertically =

true;

elemProgBar.Minimum = 0;

elemProgBar.Maximum = 100;

elemProgBar.Opacity = 2;

elemProgBar.Dash =

false;

elemProgBar.BackColor =

Color.Red;

elemProgBar.ForeColor =

Color.Green ;

elemProgBar.DisplayStyle =

new DisplayStyle();

string value = e.CellElement.Text.Replace("%", string.Empty);

double numValue = Convert.ToDouble(value);

if (numValue <= 100)

{

elemProgBar.Value1 = 100-

Convert.ToInt32(Math.Round(numValue,0,MidpointRounding.ToEven ));

}

else

{

elemProgBar.Value1 = 0;

}

}

}

}

[Dwight]

Hi Ron,

The progress bar element contains two sub-elements: a FillPrimitive and a ProgressBarPrimitive. Here is a code block that changes the progress bar colors:

	FillPrimitive fp = elemProgBar.Children[0] as FillPrimitive;
	ProgressBarPrimitive pbp = elemProgBar.Children[1] as ProgressBarPrimitive;
	fp.BackColor = Color.Red;
	fp.NumberOfColors = 1;
	pbp.NumberOfColors = 2;
	pbp.BackColor = Color.Cyan;
	pbp.BackColor2 = Color.Cyan;

Note:

  1. In both cases we modify the back color, as the fore color is left for the text (each primitive might have text on its own).
  2. There is an issue in the ProgressBarPrimitive, which prevents it from using only one color (as the fill primitive in the above example). That is why I set the NumberOfColors to 2, and set the BackColor and BackColor2 to the same value.

I hope this helps.

Regards,
Evtim
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Eliza Sahoo]

We all know Math.Round() basically rounds a particular decimal value. But if we look into this method closely it rounds the value to the nearest even value.

For example if we do Math.Round(2.5,0) it will return 2. But we may expect 3 intead of 2. In that case we can use MidPointRounding parameter of

Math.Round() method.

 

Math.Round can also take a parameter known as MidPointRoundingwhich helps us to select the Rounding option. That means whether we want to round towards even number or to the number away from zero.

 

For example, when someone  do the rounding of 8.5 .  MidpointRounding will help to specify whether rounding will be towards the even number (8) or it will be away from zero (9).

[Ariel]

HI There

I have manage to implement the progress bar as specified, in this forum, however if I double click between the headers, to resize the column and then sort on another columns, except the one displaying the progress bar the progress bars move of the column and go onto other columns, this is causing alot of issues.

Can you let me know how I can fix this issue.

Regards

Bhavik

[Jack]

Hello Bhavik,

In Q2 2010 we included column virtualization and now RadGridView creates only the cells which are currently visible. When scrolling or applying data operations, these cells are reused. This feature enables presenting a large number of columns without any performance loss and causes the observed issue.

To solve the issue, you should specify which columns are compatible with your custom cell. There is an example of this behavior in this KB article. Please check it for more details. 

If you need further assistance, please send me your application and I will do all changes for you.

Greetings, Jack
the Telerik team

[Tim]

I'm trying to add a progress bar to each row of a gridview and then update each every couple of seconds. I've been searching for some examples in VB, but I haven't found anything yet. The columns are created at runtime. Right now the "Percentage" is just a number  (but would like it to be a progress bar) and Button1 remakes the grid but could in essence just update the percentages.

Heres a sample:

Imports System
Imports System.IO
Imports System.ComponentModel
Imports Telerik.WinControls.UI
Imports Telerik.WinControls
Imports Telerik.WinControls.Data
Imports Telerik.WinControls.Enumerations



Public Class Form1

    Private Sub Form1_Resize(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Resize
        RadPageView1.Width = Me.Width - 37
        RadPageView1.Height = Me.Height - 90

        RadGridView1.Width = RadPageView1.Width - 130
        RadPageView1.Refresh()
        'Me.RadGridView1.BestFitColumns()
    End Sub

    Public Sub New()
        InitializeComponent()

        Dim source As New BindingSource()

        Dim firstName As String() = {"John", "Jim", "Jason", "Barbara", "Ben", "Thomas", "Antonio"}
        Dim lastName As String() = {"Baumer", "Davidson", "Jones", "JolieWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW", "Pitt", "Ashword", "Moreno"}

        For i As Integer = 0 To 6
            source.Add(New Employee(i, firstName(i), lastName(i), i + 20, i * 15))
        Next
        RadGridView1.DataSource = source
        Me.RadGridView1.EnableSorting = True
        Me.RadGridView1.EnableFiltering = True
        Me.RadGridView1.ShowRowHeaderColumn = False
        Me.RadGridView1.AllowColumnResize = True
        Me.RadGridView1.AllowColumnReorder = True
        Me.RadGridView1.AutoSize = True
        Me.RadGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill
        'Me.RadGridView1.BestFitColumns()

        Me.RadGridView1.AllowAutoSizeColumns = True


    End Sub

    'Generate a new random list
    Private Sub RadButton1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles RadButton1.Click
        Dim source As New BindingSource()

        Dim firstName As String() = {"John", "Jim", "Jason", "Barbara", "Ben", "Thomas", "Antonio", "John", "Jim", "Jason", "Barbara", "Ben", "Thomas", "Antonio"}
        Dim lastName As String() = {"Baumer", "Davidson", "Jones", "Jolie", "Pitt", "Ashword", "Moreno", "Baumer", "Davidson", "Jones", "Jolie", "Pitt", "Ashword", "Moreno"}

        Dim RandomClass As New Random()

        For i As Integer = 0 To RandomClass.Next(0, 14)
            source.Add(New Employee(i, firstName(i), lastName(i), i + 20, RandomClass.Next(0, 99)))
        Next
        RadGridView1.DataSource = source
    End Sub

    Private Sub RadButton2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles RadButton2.Click
        Me.RadGridView1.BestFitColumns()
    End Sub
End Class

Public Class Employee
    Public Sub New(ByVal id As Integer, ByVal fn As String, ByVal ln As String, ByVal age As Integer, ByVal percnt As Integer)
        Me.EmployeeId = id
        Me.FirstName = fn
        Me.LastName = ln
        Me.Age = age
        Me.Percent = percnt
    End Sub

    'the next attribute prevents the EmployeeId column from showing
    <Browsable(False)> _
    Public Property EmployeeId() As Integer
        Get
            Return m_EmployeeId
        End Get
        Set(ByVal value As Integer)
            m_EmployeeId = value
        End Set
    End Property
    Private m_EmployeeId As Integer
    Public Property FirstName() As String
        Get
            Return m_FirstName
        End Get
        Set(ByVal value As String)
            m_FirstName = value
        End Set
    End Property
    Private m_FirstName As String
    Public Property LastName() As String
        Get
            Return m_LastName
        End Get
        Set(ByVal value As String)
            m_LastName = value
        End Set
    End Property
    Private m_LastName As String
    Public Property Age() As Integer
        Get
            Return m_Age
        End Get
        Set(ByVal value As Integer)
            m_Age = value
        End Set
    End Property
    Private m_Age As Integer
    Public Property Percent() As Integer
        Get
            Return m_Percent
        End Get
        Set(ByVal value As Integer)
            m_Percent = value
        End Set
    End Property
    Private m_Percent As Integer
End Class

[Jack]

Hello Tim,

Please check the GridView >> Columns >> Column Types example in our demo application. It demonstrates how to add a progress bar column in RadGridView. I think that this example will fit in your scenario. You can check the VB code by clicking on the "VB.NET Code" tab above the example itself.

If you have any further questions, we will be glad to assist you.

All the best, Jack
the Telerik team

[Tim]

Thanks, that worked. One other minor glitch - I added a drop down to change Application themes and some of the Themes show grey vertical bars covering the columns. They disappear on the next call the Cell_Formatting but it would be nice to NOT have them there at the changing of the Theme. ControlDefault, Desert,Breeze Extended,High Contrast Black, Miscellaneous, & Office 2010.

High Contrast Black, the vertical bars never disappear, and although "Telerik" doesn't show them as I cursor over the column headers they change to their eventual lime-green gradient from their starting greay/green gradient. Perhaps that by design?

The

[Svett]

Hi Vincent,

I did not manage to reproduce the issue. I would kindly ask you to open a new support ticket with attached sample project where the issue occurs. This will help us to understand your scenario and will allow us to investigate it locally.

Best wishes,
Svett
the Telerik team

[krishna]

HI There

I have manage to implement the progress bar as specified, in this forum, however if I double click between the headers, to resize the column and then sort on another columns, except the one displaying the progress bar the progress bars move of the column and go onto other columns, this is causing alot of issues.

Can you let me know how I can fix this issue.

To ReProduce: Place the salary column before the last column(i.e., salary column should not be the last column) and then click sort, expand the column here and there , you will see progress bar getting added to the other columns)

Regards,
Krishna.

[Svett]

Hello Krishna,

I suppose that you create the progress bars inside the CellFormatting event. The best way to achieve the desired scenario is creating a custom cell element. I have enclosed a sample project that demonstrates how this can be achieved.

I hope you find this useful. Let me know if I can assist you further.

All the best,
Svett
the Telerik team

[Behin]

Hello Svett
I used the sample that you attached and it was that I want.but now I have 2 problemes.
1-I need to change the color of the progress bar
2-I want to set tooltip for the progress bar (the tooltip text  contains information about the grid cell which progressbar is in it )
please help me to solve these problemes.
Thanks

[Svett]

Hi Behin,

Here are the answers to your questions:

1. You can customize the appearance of the progress bar by overriding the GridProgressCellElement's UpdateInfoCore method:

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

    UpperProgressIndicatorElement indicator = this.progressBar.IndicatorElement1;
    indicator.BackColor = Color.Red;
    indicator.BackColor2 = Color.Red;
    indicator.BackColor3 = Color.Red;
    indicator.BackColor4 = Color.Red;
}

2. You should use the ToolTipTextNeed of RadGridView event in the following manner:

private void radGridView1_ToolTipTextNeeded(object sender, Telerik.WinControls.ToolTipTextNeededEventArgs e)
{
    RadItem item = sender as RadItem;

    if (item == null)
    {
        return;
    }

    RadProgressBarElement progressBar = item.FindAncestor<RadProgressBarElement>();

    if (progressBar != null)
    {
        GridCellElement cellElement = progressBar.Parent as GridCellElement;

        if (cellElement != null)
        {
            e.ToolTipText = "Your tool tip text";
        }
    }
}

I am enclosing a modified version of the project that I previously provided. 

All the best,
Svett
the Telerik team

[Behin]

thank you Svett It was the answer

[Behin]

Hello Svett
I face to another problem,when the grid has the other kind of columns it doesnt work correct.
for example I write
private void radGridView1_CreateCell(object sender, GridViewCreateCellEventArgs e)
        {
 if (e.Column.Index >2 && e.Row.Data is GridViewDataRowInfo)
e.CellType = typeof(GridProgressCellElement);
               
            }

because I dont want to have progressbar in columns 0,1,2 , but it doesnt work .please help me to solve this problem.
thanks alot

[Svett]

Hi Behin,

You should override the IsCompatible method to determine when the cell should be reused. In your case, it should be compatible only with the column that you want:

public override bool IsCompatible(GridViewColumn data, object context)
{
    return data.Name == "Progress" && context is GridDataRowElement;
}

Also the implementation of the CreateCell event handler should be:

private void radGridView1_CreateCell(object sender, GridViewCreateCellEventArgs e)
{
    if (e.Column.Name == "Progress" && e.Row.Data is GridViewDataRowInfo)
    {
        e.CellType = typeof(GridProgressCellElement);
    }
}

If the proposed solution does not fit your requirements, could you share the project where you have applied our guidelines?

All the best,
Svett
the Telerik team

[Behin]

thank you Svett
I was waiting eagerly to see your reply.I have 10 columns in the grid , which 8 of them are progressbar and each column has the specific name
so i cant write
if (e.Column.Name == "Progress" && e.Row.Data is GridViewDataRowInfo)
in the "radGridView1_CreateCell"
I write if ( e.Column.Index>1)
is it right?

[Svett]

Hello Behin,

Thank you for the clarification.

I recommend using the name of the columns instead of the index , because the columns can be reordered by the user. Therefore, the condition that you should use in the CreateCell event handler and in IsCompatible method of the custom cell is the following one:

if ((column.Name == "Column1" || column.Name == "Column2") && e.Row.Data  is GridViewDataRowInfo)
{
}

I hope this helps.

Kind regards,
Svett
the Telerik team

[Behin]

Thank you Svett
as I said I have sevral columns which are progressbar so I named the column "progresbar0 ",  "progresbar1 ", "progresbar2 ",......, "progresbarn "
therfore I CreateCell event I write

if ((column.Name.contain("progresbar") && e.Row.Data is GridViewDataRowInfo)

{

}
and in IsCompatible event I write
return data.Name.contain("progresbar") && context is GridDataRowElement;


but when I scroll the grid some of progressbars disapear ,is that right ?
I'm realy confused!!!!!
I'm sure the problems occur when the grid scroll horizontally.when I set the column width and it causes
the grid to be scrolled some the progressbars disapear by random.


[Svett]

Hello Behin,

I managed to reproduce the misbehavior. It is caused by the cell reusing when UI virtualization algorithm executes. In addition of the custom cell, I recommend creating a custom column which will address this issue. I am enclosing a sample project which demonstrates how you can do it.

Regards,
Svett
the Telerik team

[Behin]

Thank you Svett
It was the answer ,thank you for your support

[Behin]

Hello Svett
I have another question,what I must to do if I want to change the text or color of progressbars after I create them ?
Is there any way to do it with out recreating progressbars?
for example , I want to change the back color of progressbars which their values are grater than 60. or I want to change the text after creating .
I write the code below but again after scrolling every thing change to the previous value
for (int i = 0; i < GrdBase.RowCount; i++)
            {
                GridCellElement cellElement = GrdBase.TableElement.GetCellElement(GrdBase.Rows[i], GrdBase.Columns[2]);
                if (cellElement != null)
                {
         
                    RadProgressBarElement progressBar = cellElement.FindDescendant<RadProgressBarElement>();
                  
                    progressBar.Text = progressBar.Value1.ToString() + "a";
                    progressBar.BackColor = Color.Red;
                }
            
            }

I'll be thankfull if you could help me

[Svett]

Hello Behin,

I recommend using the CellFormatting event to change the appearance of the cells. You can read more about that in the online documentation. Note that you should move all logic for setting the background colors of the progress bar in the event handler. Also do not forget to reset local values (as documentation illustrates) of the properties for those cells that do not obey the conditions. 

All the best,
Svett
the Telerik team

[Allen]

Good day all!!!

I downloaded the example 'ProgressCellElement-CustomColumn.zip'. I have a question.

How would I change to color at for the progress bar programatically based on certain conditions???

Thanx in advance...

[Ivan Petrov]

Hello Allen,

Thank you for writing.

I presume you want to change the color of the progress bar indicator depending on the value it is displaying. For this the best place would be the SetValueCore method where you set the value to the progress bar element.

I hope this will be useful. Should you have further questions, I would be glad to help.

All the best,
Ivan Petrov
the Telerik team