[BUG] Data Grid - Modal Edit not rendering as previewed in builder

[SAkhil95]

Environment

Please provide as many details as you can:

Stackblitz link :: https://stackblitz.com/edit/angular-formio-datagrid-modal-edit

I am trying out data grid, there are too many columns in my case.
So, to make the look & feel better I have selected the Modal Edit option in data grid such that the user will fill the form in Modal and when they click on save, we'll set the values automatically in the table. My goal was to open this modal and let user fill when ever they add new Row.

There are number of issues ::

1. The Add new button is not coming up in the stackblitz but coming up in my local with same JSON - we can ignore this

2. The Modal edit as shown in builder preview is not appearing in the actual rendered form. (Attached builder preview screenshot below)
   

3. But, the actual form is getting rendered as following ::
   

4. Is there any way, I can make the columns multi line automatically for responsiveness ? (I am adding a panel and columns inside datagrid as a workaround for now)
   

• Hosting type
  • Form.io
  • Local deployment
• Formio.js version: 4.12.1
• angular-formio version : 4.11.1
• Frontend- Angular version: 10.2 (tried in Angular 8.3, getting same issue)
• Browser: Chrome
• Browser version: Chrome 86.0

Steps to Reproduce

1. Open https://stackblitz.com/edit/angular-formio-datagrid-modal-edit
2. Feed the JSON to the builder.
3. Compare the builder preview with the actual rendered form

Expected behavior

1. I am just trying to understand if its possible to fill the form fields in a modal and when user clicks on save, the details should be updated in the grid.

Observed behavior

1. At least, the builder preview and rendered form should match

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

For code or form JSON, please enclose in a code block:

const formJson = {
      display: "wizard",
      page: 0,
      numPages: 2,
      components: [
        {
          title: "Page 1",
          label: "Page 1",
          type: "panel",
          key: "page1",
          components: [
            {
              label: "Data Grid",
              labelPosition: "top",
              description: "",
              tooltip: "",
              disableAddingRemovingRows: false,
              conditionalAddButton: "",
              reorder: false,
              addAnother: "",
              addAnotherPosition: "bottom",
              defaultOpen: false,
              layoutFixed: false,
              enableRowGroups: false,
              initEmpty: false,
              customClass: "",
              tabindex: "",
              hidden: false,
              hideLabel: false,
              autofocus: false,
              disabled: false,
              tableView: false,
              modalEdit: true,
              defaultValue: [
                {
                  textField: "",
                  textField1: "",
                  textField2: "",
                  textField3: "",
                  textField4: "",
                  textField5: "",
                  textField6: "",
                  textField7: "",
                  textField8: "",
                  textField9: "",
                  textField10: "",
                  textField11: "",
                  textField12: ""
                }
              ],
              persistent: true,
              protected: false,
              dbIndex: false,
              encrypted: false,
              redrawOn: "",
              clearOnHide: true,
              customDefaultValue: "",
              calculateValue: "",
              calculateServer: false,
              allowCalculateOverride: false,
              validateOn: "change",
              validate: {
                required: false,
                minLength: "",
                maxLength: "",
                customMessage: "",
                custom: "",
                customPrivate: false,
                json: "",
                strictDateValidation: false,
                multiple: false,
                unique: false
              },
              unique: false,
              errorLabel: "",
              key: "dataGrid",
              tags: [],
              properties: {},
              conditional: { show: null, when: null, eq: "", json: "" },
              customConditional: "",
              logic: [],
              attributes: {},
              overlay: {
                style: "",
                page: "",
                left: "",
                top: "",
                width: "",
                height: ""
              },
              type: "datagrid",
              input: true,
              components: [
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "e18u6p0000"
                },
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField1",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "ertl25d0000"
                },
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField2",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "enkj3hj0000"
                },
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField3",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "e8mo7xl0000"
                },
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField4",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "eb8dg7ea0000"
                },
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField5",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "ezjw4zd0000"
                },
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField6",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "ebn8ep10000"
                },
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField7",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "esb4r0mp0000"
                },
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField8",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "eu0uzk0000"
                },
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField9",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "ei5m1yb0000"
                },
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField10",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "ex462i0000"
                },
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField11",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "e1xgvh50000"
                },
                {
                  label: "Text Field",
                  tableView: true,
                  key: "textField12",
                  type: "textfield",
                  input: true,
                  placeholder: "",
                  prefix: "",
                  customClass: "",
                  suffix: "",
                  multiple: false,
                  defaultValue: null,
                  protected: false,
                  unique: false,
                  persistent: true,
                  hidden: false,
                  clearOnHide: true,
                  refreshOn: "",
                  redrawOn: "",
                  modalEdit: false,
                  labelPosition: "top",
                  description: "",
                  errorLabel: "",
                  tooltip: "",
                  hideLabel: false,
                  tabindex: "",
                  disabled: false,
                  autofocus: false,
                  dbIndex: false,
                  customDefaultValue: "",
                  calculateValue: "",
                  calculateServer: false,
                  widget: { type: "input" },
                  attributes: {},
                  validateOn: "change",
                  validate: {
                    required: false,
                    custom: "",
                    customPrivate: false,
                    strictDateValidation: false,
                    multiple: false,
                    unique: false,
                    minLength: "",
                    maxLength: "",
                    pattern: ""
                  },
                  conditional: { show: null, when: null, eq: "" },
                  overlay: {
                    style: "",
                    left: "",
                    top: "",
                    width: "",
                    height: ""
                  },
                  allowCalculateOverride: false,
                  encrypted: false,
                  showCharCount: false,
                  showWordCount: false,
                  properties: {},
                  allowMultipleMasks: false,
                  mask: false,
                  inputType: "text",
                  inputFormat: "plain",
                  inputMask: "",
                  spellcheck: true,
                  id: "e2jiu9p0000"
                }
              ],
              placeholder: "",
              prefix: "",
              suffix: "",
              multiple: false,
              refreshOn: "",
              widget: null,
              showCharCount: false,
              showWordCount: false,
              allowMultipleMasks: false,
              tree: true,
              id: "eohomd8"
            }
          ],
          input: false,
          placeholder: "",
          prefix: "",
          customClass: "",
          suffix: "",
          multiple: false,
          defaultValue: null,
          protected: false,
          unique: false,
          persistent: false,
          hidden: false,
          clearOnHide: false,
          refreshOn: "",
          redrawOn: "",
          tableView: false,
          modalEdit: false,
          labelPosition: "top",
          description: "",
          errorLabel: "",
          tooltip: "",
          hideLabel: false,
          tabindex: "",
          disabled: false,
          autofocus: false,
          dbIndex: false,
          customDefaultValue: "",
          calculateValue: "",
          calculateServer: false,
          widget: null,
          attributes: {},
          validateOn: "change",
          validate: {
            required: false,
            custom: "",
            customPrivate: false,
            strictDateValidation: false,
            multiple: false,
            unique: false
          },
          conditional: { show: null, when: null, eq: "" },
          overlay: { style: "", left: "", top: "", width: "", height: "" },
          allowCalculateOverride: false,
          encrypted: false,
          showCharCount: false,
          showWordCount: false,
          properties: {},
          allowMultipleMasks: false,
          tree: false,
          theme: "default",
          breadcrumb: "default",
          id: "eake1do"
        }
      ]
    }

