Signal not being passed to parent

Get Help
1

Hello,

I have a grid that with several tiles, and when a tile is clicked, it fetches data and navigates to a new screen. During the fetching, I want to display a loading spinner and hide the grid. I am trying to use signals so that the grid tile can communicate to the grid component when enter is clicked. I have followed the documentation on signals, and I am doing everything according to the docs, but the signal is not being fired to the grid component, nor the parent component as a whole.

GridTile.js

export default class GridTile extends Lightning.Component {
    ...
    _handleEnter() {
        this.signal('enterClicked');
        fetchSomeData()
    }
}

PageWithGrid.js

export default class PageWithGrid extends Lightning.Component {
    static _template() {
        return {
            Grid: {
                ...
                type: Grid,
                signals: {
                    enterClicked: true,
                },
            },
            ...
        }
    }
    
    enterClicked() {
        // do something
    }

    _setup() {
        ...
        this.tag('Grid').add(this.loadedItems) // array of Grid Tiles
    }
}

Let me know if there is something I’m doing wrong and how to do it right, or if this is in fact correct.

Thanks!

2

I think you need:

signals: {
                    enterClicked: 'enterClicked',
                },

Also make sure the GridTile is a direct descendent. Otherwise you can use fireAncestors

3

I’ve tried using the name of the function as a string like that, but it also doesn’t work. According to the docs, setting it to true is the same thing since true means it shares the same name.

Could you clarify what a direct descendent is in this context? The grid tiles are the items inside of the grid, so I would assume that the parent of the tiles is the grid component, is this not correct?

4

Context wise:

Grid Item > Grid > Your page

So, the signal from the grid item is being sent to the Grid component. You better off using fireAncestors.

5

So how would I use fireAncestors in this context?

6 
_handleEnter() {
        this.fireAncestors('$enterClicked');
        fetchSomeData()
    }

Grid needs function

$enterClicked() {
        // do something
    }
1 Like