Power Platform Community Forum Thread Details

Editable Grid filtering?

I am trying to add an editable grid to a page on my portal.

The page displays a record (RecordA) that is associated to the logged-in user. (The user can have multiple entries of RecordA associated to them, but they are only looking at one at a time.) The record has multiple related child records (RecordB) that I want the user to be able to edit.

In a model-driven app I know I can simply use the Editable Grid component on the form for RecordA, and select "related records," so on the RecordA form a list of RecordB items will show up, and the user can click any element in the view to edit it.

When I tried to put a similar form on my portal, the grid was not editable. Instead, I followed this tutorial to create a view with a PCF control: https://kunaltripathy.com/2023/05/12/power-pages-and-editable-grids-pcf-controls-in-portals/ I added a reference to that view on the web page for RecordA. When that page loads, an editable grid does appear - but it shows *all* of the RecordB entries associated to the logged-in user, not just the ones with RecordA as their parent.

I tried to add an on-load event to the editable grid, the same way you can for a normal list in Power Pages (https://learn.microsoft.com/en-us/power-pages/configure/add-custom-javascript-list), but none of the elements I tried seemed to have an on-load trigger.

How can I filter this editable grid to only show the records related to the parent record on the web page?

Categories:

Customize & extend

@DianePana

You're very close to the right solution—Power Pages (formerly Power Apps Portals) doesn't support editable grids natively like model-driven apps do, so using a PCF control is the right approach. The issue you're facing—filtering the editable grid to only show child records (RecordB) related to the current RecordA—is a common challenge.

Here are a few ways to solve this:

Option 1: Use a Web Role + Web Page Filter (Recommended if feasible)

If each RecordA has a unique URL (e.g., /recorda?id=GUID), you can:

Pass the RecordA ID in the URL.
Create a custom view of RecordB that includes a filter on the parent RecordA (e.g., RecordA (lookup) = [RecordA ID]).
Use JavaScript to dynamically update the view’s filter using the ID from the query string.

However, Power Pages lists don’t support dynamic filters out of the box, so you’ll need to use a PCF control that supports filtering via JavaScript or query parameters.

Option 2: Modify the PCF Control to Accept a Filter

If you're using a PCF control like the one in Kunal Tripathy’s tutorial, check if it supports:

Input parameters (e.g., a RecordAId passed from the page).
Filtering logic inside the control based on that parameter.

If not, you may need to extend the PCF control to accept a parameter and apply a filter to the dataset.

Option 3: Use Liquid + JavaScript to Filter the Grid

You can inject the current RecordA ID into the page using Liquid:

{% assign recordAId = request.params['id'] %}

var recordAId = "{{ recordAId }}";

</script>

Then, in your PCF control or grid initialization script, use that recordAId to filter the data source (if the control supports it).

Why `on-load` Events Don’t Work

The on-load event for Power Pages lists only works with standard lists, not with PCF controls. PCF controls have their own lifecycle and don’t expose the same DOM events.

Alternative: Use a Custom Web API + FetchXML

If you're comfortable with development, you can:

Create a custom Web API that returns RecordB entries filtered by RecordA.
Use JavaScript to call the API and render the results in a custom grid (or pass them to the PCF control).

🏷️ Tag me if you have any further questions or if the issue persists.

✅ Click "Accept as Solution" if my post helped resolve your issue—it helps others facing similar problems.

❤️ Give it a Like if you found the approach useful in any way.

Quick Links

Subscribe to this forum!