AcumatiCares
Introduction
The usual or default way of working with Acumatica grids is implementing buttons above the grid. But there are some people who like to have a context menu item. This way the user can use a right mouse click to perform an action.
In this article, I will describe the necessary steps you will need to take as a developer to provide this capability to your end-users.
Using Subtasks
In a use case where we need to add an action button to a grid and want this action button to appear only on the menu that opens with a right-click we will want to divide this task into two subtasks:
- Add an action button to the grid; and
- Make this button visible only on the menu that opens on a right-click
Let’s start with the first task. At every grid in an aspx file there is one part where action buttons are defined:
<px:PXGrid … ID=”grid” DataSourceID=”ds”>
<Levels>
</Levels>
<ActionBar>
[The action should go here]
</ActionBar>
</px:PXGrid>
In order to add an action button, we should implement it as follows:
<ActionBar>
<CustomItems>
<px:PXToolBarButton Text=”Insert Row” ImageSet=”main” ImageKey=”AddNew” DependOnGrid=”grid”>
<AutoCallBack Target=”ds” Command=”AddNewDSLine”/>
</px:PXToolBarButton>
</CustomItems>
</ActionBar>
*Note the following:
Text – the name that will appear on the screen
ImageSet and ImageKey – needed to add the icon on the button
DependOnGrid – the ID of the grid
Target – DataSourceID from the grid
Command – the name of the action in the graph
Additionally, we should add a simple action method to our graph. Something like this will work:
public PXAction<DailySales> AddNewDSLine;
[PXButton(CommitChanges = true)]
[PXUIField(Enabled = true, MapEnableRights = PXCacheRights.Select, MapViewRights = PXCacheRights.Select)]
protected virtual IEnumerable addNewDSLine(PXAdapter adapter)
{
…
}
Now, if we publish the project we will see this button here:
Let’s move to the second Task. To do this, we should change the
<ActionBar ToolBarVisible=”External” MenuVisible=”true”/>
Where
ToolBarVisible – with this parameter, we are making the button invisible in the menu on the top of the grid
MenuVisible – with this parameter, we add the button to the menu that open on the right click
So the final code will look like this:
<ActionBar>
<CustomItems>
<px:PXToolBarButton Text=”Insert Row” ImageSet=”main” ImageKey=”AddNew” DependOnGrid=”grid”>
<AutoCallBack Target=”ds” Command=”AddNewDSLine”/>
<ActionBar ToolBarVisible=”External” MenuVisible=”true”/>
</px:PXToolBarButton>
</CustomItems>
</ActionBar>
And on the screen we will have something that looks like this:
And that’s it. Pretty simple and straight forward for the most part.
Summary
In this short post, I able to show you how to add a bit of redundancy to the UI of grids by adding an Action on the Right-click Menu on a Grid. Another scenario we might be where we want to have 5 buttons in the grid above, and other types of functionaly in the context menu of the grid.
Hope this was helpful.
Happy Coding!
