title: DevExtreme: DataGrid, Popup Editing, Form customization
body: <p>I have a datagrid as follows. </p>
  
  <p><strong>Problem 1:</strong> DataGrid has <code>"Address"</code> field. This field should be <code>TextArea</code>. When I added to <code>[editorType: "dxTextArea"]</code> property, also filter row is changing as <code>TextArea</code>, I dont want that. Address just should be in form as <code>TextArea</code> not in filter rows too. </p>
  
  <p>I did that to solve this problem (for me): Removed the <code>[editorType: "dxTextArea"]</code> and added the <code>[formItem &gt; template]</code> that solved my problem but another problem is here now update is not working now. </p>
  
  <p>Here is my sample: <a href="https://codepen.io/mstfcck/pen/vbVaVx?editors=0010" rel="nofollow noreferrer">https://codepen.io/mstfcck/pen/vbVaVx?editors=0010</a> </p>
  
  <pre><code>        {
              dataField: "Address",
              formItem: {
                  colSpan: 1,
                  template: function (data, itemElement) {
                      itemElement.append("&lt;div id='textAreaContainer'&gt;")
                          .dxTextArea({
                              value: data.component.option('formData')[data.dataField],
                              onValueChanged: function (e) {
                                  data.component.updateData(data.dataField, e.value);
                              }
                          });
                  },
                  editorOptions: {
                  }
              }              
          }
  </code></pre>
  
  <p>data.component.option('formData')[data.dataField] is not working. I cant get the current data of Address field. I could not find a solution for that. </p>
  
  <p><strong>Problem 2:</strong> colSpan is not working. My client wants to see that form just one column. As you can see in this form has 2 column. </p>
  
  <p>My references are:</p>
  
  <ul>
  <li><p>Popup Editing:
  <a href="https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/PopupEditing/jQuery/Light/" rel="nofollow noreferrer">https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/PopupEditing/jQuery/Light/</a></p></li>
  <li><p>formItem:
  <a href="https://js.devexpress.com/Documentation/17_2/ApiReference/UI_Widgets/dxDataGrid/Configuration/columns/#formItem" rel="nofollow noreferrer">https://js.devexpress.com/Documentation/17_2/ApiReference/UI_Widgets/dxDataGrid/Configuration/columns/#formItem</a></p></li>
  <li><p>colSpan:
  <a href="https://js.devexpress.com/Documentation/17_2/ApiReference/UI_Widgets/dxForm/Item_Types/SimpleItem/#colSpan" rel="nofollow noreferrer">https://js.devexpress.com/Documentation/17_2/ApiReference/UI_Widgets/dxForm/Item_Types/SimpleItem/#colSpan</a></p></li>
  <li><p>template:
  <a href="https://js.devexpress.com/Documentation/17_2/ApiReference/UI_Widgets/dxForm/Item_Types/SimpleItem/#template" rel="nofollow noreferrer">https://js.devexpress.com/Documentation/17_2/ApiReference/UI_Widgets/dxForm/Item_Types/SimpleItem/#template</a></p></li>
  <li><p>template sample:
  <a href="https://js.devexpress.com/Documentation/17_2/Guide/Widgets/Form/Configure_Simple_Items/#Customize_a_Simple_Item" rel="nofollow noreferrer">https://js.devexpress.com/Documentation/17_2/Guide/Widgets/Form/Configure_Simple_Items/#Customize_a_Simple_Item</a></p></li>
  <li><p>Form Customized Item:
  <a href="https://js.devexpress.com/Demos/WidgetsGallery/Demo/Form/CustomizeItem/jQuery/Light/" rel="nofollow noreferrer">https://js.devexpress.com/Demos/WidgetsGallery/Demo/Form/CustomizeItem/jQuery/Light/</a></p></li>
  </ul>