JavaScript/jQuery Form - Item Properties

To change a single item property at runtime, call the itemOption(id, option, value) method. This approach is more typical of jQuery. If the needed item is in a group or in a tab, the field parameter should be given the group caption or tab title followed by the item's name. An example is shown below.

JavaScript
  • $(function() {
  • var form = $("#formContainer").dxForm({
  • formData: {
  • firstName: "John",
  • lastName: "Heart",
  • phone: "+1(213) 555-9392",
  • email: "jheart@dx-email.com"
  • },
  • items: ["firstName", "lastName", {
  • itemType: "group",
  • caption: "Contacts",
  • items: ["phone", "email"]
  • }]
  • }).dxForm("instance");
  •  
  • $("#checkBoxContainer").dxCheckBox({
  • text: 'Show the Phone Number',
  • value: true,
  • onValueChanged: function (e) {
  • form.itemOption("Contacts.phone", "visible", e.value);
  • }
  • });
  • });

To change several properties at a time, pass an object to the itemOption(id, options) method. When you call it with the id parameter only, this method returns the current configuration of the specified form item.

JavaScript
  • $(function() {
  • // ...
  • $("#buttonContainer").dxButton({
  • text: 'Change the Phone Properties',
  • onClick: function () {
  • form.itemOption("Contacts.phone", {
  • isRequired: true,
  • helpText: "+1(111)111-1111"
  • });
  • }
  • });
  • });

When you modify an item, the Form also refreshes all other items in its group. If an item is not in a group, the whole Form is refreshed. To update only your chosen items, wrap them into a separate group.

NOTE
When you call this method, Form rerenders the layout. As a result, all editors are re-initialized and their settings return to the initial editorOptions configuration.
See Also