Progress bar under or behind grid rows

I’m trying to come up with a UI for listing fairly long processing jobs and showing progress.  I know I can have a grid and add a column with a progress bar for each row.  But I’ve got limited space and the progress bar column would be too small to be useful.

Is there a way to implement a grid with columns (as normal) but with a progress bar under each row, or perhaps behind each row?  If it’s behind, the text color in the columns would need to behave like it was displayed in the progress bar (changing from black to white as the colored progress bar moves right).  If under each row, the progress bar could be very thin (like a thick line).

I’m trying to come up with a way of showing jobs that are currently being processed.  So the row would have information about the job and the progress bar would show how far it is.  I’ve got limited horizontal space for fairly long processing jobs so don’t want to waste a column for a tiny progress bar if possible.

Thinking about this, one hacky solution to implement the progress bar as a background would be to have every cell have a progress bar with text for a cell assigned to it’s PB.  Then the current widths of the columns could be used to figure out which column in a row to advance (the columns to the left at 100% and the columns to the right at 0%).  But it would be great if there was built-in support for a row level PB.  And our ideal solution is actually for a PB below each row.

Hi Richard, 

Both of the approaches you outline here should be possible.

Placing a ProgressBar under the row (as opposed to behind the cells) would be the easier solution, and you seem to be saying you would prefer that approach, even though it requires more vertical space.

To implement that, you need to use a RowLayout and add an unbound column to the grid, and then position that unbound column so that it spans across all of the other columns in the row. 

But there are two caveats to this approach that you need to be aware of. 

First, what happens if the row is wider than the grid? If there are cells outside of the view and you need to scroll to see them, then having a progress bar that spans all of the cells would be a little odd, since the user wouldn't be able to see the whole thing. This would not be a problem unless there's a Scrollbar, so maybe you are using AutoFitStyle to make all the columns fit within the available width of the grid? 

Second, using RowLayouts means you cannot have fixed headers in the grid. I don't know if you need those in your application. If so, you might be able to use Groups instead, and get the best of both worlds.

I am attaching a small sample project here that demonstrates how to achieve this in a simple case, assuming that AutoFitStyle is on (or at least assuming that the cells are not wider than the grid) and that you do not need fixed headers.

Thanks Mike.  Not having column headers is a no go.  And my idea to show all the data in every cell in its own progress bar means the cells themselves won't hold data directly, so it's probably not possible to use Sorting, Ordering, Filtering, all that good stuff. 

Did you have another idea for the progress bar as a background for the row?

You brought up a case I hadn't thought of – namely – horizontal scrollbar wouldn't work.  What would really be cool is a progress bar bound to the top or bottom of each row, or as a background (with the appropriate color changes to cell content) that is sized to the width of the grid regardless of horizontal scrolling!

Hi Richard, 

Sorry, but you've lost me. Did you run the sample I sent you?

[quote user=”73C3B9286C52DD3D5A5C4E033A70234F5B891D22″]Not having column headers is a no go[/quote]

I didn't say you can't have column headers – I just said you can't use FIXED headers – fixed headers don't work with RowLayouts. Fixed header means columns that are fixed on the left/right and don't scroll. Which wouldn't matter anyway, since scrolling horizontally would negate the ProgressBar. 

[quote user=”73C3B9286C52DD3D5A5C4E033A70234F5B891D22″]And my idea to show all the data in every cell in its own progress bar means the cells themselves won't hold data directly, so it's probably not possible to use Sorting, Ordering, Filtering, all that good stuff. [/quote]

I'm not following you. You want EVERY cell to be/have it's own progress bar? I thought you wanted one progress bar for the entire row. That's what your original question says – row not cell. 

Hi Mike,

Sorry for the confusion.  I've looked at the sources you sent me but I'm considering using Infragistics controls and don't have the library yet.  I didn't realize what you meant by "fixed". This looks like it could be a great solution for me.

The 2nd part was a solution I was considering in the last paragraph of my original post.  The idea was to implement a background pb i.e. put a pb in every cell and update the appropriate cell to simulate a single pb working across a row.  The pb would show the cell value – but if the value is in the pb rather than the cell, the grid wouldn't have direct access to the value so sorting, grouping, filtering wouldn't work.

Hi Richard, 

Oh, I see. Well, if you get the trial version you could run my sample and see if it meets your needs. 

Here's a screen shot of what my sample looks like:

Thanks Mike!  This looks great and does just what I want!  And I assume I can enable sorting by clicking on column headers?  Filtering?

Yes, there's no reason at all why the progress bar in this case would have any effect on sorting or filtering. Those will both work fine. 

Hi Mike,

We're making progress on the grid with the progress bar under each row!  Thanks so much!  A further question: We're using filtering and getting an extra filter row for the progress bar column.  Is there a way to disable this (since we're not going to be filtering the progress bar)?

Hi Richard, 

Hm…that's a tricky one. With this approach, using a RowLayout and an unbound column, there's really no way to remove the ProgressBar cell from any individual row. You can hide the cell, but it will still leave a space where it would have been. 

                // Turn on the filter row
                ov.AllowRowFiltering = DefaultableBoolean.True;
                ov.FilterUIType = FilterUIType.FilterRow;
                layout.Rows.FilterRow.Cells[PROGRESSBAR_COLUMN_KEY].Hidden = true;

Another alternative would be to just use the header icons for filtering instead of the filter row.