Client grid-based display of results¶
Strain metadata, scheme data, job lists etc are displayed in the client browser using Javascript classes based on EdittableGrid. The base class, EditableGrid is found in editablegrid-2.0.1.js in the enterobase-web/entero/static/js/table directory, alongside a whole set of classes that tailor the class to the specific needs of the data to be displayed. The identity of the class to be used for displaying the experimental data associated with a specific scheme is specified by the js_grid paameter of the param column in the Scheme table scheme-parameters-scheme-table.
Creating a Subclass¶
the sub class is created in the following code
SuperGrid.prototype = Object.create(BaseGrid.prototype);
SuperGrid.prototype.constructor= SuperGrid;
function SuperGrid(name,config,species,scheme,scheme_name){
BaseGrid.call(this,arg1,arg2);
//Do any extra initialization here
this.extra_param=10
};
SuperGrid.prototype.method1=function(value){
this.extra_param=value
}
Adding Options To the Context Menu
Extra options can be added to the right click context menu with the following code.The menu is constructed each time it is called thus you can have conditional inclusion of menu items as well as disabling them
SuperGrid.prototype.addToContextMenu = function (rowIndex,colIndex,target){
var self = this;
var extramenu= BaseGrid.prototype.addToContextMenu.call(this,rowIndex,colIndex,target);
extramenu.push ({
name: 'Modify Cell',
title: 'Modify Cell',
fun: function () {
//do stuff based on rowIndex,colIndex and target
},
disable:false
});
return extramenu;
};
Adding Extra Cell Formatting
This is done by adding an extra renderer to the grid in the form of a function, which accepts the cell and the cell’s value. The row Id, column name and row index are also provided but rarely used. For example to color any cells red in the column_1, whose value is greater than a thousand, the following code would be used
grid.addExtraRenderer("column_1",function(cell,value,row_id,col_name_row_index){
if (value>1000){
$(cell).css("background-color","red");
}
});
*Adding A Cell Handler
If you want to add a function which is called when the cell is clicked (left mouse button, then addCustomColumnHandler method should be used where you pass he column’s name and function whuch accepts the cell,row index and row id. To add a handler which simply displays the cell’s contents the following code would be used
var self = this
this.addCustomColumnHandler("status",function(cell,rowIndex,rowID){
var col = self.getColumnIndex("status");
var value = self.getValueAt(rowIndex,col);
Enterobase.modalAlert(value)
});
Adding A custom Validator
Validation is usually specified in a column’ data, but a custom validator can be added using the addCustomCellValidator method giving the name of the column and the validation function. This function should call updateErrors with the column name row id and either a blank string if the cell value is valid or a short message explaining why the value is not. For example
var self = this
this.addCustomCellValidator("column_1",function(colName,rowID,value){
msg=""
if (value>1000){
msg="Value too high"
}
return self.updateErrors(colName,rowID,msg);
}
Experiment Grids¶
Adding the Grid to the Scheme¶
By default the BaseExperimentGrid JavaScript class in entero/static/js/table/base_experiment_grid.js is used to display the scheme’s data. If extra functionality is required, this class needs to be subclassed and the name of the subclass and the file it is in needs to be specified in the scheme’s params
{...,"js_grid":"class name","js_grid_file":"class file"}
Creating the Grid¶
The file needs to be in entero/static/js/table and should be constructed as follows
MyGrid.prototype = Object.create(BaseExperimentGrid.prototype);
MyGrid.prototype.constructor=MyGrid;
function MyGrid(name,config,species,scheme,scheme_name){
BaseExperimentGrid.call(this,name,config,species,scheme,scheme_name);
}
The grid will contain the following variables
- species - the database name e.g Senterica
- species_name - the name of the spceies e.g. Salmonella
- scheme - the name(description) of the scheme
- strainGrid - the strain grid that this is associated with- the grids are kept in synch so row index and row id will be the same