Left top corner in UniDBGrid

[artem_niko]

Hello!

I have question about top left corner in UniDBGrid. I mean place in this top left corner:

As default, if use Options of UniDBGrid, we can show or hide this FilterClearButton:

As default, this button clearing fileds where put filter.

I want replace this action on anouther action. For example, I want refresh data in UniDBGrid.

This is my two question:

1. Is it possible replace icon of this button (FilterClearButton) on icon from UniImageList?

2. Is it possible change size this button?

[Sherzod]

1 hour ago, Артем said:

2. Is it possible change size this button?

Hello,

Which theme are you using?

[Sherzod]

3 hours ago, Артем said:

1. Is it possible replace icon of this button (FilterClearButton) on icon from UniImageList?

2. Is it possible change size this button?

[artem_niko]

8 hours ago, Sherzod said:

Hello,

Which theme are you using?

I'm using commercial theme from theme pack.

But, if I use classic theme, icon almost as in my commercial theme:

[artem_niko]

6 hours ago, Sherzod said:

How do this? Is it exist in demo files? 

[Sherzod]

3 hours ago, Артем said:

How do this? Is it exist in demo files? 

Try this approach for now:

1. UniDBGrid.ClientEvents.UniEvents -> 

function beforeInit(sender, config) 
{
    var me = sender;
    me.setClearBtnSt = function(faIconName, btnWidth, hint) {
        var col = me.columnManager.columns[0];
        var colCF = col.items.getAt(0);
        if (colCF) {
            colCF.addCls("x-fa fa-"+faIconName+" fa-2x");
            colCF.setWidth(btnWidth);
            colCF.btnWrap.setStyle('display', 'none');
            colCF.setStyle('text-align', 'center');
            colCF.setStyle('height', '100%');
            colCF.setStyle('line-height', btnWidth + "px");
            col.setWidth(btnWidth);
            col.titleEl.setStyle('display', 'none');
            if (hint != ""){
                colCF.setTooltip(hint);
            }
        }
    }
}

2. Usage

procedure TMainForm.UniFormReady(Sender: TObject);
//var
  //fa: TUniIconFontFamily;
begin
  //https://fontawesome.com/v4.7.0/icons/
  with UniDBGrid1 do
    if dgFilterClearButton in Options then // setClearBtnSt(faIconName, btnWidth, hint)
      //JSInterface.JSCall('setClearBtnSt', [UniNativeImageList1.GetIconCls(0, fa), 40, 'Refresh...']);
      JSInterface.JSCall('setClearBtnSt', ['refresh', 40, 'Refresh...']);
end;

 

[artem_niko]

1 hour ago, Sherzod said:

Try this approach for now:

1. UniDBGrid.ClientEvents.UniEvents -> 

function beforeInit(sender, config) 
{
    var me = sender;
    me.setClearBtnSt = function(faIconName, btnWidth, hint) {
        var col = me.columnManager.columns[0];
        var colCF = col.items.getAt(0);
        if (colCF) {
            colCF.addCls("x-fa fa-"+faIconName+" fa-2x");
            colCF.setWidth(btnWidth);
            colCF.btnWrap.setStyle('display', 'none');
            colCF.setStyle('text-align', 'center');
            colCF.setStyle('height', '100%');
            colCF.setStyle('line-height', btnWidth + "px");
            col.setWidth(btnWidth);
            col.titleEl.setStyle('display', 'none');
            if (hint != ""){
                colCF.setTooltip(hint);
            }
        }
    }
}

2. Usage

procedure TMainForm.UniFormReady(Sender: TObject);
//var
  //fa: TUniIconFontFamily;
begin
  //https://fontawesome.com/v4.7.0/icons/
  with UniDBGrid1 do
    if dgFilterClearButton in Options then // setClearBtnSt(faIconName, btnWidth, hint)
      //JSInterface.JSCall('setClearBtnSt', [UniNativeImageList1.GetIconCls(0, fa), 40, 'Refresh...']);
      JSInterface.JSCall('setClearBtnSt', ['refresh', 40, 'Refresh...']);
end;

 

Excellent! Working:

Very big thank's!