Jump to content

How to add a search icon in TUniEdit?


GerhardV

Recommended Posts

  • 1 year later...

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

  • Upvote 1
Link to comment
Share on other sites

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,

  • Upvote 1
Link to comment
Share on other sites

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 !!! :D

 

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 ?

 

 

post-4875-0-84599100-1524735907.png

Link to comment
Share on other sites

  • 2 weeks later...
  • 3 weeks later...

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,

Link to comment
Share on other sites

Hello Delphi developer ! (:

 

Thank for your return !

 

Here is the difference of rendering :

 

Before adding custom css:

post-4875-0-67843500-1527493933.png

 

After adding custom css:

post-4875-0-99312400-1527493895_thumb.png

 

Aimed rendering:

post-4875-0-62443200-1527493967_thumb.png

 

How may I aim the third rendering ?

Is it possible to change cls of trigger by code ?

 

Best regards,

 

 

Link to comment
Share on other sites

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 ? (:

Link to comment
Share on other sites

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 ?  :unsure:

Link to comment
Share on other sites

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
  • Like 1
  • Upvote 1
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...