A recent situation exposed an issue that is not uncommon in the CRM experience. Specifically, a parent form does not automatically refresh when the underlying data changes. This is true for data modified by plug-ins and to some extent when items in a subgrid are added or deleted. A manufacturer delivers products to destinations throughout the country. Each shipment contains a certain number of widgets. In addition to the individual shipments we also need to track a grand total that is displayed in the parent form. Delivery line items can be added, deleted or modified. Without any intervention the total widget count generally will not update if a row is added to or deleted from the subgrid. Interestingly enough it will update if one of the rows is modified. The goal of course is to update the total widgets count in all cases. Here are some of the issues that need to be considered:
- Total widgets is recalculated each time the grid refreshes.
- The parent form must be aware of the refresh.
- Each grid row is traversed and the count column is totaled.
- All exceptions must be caught including non-numeric values and rearranged columns.
Attaching the Event
Create a Java Script web resource with an OnLoad event. Call the following method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function AddEventToGridRefresh() { // retrieve the subgrid var grid = document.getElementById(“WidgetGrid”); // if not loaded try again if (grid == null) { setTimeout( function () { AddEventToGridRefresh(); }, 1000); return; } // attach function to OnRefresh event grid.control.add_onRefresh(ReLoadForm); } |
A few things to note. The grid requires a finite time to load and setTimeout is used to retry until the grid is available. The grid element is assigned the same Id as the name of the grid on the form. This name can be found by clicking on the subgrid in the form editor and opening the Set Properties dialog. Once the grid has loaded the last step is to pass the function to be called into the “add_onRefresh” method.
Reload Method
This method does all the work. The first order of business is to once again access the grid as well as the parent field to be updated. Both must be valid to continue processing.
|
1 2 3 4 5 6 7 |
var grid = document.getElementById(“WidgetGrid”).control; var widgetsDelivered = Xrm.Page.getAttribute(“new_widgetsdelivered”); // validate existence of controls if (!widgetsDelivered || !grid) { return; } |
The next step is to read each value in the fifth column of the grid. I used the parseInt function to verify the column contained numeric values. This is a safeguard in case the view is altered.
|
1 2 3 4 5 6 7 8 |
for (var rowNo = 0; rowNo < grid.GetRecordsFromInnerGrid().length; rowNo++) { widget = parseInt(grid.GetRecordsFromInnerGrid()[rowNo][3].cells[5].outerText, 10); // if value is not numeric then the column data is invalid if (widget == NaN) { return; } widgets += widget; } |
Instead of checking for non-numeric values I would have preferred to verify that the column heading was indeed “Count.” There does not seem to be a clean way to do this. The downside is that there could be another numeric column moved into this position and the sum would be incorrect. The last step is to compare the calculated total with the displayed total and set the value if different.
Code
The complete code is displayed below. This scenario turned out to be a great exercise in bringing together several concepts including reacting to a grid refresh, traversing the grid to read values and updating the parent based upon changes in the grid.