Custom HTML dropdown in handsontable - javascript

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}`
}
}
}

Related

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?

get textfield cell td in extjs grid 4.0

I am using extjs 4.0 version. when I update extjs grid textfield value, I need to apply css to td. so on change i need to get td of that cell in change listener.
'change': function(textField, newValue, oldValue, eOpts){
}
I tired 'this.getEl()' but no luck. any other pointers?
I think the easiest way is to use a renderer event on your header:
{header: ... renderer: fctChangeColor},
function fctChangeColor(currentCellValue, metadata, record, rowIndex, colIndex, myStore )
{
if(fctValidate(currentCellValue) == false)
metadata.css = "myNewClass";
return currentCellValue;
}

Checkbox custom render for handsontable not working

I have applied a custom renderer for check boxes in the handsontable.My handsontable has only checkboxes in all of its row and column. The read only property will be applied for the rows specified in the settings of the handsontable, but when I click for the first time on any of the checkbox,it willa loow me to uncheck it.Once one click is done,it is making it readonly
function readonly(instance, td, row, col, prop, value, cellProperties) {
Handsontable.CheckboxCell.renderer.apply(this, arguments);
cellProperties.readOnly = true;
td.style.background = '#ECECF2';
var settings1 = {
data:$scope.secondGridData,
stretchH: 'false',
fillHandle: false,
colWidths: [85,120, 63, 63, 63,63, 63,63, 63,63, 63, 63, 63,63],
comments: true,
contextMenu: false,
className: "htCenter",
cells: function (row, col, prop) {
var cellProperties = {};
if((row>=1())){
cellProperties.renderer = readonly;
}
return cellProperties;
}
Well for one thing, your settings seem to be defined inside your renderer so probably don't do that. And you're supposed to return the td which is why your renderer isn't working. Fix those two things and it should work.

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';
};

Categories