How to Add Inline Editing to FlexGrid in JavaScript

March 15 2021
0 Comments

Although the FlexGrid control provides efficient, Excel-style editing by default, you may want to customize the grid's editing behavior. If you don't like the Excel-style editing and prefer to add editing buttons to the rows of your FlexGrid, you can accomplish that using the formatItem event and a little bit of code.

In this blog, we will outline how to perform inline editing with the FlexGrid control. We will create buttons that users can use to edit and delete rows inside the FlexGrid and insert input elements in the grid when the user begins editing the data.

Wijmo offers the fastest, most flexible JavaScript DataGrid with features including sorting, grouping, searching, Excel-like filtering, DataMaps, custom CellTemplates, sparklines, rich editing, Excel/PDF export, validation, DetailsRows, and more.

Download Now!

How to Add Inline Editing to FlexGrid in JavaScript

How to Import the Required Modules for FlexGrid

Before we can create our FlexGrid control, we’ll need to import the required Wijmo files into our JavaScript file:

import ‘@grapecity/wijmo.styles/wijmo.css’;  
import * as wjCore from ‘@grapecity/wijmo’;  
import * as wjGrid from ‘@grapecity/wijmo.grid’;

The above code will import Wijmo's main JavaScript module and the FlexGrid module; it also includes Wijmo's CSS file so that our control is styled correctly.

Creating the FlexGrid Control

First, we’ll need to create our FlexGrid control. We’ll be tying two events to our FlexGrid control as well: the formatItem event and the click event.

var theGrid = new wjGrid.FlexGrid(‘#theGrid’, {  
  isReadOnly: true,  
  selectionMode: ‘None’,  
  headersVisibility: ‘Column’,  
  itemsSource: data,  
  columns: [...],  
});

theGrid.formatItem.addHandler(function(s,e){...});

theGrid.addEventListener(theGrid.hostElement, ‘click’, function(e) 
{...});

We'll come back to these events later in the blog. Before that, we'll need to create our buttons that these events will use.

Adding Inline Editing Buttons

Next, we’ll need to create the button templates that our grid will use for inline editing. Both sets of buttons will be set to “display:none”, because these are just templates that we will be using in JavaScript, so we don’t want them to show up on-screen before then:

<!-- template for buttons on items in view mode -->  
<div id="tplBtnViewMode" style="display:none">  
  <button id="btnEdit" class="btn btn-default btn-sm">  
    <span class="glyphicon glyphicon-pencil"></span> Edit  
  </button>  
  <button id="btnDelete" class="btn btn-default btn-sm">  
    <span class="glyphicon glyphicon-remove"></span> Delete  
  </button>  
</div>  

<!-- template for buttons on items in edit mode -->  
<div id="tplBtnEditMode" style="display:none">  
  <button id="btnOK" class="btn btn-primary btn-sm">  
    <span class="glyphicon glyphicon-ok"></span> OK  
  </button>  
  <button id="btnCancel" class="btn btn-warning btn-sm">  
    <span class="glyphicon glyphicon-ban-circle"></span> Cancel  
  </button>  
</div>

Implementing Inline Editing

Now that our FlexGrid has been created and we have our button templates, we can add code to the events that we have tied to the grid to implement inline editing. The formatItem event will handle what is being displayed in the FlexGrid, while the ‘click’ event listener will handle the buttons’ click events:

// custom formatter to paint buttons and editors  
theGrid.formatItem.addHandler(function (s, e) {  
  if (e.panel == s.cells) {  
    var col = s.columns[e.col], item = s.rows[e.row].dataItem;  
    if (item == currentEditItem) {  
      // create editors and buttons for the item being edited  
      switch (col.binding) {  
        case 'buttons':  
          e.cell.innerHTML = document.getElementById('tplBtnEditMode').innerHTML;  
          e.cell['dataItem'] = item;  
          break;  
        case 'country':  
        case 'sales':  
        case 'expenses':  
          e.cell.innerHTML = '<input class="form-control" ' +  
          'id="' + col.binding + '" ' +  
          'value="' + s.getCellData(e.row, e.col, true) + '"/>';  
          break;  
      }  
    }  
    else {  
      // create buttons for items not being edited  
      switch (col.binding) {  
        case 'buttons':  
          e.cell.innerHTML = document.getElementById('tplBtnViewMode').innerHTML;  
          e.cell['dataItem'] = item;  
        break;  
      }  
    }  
  }  
});  

// handle button clicks  
theGrid.addEventListener(theGrid.hostElement, 'click', function (e) {  
  let targetBtn;  
  if (e.target instanceof HTMLButtonElement) {  
    targetBtn = e.target;  
  }  
  else if (e.target instanceof HTMLSpanElement && e.target.classList.contains('glyphicon')) {  
    targetBtn = e.target.parentElement;  
  }  
  if (targetBtn) {  
    // get button's data item  
    var item = wjCore.closest(targetBtn, '.wj-cell')['dataItem'];  
    // handle buttons  
    switch (targetBtn.id) {  
      // start editing this item  
      case 'btnEdit':  
        editItem(item);  
        break;  
      // remove this item from the collection  
      case 'btnDelete':  
        theGrid.collectionView.remove(item);  
        break;  
      // commit edits  
      case 'btnOK':  
        commitEdit();  
        break;  
      // cancel edits  
      case 'btnCancel':  
        cancelEdit();  
        break;  
    }  
  }  
});

You’ll notice a couple of custom functions that we call inside of our click event: editItem(), commitEdit(), and cancelEdit(). These are called based on which button the user clicks, and will update the FlexGrid accordingly based on the user’s selection.

var currentEditItem = null;  
function editItem(item) {  
  cancelEdit();  
  currentEditItem = item;  
  theGrid.invalidate();  
}  
function commitEdit() {  
  if (currentEditItem) {  
    theGrid.columns.forEach(function (col) {  
      var input = theGrid.hostElement.querySelector('#' + col.binding);  
      if (input) {  
        var value = wjCore.changeType(input.value, col.dataType, col.format);  
        if (wjCore.getType(value) == col.dataType) {  
          currentEditItem[col.binding] = value;  
        }  
      }  
    });  
  }  
  currentEditItem = null;  
  theGrid.invalidate();  
}  
function cancelEdit() {  
  if (currentEditItem) {  
    currentEditItem = null;  
    theGrid.invalidate();  
  }  
}

There's one final thing that we need to do. The buttons and input controls that we place inside the FlexGrid control are slightly taller than the cells they will be placed in. This means that we'll need to increase the height of our rows: