UI Widgets Form

A form widget used to display and edit values of object fields.

Included in: dx.mobile.js, dx.web.js, dx.viz-web.js, dx.all.js
Module: ui/form
Form interactive configuration
Copy code
$("#form").dxForm({
});

The Form widget creates label-editor pairs for the required fields of the specified object, which allows a user to view and edit values of these fields.

You can create a widget using one of the following approaches.

  • jQuery
    Use the dxForm jQuery plug-in.

    HTML
    <div id="form">
    </div>
    JavaScript
    var companyData = {
        id: "1",
        name: "Super Mart of the West",
        city: "Bentonville",
        state: "Arkansas",
        zip: 72716,
        phone: "(800) 555-2797",
        fax: "(800) 555-2171",
        website: "http://www.nowebsitesupermart.com"
    }
    $("#form").dxForm({
        formData: companyData,
        colCount: 2
    });
  • Knockout
    Add a div element and apply dxForm binding to this element.

    HTML
    <div data-bind="dxForm: {
        formData: companyData,
        colCount: 2
    }"></div>
    JavaScript
    var myViewModel = {
        companyData: {
            id: "1",
            name: "Super Mart of the West",
            city: "Bentonville",
            state: "Arkansas",
            zip: 72716,
            phone: "(800) 555-2797",
            fax: "(800) 555-2171",
            website: "http://www.nowebsitesupermart.com"
        }
    }
    ko.applyBindings(myViewModel);
  • AngularJS
    Add a div element and apply the dx-form directive to this element.

    HTML
    <div ng-controller="demoController">
        <div dx-form="{
            formData: companyData,
            colCount: 2
        }"></div>
    </div>
    JavaScript
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.companyData = {
            id: "1",
            name: "Super Mart of the West",
            city: "Bentonville",
            state: "Arkansas",
            zip: 72716,
            phone: "(800) 555-2797",
            fax: "(800) 555-2171",
            website: "http://www.nowebsitesupermart.com"
        };
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });

Note that DevExtreme widgets require you to link the jQuery library to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information on linking these libraries to your project, refer to the Installation article.

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div dx-form="{
        formData: companyData,
        colCount: 2
    }">
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.companyData = {
        id: "1",
        name: "Super Mart of the West",
        city: "Bentonville",
        state: "Arkansas",
        zip: 72716,
        phone: "(800) 555-2797",
        fax: "(800) 555-2171",
        website: "http://www.nowebsitesupermart.com"
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height:400px;
    max-width:750px;
    margin: 0 auto;
}
<div class="wrapper">
    <div data-bind="dxForm: {
        formData: companyData,
        colCount: 2,

    }">
    </div>
</div>
var myViewModel = {
    companyData: {
        id: "1",
        name: "Super Mart of the West",
        city: "Bentonville",
        state: "Arkansas",
        zip: 72716,
        phone: "(800) 555-2797",
        fax: "(800) 555-2171",
        website: "http://www.nowebsitesupermart.com"
    }
}
ko.applyBindings(myViewModel);
.wrapper{
    height:400px;
    max-width:750px;
    margin: 0 auto;
}
<div class="wrapper">
    <div id="myForm"></div>
</div>
var companyData = {
    id: "1",
    name: "Super Mart of the West",
    city: "Bentonville",
    state: "Arkansas",
    zip: 72716,
    phone: "(800) 555-2797",
    fax: "(800) 555-2171",
    website: "http://www.nowebsitesupermart.com"
}
$("#myForm").dxForm({
    formData: companyData,
    colCount: 2
});
.wrapper{
    height:400px;
    max-width:750px;
    margin: 0 auto;
}

Configuration

An object defining configuration options for the Form widget.

Methods

This section describes members used to manipulate a widget.

Events

This section describes events fired by this widget.

Simple Item

This article describes configuration options of a simple form item.

A simple form item is an editor-label pair usually bound to a formData object field used to display and modify this field.

You can also create a simple item without binding it to a formData field. For example, it can be a check box that allows a user to confirm his agreement to process entered data.

For detailed information on creating simple items, see the Create Simple Items topic.

Group Item

This article describes configuration options of a group form item.

A group form item is a section consisting of a caption and child form items. You can customize the layout options for each group separately.

For detailed information on creating group items, see the Create Group Items topic.

View Demo

Tabbed Item

This article describes configuration options of a tabbed form item.

For detailed information on creating tabbed items, see the Create Tabbed Items topic.

View Demo

Empty Item

This article describes configuration options of an empty form item.

For detailed information on creating empty items, see the Create Empty Items topic.