Create a Simple Item
By default, the Form generates a simple item for each field of the formData object. In case you need to create items for specific fields only, add the names of these fields to the items array.
- $(function() {
- $("#formContainer").dxForm({
- formData: {
- firstName: "John",
- lastName: "Heart",
- position: "CEO",
- officeNo: 901
- },
- items: ["firstName", "lastName", "position"]
- });
- });
A simple form item is a label-editor pair. The label is the field name that undergoes a slight conversion, for example, the field name "firstName" becomes the "First Name" label. For more information on configuring labels, visit the Configure Item Labels section.
The editor that will be used in a particular simple item depends on the type of data that its field contains. However, you can force an item to use an editor of your choice. For this purpose, specify the item's editorType property. To configure the editor, use the editorOptions object. Note that you also need to specify the dataField property to bind the item to a formData field.
- $(function() {
- $("#formContainer").dxForm({
- formData: {
- name: "John Heart",
- hireDate: new Date(2012, 4, 13),
- notes: "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003."
- },
- items: [ "name", {
- dataField: "hireDate",
- editorType: "dxCalendar",
- editorOptions: {
- value: new Date()
- }
- }, {
- dataField: "notes",
- editorType: "dxTextArea",
- editorOptions: {
- placeholder: "Add notes..."
- }
- }]
- });
- });
Customize a Simple Item
If none of the available editors suit your requirements, you can define a custom one or even place anything you find useful instead. For this purpose, implement a custom template and pass it to the template property.
- $(function() {
- $("#formContainer").dxForm({
- formData: {
- name: "John Heart",
- picture: "https://js.devexpress.com/Content/images/doc/21_1/PhoneJS/person2.png",
- notes: "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003."
- },
- items: ["name", {
- dataField: "notes",
- template: function (data, itemElement) {
- itemElement.append( $("<div id='textAreaContainer'>")
- .dxTextArea({
- value: data.component.option('formData')[data.dataField],
- onValueChanged: function(e) {
- data.component.updateData(data.dataField, e.value);
- }
- });
- )
- }
- }, {
- dataField: "picture",
- template: function (data, itemElement) {
- itemElement.append("<img src='" + data.editorOptions.value + "'>");
- }
- }]
- });
- });
A simple item can be accompanied by a line of text that gives a hint, for example, of the values that this item accepts. To specify this text, use the helpText property. If filling an item is required, assign true to its isRequired property. In this case, a special mark appears near the item. For more information, see the Additional Marks topic.
- $(function() {
- $("#formContainer").dxForm({
- formData: {
- name: "John Heart",
- phone: "+1(360)684-1334"
- },
- items: [{
- dataField: "name",
- isRequired: true
- }, {
- dataField: "phone",
- helpText: "Example: +1(111)111-1111"
- }]
- });
- });
You can modify automatically generated items using the customizeItem function. This function is called for each item before it is rendered. To access the item, use the function's parameter. Its structure mirrors the Simple Item structure, therefore, you can modify any property available for a simple item.
- $(function() {
- $("#formContainer").dxForm({
- formData: {
- firstName: "John",
- lastName: "Heart",
- email: "jheart@dx-email.com",
- phone: "+1(213) 555-9392"
- },
- customizeItem: function (item) {
- if(item.itemType == "simple") {
- item.label = {
- location: "top"
- };
- if(item.dataField === "email" || item.dataField === "phone") {
- item.colSpan = 3;
- }
- if(item.dataField === "phone") {
- item.helpText = "Example: +1 (111) 111-1111";
- }
- }
- }
- });
- });
See Also
Create an Unbound Simple Item
If you do not need a simple item to be bound to a formData field, create an unbound item. It can be useful if you need, for example, to hide or show some additional information. To create such an item, specify its name, but do not set its dataField property. You will be able to access the item by this name if you need to.
In the following example, the order
item contains the DataGrid UI component. This UI component is shown only when the CheckBox in the show-order
item is checked. Both the order
and show-order
items are unbound items.
- $(function () {
- var isOrderShown = false;
- var form = $("#form").dxForm({
- formData: {
- firstName: "John",
- lastName: "Smith"
- },
- items: [
- "firstName", "lastName", {
- name: "show-order",
- label: {
- text: "Show the order"
- },
- template: function (data, $itemElement) {
- $("<div>").appendTo($itemElement).dxCheckBox({
- value: isOrderShown,
- onValueChanged: function(e) {
- isOrderShown = e.value;
- form.itemOption("order", "visible", isOrderShown);
- }
- });
- }
- }, {
- name: "order",
- visible: isOrderShown,
- template: function (data, $itemElement) {
- $("<div id='dataGrid'>")
- .appendTo($itemElement)
- .dxDataGrid({
- dataSource: [{
- productName: "DesktopLCD 19",
- cost: 68,
- salePrice: 110
- }, {
- productName: "DesktopLCD 21",
- cost: 75,
- salePrice: 120
- }]
- });
- }
- }
- ]
- }).dxForm("instance");
- });