In this course, we will learn to filter the sub grid dynamically with JavaScript. Before we start, make sure to subscribe to CRM Crate so that you stay up-to-date in the field of Microsoft Dynamics 365 CRM.

Why do we need to dynamically filter the sub-grid?

By the term “Dynamic”, we mean to filter the sub grid based on the field value in real time. For example, in our scenario we will filter the sub grid to display the data according to the value in the field Primary Mobile Number. If the field Primary Mobile Number is empty then we will filter the record “eBook Workflow” and if the field Primary Mobile Number is not empty then we will filter the record “eBook Plugin” in the Payload Account subgrid.

JavaScript code to filter the sub-grid dynamically

• Utilize the below JavaScript snippet code to filter the sub grid dynamically (Note: – This is an unsupported code) –

function SubGridFilterExecution(executionContext) {

    //Create a Form Context.
    var formContext = executionContext.getFormContext();

    //Step 1 - Get the subgrid control.
    var gridContext = formContext.getControl("PayloadAccount");

    //Step 2 - Retrieving Form Attribute Value.
    var PrimaryPhoneNumber = formContext.getAttribute("cc_primarymobilenumber").getValue();

    //Step 3 - Recall the execution method if the subgrid context is null or empty.
    if (gridContext == null) {
        setTimeout(SubGridFilterExecution, 3000);
        return;
    }
    else {

        //Set grid with query A based fetch XML.
        if (PrimaryPhoneNumber != null) {

            //Step 4 - Build a fetch XML in a variable.
            var FetchXmlA = "<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false'>" +
                "<entity name='cc_payloadaccount'>" +
                "<attribute name='cc_payloadaccountid' />" +
                "<attribute name='cc_name' />" +
                "<attribute name='createdon' />" +
                "<order attribute='cc_name' descending='false' />" +
                "<filter type='and'>" +
                "<condition attribute='cc_name' operator='eq' value='eBook Plugin' />" +
                "</filter>" +
                "</entity>" +
                "</fetch>";

            //Step 5 - Update The Subrid Context
            gridContext.setFilterXml(FetchXmlA);

            //Step 6 - Refresh grid to show filtered records only. 
            formContext.getControl("PayloadAccount").refresh();
        }

        //Set grid with query B based fetch XML.
        else {

            //Step 4 - Build a fetch XML in a variable.
            var FetchXmlB = "<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false'>" +
                "<entity name='cc_payloadaccount'>" +
                "<attribute name='cc_payloadaccountid' />" +
                "<attribute name='cc_name' />" +
                "<attribute name='createdon' />" +
                "<order attribute='cc_name' descending='false' />" +
                "<filter type='and'>" +
                "<condition attribute='cc_name' operator='eq' value='eBook Workflow' />" +
                "</filter>" +
                "</entity>" +
                "</fetch>";

            //Step 5 - Update The Subrid Context
            gridContext.setFilterXml(FetchXmlB);

            //Step 6 - Refresh grid to show filtered records only. 
            formContext.getControl("PayloadAccount").refresh();
        }
    }
}

• Code Explanation –

A. We have used two separate fetch XML queries in the above code example. The Query A will display the record with name “eBook Plugin” and the Query B will display the record with name “eBook Workflow”.
B. Step 1 – Obtain the sub-grid context using the getControl client API reference.

C. Step 2- Retrieve the field value from the form.

D. Step 3 – Recall the main execution method if the sub-grid context is null. Due to improper page loading, the grid context can be null in some scenarios. Therefore, we need to recall the method till we get the sub-grid context.

E. Step 4 – Create a fetchXML query in a variable.

F. Step 5 – Use the setFilterXml property to dynamically set the fetchXML in the sub-grid context.

G. Step 6 – Refresh the sub-grid so that the new filter gets populated in the sub-grid frontend UI.

• Call the above JavaScript function in the “Tab Change” event of the form where the particular sub-grid is present.

Validate the code in Dynamics 365 CRM

In our scenario, we will validate the changes in the CRM Crate Account form as shown below.

• Filtering sub-grid when the Primary Mobile Number” is empty –

• Filtering sub-grid when the Primary Mobile Number” is not empty –

Thus, we learned to filter the sub-grid dynamically in Microsoft Dynamics 365 CRM using the JavaScript.