Hi Everyone,
You may know that in Acumatica you can put several large containers (like grids and forms) together. But to controls or optimize space usage on small screen Acumatica uses special Split Container control.
Basically this is the panel that you can drag and drop to reallocate space used by nested controls.
To handle it Acumatica ASPX markup has special element:
<px:PXSplitContainer runat="server" ID="PXSplitContainer1" Orientation="Horizontal"> <Template> <AutoSize Enabled="true" Container="Window" /> <Template1> </Template1> <Template2> </Template2> </Template> </px:PXSplitContainer>
Under the Template1 and Template2 elements you can place other container controls like Form and Grid. Here I have an example for putting grid into the Template1.
<Template1>
<px:PXGrid runat="server" ID="grid11" Height="150px" SkinID="DetailsInTab"
Width="100%" SyncPosition="True">
<AutoSize Enabled="True" MinHeight="150" />
<Levels>
<px:PXGridLevel DataMember="DataMember1">
<Columns></Columns>
</px:PXGridLevel>
</Levels>
</px:PXGrid>
</Template1>
Do not forget to setup AutoSize for the SplitContainer so it can be automatically expanded for whole available space.
Also if you have 2 grids that are depend on each other do not forget to do following:
- Set SyncPosition=”True” – this will sync current of the first grid with cache, so your DataView for second grid will be able to use Current<> parameter with correct current row.
- Add Refresh callback from first grid to second. This action will automatically refresh data of second grid when something changed on first grid
<AutoCallBack Enabled="True" ActiveBehavior="True" Target="grid02" Command="Refresh"> <Behavior BlockPage="True" RepaintControlsIDs="grid02" /> </AutoCallBack>
So that is it in general. As soon as you have configured grid this way you will have split container working as it is shown on GIF above.
Unfortunately Acumatica’s current Customization Layout Editor cannot use split container, so you cannot do this with simple drag and drop as it works for other controls.
One of the obvious ways will be to use visual studio, but what to do if we need to modify existing screen and keep upgrade support? What if we do not have Visual studio.
Lukily there is a simple workaround where you can use browser functionality to edit ASPX and replace control with split container. I would like to show you an example with grid.
- Go to the screen, select grid that you wants to replace and copy aspx code to notepad.
- Than go to Edit ASPX under Actions. As soon as you go to edit aspx you will see the original ASPX of the screen. There you can edit it directly.
- Find grid you want to replace, select the code and delete it.
- Click “Generate Customization Script” to apply changes. This buttons search for delta between original page and changed page and generates special script that can be applied incrementally.
- Paste code for Split Container and click “Generate Customization Script” again.
- Now Actually you can see the split container control instead of previous grid.
- From this point you can use Layout Editor as usual and create all controls from the designer.
You can try to replace grid you originally copied to notepad into the split container, but you need to be very careful and to this incrementally step by step. The problem is that there might be a situation that you are trying to add element but its parent is not yet create/committed and than you will see an error like this “Sequence contains no matching element”
To fix this error you need to restart Acumatica and code will be rolled-back to the last successful state. To restart Acumatica you can use IISReset.exe or Apply Updates screen.
You can try to past less data, like for example paste empty grid first and than add line by line. Please also note that you should not replace grid ID with code you paste, it also may rise errors.
So that is it. We have created a split container with 2 grids right within browser without Visual Studio and with upgrade support.
Full split Container code:
Have a nice development!