We Keep Coding

Custom HTML dropdown in handsontable

I am aware Handsontable has a cell type for dropdown but I want a more customizable dropdown where I can put images/chips/text. Please see the screenshot below.
Is something like that possible in handsontable?

If that image/HTML element should only be visible within the cell when the editor is closed you can use a custom renderer. Then you define a cell as a default dropdown (with your source) and add a cell renderer
function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.DropdownRenderer.apply(this, arguments);
td.innerHTM = `${value} ${here put your HTML element}`
}
And if you'd need those images/HTML elements within the list of choices then it might be easier to switch to the handsontable cell type. Then the implementation would look like this
{
data: data_key/array index,
type: 'handsontable',
handsontable: {
colWidths: 100, //some settings (works the same as regular table)
data: myItems, //list of choices
renderer: function(instance, td, row, col, prop, value){
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = `${your custom HTML} ${value}`
}
}
}

Can not register custom renderer for Handsontable in angular 5,No registered renderer found under

I prepared a custom renderer for Handsontable in angular 5 but i can not find a way to register the renderer.I can not find any function like 'registerRenderer'.Renderer function is specified below
coverRenderer (instance, td, row, col, prop, value, cellProperties):any
{
var escaped = Handsontable.helper.stringify(value),
button;
button = document.createElement('BUTTON');
button.setAttribute("name","Edit");
//button.onclick = this.editFood(value);
Handsontable.dom.addEvent(button, 'click', () => {
this.editFood(value);
});
Handsontable.dom.empty(td);
td.appendChild(button);
return td;
}
When i load the table it show error like "No registered renderer found under "coverRenderer" name". How can i register the renderer . I am using angular 5

After hours of tries, I did not found a way to register a new renderer. So I tried, when declaring the renderer of the table (I use columns object), something like this.
In my html I have:
<hot-table [data]="data" [colHeaders]="true" [columns]="columns"></hot-table>
In my component this portion of code
columns: object[] = [
{ data: 'data.rowName', readOnly: true, renderer: this.rowRendering},
{ data: 'data.baseInitialMargin'},
]
rowRendering(instance, td, row, col, prop, value, cellProperties) {
console.log("Rendering row ");
Handsontable.renderers.TextRenderer.apply(this, arguments);
if(row % 2 == 0) {
td.style.backgroundColor = '#F5F5F5';
} else {
td.style.backgroundColor = 'white';
}
}
And it works fine for me, I see the pair rows of my column with a different color. After a lot of blasphemy!

in your template you should write
<hot-column (data="{{row}}", title="{{row}}",[renderer]="tableOptions.options.renderer" )></hot-column>

Handsontable - Update CSS Property of Cell and Maintain Current Cell Renderer

I have created a Handsontable and added conditional formatting to the table by assigning a specific cell renderer to each cell based off the value in the table column 'MIN_REMAINING_LIFE'. As per the instructions on the Handsontable website.
https://docs.handsontable.com/0.31.2/demo-conditional-formatting.html
And this works fine. My table rows change color depending on the value in the 'MIN_REMAINING_LIFE' column. However, when I go to overwrite another css property (making the row bold in this case) in any of these rows with a renderer already assigned. Nothing happens. The renderer will not update its value. I have provided my code which attempts to update the renderer on double click below.
var addDblClick = function (tableName, hot) {
hot.view.wt.update('onCellDblClick', function (row, cell) {
var selectedRow = hot.getSelected()[0];
addHighlightRow(hot, selectedRow);
});
}
var addHighlightRow = function (hot, selectedRow) {
if (selectedRow != null) {
var columnTotal = hot.countCols();
for (var i=0;i<columnTotal;i++) {
hot.getCellMeta(selectedRow, i).renderer = selectedRowCellRenderer
}
hot.render();
}
}
var selectedRowCellRenderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.color = 'black';
td.style.fontWeight = '800';
}
I have also created a fiddle of this particular issue. See link below.
https://jsfiddle.net/JoshAdams/w8amwLvb/
You can replicate the issue by following the screenshots below.
So my question is. How can I update the "Bold" property (or any css property for that matter) of the row but still maintain the current conditional formatting renderer applied to the cell?

regarding Handsontable conditional Formatting

