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