[wag110894]

Hello @SAkhil95, Thanks for sending this over.

1. The Add new button is not coming up in the stackblitz but coming up in my local with same JSON
   The add another button is showing on the form that we created

2. The Modal edit as shown in builder preview is not appearing in the actual rendered form.
   This is working on our form as well

3. But, the actual form is getting rendered as following ::
   We are not seeing it show up as you mentioned above. We see it as the same as on the preview

4. Is there any way, I can make the columns multi line automatically for responsiveness ? (I am adding a panel and columns inside datagrid as a workaround for now)
   This is probably the best way to accomplish this..

You can see the form that I created and tested using http://formio.github.io/formio.js/app/sandbox
You will add 5fc94d95baf5b8632c029ee6 to the Load Sandbox.

I hope that this example helps.

Thank you.

[SAkhil95]

Hi @wag110894 ,
Thanks for the prompt response.

Can you please verify, what I am missing here ? because the modal is not coming up in my local though I followed the demo application.

• package.json

"dependencies": {
    "@angular/animations": "~10.2.0",
    "@angular/common": "~10.2.0",
    "@angular/compiler": "~10.2.0",
    "@angular/core": "~10.2.0",
    "@angular/elements": "^10.2.3",
    "@angular/forms": "~10.2.0",
    "@angular/platform-browser": "~10.2.0",
    "@angular/platform-browser-dynamic": "~10.2.0",
    "@angular/router": "~10.2.0",
    "angular-formio": "^4.11.1",
    "bootstrap": "^4.5.3",
    "font-awesome": "^4.7.0",
    "formiojs": "^4.12.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  }

• Angular.json builder options

 "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/form-io-builder-poc",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }

Thanks.

[travist]

If you need this to be responsive, then you should not be using DataGrid. We actually would recommend using EditGrid instead. Is there a reason you need to use datagrid?

[SAkhil95]

Thanks for the suggestion @travist . I actually didn't find any documentation which states the difference b/w Data grid and Edit grid. There's already a question (formio/formio#1145) opened by someone which is still unanswered.

However, I will definitely try out Edit Grid. Thanks 👍

[Sidiro23]

We're currently addressing a backlog of GitHub issues, and as part of this effort, some inactive issues may be marked as closed. This isn't a dismissal, but a step toward more efficient tracking.

If you feel the issue is still relevant, please re-open and we'll ensure it gets the attention it deserves. Your understanding is appreciated as we work to enhance our open-source responsiveness.