Segmented Progress Bar (or multi-color progress bar)

Hi,

I know my Q is not related to WinGrid but i just couldn’t find the correct sesion in the form that related to progress bars.

I need your help,

Is it possible to craete a multi-color / segmented progress bar with Infragistics progress bar?

I want to give an indicattion for example that 20% of the jobs failed (red) and 30% passed (green).

Thanx alot,

Gilad.

Hi Gilad, 

Yes, you need to use the PercentSettings collection. This collection allows you to specify different appearances for different ranges of values. 

Mike,

Your reply didn't help me, can you be more specific?

How can i define the number of segments, the color of each segment, and how can i set each segment value automatically for all the rows at once.

The idea is that each row in my grid provides details on jobs, some pass and some failed, i need each row to visualize this throgh the progress bar – showing the precentage of passed jobs in green in the failed precentege in red.

I want to avooid the need to itterate over all the rows – and have a global condition definition for the entire grid.

Today i have only one segment, i use this code:

//Set progress barsvar targetInfoProgressBar = new UltraProgressBar();

targetInfoProgressBar.Style = Infragistics.Win.UltraWinProgressBar.

ProgressBarStyle.Continuous;

grid.DisplayLayout.Bands[0].Columns[

"Progress"].EditorControl = targetInfoProgressBar;

 

I want to segment this value according to other values in a relevant row.

Does infragistics support this? Can you give a code snap for this? not full – just the main idea…

 

THANX!!

Hi,

Maybe I am misunderstanding what you mean by "segmentting".  You cannot show two values with the same progress bar. The bar will only display one value at a time. 

But you can determine the color of the progress bar's fill area based on the percentage value using the PercentSettings collection. This collection allows you to specify a different appearance for the ProgressBar based on it's value. For example, you could set up a PercentSetting for 50 with an appearance of red. The ProgressBar will be red if the value is less than 50. You can set up another PercentSettings for 70 to use a different color and then that color will be used if the value is 50-70, etc. 

 

I guess that this is what i need but:

Can i set a conditional PercentSetting according to a row's value.

I'll explain myself:

Let's say i have a row representing a task, each task is consisted of jobs and the each grid row provides information on how many of these jobs failed and how many completed.

Now i want to set a diffrent PercentSetting for each row according to the completed/failed values in the relevant row.

I would rather do it without having to itterate over the rows since my grid can contain up to 100000 rows.

Is this possible?

Can you lease give me a snap code example on how to work with teh PercentSetting?

 

Thanx thanx thanx!!

Hi,

In order to have different percent setting on each row, you would have to use a different editor for each row.  So you would do something like this:

        private void ultraGrid1_InitializeRow(object sender, InitializeRowEventArgs e)
        {
            ProgressBarEditor progressBarEditor = new ProgressBarEditor();
            PercentSetting percentSetting = new PercentSetting();
            percentSetting.Percent = 50; // You can determine whatever value you want to use here.
            percentSetting.FillAppearance.BackColor = Color.Red;
            progressBarEditor.PercentSettings.Add(percentSetting);
            e.Row.Cells["Int32 1"].Editor = progressBarEditor;
        }

Mike – First -> THANX!! you're a saver, I still couldn't make it work – but at least i can see some progress, this is like a show stoper for me.

I did what you said, add the bellow code to the ultraGrid1_InitializeRow event handler:

ProgressBarEditor progressBarEditor = new ProgressBarEditor();

PercentSetting failedPrecentSettings = new PercentSetting();

failedPrecentSettings.Percent = 50;

failedPrecentSettings.FillAppearance.BackColor = Color.Red;

progressBarEditor.PercentSettings.Add(failedPrecentSettings);

PercentSetting runningPrecentSettings = new PercentSetting();

runningPrecentSettings.Percent = 100;

runningPrecentSettings.FillAppearance.BackColor = Color.Black;

progressBarEditor.PercentSettings.Add(runningPrecentSettings);

e.Row.Cells[

"Progress"].Editor = progressBarEditor;

 Like you said – i wanted for example to make the fist 50% red and the rest black.

But i get the entire progress bar black – thus according to the last precent settings.

I wasn't sure if i should use a new PercentSettings object – i tried to use the same one, still didn't work.

I have tried putting 50 in both – but still – not working.

Another issue is that i use styling and if i keep the styling on it overrides everything and the color changes doesn't apply at all.

How can i disable the styling only for the progress bar?

 

THANX THANX THANX THANX 😉

 

[quote user="gbenshim"]i wanted for example to make the fist 50% red and the rest black.[/quote] 

The PercentSettings do not work that way. The FillAppearance affects the whole progress bar. There is no built-in support for coloring only part of the bar. Although, perhaps what you could do is apply an Image to the FillAppearance. You could make an image of what the progress bar would look like at 100% with all the colors you like and then then the cell would only show part of the image on the bar.

 [quote user="gbenshim"]How can i disable the styling only for the progress bar?[/quote]

You can't. You would have to modify the isl file so that it doesn't have any progressbar settings. But if you take the approach of using an image, you probably won't have to, since the image will override the colors, anyway. 

 

Mike,

OK –  i wrote my own progress bar control that can provide the features i want.

Now – I understood that in order to dock into an UltraGrid cell i need to implement IProvideEmbeddedEditor.

What do i need to do in order to implement this interface?

