In DataViewsJS, you can use the action property as a string or an array in a column. You can either use built-in actions such as edit and cancel or specify custom actions. Each action is an object that contains name, presenter, and handler parameters. By default, an action is set in a button.

You can pass the following arguments to the handler function.

• hitInfo
• dataItem
• gridModel

Use the following steps to see how the actions are implemented in a column.

Sample Code

1. Define columns for the grid. By default, an action is set in a button, so you only need to specify the button name in the column definition.
   

var columns = [
  { id: 'firstName', caption: 'First Name', dataField: 'firstName', width: '80' },
  { id: 'lastName', caption: 'Last Name', dataField: 'lastName', width: '80' },
  { id: 'score', caption: 'Score', dataField: 'score', width: '80', dataType: 'number' },
  { id: 'position', caption: 'Position', dataField: 'position', width: '*' },
  {
    id: 'controlPanel',
    action: [
      {
        name: 'edit',
      },
      {
        name: 'details',
        handler: showDetails,
      },
    ],
    width: 270,
  },
];

2. Define a function for the action buttons.

function showDetails(args) {
  var hitInfo = args.hitInfo;
  var dataItem = args.dataItem;
  initDialog(dataItem);
}

function initDialog(dataItem) {
  var overlay = $('<div class="dialog-overlay"></div>');
  var dialogContainer = $('<div class="dialog-container"></div>');
  var dialog = $(
    '<div class="dialog-header"><span style="font-weight:bold">Applicant Details</span><div class="dialog-close-button"><span>&#x2715</span></div></div>' +
      '<div class="dialog-body">' +
      '<div style="font-size:20px;font-weight:bold;">' +
      dataItem.firstName +
      ' ' +
      dataItem.lastName +
      '</div>' +
      '<div style="font-style:italic">' +
      dataItem.position +
      '</div>' +
      '<div style="margin-top:15px;">' +
      dataItem.advantage +
      '</div></div>'
  );
  dialogContainer.append(dialog);
  $(document.body).append(overlay).append(dialogContainer);
  overlay.on('mousewheel', function () {
    return false;
  });
  $('.dialog-close-button').on('click', function () {
    overlay.remove();
    dialogContainer.remove();
  });

  var screenWindow = $(window);
  var left = parseInt((screenWindow.width() - dialogContainer.width()) / 2 + window.pageXOffset);
  var top = parseInt((screenWindow.height() - dialogContainer.height()) / 2 + window.pageYOffset);
  dialogContainer.css({
    left: left,
    top: top,
  });
}

See also

• rowHeight
• colMinWidth
• allowEditing