function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jugbeer BholaJugbeer Bhola 

Parent component with multiple children of same component

I have a parent component that has several child checkbox components on the page. When a primary checkbox is unchecked, I would like a minor checkbox set to be unchecked.   Not all the other checkbox sets.  Just one.

I cannot seem to get a handle on a single specific entity since they all have the same name.

let thisCheckbox = this.template.querySelectorAll('c-ampafb-multi-select-checkbox');

I get the following back from the above statement.  Do not know what to do with it.

"[{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":23,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":24,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":25,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":26,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":27,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":28,\"$$HostElementKey$$\":15},{\"$$ShadowTokenKey$$\":\"c-ampafbHouseholdMoreAbout_ampafbHouseholdMoreAbout\",\"$$ShadowedNodeKey$$\":29,\"$$HostElementKey$$\":15}]"

Each child component is assigned a unique dataId so I thought I could call a child method like this and pass the dataID.

PARENT COMPONENT

this.template.querySelector('c-ampafb-multi-select-checkbox')
                        .clearAllCheckboxes(this.c4_childDataId);


CHILD COMPONENT

@api clearAllCheckboxes(dataId) {
    let checkBoxes = this.template.querySelectorAll('[data-id=' + dataId + ']');
**** checkboxes is null.        
}

Could someone please offer some suggestions?

Thanks
 
Best Answer chosen by Jugbeer Bhola
Jugbeer BholaJugbeer Bhola
This is what had to be done to solve the unchecking of the boxes in the child component when there was really no direct interaction happening with it on the UI.

Find all the child components with the same name.  That returns an array of Proxies.  A unique variable on the child component had to be found.   The proxy had the variable called inDataId.  When found, the specific child component method was called on the child.

****PARENT COMPONENT METHOD

clearChildCheckboxes(dataId) {

        const childComponent = this.template.querySelectorAll('c-ampafb-multi-select-checkbox');

        for (var i = 0; i < childComponent.length; i++) {

            let target = childComponent[i].inDataId;

            if (target == dataId) {

                childComponent[i].clearAllCheckboxes(dataId);

                break;

            }

        }

    }



The establishment of the specific proxy must allow the child component to recognize its uniqueness.

When the child method was called it still needed to find the specific checkboxes on the component with the querySelectorAll()  


****CHILD COMPONENT METHOD


@api clearAllCheckboxes(dataId) {

        let checkBoxes = this.template.querySelectorAll('[data-id=' + dataId + ']');

        for (let i = 0; i < checkBoxes.length; i++) {

            checkBoxes[i].checked = false;

            checkBoxes[i].disabled = false;

        }

    }

There may be a better way but no one answered the question. If someone has a more elegant way please post. 

Thanks