Thursday, 19 April 2018

Resort grid rows with Drag & Drop grid rows

Hi Everyone,

In Acumatica 2018R1 we have a new cool feature to drag and drops rows of the grid to resort them.
As you can see sorting is still based on database column (In my case it is Sort Order) but Acumatica can automatically reorder all rows based position you dropped it.
This is just a first version so still have some limitations (like it is still not fully works with extensions for existing DACs), but I really like we can  bring new and very friendly user experience to ERP.

How to implement it in own code? To have this feature you need to change several things in your Graph, DAC and Page:

Graph
In Graph we need to replace your normal PXSelect with new PXOrderedSelect. This data view has all logic to update sorting upon drop of the row.

public PXOrderedSelect<AAMasterAADetail
      Where<AADetail.masterIDEqual<Current<AAMaster.masterID>>>
      OrderBy<Asc<AADetail.masterIDAsc<AADetail.sortOrder>>>> DetailsView;

Also PXOrderedSelect will add 2 new buttons (PastRow and ResetOrder) to graph actions that you may need to hide from Datasource actions later in the page.

DAC
In the DAC you need to implement interface ISortOrder, that requires to have LineNbr and SortOrder properties.
  public class AADetail IBqlTableISortOrder
  {
    #region LineNbr
    [PXDBInt(IsKey true)]
    [PXUIField(DisplayName "Line Nbr"Visible false)]
    [PXLineNbr(typeof(AAMaster.masterCntr))]
    public virtual intLineNbr getset}
    public abstract class lineNbr IBqlField }
    #endregion
    #region SortOrder
    [PXDBInt()]
    [PXUIField(DisplayName "Sort Order"Visible falseEnabled false)]
    public virtual intSortOrder getset}
    public abstract class sortOrder IBqlField }
    #endregion
  }

ASPX Page
In the page you need to do several things: hide actions, allow grid Drag&Drop and configure postback.

Here in data-source you need to hide commands:
<px:PXDataSource ... >
 <CallbackCommands>
  <px:PXDSCallbackCommand Name="PasteLine" Visible="False" 
   DependOnGrid="grid" CommitChanges="true" />
  <px:PXDSCallbackCommand Name="ResetOrder" Visible="False" 
   DependOnGrid="grid" CommitChanges="true" />
 </CallbackCommands>
</px:PXDataSource>

Here in grid you need to sync grid position, allow drag and drop and link PasteCommand with action.
<px:PXGrid SyncPosition="True" ID="grid" ... >
 <Mode InitNewRow="True" AllowDragRows="True" ></Mode>
 <CallbackCommands PasteCommand="PasteLine">
  <Save PostData="Container" />
 </CallbackCommands>
</px:PXGrid>

After this drag and drop should work as it shown on the grid before!

Hope it is helpful for you! Have a nice development!

1 comment:

Science IT and Leisure said...

nice post...
have a great day