How to Access Context Menu Row Data in a Perspective Table?
In the context menu of a Perspective Table, I want to perform an action that is specific to the row where the context menu was opened. However, I haven't been able to find a way to obtain the row index or row data of the activated row.
I can only retrieve data from the currently selected row, which might be different from the row where the context menu was activated.
To illustrate this, I've created a simple example. On a Perspective Table with demo data, I want to set a custom property, contextCountry , to the country from the row where I activated the context menu. As shown in the image, the row with China is selected. But if I open the context menu on the row with Indonesia, the selection remains on China, and the selectCountry method works with the row for China instead of Indonesia.
1 Like
Unfortunately, the selection action does not occur on a right click which in turn activates the context menu.
The only way to achieve this with the table functionality as is would be to click on a row before using the context menu which would then change the selection props of the table. This would then allow for you to access which row is selected.
A cheaty way would be to create a component that just contains a label for the value and then you get what row is associated with that since it gets passed in as a variable (rowIndex). Perspective - Table | Ignition User Manual.
Then I would have message handlers to invoke functions on the view you need and do it that way. You would have the context menu be on the embedded view that is the column and send the data you need as the payloads.
Outside of those I am not sure of another way (The second option can be done a few other ways outside of just message handlers if you use the scripting section instead of passing payloads back to the main view) I am definitely interested to see if there are any other solutions out there though. This is just what I have done in the past for similar functionality.
Another option would be to have a button bar above or below the table to replace the menu actions. Enable the buttons with an expression binding such as,
!isNull({this.props.selection.selectedRow})
(Watch the ! at the start.)
Clicking on the row first with the left button and then with the right button to call the context menu works, of course, but it is not very intuitive and creates a terrible user experience.
The table itself should know on which row the context menu is called. When you simply hover the mouse over a table row, it changes the row color, so the information is there; it is just not being passed back to Ignition or is hidden somewhere...
This is a complete workaround, avoiding the use of the context menu. I have already implemented a working workaround - I have added an extra column to the table that contains a subview with buttons performing the actions I wanted to do in the context menu. Every subview in the table automatically has a rowData parameter, where you can access data from the actual row. But I'm just curious if I might have overlooked something in the manual. Because as I see it now, the context menu on the table is not that useful, because it doesn't recognize the context.
1 Like
This is not true sadly. CSS and state data are completely different things. I could have a CSS class called .row with a hover action and add that to anything I wanted, and it will have the identical reaction.
The core of the component functionality is based in React, which requires there to be a change of state for the props tree to update. In the case of the selection property, you clicking on the row, or updating the selection prop itself will invoke a change that allows for you to see which row was selected.
You will have to do something custom to achieve this. I like adding drawers and having some buttons in the drawer to do actions after you have clicked on a row, but it really just depends on your requirements. Feel free to try some custom solutions out and I encourage you to share what you find works or doesn't work well here. You can also ask for help with implementing an idea of a solution you might have as I am sure the community would be happy to help extend the functionality of the table component.
