jQuery Form - Editor Properties
jQuery
To change the properties of an editor, get its instance first using the getEditor(dataField) method. After that, call the option(optionName, optionValue) or option(optionName, options) method of this instance. This approach is more typical of jQuery.
JavaScript
$(function() {
var form = $("#formContainer").dxForm({
formData: {
firstName: "John",
lastName: "Heart",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
}
}).dxForm("instance");
$("#checkBoxContainer").dxCheckBox({
text: 'Disable the First Name Editor',
value: false,
onValueChanged: function (e) {
form.getEditor("firstName")
.option("disabled", e.value);
}
});
});NOTE
The getEditor(dataField) method is available for visible form items only.
Angular
To change the properties of an editor, bind the property that should be changed in the editorOptions object to a component property.
HTML
TypeScript
<dx-form
[(formData)]="employee">
<dxi-item dataField="firstName" [editorOptions]="{ disabled: disableFirstName.value }"></dxi-item>
<dxi-item dataField="lastName"></dxi-item>
<dxi-item dataField="phone"></dxi-item>
<dxi-item dataField="email"></dxi-item>
</dx-form>
<dx-check-box #disableFirstName
text="Disable the First Name Editor"
[value]="false">
</dx-check-box>
import { DxFormModule, DxCheckBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
employee = {
firstName: "John",
lastName: "Heart",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
}
}
@NgModule({
imports: [
// ...
DxFormModule,
DxCheckBoxModule
],
// ...
})Vue
To change the properties of an editor, bind the property that should be changed in the editorOptions object to a component property.
App.vue
<template>
<div>
<DxForm :form-data="employee">
<DxSimpleItem data-field="firstName" :editor-options="editorOptions" />
<DxSimpleItem data-field="lastName" />
<DxSimpleItem data-field="phone" />
<DxSimpleItem data-field="email" />
</DxForm>
<DxCheckBox
text="Disable the First Name Editor"
:value="editorOptions.disabled"
@value-changed="checkBoxValueChanged" />
</div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxForm, DxSimpleItem } from 'devextreme-vue/form';
import { DxCheckBox } from 'devextreme-vue/check-box';
const employee = {
firstName: 'John',
lastName: 'Heart',
phone: '+1(213) 555-9392',
email: 'jheart@dx-email.com'
};
export default {
components: {
DxForm, DxSimpleItem, DxCheckBox
},
data() {
return {
employee,
editorOptions: {
disabled: false
}
};
},
methods: {
checkBoxValueChanged(e) {
this.editorOptions = { disabled: e.value };
}
}
};
</script>React
To change the properties of an editor, bind the property that should be changed in the editorOptions object to a state property.
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Form, SimpleItem } from 'devextreme-react/form';
import { CheckBox } from 'devextreme-react/check-box';
const employee = {
firstName: 'John',
lastName: 'Heart',
phone: '+1(213) 555-9392',
email: 'jheart@dx-email.com'
};
class App extends React.Component {
constructor() {
super();
this.state = {
editorOptions: {
disabled: false
}
};
this.onCheckBoxValueChanged = this.onCheckBoxValueChanged.bind(this);
};
render() {
return (
<div>
<Form formData={employee}>
<SimpleItem dataField="firstName" editorOptions={this.state.editorOptions} />
<SimpleItem dataField="lastName" />
<SimpleItem dataField="phone" />
<SimpleItem dataField="email" />
</Form>
<CheckBox
text="Show the Phone Number"
value={this.state.editorOptions.disabled}
onValueChanged={this.onCheckBoxValueChanged} />
</div>
);
}
onCheckBoxValueChanged(e) {
this.setState({
editorOptions: {
disabled: e.value
}
});
}
}
export default App;See Also
Feedback