How to dynamically set cell type

Tags: #<Tag:0x00007f8b28ccfb68>
#1

I want to add a custom cell type to simply be a button, so I registered a custom cell type as follows:
Handsontable.cellTypes.registerCellType('UI.button', { editor: undefined, validator: undefined, renderer: function(instance, td, row, col, prop, value, cellProperties) { td.style.verticalAlign = "middle"; td.style.textAlign = "center"; td.innerHTML = '<button style="width:100%; height:90%;">' + value + '</button>'; }, });

however, I was only able to use this cell type through the cells property in the option. I want to be able to set it dynamically after a certain user interaction. For example, if a user selects a cell and chooses to make it a button, I want to set cellProperties.type = "UI.button", or at least set the renderer only. However, I couldn’t find a way to do that except in the cells option, but I can’t check for the cell meta inside of it as it causes an error (unlike reading the data).
How can I achieve this?

#2

Hi @aabounegm

Can you share a demo with your recent progress?

I have to say that I did not try it before so I am not sure if it’s bugless.

#3

Sorry, I didn’t get a notification with your reply.
I currently don’t have progress in this. My workaround was to combine all custom renderers I have into 1 based on cell meta, but this is not a good implementation.
What I need is something like hot.setCellType(row, col, type) just like I do cellProperties.type = type in the cells option.

(side question: how do I write block formatted code, unlike my first post?)

#4

Hi @aabounegm

to add a block of code you need to firstly add it as a normal text. Then after selecting all the lines use the </> icon in the reply panel.

When it comes to cell type, you can use the setCellMeta. Here’s an example http://jsfiddle.net/pv8c97pv/

#5

Thank you.
For some reason, your suggestion didn’t work before I posted this question, but it worked when I tried again now. It is possible that I had an older version back then. It is working now.

#6

Great.Thanks for the confirmation.

Feel free to open a new ticket anytime you need.

#7

Sorry, but I can’t really achieve what I’m trying to do and would appreciate your help.
Please check this jsFiddle: http://jsfiddle.net/pv8c97pv/2/
If it is not clear, I am trying to toggle the type between text and my custom type. If I write the type using setCellMeta(row, col, "type", type), I can’t go back to HandsonTable’s default types the same way.

#8

Hi @aabounegm

the cell types changes. You can test it by calling

console.log(hot.getCellMeta(0, 0).type);

in the toggle method. But no matter if a cell is a text or a UI.button it uses the same renderer that adds a button. You need to convert the previous data inside a cell

#9

I know that the type changes, but why doesn’t the renderer change with it?
Isn’t the type a combination between renderer, editor, and validator?

#10

Hi @aabounegm

You are right - the cell type is a combination of renderer, editor and validator (besides text cell). It looks like something is fishy here after all.
Do you consider a solution like that http://jsfiddle.net/handsoncode/dz0vnp8a/?

#11

That might be a good temporary solution, but in the future I will define special editors and validators. Setting the type should set all of these. There is definitely something weird here, probably a bug. I will change the type to simply a renderer for now, but I think it has to be fixed in the next release.

#12

As soon as I am able to identify the bug I will report it to our Github board.

#15