Smart UI Components & Libraries – Grid, Scheduler, Gantt, Kanban for Angular, React, Next.js, Vue, Blazor, JavaScript › Forums › General Discussions › Form with button without action
Tagged: form button
- This topic has 1 reply, 2 voices, and was last updated 3 years, 3 months ago by
svetoslav_borislavov.
-
AuthorPosts
-
September 5, 2022 at 9:52 am #103648
Biltax
ParticipantHi 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>September 7, 2022 at 7:32 am #103651svetoslav_borislavov
ParticipantHi,
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 BorislavovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.