Resort grid rows with Drag and Drop

Hi Everyone,

In Acumatica 2018R1 we have a new cool feature to drag and drops rows of the grid to resort them.

Resort grid rows with Drag and Drop

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<AAMaster, AADetail, 
      Where<AADetail.masterID, Equal<Current<AAMaster.masterID>>>, 
      OrderBy<Asc<AADetail.masterID, Asc<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 : IBqlTable, ISortOrder
  {
    #region LineNbr
    [PXDBInt(IsKey = true)]
    [PXUIField(DisplayName = "Line Nbr", Visible = false)]
    [PXLineNbr(typeof(AAMaster.masterCntr))]
    public virtual int? LineNbr { get; set; }
    public abstract class lineNbr : IBqlField { }
    #endregion
    #region SortOrder
    [PXDBInt()]
    [PXUIField(DisplayName = "Sort Order", Visible = false, Enabled = false)]
    public virtual int? SortOrder { get; set; }
    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 Reply to “Resort grid rows with Drag and Drop”

Leave a Reply

Please rate*

Your email address will not be published. Required fields are marked *