Thanks. Let me provide my sample code of current implementation
Actually my requirement is dynamic, means i have the column name and its column type - refers as checkbox or hyperlink. Based on the column type i have below function written and it has been assigned to
configuration has
settingOverrides.cells = getCellsCallback(settingOverrides);
var getCellsCallback = function (settingOverrides) {
return function (row, col, prop) {
var tableName = settingOverrides.tableName;
var schemaName = settingOverrides.schemaName;
// Turn off row colour coding if constructing a modal hot.
if (settingOverrides.container == 'modal-hot') {
tableName = null;
schemaName = null;
}
return formattingService.conditionalFormatting(this, row, schemaName, tableName, settingOverrides.viewConfigurationData, settingOverrides.data, settingOverrides.hyperlinksCollection, settingOverrides.IsCallFrmScopeInspection);
};
};
var conditionalFormatting = function (cell, row, schemaName, tableName,
viewConfigurationData, TableSourecData, hyperlinkCollections,
isCallFromScopeInspection) {
var cellProperties = {};
currentTable = tableName;
currentSchema = schemaName;
TableSourecData = TableSourecData;
// Sometimes the cell is passed through the application with an undefined
// status usually on double click, or sorting. This check is used to
// prevent the application crashing in this case. Also cell row is being
// passed in as null in some cases. Have no idea why.
if (typeof cell !== 'undefined' && cell.row !== null) {
var rowdata = cell.instance.getSourceDataAtRow(row);
// Get generic cell formatting rules based on what is defined in the
// TABLE_CONFIGURATION table
cellProperties = getColumnCellProperties(cell.prop, viewConfigurationData,rowdata, hyperlinkCollections, isCallFromScopeInspection);
if(cellProperties)
// Apply cell conditional formatting rules in correct heirachy.
// Firstly on edit cell rules. Then row conditional formatting rules.
if (cell.comment) {
cellProperties = editingRules(cellProperties, cell);
} else {
cellProperties = rowRules(cellProperties, cell, row);
}
return cellProperties;
}
};
var getColumnCellProperties = function (columnName, viewConfigurationData, rowdata,
hyperlinkCollections, isCallFromScopeInspection) {
var cellProperties = {};
if (isCallFromScopeInspection) {
// this condition is only for Scope inspection tool which return dropdown result
if (columnName === "CML_REPRESENTIVE") {
var cmlArray = convertCommaSeparatedValuesToArray(rowdata.CML_REPRESENTIVELIST);
cmlArray.sort(function(a, b) {
return a - b;
});
cellProperties.source = cmlArray;
cellProperties.type = "dropdown";
}
if (columnName === "Scoped") {
cellProperties.renderer = getCellRenderer("checkbox");
}
cellProperties.className = getAlignmentName("MIDDLE");
if (columnName === "INSPECTION_COUNT") {
cellProperties.className = cellProperties.className + ' ' + getCellColor(rowdata.INSPECTION_COUNT)
}
}
if (viewConfigurationData) {
var columnDetails = lookupColumnDetails(columnName, viewConfigurationData);
if (columnDetails) {
cellProperties.type = getCellDataType(columnDetails.DATA_TYPE);
cellProperties.source = convertCommaSeparatedValuesToArray(columnDetails.DROPDOWN_LIST);
cellProperties.className = getAlignmentName(columnDetails.ALIGNMENT) + ' ' + getCalculatedStatus(columnDetails.CALCULATED);
cellProperties.format = columnDetails.DATA_FORMAT;
if(columnDetails.DATA_TYPE === 'hyperlink')
{
var link = lookupHyperlink(columnDetails.COLUMN_NAME,rowdata, hyperlinkCollections);
if(link){
cellProperties.hyperlinkLocation =link}
else{
cellProperties.hyperlinkLocation = columnDetails.HYPERLINK_LOCATION;
cellProperties.hyperlinkFileExtension = columnDetails.HYPERLINK_FILE_EXTENSION;
}
}
cellProperties.renderer = getCellRenderer(columnDetails.DATA_TYPE);
}
}
return cellProperties;
};
var getCellRenderer = function(dataType) {
if (dataType === 'hyperlink') {
return safeHtmlRenderer;
} else if (dataType === 'checkbox') {
return checkboxHTMLRender;
} else {
// Renderer for content that might be longer than the cell size, show a tooltip on hover
return longContentRenderer;
}
};
function checkboxHTMLRender(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
if (col === 0) {
var txt;
var isChecked = false;
txt = "<input type='checkbox' id=" + row + " class='checkboxchecker' ";
txt += isChecked ? 'checked="checked"' : '';
txt += ">";
td.innerHTML = txt;
}
}
Now during the checkbox click- i am storing a array list to add those unique values and rowids. Now how to get the control of data during filter. Coz for each event eg. scrolling , filtering , handsontable calls the after rederrer and it actually loops and calls the render function for each row.
Question is simple - how to save the rows of which it got checked= true ( As already told i am saving in array) and again even after the filtering some thing and unfiltering should retain this checkbox data( true or false ) and should provide me to control it and display it back to UI.
Pls help
