Jump to content

change unicombobox/datepicker icon

donlego

By donlego
in General

 Share

Recommended Posts

donlego Advanced Member

donlego

Posted
Posted

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

 

 

1Untitled.png

Sherzod Advanced Member

Sherzod

Posted
Posted
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 Advanced Member

donlego

Posted
  • Author
Posted
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

  • 3 months later...
donlego Advanced Member

donlego

Posted
  • Author
Posted

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

  • 3 weeks later...
  • 10 months later...
donlego Advanced Member

donlego

Posted
  • Author
Posted
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

  • 5 months later...
Sherzod Advanced Member

Sherzod

Posted
Posted
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

 

donlego Advanced Member

donlego

Posted
  • Author
Posted
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 

Sherzod Advanced Member

Sherzod

Posted
Posted
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 Advanced Member

donlego

Posted
  • Author
Posted

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;

Sherzod Advanced Member

Sherzod

Posted
Posted

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 Advanced Member

donlego

Posted
  • Author
Posted
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');

donlego Advanced Member

donlego

Posted
  • Author
Posted

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

Join the conversation

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

Guest
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.

×
 Share
Go to topic listing
×
×
  • Create New...