change unicombobox/datepicker icon

donlego · June 1, 2020

hello

i use classic theme as default on my app

how to change unicombobox/datepicker , etc triger icon with triton icon , witout change my base theme

donlego · June 5, 2020

anyone have a solution ?

Sherzod · June 5, 2020

7 minutes ago, donlego said:
anyone have a solution ?

I will try to analyze.

donlego · June 5, 2020

thanks before @sherzod,

btw , i was try copy the image from triton to classic theme but nothing change

Sherzod · June 5, 2020

1 hour ago, donlego said:

btw , i was try copy the image from triton to classic theme but nothing change

One possible solution I think.

UniComboBox.ClientEvents.ExtEvents ->

function afterrender(sender, eOpts) 
{
    var me=sender;
    me.inputEl.setStyle('background', 'none');
    me.triggerCell.setStyle('background', 'none');
    me.inputWrap.setStyle('border-right-width', '0');
    me.triggerCell.setStyle('border-right-width', '1px');
    me.triggerCell.setStyle('border-top-width', '1px');
    me.triggerEl.elements[0].setHtml('<i class="fa fa-angle-down" style="font-size:1.8em; padding-right:5px"></i>');
}

comboTrigger.png.bba2f9a47a06002cc1f513d259bf8514.png

donlego · June 6, 2020

19 hours ago, Sherzod said:

One possible solution I think.

UniComboBox.ClientEvents.ExtEvents ->


function afterrender(sender, eOpts) 
{
    var me=sender;
    me.inputEl.setStyle('background', 'none');
    me.triggerCell.setStyle('background', 'none');
    me.inputWrap.setStyle('border-right-width', '0');
    me.triggerCell.setStyle('border-right-width', '1px');
    me.triggerCell.setStyle('border-top-width', '1px');
    me.triggerEl.elements[0].setHtml('<i class="fa fa-angle-down" style="font-size:1.8em; padding-right:5px"></i>');
}

it,s work, but @Sherzod

can it just use css / or copy file ?

coz i have about more than 100 + form need the style

Sherzod · June 6, 2020

5 hours ago, donlego said:

can it just use css / or copy file ?

Need to check.

donlego · September 9, 2020

On 6/6/2020 at 3:54 PM, Sherzod said:

Need to check.

any solution for unicombox/datepicker icon with css

donlego · September 16, 2020

how to add uniclient event on runtime ?

Quote

class procedure PlayWIthform.SET_ICON_COMPONENT(aform:tuniform);
var i:integer;
var after_render_Event:string ;

begin
//PlayWIthMessage.Run('aa','xx');
after_render_Event:= 'afterrender=function afterrender(sender, eOpts) { '+
'var me=sender; '+
' me.inputEl.setStyle("background", "none");'+
' me.triggerCell.setStyle("background", "none");'+
' me.inputWrap.setStyle("border-right-width", "0");'+
' me.triggerCell.setStyle("border-right-width", "1px");'+
' me.triggerCell.setStyle("border-top-width", "1px"); '+
' me.trigger.elements[0].setHtml(""); '+
'}';
for i:= 0 to aform.ComponentCount -1 do
begin
 if aform.Components is TUniDBLookupComboBox then
 (aform.Components as TUniDBLookupComboBox).ClientEvents.ExtEvents.Add(after_render_Event);

end;

i use this always error on the line

' me.trigger.elements[0].setHtml(""); '+

donlego · October 6, 2020

up..

donlego · August 19, 2021

Quote

procedure set_icona(aform: Tuniform);
var
i: Integer;
var
after_render_Event: string;

begin

after_render_Event := 'afterrender=function afterrender(sender, eOpts) { ' +
 'var me=sender; ' + ' me.inputEl.setStyle("background", "none");' +
 ' me.triggerCell.setStyle("background", "none");' +
 ' me.inputWrap.setStyle("border-right-width", "0");' +
 ' me.inputWrap.setStyle("border-bottom-width", "0");' +
 ' me.triggerCell.setStyle("border-bottom-width", "0px");' +
 ' me.triggerCell.setStyle("border-right-width", "0px");' +
 ' me.triggerCell.setStyle("border-top-width", "0px"); ' +
 ' me.trigger.elements[0].setHtml(""); '
 + '}';
for i := 0 to aform.ComponentCount - 1 do
begin

 if aform.Components[i] is TUniDBLookupComboBox then
 (aform.Components[i] as TUniDBLookupComboBox).ClientEvents.ExtEvents.Add
 (after_render_Event);
 if aform.Components[i] is TUniComboBox then
 (aform.Components[i] as TUniComboBox).ClientEvents.ExtEvents.Add
 (after_render_Event);

end;

end;

error

image.png.1aa32406dcc404b8c31667c873cecb6d.png

how to fix , need to runtime change combobox arrow down icon

unigui ver 1506

donlego · January 19, 2022

up

Sherzod · January 19, 2022

4 minutes ago, donlego said:

up

You can use these codes "globally for all comboboxes":

