Skip to main content
Solved

How to refresh detail grid based on selected row in master grid and handle conditional button enablement?

  • March 19, 2026
  • 2 replies
  • 51 views
M
Varsity I
Forum|alt.badge.img+1

I have a problem in Modern UI. 

In Classic UI I have 2 grids inside SmartPanel:

  • Top grid: BZItemQuantityInq

  • Bottom grid: BZItemLotInq

When I click any row in the top grid, the bottom grid refreshes automatically and shows related data. Everything works fine there.
 

  <px:PXSmartPanel runat="server" ID="CstSmartPanel1" Caption="Item Quantity Inquiry" CaptionVisible="True" LoadOnDemand="True" Width="1100px" Key="BZItemQuantityInq" AutoRepaint="True" AutoReload="True" ShowAfterLoad="True" CancelButtonID="CstButton8" CloseButtonDialogResult="No">
    <px:PXGrid runat="server" ID="CstPXGrid2" AdjustPageSize="None" AllowPaging="True" SkinID="Details" Width="100%" DataSourceID="ds" SyncPosition="True" KeepPosition="True">
      <Levels>
        <px:PXGridLevel DataMember="BZItemQuantityInq">
          <Columns>
            ......
          </Columns></px:PXGridLevel></Levels>
      <AutoSize Enabled="True" />
      <AutoCallBack Enabled="True" Command="Refresh" Target="CstPXGrid3" />
      <ClientEvents AfterRowInsert="" /></px:PXGrid>
    <px:PXGrid runat="server" ID="CstPXGrid3" AdjustPageSize="None" AllowPaging="True" SkinID="Details" Width="100%" SyncPosition="True" DataSourceID="ds" MatrixMode="True" RepaintColumns="True" AutoAdjustColumns="True">
      <Levels>
        <px:PXGridLevel DataMember="BZItemLotInq">
          <Columns>
            ......
          </Columns></px:PXGridLevel></Levels>
      <AutoSize Enabled="True" />
      <ClientEvents AfterRowFormOpen="customizeGridRowColor()" /></px:PXGrid>
    <px:PXPanel runat="server" ID="CstPanel7" SkinID="Buttons">
      <px:PXButton runat="server" ID="CstButton8" Text="Load" DependOnGrid="grid" Target="ds" AlignLeft="False" DialogResult="OK" StateColumn="UsrBZAllowLoadBtn">
        <AutoCallBack Command="BZLoad" Target="ds" /></px:PXButton>
      <px:PXButton runat="server" ID="CstButton9" Text="Delete allocated lines" AlignLeft="False" DependOnGrid="grid" StateColumn="UsrBZAllowDeleteBtn" Target="ds">
        <AutoCallBack Command="BZDeleteAllocate" Target="ds" /></px:PXButton>
      <px:PXJavaScript runat="server" ID="CstJavaScript11" Script="function customizeGridRowColor() {         const gridName = "CstPXGrid3&quot;;         const targetFieldName = &quot;UsedLot&quot;;   	const gridInstance = px_all[&quot;ctl00_phG_CstSmartPanel1_CstPXGrid3&quot;];          if (!gridInstance) {             console.warn(`Grid ${gridName} not found.`);             return;         }          let lines = gridInstance.rows.items;         for(let i=0;i&lt;lines.length;i++)         {             let currentLine=lines[i];             if(currentLine.getCell(targetFieldName).getValue() === true)             {                 currentLine.style = &#39;background-color: yellow&#39;;                 currentLine.repaint();             }         }     }   setInterval(customizeGridRowColor, 100);" /></px:PXPanel></px:PXSmartPanel>

 

Here is my MUI Files:
 

@gridConfig({
    preset: GridPreset.Details,
    syncPosition: true,
    keepPosition: true,
    adjustPageSize: false,
    showFastFilter: GridFastFilterVisibility.False,
    autoRepaint: ["BZSOLineLotQuantityInq"]
})
export class BZSOLineQuantityInq extends PXView {
...
}


@gridConfig({
    preset: GridPreset.Details,
    syncPosition: true,
    keepPosition: true,
    repaintColumns: true,
    autoAdjustColumns: true,
    adjustPageSize: false,
    showFastFilter: GridFastFilterVisibility.False,

})
export class BZSOLineLotQuantityInq extends PXView {
...
}

 

 <qp-panel id="BZItemQuantityInq" caption="Item Quantity Inquiry" auto-repaint="true">
     <qp-grid id="grid-BZItemQuantityInq" view.bind="BZItemQuantityInq"></qp-grid>
     <qp-grid id="grid-BZItemLotInq" view.bind="BZItemLotInq"></qp-grid>
     <footer>
         <qp-button id="btnOKLoad" dialog-result="OK" caption="Load" state.bind="BZLoad"></qp-button>
         <qp-button id="btnDeleteAllocatedLines" caption="Delete allocated lines" state.bind="BZDeleteAllocate"></qp-button>
     </footer>
 </qp-panel>

When I select a row in the top grid, the bottom grid does NOT refresh.

I already tried using syncPosition, keepPosition, autoRepaint but still not working.

Also, in Classic UI  buttons enabled/disabled conditionally, but in Modern UI both buttons are always enabled.

So the question is: how to correctly implement this behavior in Modern UI  both refreshing the second grid based on selected row in the first grid and making buttons conditionally enabled/disabled?

Best answer by art34

Hi Marat jan,
 

In Modern UI, the popup panel split container does not always work correctly. In such cases, you can handle the CustomEventType.CurrentRowChanged event to refresh the data.

Within this event, you should retrieve the refresh button element by its ID and trigger the click() action. This ensures that the grid is refreshed every time the current row changes.

Here is an example:

@handleEvent(CustomEventType.CurrentRowChanged, { view: 'ViewName' })
onViewNameChange(args: CurrentRowChangedHandlerArgs) {
    const refreshBtn = document.getElementById("BZSubSegmentValues55_topBarrefresh");

    if (refreshBtn) {
        refreshBtn.click();
    }
}



This event is triggered after every row change and will automatically call the grid’s refresh action.

    2 replies

    kbibelhausen
    Freshman I
    • kbibelhausen
    • Freshman I
    • March 20, 2026

    To refresh a detail grid based on master grid selection and handle button enablement, you'll need to implement row selection events and use proper view parameterization.

     

    **Core Pattern: Parameterized Detail View**

     

    Set up your detail view with parameters that reference the master grid's current row:

     

    ```csharp

    public class YourGraphExtension : PXGraphExtension

    {

    // Master view

    public PXSelect MasterRecords;

     

    // Detail view parameterized by master selection

    public PXSelect

    Where>>> DetailRecords;

    }

    ```

     

    **Auto-refresh on Row Selection**

     

    Override the master grid's row selection event to trigger detail refresh:

     

    ```csharp

    protected virtual void MasterDAC_RowSelected(PXCache sender, PXRowSelectedEventArgs e)

    {

    var row = e.Row as MasterDAC;

    if (row == null) return;

     

    // Force detail view refresh

    DetailRecords.Cache.Clear();

    DetailRecords.View.RequestRefresh();

     

    // Handle conditional button enablement

    MyAction.SetEnabled(row.SomeCondition == true);

    }

    ```

     

    **Alternative: Using RowSelecting Event**

     

    For more control over when the detail data loads:

     

    ```csharp

    protected virtual void DetailDAC_RowSelecting(PXCache sender, PXRowSelectingEventArgs e)

    {

    // Custom logic to filter/modify detail records based on master selection

    }

    ```

     

    **For Modern UI Compatibility**

     

    If experiencing issues with Modern UI grid refresh, ensure your detail view uses proper BQL parameterization with `Current<>` rather than relying on ASPX-specific refresh mechanisms. The framework should handle the refresh automatically when the parameter changes.

     

    **Button Enablement Pattern**

     

    ```csharp

    public PXAction MyAction;

     

    [PXButton(CommitChanges = true)]

    [PXUIField(DisplayName = "My Action")]

    protected virtual IEnumerable myAction(PXAdapter adapter)

    {

    // Action logic

    return adapter.Get();

    }

    ```

     

    The key is using parameterized BQL queries that automatically refresh when the master selection changes, combined with proper event handlers for UI state management.

     

    ---

    Drafted by AcuDev (AI) · Reviewed by Kevin Bibelhausen, Studio B

    AcuOps — AI-powered environment management for Acumatica · b.studio

    A
    Freshman III
    • art34
    • Freshman III
    • Answer
    • March 20, 2026

    Hi Marat jan,
     

    In Modern UI, the popup panel split container does not always work correctly. In such cases, you can handle the CustomEventType.CurrentRowChanged event to refresh the data.

    Within this event, you should retrieve the refresh button element by its ID and trigger the click() action. This ensures that the grid is refreshed every time the current row changes.

    Here is an example:

    @handleEvent(CustomEventType.CurrentRowChanged, { view: 'ViewName' })
    onViewNameChange(args: CurrentRowChangedHandlerArgs) {
        const refreshBtn = document.getElementById("BZSubSegmentValues55_topBarrefresh");

        if (refreshBtn) {
            refreshBtn.click();
        }
    }



    This event is triggered after every row change and will automatically call the grid’s refresh action.

      Terms & ConditionsCookie settingsAccessibility statement
      About Acumatica ERP system
      Acumatica Cloud ERP provides the best business management solution for transforming your company to thrive in the new digital economy. Built on a future-proof platform with open architecture for rapid integrations, scalability, and ease of use, Acumatica delivers unparalleled value to small and midmarket organizations. Connected Business. Delivered.
      © 2008 — 2024  Acumatica, Inc. All rights reserved