I have a Handsontable which contains values and i need apply number format like $0,0.00 . Using the below code i am able achieve it but if i apply renderer to the cellproperty the cell changes with the new style by overwriting the previous cell format.Please tell what mistake i am doing
Code
function inHeadRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.TextCell.renderer.apply(this, arguments);
td.style.textAlign="left"
td.style.paddingLeft="1%";
td.style.fontWeight = 'bold';
td.style.fontSize="10px";
td.style.fontFamily= 'verdana';
td.style.background = '#FCFFFA';
td.style.color = '#0B610B';
}
cells: function (row, col, prop) {
if($("#handsontable").handsontable('getData')[col,row][num_cols-1] ==="Inflow"){
cellProperties={
type: 'numeric',
format:'0,0.00',
language: 'en'
}
return cellProperties;
}
I want to apply style for the formatted cell Properites

Renderer gets triggered every time changes are made to cell. That is the reason for overriding of formats.
Update
http://jsfiddle.net/hU6Kz/3519/ is the working code for your reference.
Correction.
Included the type in renderer
inHeadRenderer=function(instance, td, row, col, prop, value, cellProperties) {
Handsontable.NumericCell.renderer.apply(this, arguments);
td.style.textAlign="left"
td.style.paddingLeft="1%";
td.style.fontWeight = 'bold';
td.style.fontSize="10px";
td.style.fontFamily= 'verdana';
td.style.background = '#FCFFFA';
td.style.color = '#0B610B';
cellProperties.type = 'numeric';
};

Handsontable: Updating renderers after removing row

I am trying to implement Handsontable into our reporting system. Ive done everything i wanted except one thing. I am highlighting error cell using renderers (simply by setting red color on background). However when i remove row by context menu->remove row, all renderers remain on their x-y positions. I'd like them to follow their rows instead.
$container.handsontable({
data: data,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
stretchH: 'all',
comments: true,
cells: function(row, col, prop) {
var cellProperties = {};
{foreach $excelError as $error}
if (row === {$error['row']} && col === {$error['col']}) {
cellProperties.renderer = {$error['renderer']};
cellProperties.comment = {$error['desc']};
}
{/foreach}
if (row === 0) {
cellProperties.renderer = firstRowRenderer;
}
return cellProperties;
}
});
Despite variable name $error it also contents correct row data which just pain cells with white color. The errorRenderer function looks like this (white one is similar to this one)
var errorRenderer = function(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
$(td).css({
background: 'red',
color: "white",
fontWeight: "bold"
});
};
Any idea how to fix that? I'd be fine even just with catch of that remove row event as i can call ajax and rerender cells again.
Thank you for any ideas.
EDIT:
Fixed solution:
var cellsProp = new Array();
{foreach $excelError as $error}
cellsProp[{$error['row']}] = new Array();
cellsProp[{$error['row']}][{$error['col']}] = {$error['renderer']|noescape};
{/foreach}
var removing = false;
$container.handsontable({
data: data,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
stretchH: 'all',
comments: true,
cells: function(row, col, prop) {
var cellProperties = {};
if (typeof cellsProp[row] != "undefined") {
cellProperties.renderer = cellsProp[row][col];
}
if (row === 0) {
cellProperties.renderer = firstRowRenderer;
}
return cellProperties;
},
beforeRemoveRow: function(index, amount) {
if (removing == false) {
for (x = index; x < cellsProp.length; x++) {
cellsProp[x] = cellsProp[x+1];
}
}
removing = true;
},
afterRemoveRow: function(index, amount) {
removing = false;
}
});

The error is in the PHP. When a row is deleted, your PHP still thinks that a specific row index is in error. If you could you provide a function that would remove a row from your PHP, we can create a function beforeRemoveRow which triggers after a row is removed.
In here we can call your PHP function and give it the row index to remove. Your program should now work.
The function would look like this, and would be added to the list of options on your hot definition:
beforeRemoveRow: function(index, amount) {
phpFunctionRemoveRow(index);
}
EDIT:
With this logic of hard-coded coordinates, removing a row would always give you the behavior of turning (x,y) red. This is what was meant by having an "error" in your php. It means that since you receive the coordinates with errors from PHP, you can't expect the hardcoded index values to change.
Something still doesn't make sense. If you have no interaction with PHP after render (you don't call it after render), and you say that PHP is correct, then does this mean you're never going to be modifying your table? What if someone makes a change and you have to re-validate your table?
If, however, you are capable of doing this, then what I would do is the following:
After a change to the table, call your php function to revalidate. This will change that errors array you have in php but because the cells option is static, you won't see changes. At that point, you'd use:
hotInstance.updateSettings({ cells: getCellsAgain() });
In that function, getCellsAgain(), you'd call your php code again to tell you the new indeces. That's the best you'll get without doing the validation on the JS side.