How to display data from 2 soql query in a single pageblock

Question

Below is a scenario that i need to create -

The column from Product to Treatment Unit Price are the fields from Product2. Column from Service to Width are the fields from Object WorkOrderItem__c.

WorkOrderItem__c is a related list to Product2. The requirement is i need to display product fields which i am able to do.

The problem which i am facing is if there is no WorkOrderItem__c under a Product2, Service__c, Quantity__c, Length__c, Width__c field should show blank.

Can anyone let me know how to form the soql query so that i can display product2 fields but if there no WorkOrderItem__c under product2 , i can show the fields as blank.

 String qryString = 'SELECT Id,name,family,Measurement_Type__c,Cleaning_Unit_Price__c,Treatment_Unit_Price__c,(select Service__c,Quantity__c,Length__c,Width__c from work_order_items__R) FROM product2 WHERE ' +

            '(Family like \'%' + selectedproductfamily + '%\')';

Answer 1

Let's assume that you have query:

accounts = [SELECT Id, Name, (select name from contacts) FROM Account limit 10]

Now you can display your parent object in pageBlockTable and its children in apex:repeat component:

<apex:pageBlockTable value="{!accounts}" var="account">
    <apex:column value="{!account.Name}"/>
    <apex:column headerValue="Status">
        <select onchange="myFunction(this)">
            <apex:repeat value="{!account.contacts}" var="con">
                <option value="{!con.id}">{!con.name}</option>
            </apex:repeat>
        </select>
    </apex:column>
</apex:pageBlockTable>

And then you can pass your id in JS:

<script>
function myFunction(param) {
    console.log(param.value);
}
</script>