Jump to content

change unicombobox/datepicker icon


donlego

Recommended Posts

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

Link to comment
Share on other sites

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

comboTrigger.png.bba2f9a47a06002cc1f513d259bf8514.png

it,s work, but @Sherzod

can it just use css / or copy file  ?

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

Link to comment
Share on other sites

  • 3 months later...

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("<i class=''fa fa-angle-down'' style=''font-size:1.8em; padding-right:5px''></i>"); '+
'}';
 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("<i class=''fa fa-angle-down'' style=''font-size:1.8em; padding-right:5px''></i>"); '+

Link to comment
Share on other sites

  • 3 weeks later...
  • 10 months later...
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("<i class= "fa fa-angle-down" style=''font-size:1.8em; padding-right:5px''></i>"); '
   + '}';
  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

Link to comment
Share on other sites

  • 5 months later...
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>');
}

comboTrigger.png.bba2f9a47a06002cc1f513d259bf8514.png

 

Link to comment
Share on other sites

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 class=''fa fa-angle-down'' style=''font-size:1.8em; padding-right:5px''></i>"); '+

i want to use on runtime , but error 

Link to comment
Share on other sites

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("<i class= "fa fa-angle-down" style=''font-size:1.8em; padding-right:5px''></i>"); '
   + '}';
   if AComponent is TUniDBLookupComboBox then
      (AComponent as TUniDBLookupComboBox).ClientEvents.ExtEvents.Add
        (after_render_Event);
end;

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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:

image.png.51075d1e9c775c48eeae428b323c9646.png

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...