Extending Items Table (Facets Table) with an action button

The Insight Engine
1

I try to extend the items table with a custom action button that opens a modal with content.

Also, I want to open the item details modal on row click. This is the default behavior of the items table.

The problem is my custom action button is the child of the table row. So, when I click on the custom button, row click event also triggers. Normally this issue solves by adding event.stopPropagation() to the child component’s click handler. But it’s not working as expected neither stopImmediatePropagation not working too.

Is there any way to stop propagation? or how can I programmatically open the item details modal?

Screenshot 2022-10-25 at 16.43.26
Screenshot 2022-10-25 at 16.43.261152×662 183 KB

1 Like
2

Hi @aunaz,

This should be helpful as it will allow you to disable the default row click action:
https://docs.squirro.com/en/latest/technical/widgets/backbone/sdk/core_widgets.html?highlight=disableClicks#FacetsTable.disableClicks

1 Like
3

You might also wish to override the default onRowClick action, like here:
https://docs.squirro.com/en/latest/technical/widgets/backbone/sdk/core_widgets.html?highlight=onrowclick#FacetsTable.onRowClick

Inside you can detect from the event target if the click originates from the .table-action-button you introduced or not. That should cover more scenarios.

To open an item detail modal, use: model.collection.setActiveItem(model);

4

Thank you, Wiktor,

Yes I want to override the default onRowClick action and I tried to override it like that but the item detail modal doesn’t open:

  onRowClick(e, model){
        if($(e.target).is(".squirro-grid-cell")){
            console.log("open item details")
            model.collection.setActiveItem(model);
        }
    }

So, what do I do wrong?

5

Ok can you try using Utils.itemModal.open(model) instead of the setActiveItem call?

6

This triggers modal but I get this error:

Screenshot 2022-10-28 at 18.01.09
Screenshot 2022-10-28 at 18.01.091920×972 108 KB

7

Hi @aunaz sorry for the delay in getting back to you. Our team are looking into it and will provide you with an answer once they have identified the solution. Thanks for your patience.

8

I solved the issue with a bit of tricky code. This is not perfect but worked in my case.
I closed ItemDetailsModal on the action button click.

closeItemModal(){
        setTimeout(
            ()=> {
                $(".modal-overlay:eq(1)").click()
            }
        , 100)
    }
1 Like