ButtonItem
A button form item, as the name implies, consists of a button that does a custom action. You can customize the button's appearance and position on the form.
buttonOptions
See the Button configuration for properties that you can specify in this object.
jQuery
$(function() {
$("#formContainer").dxForm({
// ...
items: [{
itemType: "button",
buttonOptions: {
text: "Do Something",
type: "success",
onClick: function () {
// Implement your logic here
}
}
},
// ...
]
});
});Angular
<dx-form ...>
<dxi-item
itemType="button"
[buttonOptions]="buttonOptions">
</dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
buttonOptions = {
text: "Do Something",
type: "success",
onClick: function () {
// Implement your logic here
}
};
}
@NgModule({
imports: [
// ...
DxFormModule
],
// ...
})Vue
<template>
<DxForm ...>
<DxItem
:button-options="buttonOptions"
item-type="button"
/>
</DxForm>
</template>
<script>
import DxForm, { DxItem } from 'devextreme-vue/form';
export default {
components: {
DxForm,
DxItem
},
data() {
return {
buttonOptions: {
text: "Do Something",
type: "success",
onClick: function () {
// Handle the button click here
}
}
};
}
}
</script>React
import React from 'react';
import Form, { Item } from 'devextreme-react/form';
const buttonOptions = {
text: "Do Something",
type: "success",
onClick: function () {
// Handle the button click here
}
};
const App = () => {
return (
<Form>
<Item itemType="button" buttonOptions={buttonOptions} />
</Form>
);
};
export default App;horizontalAlignment
Use the HorizontalAlignment enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left, Right, and Center.
itemType
name
Use this name to access the form item in the itemOption(id) and getButton(name) methods.
verticalAlignment
Use the VerticalAlignment enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Bottom, Center, and Top.