Progress indicator in UniDBGrid

[codeb]

Hi!

 

Is there some solution to put progress indicator in UniDBGrid. I have one"percent" field (10%,20%,30%....100%) and I try to show visualy percents in UniDBGrid with progress indicator.

 

Any solution for that? 

[Sherzod]

Hi codeb!

 

Try this:

 

UniDBGrid1 -> ClientEvents -> ExtEvents add reconfigure

function reconfigure(sender, store, columns, oldStore, the, eOpts)
{
  // columns[your_column_index]
  columns[0].width = 110;
  columns[0].renderer = function (v, m, r) { var id = Ext.id();Ext.defer(function () {Ext.widget('progressbar', { renderTo: id, value: v / 100, width: 100 });}, 50);return Ext.String.format('<div id="{0}"></div>', id);};
}

 

http://ext4all.com/post/progress-bar-inside-a-grid-cell

 

Sincerely.

[Jean-Marc Kiener]

Works perfect for me, thanks

[Jean-Marc Kiener]

Is there a possibelity to change the color of the progressbar? I want to change the bar from gray to blue.

[Beginner]

Delphi Developer

How show like Excel? Data Bar

[ataryono]

Work for me, how to insert text 50% inside progress bar, tx

[Kattes]

Sorry, but this trick is not working anymore (at least for me using uniGUI_1.90.0.1514).

First you will think that everything is OK, but under real "usage" conditions it will make everything unstable. 

So
DON'T USE THIS !

[Sherzod]

21 minutes ago, Kattes said:

Sorry, but this trick is not working anymore (at least for me using uniGUI_1.90.0.1514).

Well, 6 years..!
There have been many changes on both the ExtJS side and the UniGUI side.

Now use WidgetColumn:

\FMSoft\Framework\uniGUI\Demos\Desktop\Grid - WidgetColumn2

 

[Kattes]

OK, I got it working, but the example (\FMSoft\Framework\uniGUI\Demos\Desktop\Grid - WidgetColumn2) is not really self explaining.

The screen shot below is using ProgressWidget (column Progr) and some HTML hard coded solution from me (column Progress).

Question: Is there a way to center the widget vertically? I tried it using margins, but that does not seem to work.

 

[Sherzod]

13 minutes ago, Kattes said:

and some HTML hard coded solution from me (column Progress).

Well, we don’t know how you did it...

[Kattes]

Actually my approach is not relevant here, but I can of course tell you how I did it:

I simply created in my MySQL DB a table view, which contained a field:

Concat('<progress max="100" value="',Progr,'">',Progr,'%</progress>') as  progress

This made the trick for me. But I am more interested in the widget approach, because it is using pre-defined themes and will look for browsers equal.

[Sherzod]

4 hours ago, Kattes said:

Question: Is there a way to center the widget vertically?

Well then, what do you mean?

[Kattes]

Sorry, I mean that the widget is currently located at the top of the grid cell, but I want to have it vertically centered. 

[Sherzod]

Ok, I will check. 

[Sherzod]

1 hour ago, Kattes said:

Sorry, I mean that the widget is currently located at the top of the grid cell, but I want to have it vertically centered. 

You can try to use this approach:

 

[Kattes]

Thanks Sherzod, your CSS trick also made sure that the widget fills the height of the grid cell better in addition to the vertical centering.

[Kattes]

Just another little cosmetic question. As you can see in the title of the grid, the "g" of the word "progress" is cut off. Can this be cured by a simple CSS statement, too?

[Sherzod]

I will check. 

[Sherzod]

On 2/1/2020 at 1:37 PM, Kattes said:

Just another little cosmetic question. As you can see in the title of the grid, the "g" of the word "progress" is cut off. Can this be cured by a simple CSS statement, too?

Hi,

You can try this CustomCSS:

.x-column-header-inner {
    padding: 5px 10px;
    line-height: normal;
}

 

[Kattes]

BIngo ! 100 Points go to Sherzod ! 

This is perfect ! Thank you, again!