Please provide details even if this is a complicated task, just give me a thread to start with and i'll handle the rest.

Do you guys have a manual for this? I searched the internet with no success.

I MUST provide this – no other choice for me, this is crutial for our application and i'm ready to deal with any level of complexity.

One last thing:  although i have used an image, the isl file override my image settings and i took your advice to disable it – it worked 😉

Thanx again!

-Gili

Hi Gili,

Putting your own custom control into the grid is an extremely difficult and complex process, and I would strongly advise against it. If you must go down that row, then I recommend that you check out the RichTextEditor sample which demonstrates creating an editor using a RichText control.

It would be easier to use an image, as I suggested previously. But if your limits in each row vary, that might be a bit tricky.

Another approach you might take is to use the progressbar editor like you were already doing and use a DrawFilter to draw the bar yourself. That way you have complete control over the appearance of the bar and you can use the values in the cell and other values in the row to construct a bar that looks exactly how you want it. I assume you must be doing this for your own progress bar, anyway.

If you are not familiar with DrawFilters, then I recommend that you check out the Infragistics Knowledge Base. There are lots of articles and sample DrawFilters there. Also, you should get the Infragistics UIElementViewer Utility. It helps a lot when dealing with UIElements.

Mike – I FINALLY MADE IT!!!!

I took your advice with the image stuff, since i already had to draw the progress bar for the control i have made – this was an easy task to make an image from it – just a few lines of code.

The limits of the colored segments do change, but my progress bar knows how to handle this and to produce an image on the fly according to the values of the current row. I have set the db field to constantly return 100% in the progress field (since the progress bar should show the entire image), build the image as i want and planted in the background image of infragistics progress bar.

THANX THANX for the help, your advices meant a lot!!!

It works greater than i expected and also looks great!!!

BTW: Styling do overrides image settings, i had to disable the progress bar in the isl file.

-Gili

 

Mike, i need to make something like this,

Do you see the last progress bars – where more than 2 colors are being used, this is what i need:

 

I’m frustrated, isn’t this possible, i’m spending so much time in finding out a solution for thst.

Another issue:

Assuming ProgressBarEditor works for making a segmented progress bar, how would it apply for a standalone progress bar – not one in a grid.

There seems to lack a connection between a progress bar (UltraProgressBar) and ProgressBarEditor…

Please help 🙁  I’m dependent on your help 😉

Thanx.

What's wrong in this code ?

my progressbar never displayed in the red color

private void ultraGrid1_InitializeRow(object sender, InitializeRowEventArgs e)
{

foreach (UltraGridCell cell in e.Row.Cells)
{
if (cell.Column.Key.StartsWith("QuotaPercentage") || cell.Column.Key.StartsWith("QuotaReprisePercentage"))
{
if (e.Row.Cells[cell.Column.Key].Value != null && e.Row.Cells[cell.Column.Key].Value != System.DBNull.Value)
{
int quota = Convert.ToInt32(e.Row.Cells[cell.Column.Key].Value);

ProgressBarEditor progressBarEditor = new ProgressBarEditor();
PercentSetting percentSetting = new PercentSetting();
percentSetting.Percent = 92; // You can determine whatever value you want to use here.
percentSetting.FillAppearance.BackColor = Color.Red;
progressBarEditor.PercentSettings.Add(percentSetting);
e.Row.Cells[cell.Column.Key].Editor = progressBarEditor;
}
}
}
}

Hi,

My first guess is that your grid is displaying using OS Themes. The themed drawing is handled by the operating system and you cannot change the colors.

So you will need to turn off themes either on the whole grid or just that one column. For the whole grid, set UseOsThemes to false. For just the one (or two) columns, you do this:

        private void ultraGrid1_InitializeLayout(object sender, Infragistics.Win.UltraWinGrid.InitializeLayoutEventArgs e)
        {
            UltraGridLayout layout = e.Layout;
            UltraGridBand band = layout.Bands[0];

            band.Columns["QuotaPercentage"].CellAppearance.ThemedElementAlpha = Alpha.Transparent;

        }

is not working 🙂

my grid is setted manually with a datatable at the runtime

//Reprise Quota
layout.Bands[0].Columns[quotaReprisePercentage].Group = columnsGroup;
ProgressBarEditor pRepriseBar = new ProgressBarEditor();
pRepriseBar.Style = Infragistics.Win.UltraWinProgressBar.ProgressBarStyle.Default;
pRepriseBar.Label = UltraProgressBar.LABEL_FORMATTED;
pRepriseBar.LabelVisible = true;
pRepriseBar.Minimum = 0;
pRepriseBar.Maximum = 100;
pRepriseBar.PercentSettings.Add(50).Appearance.BackColor = Color.Orange;
pRepriseBar.PercentSettings[0].FillAppearance.BackColor = Color.Orange;

layout.Bands[0].Columns[quotaReprisePercentage].Editor = pRepriseBar;

Hi,

I'm confused. This looks pretty much like the same code you posted the first time. Did you turn off themes like I suggested?

If you turned off themes and it's still not working, then I don't know what else could be wrong. Perhaps you could post a small sample project demonstrating the issue so we can take a look?

Is not working !

I have an example do you can help to resolve this.

i attached the source code

Hi,

I ran your sample and it's not working, because you are not turning off themes. You have code in the ultraGrid1_InitializeLayout event to turn off themes, but this line of code is never getting hit because of your check for IsInitialized.