Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #103648
    Biltax
    Participant
    Up
    0
    Down

    Hi all,

    how to trap a button click when used in Form without action defined.

    in this case first one with dataField : ‘searchButton’

     
    <div>
    <div>{</div>
    <div>                    controlType : ‘group’,</div>
    <div>                    columns     : 4,</div>
    <div>                    controls    :</div>
    <div>                    [</div>
    <div>                        {</div>
    <div>                            controlType : ‘button’,</div>
    <div>                            dataField   : ‘searchButton’,</div>
    <div>                            label       : ‘<i class=”bi bi-search”></i> Ok’,</div>
    <div>                            cssClass    : ‘primary’,</div>
    <div>                        },</div>
    <div>                        {</div>
    <div>                            controlType : ‘button’,</div>
    <div>                            action      : ‘reset’,</div>
    <div>                            label       : ‘<i class=”bi bi-eraser”></i> RAZ’,</div>
    <div>                        },</div>
    <div>                        {</div>
    <div>                            controlType : ‘button’,</div>
    <div>                            label       : ‘<i class=”bi bi-pencil”></i> Save’,</div>
    <div>                        },</div>
    <div>                        {</div>
    <div>                            controlType : ‘button’,</div>
    <div>                            label       : ‘<i class=”bi bi-list-task”></i> List’,</div>
    <div>                        }</div>
    <div>                    ]</div>
    </div>

    #103651
    Up
    0
    Down

    Hi,

    You have two options:
    The first one is to have a custom button with a template.
    The second one is to have a regular controlType: ‘button’, but add a unique cssClass and after that get the element and add an eventListener.

    Here is a demo in which the two options are shown:  https://codepen.io/svetoslavb04/pen/PoePJdM

    Hope this helps and if you need further help, do not hesitate to contact us!

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.