How to store row id and column id?

Getting help Questions
1

Dear Handsontable

Do we have a good way to store row id and column id? For jQuery, we can store data in ‘data-***’ attribute.
My scenario is this: we don’t want to expose row id which is for db internal use. And also we want to do operation on columns, for example re-order, insert and remove columns. So we also need to have unique id for columns.

Thank you very much, any help will be appreciated. :sunny:

2

Hi @chens
You do not need to show rowHeaders to sort a column. In this case you would need to show colHeaders.

Here’s an example: http://jsfiddle.net/handsoncode/4qghveqt/ that excluded rowHeaders and allows you to use context menu to - for example - add rows/columns.

If that’s not what you have on your mind please share with me more details.

3

Hi @aleksandra_budnik

Thank you for your replay.

Our scenario is this:

  1. When we edit data in cell, we need to get the row id and column id to save in backend. So we need find out which the edited cell is.
  2. When we re-order columns, we need to have a unique id which is used to talk the exactly column is, then we will also need to update backend to store column order index.

In case of these, I think the best to implement this is to have id for rows and columns. Please kindly let me know if Handsontable has such feature.

Thanks

4

Hi @chens
To check row and col before the cell is changed you can use beforeChange callback. Here’s the example http://jsfiddle.net/handsoncode/w8en5mck/1/
It returns an array of changes[row, col, previous_value, new_value]

When it comes to moving columns there is a afterColumnMove callback that return a start and end column. Here’s a demo: http://jsfiddle.net/o9hnrqd9/ you can also use getData() to track chages or create a custom renderer to add id.

5

Hi @aleksandra_budnik

I know this feature in Handsontable, but this can not implement what I want.

Please just let me know if we can store row id and column id in some place.

Thanks

6

Hi @chens
I don’t want to provide you half-measures. One of our developers will provide you full information on Friday. Is it OK?

7

Yes, it ok. @aleksandra_budnik

Thank you very much, Appreciate any help here.

Glad to use such a great product

8

hi @aleksandra_budnik

any updates here?

9

Hi @chens
Sorry for a delay. I was informed that one of our developers will provide the best solution tomorrow. Is it OK?

10

@chens: I’m not exactly sure if I understand your case correctly:
You need to store a “secret” list of ids somewhere, and use them to communicate with your database, is that correct?

If so, I think this example might help you (click the “Edit on CODEPEN” link, as the widget doesn’t display Handsontable properly for some reason):
http://codepen.io/js-ziggle/pen/pypLza

It contains an object with “secret” ids with their corresponding row numbers.
I’ve made an example with the afterChange hook, but you can use it however you want - also with columns.

Does that help?

11

Hi @aleksandra_budnik , thank you very much.

Hi @jsiegel, this is helpful, thx.

You need to store a “secret” list of ids somewhere, and use them to communicate with your database, is that correct?

Yes, that’s what I want. For the example you gave me, could I say that Handsontable doesn’t support to store any data in the DOM(or in option setting), right?

12

@chens, currently you cannot store settings like this in Handsontable’s settings. You can however put anything you’d like in DOM, as Handsontable operates on standard HTML elements.

For example, you can set attach additional data to cells using the setCellMeta method (see: http://docs.handsontable.com/Core.html#setCellMeta), and then add them to TD elements using the afterRenderer hook.

See this simplified example: http://codepen.io/js-ziggle/pen/PNRrwY
It adds data-custom attribute to cell at (1,1).

Adding it using the cellMeta ensures that the data won’t be lost after re-rendering the table.