Custom Editors in FlexGrid

May 13 2015

Let's assume that you are displaying data for all the orders delivered in a month. It means you have an OrderDate column of Date type and also, an Amount column which contains the order amount. Now, if you display this data in FlexGrid or or for that matter, in any grid then the end user will have to type the date/amount manually since the default editor is a input tag of type 'text'. As a result, you have to check for format and apply required validations on the entered date/amount values. Custom Editors are your saviour in such a scenario. It allows you to use any kind of custom control like NumericUpDown, DatePicker etc. in the cell for editing. Thereby, you don't need to write code for validating the format/values etc. It saves your time, reduces complexity of the code and helps in better understading of the same. We already have a demo that shows how you can use Custom Editors in FlexGrid with the help of Angular directives. Hence, in this blog, I am implementing the same using PureJS. I assume that you already know how to create FlexGrid using PureJS approach. If not, simply add a

tag in your markup and then, you can create an object of FlexGrid for this tag in the javascript. I would recommend that you should go through our FlexGrid 101 sample for a headstart. Now back to our original topic of creating custom editor, for this you need to handle the formatItem event of FlexGrid and perform the following steps :

Check if the cell is a editable cell of the desired column
Hide the default editor
Add the custom editor
Handle the cellEditEnding event and update the cell's value

Here is the code for createEditor function which creates custom editor for the specific columns:



function createEditor(editColumn) {  
var grid = editColumn.grid;  

grid.formatItem.addHandler(function (s, e) {  
var editRange = grid.editRange,  
column = e.panel.columns[e.col];  
// check whether this is an editing cell of the wanted column  
if (!(e.panel.cellType === wijmo.grid.CellType.Cell && column === editColumn && editRange && editRange.row === e.row &&     editRange.col === e.col)) {  
return;  
}  

// hide standard editor (don't remove!)  
if (e.cell.firstChild) {  
e.cell.firstChild.style.display = 'none';  
}  

// add custom editor  
var editorRoot = document.createElement('div');  
var input;  
if (column.dataType === wijmo.DataType.Date) {  
input = new wijmo.input.InputDate(editorRoot);  
} else {  
input = new wijmo.input.InputNumber(editorRoot);  
input.step = 1;  
input.format = editColumn.format;  
}  

e.cell.appendChild(editorRoot);  
input.value = grid.getCellData(e.row, e.col, false);  

// cellEditEnding that updates cell with user's input  
var editEndingEH = function (s, args) {  
grid.cellEditEnding.removeHandler(editEndingEH);  
if (!args.cancel) {  
args.cancel = true;  
grid.setCellData(e.row, e.col, input.value);  
}  
};  

// subscribe the handler to the cellEditEnding event  
grid.cellEditEnding.addHandler(editEndingEH);  
});  
}

and now , we call this function for any column like below :


// create editors for columns  
createEditor(flex.columns.getColumn('downloads'));  
createEditor(flex.columns.getColumn('sales'));  
createEditor(flex.columns.getColumn('date'));

The complete implementation is available in this fiddle. You may also share your ideas/thoughts that you might want me to discuss in my future blogs.

MESCIUS inc.