How to add a search icon in TUniEdit?

[GerhardV]

How do you add the search icon (.x-form-search-trigger) to the right of a TUniEdit field?

 

Like this:

 

 

[Sherzod]

Hi,

 

Is the icon clickable?

[RobYost]

I did it by just dropping an image on it.  There might be a more elegant way to do it.

[NelsonFS]

Did you tried UniButtonEdit component?

 

http://forums.unigui.com/index.php?/topic/3532-unibuttonedit/?hl=unibuttonedit

[GerhardV]

No I wasn't aware of it. Was looking for something like that in the component palette but obviously couldn't find anything.

 

Thank you sir!

[NelsonFS]

You can use in unigui version 1+, TUniComboBox to replace TEdit and add icons in right side.

Add TUniComboBox, leave empty property Items.

Add new buttons on property triggers.

Write event OnTriggerEvent to capture return value.

With this tip, I replaced TUniButtonEdit/TUniButtonEditDB to TUniComboBox/TUniDBComboBox in my projects and works fine.

See unigui demo "triggers".

[GerhardV]

Thank you Nelson.

[Sherzod]

Hi,

 

Another simple solution with ExtJS6 using triggers config:

 

UniEdit -> ...

function beforeInit(sender, config)
{
    config.triggers = {
        search: {
            cls: 'x-form-search-trigger',
            handler: function() {
                alert('search trigger clicked');
            }
        }
    }
}

Best regards,

[GerhardV]

I like that Delphi Developer!

[M477H13U]

Hi,

 

Another simple solution with ExtJS6 using triggers config:

 

UniEdit -> ...

function beforeInit(sender, config)
{
    config.triggers = {
        search: {
            cls: 'x-form-search-trigger',
            handler: function() {
                alert('search trigger clicked');
            }
        }
    }
}

Best regards,

 

Hello everyones !! 

 

First of all, thanks for that post, I was searching for this !!!

 

But I have a few questions:

1. Is it possible to generate the trigger after the rendering of the TuniEdit, programmatically ?
2. Is it possible to hide by default the trigger when creating it ?
3. Where could I find the list of others class like 'x-form-search-trigger' ?
4. We would like to use other icons, and notably font awesome.. but when I try to use for instance class 'fa-camera-retro', or any other one, the rendering is as attached image.. the button seemed truncate.. How could I fixe that ?

 

 

[Sherzod]

Hi,

 

Are you using the triggers config, and which build are you using?

 

Can you make a simple testcase?

[M477H13U]

Hello mister Delphi dev' ! (:

 

Yes, we are using triggers config in order to implement the trigger and as mentionned in my signature, we are currently using 1.0.2.1426 build (BUT looking forward for new build release)! ^^

Yes I can make a simple testCase that you will find attached here !! 

ProjectTestTriggers.7z

[M477H13U]

Hello InGUI Users !

 

Any news on that matter would be very appreciate ! (:

 

Best of regards,

[M477H13U]

Hello Delphi developers !

 

I just switch on build 1454.. rendering is a bit different but button is still not rendered correctly

 

I still need some help on that matter  \o/ 

[Sherzod]

Hello

 

You are right,

Give us time to figure it out.

[Sherzod]

Hello,

 

Sorry for the delay

 

Can you try with this custom CSS?:

 

CustomCSS:

.x-form-trigger.fa {
  display:table-cell;
  background-image:none !important;
  padding-top:5px;
  border-width: 0;
}

Best regards,

[M477H13U]

Hello Delphi developer ! (:

 

Thank for your return !

 

Here is the difference of rendering :

 

Before adding custom css:

 

After adding custom css:

 

Aimed rendering:

 

How may I aim the third rendering ?

Is it possible to change cls of trigger by code ?

 

Best regards,

 

 

[Sherzod]

Hello,

 

Just my opinion.

Can you work with the theme of Neptune for example, where more beautifully displayed...?

[M477H13U]

Hello UniGUI Dev' ! (:

 

Well, it is true that the rendering with neptune theme is working as expected..

but in our project, our clients will have the chance of selecting the theme, so we need them to be all perfect ! (:

Then what should I do to get a good rendering ? (:

[mhmda]

The easy way is to put button next to the edit with glyphe and make the border radius 0 in left side, and that will work in any theme

[M477H13U]

The easy way is to put button next to the edit with glyphe and make the border radius 0 in left side, and that will work in any theme

Thanks for the reply ! 

I'm not sure how to do that .. could you give me an exemple; por favor ? 

[M477H13U]

No answer ?

The aim behind that demand is to use fontawesome .. 

[Sherzod]

Hi,

 

Wait a minute please

[Sherzod]

[Sherzod]

The easy way is to put button next to the edit with glyphe and make the border radius 0 in left side, and that will work in any theme

 

Used:

 

UniEdit1

UniButton1

UniNativeImageList1

CustomCSS

 

1. CustomCSS:

.customTrgCls {
    border-radius: 0;
    border-left: 0;
}

2. UniButton1:

Caption = '';
iConAlign = iaCenter
Images->UniNativeImageList1
ImageIndex = 0
LayoutConfig->Cls = customTrgCls 

3. UniNativeImageList1

Add camera-retro IconCls