DevExtreme jQuery - Item Options
To change a single item option 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 options at a time, pass an object to the itemOption(id, 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"
});
}
});
});With Angular, bind the option to change to a component or element property.
HTML
TypeScript
<dx-form
[(formData)]="employee">
<dxi-item dataField="firstName"></dxi-item>
<dxi-item dataField="lastName"></dxi-item>
<dxi-item itemType="group" caption="Contacts">
<dxi-item dataField="phone" [visible]="showPhone.value"></dxi-item>
<dxi-item dataField="email"></dxi-item>
</dxi-item>
</dx-form>
<dx-check-box #showPhone
text="Show the Phone Number"
[value]="true">
</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
],
// ...
})See Also
Feedback