How to apply Section border dynamically

Tags: #<Tag:0x00007f8b1d822738> #<Tag:0x00007f8b1d8225f8>
#1

Hi Team,

We’re using handsontable in angular, where we have requirement to show section border bottom for dynamic fields.
Ex- Section having group of fields, and the fields can be shown/hidden based on selection feature implemented. Please note that we tried to have the style(border bottom) implemented for the last field of the section, but due to selection feature if we hide last field that style also getting hidden, but instead style should be applied to the last field of the section.

Could you please provide the solution to achieve this?

#2

Hi @veldi.supriya

Did you try using our custom borders functionality? https://handsontable.com/docs/javascript-data-grid/api/custom-borders/

You can find usage example here: https://jsfiddle.net/handsoncode/dkx1g0m4/

It would be also good if you could share your current implementation to propose a suitable solution.

#3

Hi adrian,

Thanks for the update.
We could see the sample for the static data, but our requirement is to apply styles for dynamic rows.
In our case, A1-A4 will be considered as one section, where ‘A4’ row is the 4th one, in our case, if we hide ‘A4’ in selection feature means, ‘A5’ becomes the 4th row and style should be applied till ‘A3’ only, but not for ‘A5’.
Please advise on this.

#4

Do you use nestedRows functionality for dividing the data into the sections? If so, then it could be done as in this example: https://jsfiddle.net/handsoncode/7fax2zjy/ If you hide, delete or add new row, the border will automatically attach to the correct place.

If you don’t use nestedRows please share your implementation.

#5

Hi adrian,

We use nested Rows, but all are not nestedRows. It’s combination of nested and flat rows. I’ve added the structure in here( How to change background color of parent rows while using nested rows - JSFiddle - Code Playground). Our section can’t always start with nestedRow, can start with flat row also ex- test1/test2/test3/test4 in the example provided and not that those will be dynamic based on selection of field, means if we hide will be removed from grid.

#6

@veldi.supriya

Thank you for the explanation. I think in this case my previous solution would work with additional logic for custom sections done with help of the cells option and setting the custom CSS class for those sections. It’s also dynamic and will automatically attach the border to the correct row if you insert/delete a row.

Here’s an example: https://jsfiddle.net/handsoncode/xm4kouw5/

Let me know if that’s what you are looking for.

#7

Hi adrian,
The provided solution is still static, but as mentioned our requirement is dynamic i.e, row numbers may change based on show/hide feature and not always row 6 or row14 is the starting of the section, it will vary. Could you please confirm whether is this possible with handsontable default functionality or it’s the limitation?

#8

Hi @veldi.supriya

The solutions I provided above are currently the only ways to set the custom borders for multiple sections of the table and as they are based on assigning the borders to the sections limited by the rows indexes they are not fully dynamic. We will work on improving the customization of the table in the near future, so this is something that might be also improved, but we don’t have any specific timeline for this yet.