How to approach creating a SlickGrid with AJAX, calculated fields, sortable columns, paste etc?

Question

The project I'm working on intends to use a SlickGrid to display filterable and sortable data - up to a maximum of approximately 2 million rows. Other requirements are:

1. Some columns have editable data but others have reference data that shouldn't be edited.
2. Bulk copy and paste should be supported in editable fields.
3. Some field values are calculated by applying formulae to other values in the same row.

Since there could be a large number of rows, data should be loaded using AJAX. Have seen from other questions that some have advised modifying code from the examples (...if so, what is the best fit starting point?). Others have suggested using plugins (e.g. http://labs.nereo.com/slick.html provides copy and paste functionality or a fork such as Andrew Child's (maybe more risk as not officially supported?) There's a lot more to say but my question is really where best to start with all this - has anyone else had similar requirements and learnt by experience?

Grateful for any pointers, however small...

Answer 1

My thoughts on your bullet points:

Editable/Non-editable Columns

This will be as simple as defining an editor in a column definition or not.

var columns = [
    { id: 'Editable', field: 'EditableData', editor: Slick.Editors.Text },
    { id: 'NonEditable', field: 'NonEditableData' }
];

Editors are fairly easy to create and the ability to create compound editors provides great flexibility.

If you need to apply more business logic to make a single cell in the column non-editable or editable, you have two options:

• Subscribe to the grid.onBeforeCellEdit event to cancel a cell from switching to edit mode under a certain condition.

• Extend Slick.Data.DataView.getItemMetadata to provide custom metadata for an item, inside which you can disable an editor for a cell. A simplistic example:

  function getItemMetadata(i) {
      var item = rows[i];
  
      return {
          columns: {
              // disable the editor
              'InitiallyEditableColumn': { editor: null }
          }
      };
  }
  

Bulk copy-paste

There is an example of how to use the Slick.CellCopyManager to handle copy-paste within the grid itself.

Copy paste from an external spreadsheet is possible via the plugin that you mentioned.

Column Formulas

A Slick.Plugin could be created to calculate a defined formula from two operand columns into a result column. Handling the grid.onCellChange event seems to work best for this. The basic structure would look something like the following:

function ColumnFormula(args) {
    this.operands = args.operandColumns;
    this.result = args.resultColumns;
    this.formula = args.formula;
}

ColumnFormula.prototype.init = function (grid) {
    this.grid = grid;
    this.grid.onCellChange.subscribe(this.handleChange.bind(this));
};

ColumnFormula.prototype.handleChange = function (args) {
    if (/* change happened for an operand column */) {
        var dataItem = this.grid.getData().getItems()[args.row];
        // apply a formula to the operand fields in the dataItem
        dataItem[this.resultColumn] = this.formula(this.operands, dataItem);
        this.grid.updateRow(args.row);
    }
};

ColumnFormula.Sum = function (operands, dataItem) {
    return dataItem[operands[0]] + dataItem[operands[1]];
};

// ...

var myColumnFormula = new ColumnFormula({
    operandColumns: ['OperandOne', 'OperandTwo'],
    resultColumn: 'ResultColumn',
    formula: ColumnFormula.Sum
});

grid.registerPlugin(myColumnFormula);

Answer 2

I know this is more than a year later, but I used the computed formula section of @kavun answer for my project. One thing I found was if you used a dataview the computed column would not update because of var dataItem = this.grid.getData().getItems()[args.row], which gives you the row in the dataview not the grid. I changed that part to the function below and it worked for the dataview

handleChange = function (e, args) {
    var dataItem = args.item;        
     // apply a formula to the operand fields in the dataItem
     dataItem[this.result] = this.formula(this.operands, dataItem);
     this.grid.invalidateRow(dataItem);
};