Customize Dropdown Renderer

Tags: #<Tag:0x00007efc60b9c8d8> #<Tag:0x00007efc60b9c680>
#1

Is there a way to customize the dropdown renderer? I want to make dropdown cell’s bold, and left-aligned.

Thanks.

#2

Hi @mariothomas

You can pick one of the 3 options

#3

Thanks! Have been experimenting with this, and think the custom cell editor extending the autocompleteEditor would be the best option. Could you show an example of this?

#4

To clarify - I have an existing custom cell renderer function for Text, how can I also implement a custom renderer for autocomplete?

  function factRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
if (cellProperties.isFact) {
    console.log("Fact", cellProperties)
    td.style.backgroundColor = "#f0f4fa"; 
    if (monetaryUnits == 'm'){
        td.innerHTML = '$ ' + (Math.round(value / 1000000)).toLocaleString() + " "+ monetaryUnits +''
    }
    else{
        td.innerHTML = '$ ' + (Math.round(value / 100000000)/10).toLocaleString() + " "+ monetaryUnits +''
    }
    // if (value == "Not Found"){
    //     td.style.color = 'red';
    // }
    // else {
    //     td.style.color = 'green';
    // }
   cellProperties.readOnly = true;
}
else {
    if (value){
        if((String(instance.getSourceDataAtCell(row, col)).substring(0, 1)) == '='){
            td.style.color = 'green';
        }
        console.log("String ", value, cellProperties)
    }
} Handsontable.renderers.registerRenderer('factRenderer', factRenderer);
#5

Hi @mariothomas ,

In your second line of code you have

Handsontable.renderers.TextRenderer.apply(this, arguments);

so you should replace it with

Handsontable.renderers.AutocompleteRenderer.apply(this, arguments);

to use the autocomplete/dropdown cell renderer. I also recommend skipping the logs, that makes the renderer really heavy. If you’d like to have some data logged after rendering ends I recommend using the afterRender hook.

ps. here’s how the general renderer is composed https://github.com/handsontable/handsontable/blob/6a1706061163b8d1f7752e54ef6f10efbc764b8b/handsontable/src/renderers/autocompleteRenderer/autocompleteRenderer.js#L22

#6

Thanks! I was able to fix it.

#7

I’m happy to hear that. Thank you for the update.

#8