Jump to content

Progress indicator in UniDBGrid


Recommended Posts

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);};




Link to comment
Share on other sites

  • 1 month later...
  • 5 months later...
  • 1 year later...
  • 11 months later...
  • 2 years later...
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


  • Like 1
Link to comment
Share on other sites

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.



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?


You can try this CustomCSS:

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


  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...