0

I have a requirement where I have implemented the lightning-dataTable with the custom-dataType column checkbox.

Table Screenshot

As you can see in the screenshot, I have a requirement where

  1. onCheck of the parent row(in dark-grey background) all the child rows should be selected,
  2. if any child is unselected then the parent rows should be unselected, and so on...

My Component structure is as follows :

//customCheckbox component - customCheckbox.html - customCheckbox.js

//customDataTypes component extending lightning-datatable - customCheckboxRender.html - customDataTypes.html - customDataTypes.js

//parent component - parent.html - parent.js

Oncheck of the checkbox, I am not able to read the other checkboxes columns, customCheckbox.html is as follows :

c-custom-checkbox is rendered

I have tried the following and all are showing null, kindly refer the screenshot

1.this.template.querySelectorAll('lightning-input[data-id="a3i1y000000HLeQAAW"]') is giving null 2.this.template.querySelectorAll('[data-id="a3i1y000000HLeQAAW"]') is giving null 3.this.template.querySelectorAll('lightning-input').length is giving 0.

Can any one help me read the individual checkbox with the data-id attribute, inorder to make it checked==true or disabled or checked==false.

trying to access individual checkbox

1
  • Is this table inside another table ? can you explain me implementation of parent and child rows if you have links could you please share here ? @tamanna
    – Sudarshan
    Commented Feb 16 at 15:14

1 Answer 1

0

As you mentioned, you created a separate customCheckbox component, the actual id of the checkbox is located there.

But you're trying to read the checkbox id from the parent component (the one that extending lightning-datatable). It's not possible to do so due to shadow dom.

In order to get the id of the child customCheckbox component, at first you have to query the checkbox component from the parent datatable component:

const childComponent = this.template.querySelector("c-custom-checkbox");
// then call a method of the child component that will return it's id
childComponent.getId();

In the customCheckbox it's necessary to define an @api method that will return actual checkbox id, something like this:

export default class CustomCheckbox extends LightningElement {
    @api getId() {
        return id; // put the actual id here
    }
}
3
  • Hi Thanks, const childComponent = this.template.querySelector("c-custom-checkbox") returns me null in the connected callback and i dont have any other event on customDataTypes cmp
    – tamanna
    Commented Jul 1, 2022 at 14:26
  • @tamanna yes, it might happen because the component hasn't finished the rendering phase. Try to use renderedCallback() instead of connected callback. Find more info here: salesforce.stackexchange.com/questions/313806/….
    – DrWebber
    Commented Jul 1, 2022 at 14:33
  • Hi Sir, its null in renderedCallback() also. Let me tell you the flow, onLoad of ParentCmp, the customCheckbox is not loaded yet, we have a button on ParentCmp, on click of that button, we load the entireTable and the checkbox column from customCheckbox. So what should be the event on the customDataTypes which extends lightning-datatable(middle parent component), both connected and rendered callback fail. Kindly let me know if we can connect at [email protected]
    – tamanna
    Commented Jul 1, 2022 at 15:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .