JavaScript/jQuery Form - Editor Properties

To change the properties of an editor, get its instance using the getEditor(dataField) method. Then, call the option(optionName, optionValue) or option(optionName, options) method of this instance.

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.

If you need to preserve changes during Form re-rendering, change editor properties at the item level:

JavaScript
  • $(function() {
  • const 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) {
  • const options = {};
  • options.disabled = e.value;
  • const prevOptions = form.itemOption("firstName").editorOptions;
  • form.itemOption("firstName", "editorOptions", {...prevOptions, ...options });
  • }
  • });
  • });
See Also