Set row height for items in autocomplete/dropdown editor

Tags: #<Tag:0x00007efc615f1ea0>
#1

It’s possible to use the rowHeights property to define row height of the main HoT instance, however it has no impact on height of rows within an opened autocomplete or dropdown editor (it always seems to use height of 23).

How can I define row height for rows in autocomplete or dropdown editor?

I think this 5 year old GitHub issue is related.

#2

Hi @il.dev

Yes, there’s an example with a handsontable cell type (that looks exactly like a dropdown) and this example still works in v8.3.1 (latest) http://jsfiddle.net/handsoncode/qjdz78u1/
And only handsontable cell type can be modified via API. There is no official API for changing the dropdown list of values.

#3

Hi @aleksandra_budnik, thanks for the quick response!

Using handsontable cell type does indeed provide ability to set rowHeights.

The case I’m trying to implement is somewhat more complex though: instead of marking the whole column as a certain type, I want to use different cell types within a column, depending on certain conditions.

While I can achieve this with the dropdown cell type, I can’t get it to work with the handsontable type.

I put together a quick example by forking your jsfiddle and adding two new columns. By default both columns render cells as text. In first column I use a custom renderer and set cell type to dropdown in first row. I set the available options using cellProperties.source.

In second column I’m trying to set cell type to handsontable in first row, but I can’t manage to set the data to be displayed when cell is edited. I tried using cellProperties.data for this, but it seems to have no effect.

Do you know how it may be possible to display a list of options in handsontable cell type in my scenario?

Here is the link to my jsfiddle: http://jsfiddle.net/d8aLmurx/

#4

Maybe something like this http://jsfiddle.net/handsoncode/waeds2qf/

I set up the handsontable type for the column

 {
        type: 'handsontable',
        renderer: onlyFirstRowRenderer,
        handsontable: {
          colHeaders: false,
          rowHeights: 50,
          data: [
            ['yellow'],
            ['red'],
            ['orange'],
            ['blue'],
            ['green']
          ]
        } 
      },

then add text editor to all the cells besides the first one

 cells: function(row, col){
    	let cp = {};
      if(col === 2 && row !== 0){
      	cp.editor = 'text'
      }
      return cp 
    }

(it will remove the list of choices)

and use a custom renderer to remove the arrow from other cells than the first one

  function onlyFirstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
    //Handsontable.renderers.TextRenderer.apply(this, arguments);
    if (row !== 0) {
      Handsontable.renderers.TextRenderer.apply(this, arguments);
    } else {
    	Handsontable.renderers.AutocompleteRenderer.apply(this, arguments);
    }
  }
#5

Hi @aleksandra_budnik, thanks a lot for putting together the example!

I can see that it’s possible to achieve what I want. Unfortunately it’s not a very elegant work-around and it would be somewhat tricky to incorporate into my actual app, because I have a lot of other logic in the cell renderer for each cell. I wish there was a simple way to set rowHeight within the dropdown/autocomplete editor, or at least make it inherit the rowHeight which is set globally.

Thanks for your help anyway!

#6