Home Reference Source

src/components/editgrid/fixtures/comp8.js

export default {
  label: 'HTML5',
  tableView: false,
  rowDrafts: false,
  key: 'editGrid1',
  type: 'editgrid',
  input: true,
  components: [
    {
      label: 'Make',
      widget: 'choicesjs',
      placeholder: 'Select your make',
      tableView: true,
      data: {
        values: [
          {
            label: 'Chevy',
            value: 'chevy'
          },
          {
            value: 'honda',
            label: 'Honda'
          },
          {
            label: 'Ford',
            value: 'ford'
          },
          {
            label: 'Toyota',
            value: 'toyota'
          }
        ]
      },
      selectThreshold: 0.3,
      validate: {
        required: true
      },
      key: 'make',
      type: 'select',
      indexeddb: {
        filter: {}
      },
      input: true
    },
    {
      label: 'Model',
      widget: 'choicesjs',
      placeholder: 'Select your model',
      tableView: true,
      dataSrc: 'url',
      data: {
        values: [
          {
            label: '',
            value: ''
          }
        ],
        url: 'https://vpic.nhtsa.dot.gov/api/vehicles/getmodelsformake/{{ row.make }}?format=json',
        headers: [
          {
            key: '',
            value: ''
          }
        ]
      },
      valueProperty: 'Model_Name',
      template: '<span>{{ item.Model_Name }}</span>',
      refreshOn: 'data',
      clearOnRefresh: true,
      selectThreshold: 0.3,
      clearOnHide: false,
      validate: {
        required: true
      },
      key: 'model',
      type: 'select',
      indexeddb: {
        filter: {}
      },
      selectValues: 'Results',
      input: true,
      disableLimit: false,
      lazyLoad: false
    }
  ],
  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: 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: true,
  disableAddingRemovingRows: false,
  removeRow: 'Cancel',
  defaultOpen: false,
  openWhenEmpty: false,
  modal: false,
  inlineEdit: false,
  templates: {
    header: "<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n          <div class=\"col-sm-2\">{{ component.label }}</div>\n        {% } %}\n      {% }) %}\n    </div>",
    row: "<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n          <div class=\"col-sm-2\">\n            {{ getView(component, row[component.key]) }}\n          </div>\n        {% } %}\n      {% }) %}\n      {% if (!instance.disabled) { %}\n        <div class=\"col-sm-2\">\n          <div class=\"btn-group pull-right\">\n            <button class=\"btn btn-default btn-light btn-sm editRow\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class=\"btn btn-danger btn-sm removeRow\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n            {% } %}\n          </div>\n        </div>\n      {% } %}\n    </div>",
    footer: ''
  },
  id: 'e7p0y9a'
};