Is it possible to have multiple submit buttons, each of them calling another function in Kendo?
For example I have a form like this:
<Form
onSubmit={handleSubmit}
render={(formRenderProps) => (
<FormElement
style={{
maxWidth: 650,
}}
>
<fieldset className={"k-form-fieldset"} style={{marginTop:'2vh'}}>
<legend className={"k-form-legend"}>
Atributes:
</legend>
<div className="mb-3">
{tempAtr.map((data) =>
<Field
name={data.naziv}
component={ data.id === 1 ?Input:
data.id === 2 ?Input:
data.id === 3 ?DatePicker:
data.id === 4 ?Input:
data.id === 5 ?Input:
data.id === 6 ?DropDownList:
data.id === 7 ?DropDownList:
data.id === 8 ?MultiSelect:
data.id === 9 ?MultiSelect:
Input}
label={data.name}
/>)}
</div>
</fieldset>
<div className="k-form-buttons">
<Button
type={"submit"}
className='appBar-containers'
disabled={!formRenderProps.allowSubmit}
>
Save
</Button>
<Button
type={"submit"}
className='appBar-containers'
disabled={!formRenderProps.allowSubmit}
>
Start
</Button>
</div>
</FormElement>
)}
/>
So when I click Save, it goes to SaveFunction, and when I click Start, it goes to StartFunction. Any help would be very appreciated.
If anybody is looking for an answer, I did it this way. Added an id to each of the buttons:
<Button id='SaveButton'>Save</Button>
<Button id='StartButton'>Start</Button>
and in the onSubmit function added this:
const handleSubmit = (dataItem,event) =>
{
if(event.nativeEvent.submitter.id=='StartButton')
{
startSession(dataItem);
}
else
{
saveChanges(dataItem);
}
};