Custom edit button

Tags: #<Tag:0x00007efc64490518>
#1

I’m using angular wrapper for handson table, and I’m trying to add edit and delete button at the end of every row in table.
On edit button click I’m showing modal popup form with data gathered from row:

…
,afterOnCellMouseDown: (event, coords, TD) => {
const hotInstance = this.hotRegisterer.getInstance(this.instance);
hotInstance.getSourceDataAtRow(TD.row);

Works perfectly fine but still having problem with sorted table. I’m fully aware of the problem with logical and physical index.
I’m just asking for suggestion to find the proper way to implement something like this.

Thank you

#2

Hey @jan.huijgers

Can you share a StackBlitz demo with you implementation? Here’s a demo that you can start with https://stackblitz.com/edit/angular-vydkes?file=src/styles.css

Angular 6 + Modal = no context menu
#3

Hi Aleksandra,

we have decided to use context menu with edit and delete options instead of buttons inside the table. We use material components including material dialog that should open on context menu click. The problem is that dialog comes up empty and unresponsive. We use context menu callback to open the dialog. Were there similar issues reported and do you have any idea what could be the problem? It would take a lot of time to recreate the case in StackBlitz, so we would like to avoid that if possible.

#4

Sorry but I haven’t been reported with a similar issue. Have you tried to console events for the modal?

#5

Hi Aleksnadra,

We could not find any angular component library(Angular material, Bootrap, Prime NG, Nebular…) that could work normally with handson table. I have small project with handson table and Bootstrap as example.

Would you like me to send it to you on email so you can check it out?

#6

Hi Aleksandra,
Please see: https://stackblitz.com/edit/angular-8suock?embed=1&file=src/app/app.component.ts

This is Handson table with Angular Material. Try to do some sorting on columns or any filter change and see the accordion expanding. Also see that dialog is not rendered correctly when right click on table and then edit is clicked. Dialog is rendered correctly from Open Dialog button.

Various types of problems occurs when Handson table is combined with any Angular Component Library. These are just some examples.

Please let us know if there is some workaround for this, or some recommended Component library, or if this is known or not known issue that will be fixed in future.

Note that it’s quite urgent to get a reply on this so we can continue with our project development.

#7

have you tried to destroy and rebuild the table once the new tab is clicked? The reason it does not show in the first place is the fact that Handsontable has only those ~100px (collapsed tab) and it does not recalculate when you show the full tab.

#8

@aleksandra_budnik hello
I want to attract your attention to the other problem in this demo. There is the same strange behavior described in this branch Angular MatDialog doesn't render properly if opened from context menu callback function
Btw here is the other demo which shows that the component (dialog) isn’t rendered correctly (hope this clarify situation)

Thank you in advance.

#9

Hi @aleksandra_budnik ,

Rebuilding the table solves the problem with initial table showing, but all the others problems remains.
Try to click on sort column multiple times and see the accordion expanding.
Try to right click on row and click edit. Modal is not rendered as expected.
Note: same functionality for opening dialog is used on button click where modal dialog is rendered as expected.

#10

So it looks like this issue is something different that the one we have here https://github.com/handsontable/handsontable/issues?utf8=✓&q=is%3Aissue+is%3Aopen+modal

Can you confirm @jan.huijgers @trotskovets?

#11

Hi @aleksandra_budnik,

Yes, I confirm.

This bug is about Handson table combination with Angular Material (or any other component library…)

IMPORTANT: Can you give us any estimate or guaranties on resolving this issue?
We’re in the middle of the project, Handson table seemed like perfect solution, but at now we’re stuck.
What is the usual time needed for issues like this to be resolved?
Is there a possibility that Handson team will NOT work on this issue?

Please give us any feedbac so we can plan our strategy?

Thank you

#12

We’re planning to solve all the issue, but 3rd party libraries aren’t the priority. We schedule tasks from one month to another.

Now we’re working on these issues https://github.com/handsontable/handsontable/issues?q=is%3Aopen+is%3Aissue+milestone%3A"February+2019"

March issue board is still open https://github.com/handsontable/handsontable/issues?q=is%3Aopen+is%3Aissue+milestone%3A"March+2019" (only 1 task) but I think that our technical officer would rather fix the regression bugs first.

When it comes to Modals in most cases the reason lays in a lack of fixed values that the table can use to render. If the container of Handsontable expands you can try to wrap it with a parent element with overflow: hidden value. An ugly hacky but can be used as a temporary workaround.

#13