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.
- $(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.
- $(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.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.