On 6/5/2020 at 12:58 PM, Sherzod said:

One possible solution I think.

UniComboBox.ClientEvents.ExtEvents ->

function afterrender(sender, eOpts) 
{
    var me=sender;
    me.inputEl.setStyle('background', 'none');
    me.triggerCell.setStyle('background', 'none');
    me.inputWrap.setStyle('border-right-width', '0');
    me.triggerCell.setStyle('border-right-width', '1px');
    me.triggerCell.setStyle('border-top-width', '1px');
    me.triggerEl.elements[0].setHtml('<i class="fa fa-angle-down" style="font-size:1.8em; padding-right:5px"></i>');
}

donlego · January 19, 2022

On 9/16/2020 at 2:39 PM, donlego said:

how to add uniclient event on runtime ?

i use this always error on the line

' me.trigger.elements[0].setHtml(""); '+

i want to use on runtime , but error

Sherzod · January 19, 2022

Just now, donlego said:

i want to use on runtime , but error

Here you should add code for all comboboxes:

procedure TUniMainModule.UniGUIMainModuleNewComponent(AComponent: TComponent);
begin

end;

donlego · January 19, 2022

the error still

image.png.903c1f6b66bb4efa2f112adb827d30b9.png

source

procedure TUniMainModule.UniGUIMainModuleNewComponent(AComponent: TComponent);
var
after_render_Event: string;

begin

after_render_Event := 'afterrender=function afterrender(sender, eOpts) { ' +
'var me=sender; ' + ' me.inputEl.setStyle("background", "none");' +
' me.triggerCell.setStyle("background", "none");' +
' me.inputWrap.setStyle("border-right-width", "0");' +
' me.inputWrap.setStyle("border-bottom-width", "0");' +
' me.triggerCell.setStyle("border-bottom-width", "0px");' +
' me.triggerCell.setStyle("border-right-width", "0px");' +
' me.triggerCell.setStyle("border-top-width", "0px"); ' +
' me.trigger.elements[0].setHtml(""); '
+ '}';
if AComponent is TUniDBLookupComboBox then
(AComponent as TUniDBLookupComboBox).ClientEvents.ExtEvents.Add
(after_render_Event);
end;

Sherzod · January 19, 2022

I will give you a solution.

Sherzod · January 19, 2022

1. UniMainModule ->

uses ..., UniComboBox;

2. UniMainModule ->

procedure TUniMainModule.UniGUIMainModuleNewComponent(AComponent: TComponent);
begin
  if (AComponent is TUniComboBox) then
    (AComponent as TUniComboBox).JSInterface.JSAddListener('afterrender', 'function(me){comboRender(me)}');

end;

3. MainForm.Script:

function comboRender(sender) 
{
    var me=sender;
    me.inputEl.setStyle('background', 'none');
    me.triggerCell.setStyle('background', 'none');
    me.inputWrap.setStyle('border-right-width', '0');
    me.triggerCell.setStyle('border-right-width', '1px');
    me.triggerCell.setStyle('border-top-width', '1px');
    me.triggerEl.elements[0].setHtml('<i class="fa fa-angle-down" style="font-size:1.8em; padding-right:5px"></i>');
};

Result:

image.png.51075d1e9c775c48eeae428b323c9646.png

donlego · January 19, 2022

2 hours ago, Sherzod said:

1. UniMainModule ->

uses ..., UniComboBox;

2. UniMainModule ->

procedure TUniMainModule.UniGUIMainModuleNewComponent(AComponent: TComponent);
begin
  if (AComponent is TUniComboBox) then
    (AComponent as TUniComboBox).JSInterface.JSAddListener('afterrender', 'function(me){comboRender(me)}');

end;

3. MainForm.Script:

function comboRender(sender) 
{
    var me=sender;
    me.inputEl.setStyle('background', 'none');
    me.triggerCell.setStyle('background', 'none');
    me.inputWrap.setStyle('border-right-width', '0');
    me.triggerCell.setStyle('border-right-width', '1px');
    me.triggerCell.setStyle('border-top-width', '1px');
    me.triggerEl.elements[0].setHtml('<i class="fa fa-angle-down" style="font-size:1.8em; padding-right:5px"></i>');
};

Result:

thanks it's work

one more quoestion

how to set the triger background color, i try using this , but nohing changes

me.inputEl.setStyle('bg-color', '#808080');
me.inputEl.setStyle('background-color', '#808080');

Sherzod · January 19, 2022

Just now, donlego said:

how to set the triger background color

Sorry, what exactly do you mean?

donlego · January 19, 2022

image.png.185cecdbee9cfa69f06f260b7d4e8a72.png

donlego · January 19, 2022

o, one more if i use it on unidatetimepicker it not work

if (AComponent is TUniDateTimePicker) then
(AComponent as TUniDateTimePicker).JSInterface.JSAddListener('afterrender', 'function(me){comboRender(me)}');

Sherzod · January 19, 2022

9 minutes ago, donlego said:

unidatetimepicker...

It can be done.

change unicombobox/datepicker icon

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation