How to add UniProgressBar to UniDBGrid?

[55143681]

I have a UniDBGrid ,I want to choose a column to add UniProgressBar to display the progress,

or draw a Rectangle in the cell with progress position and color to display the progress,

How to do that?

 

[Sherzod]

1 hour ago, 55143681 said:

I have a UniDBGrid ,I want to choose a column to add UniProgressBar to display the progress,

or draw a Rectangle in the cell with progress position and color to display the progress,

How to do that?

Hello,

Please see this demo:

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

UniDBGrid1.Columns[4].WidgetColumn.Widget = UniProgressbarWidget1

[55143681]

4 hours ago, Sherzod said:

Hello,

Please see this demo:

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

UniDBGrid1.Columns[4].WidgetColumn.Widget = UniProgressbarWidget1

Good job.

Can you tell me how to setup  UniProgressbarWidget1 and  UniButtonWidget1 's color?

[Sherzod]

9 minutes ago, 55143681 said:

Can you tell me how to setup  UniProgressbarWidget1 and  UniButtonWidget1 's color?

Try this:

 

[55143681]

[55143681]

but where to add the code?
function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts) 
{
    var widgetColIndx = 1;
    columns[widgetColIndx].onWidgetAttach = function(column, widget, record) {
        widget.setStyle('border-color', 'green');
        widget.setStyle('background-image', 'linear-gradient(lime, green)');
    };
}

[Sherzod]

Well, this is a demo example.

[Sherzod]

1 minute ago, 55143681 said:

but where to add the code? function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts) { var widgetColIndx = 1; columns[widgetColIndx].onWidgetAttach = function(column, widget, record) { widget.setStyle('border-color', 'green'); widget.setStyle('background-image', 'linear-gradient(lime, green)'); }; }

UniDBGrid.ClientEvents.ExtEvents...

[55143681]

1 minute ago, Sherzod said:

Well, this is a demo example.

Thanks ,

But where to add the follow code?

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts) 
{
    var widgetColIndx = 1;
    columns[widgetColIndx].onWidgetAttach = function(column, widget, record) {
        widget.setStyle('border-color', 'green');
        widget.setStyle('background-image', 'linear-gradient(lime, green)');
    };
}

[Sherzod]

1 minute ago, 55143681 said:

But where to add the follow code?

 

1 minute ago, Sherzod said:

UniDBGrid.ClientEvents.ExtEvents...

 

[55143681]

11 minutes ago, Sherzod said:

 

 

Thanks,but how to change this UniProgressbarWidget1's color?

 

[Sherzod]

6 minutes ago, 55143681 said:

but how to change this UniProgressbarWidget1's color?

I will try to analyze.

[Sherzod]

15 minutes ago, 55143681 said:

Thanks,but how to change this UniProgressbarWidget1's color?

Something like this:

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts) 
{
    var widgetColIndx = 4;
    columns[widgetColIndx].onWidgetAttach = function(column, widget, record) {
        var me = widget;
        
        me.barEl.setStyle(
            'background-image',
            'linear-gradient(to right, green, lime)'
        );

        me.setStyle(
            'border-color',
            'green'
        );

        var pText = me.el.select('.x-progress-text.x-progress-text-back').elements[0];
        if (pText) {
            Ext.get(pText).setStyle(
                'color',
                'green'
            )
        }
    };
}

 

[55143681]

13 hours ago, Sherzod said:

Something like this:

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts) 
{
    var widgetColIndx = 4;
    columns[widgetColIndx].onWidgetAttach = function(column, widget, record) {
        var me = widget;
        
        me.barEl.setStyle(
            'background-image',
            'linear-gradient(to right, green, lime)'
        );

        me.setStyle(
            'border-color',
            'green'
        );

        var pText = me.el.select('.x-progress-text.x-progress-text-back').elements[0];
        if (pText) {
            Ext.get(pText).setStyle(
                'color',
                'green'
            )
        }
    };
}

 

Ha ha,very good.,works well.

I am so sorry that UniDBTreeGrid do not have RowWidget function,

How to get it?