Item Options

NOTE
In this article, the Button widget is used to change item options. This choice is made for purely demonstrational purposes, and you can do the same operations using another widget following the same guidelines.

To change a single item option at runtime, call the itemOption(field, option, value) method. 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");

    $("#buttonContainer").dxButton({
        text: 'Hide the Phone Number',
        onClick: function () {
            form.itemOption("Contacts.phone", "visible", false);
        }
    });
});

To change several options at a time, pass an object to the itemOption(field, options) method. Being called with the field parameter only, this method returns the current configuration of the specified form item.

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