Developer's Guide
Editing Data
Creating an editForm Template
Version 1
Version 1

Creating an editForm Template

In DataViewsJS, you can use the editRowTemplate property to customize the built-in editors.

Use the following steps to customize the editors using the row template.

editForm Editor

Sample Code

  1. Design the form inside the template element with a unique ID.
<div class="setting-container">
  <label>EditMode:</label>
  <select id="grid-edit-mode">
    <option value="popup">popup</option>
    <option value="editForm" selected>editForm</option>
  </select>
</div>
<div id="grid1" class="grid" style="height:90%;"></div>
<template id="editRowTemplate" style="display: none">
  <div class="edit-row">
    <div class="edit-detail">
      <label class="column1">First Name</label>
      <input class="column2" data-column="firstName" />
    </div>
    <div class="edit-detail">
      <label class="column1">Last Name</label>
      <input class="column2" data-column="lastName" />
    </div>
  </div>
  <div class="edit-row">
    <div class="edit-detail">
      <label class="column1">Score</label>
      <input class="column2" data-column="score" />
    </div>
    <div class="edit-detail">
      <label class="column1">Position</label>
      <select class="column2" data-column="position">
        <option>Sales</option>
        <option>Sales Manager</option>
        <option>Web Developer</option>
        <option>.NET Developer</option>
        <option>Admin Assistant</option>
      </select>
    </div>
  </div>
  <div class="edit-advantage edit-detail">
    <label class="column1">Advantage</label>
    <textarea data-column="advantage"></textarea>
  </div>
</template>
  1. While initializing the code, add the editRowTemplate property to the grid and use the template ID preceded by a '#'.
var dataView = new GC.DataViews.DataView(
  document.getElementById('grid1'),
  data,
  columns,
  new GC.DataViews.GridLayout({
    allowEditing: true,
    editRowTemplate: '#editRowTemplate',
    editMode: 'editForm',
    rowHeight: 40,
  })
);

$('#grid-edit-mode').change(function () {
  dataView.stopEditing();
  var sel = document.getElementById('grid-edit-mode');
  dataView.layoutEngine.options.editMode = sel.options[sel.selectedIndex].value;
});

See also