1

I'd like to change the background color of a specific row in a tree grid, but how can I select the row?

My current attempt fails as there is never a value assigned to row.

renderedCallback() {
  const row = this.template.querySelector('[data-row-key-value="ROW_KEY"]');
  if (row) {
    console.log('row found');
    row.style.backgroundColor = 'yellow';
  }
}

Here is the template

<template>
  <div class="slds-p-around_medium">
    <template if:true={gridData}>
      <lightning-tree-grid
        columns={gridColumns}
        data={gridData}
        key-field="Id"
        is-loading={isLoading}
        hide-checkbox-column=true
        ontoggle={handleRowToggle}
        expanded-rows={currentExpanded}
        show-row-number-column=true
      >
      </lightning-tree-grid>
    </template>
  </div>
</template>
3
  • 1
    not enough info for us to help, what does your template look like? are you using a namespaced component?
    – glls
    Mar 18, 2022 at 13:12
  • @glls I've added the template. It's not namespaced.
    – Diego
    Mar 18, 2022 at 14:03
  • lightning-tree-grid is a lightning namespaced component
    – glls
    Mar 18, 2022 at 14:42

3 Answers 3

1

Shadow DOM is a standard that encapsulates the internal document object model (DOM) structure of a web component. Encapsulating the DOM gives developers the ability to share a component and protect the component from being manipulated by arbitrary HTML, CSS, and JavaScript. The internal DOM structure is called the shadow tree. The shadow tree affects how you work with CSS, events, and the DOM.

Component's DOM elements & CSS are isolated to its own, meaning you can't modify it from outside. So what you're trying to do is security feature & designed this way.

Recommended

So the straightforward & legit answer to your question is you can't do this & should roll your own tree-grid component & you can styling it the way you want. You can utilize the template provided here & add functionality to it.

SUBJECT TO CHANGE

Salesforce doesn't recommend doing it this way & is subject to change. This may fail in future SF release if they modify the internal which you targetted from the static resource. So use it on YOUR OWN RISK. The other way to style these component would be through a static resource which applies to the document level. You can write the same style in .css file upload it as static resource & load it in your lwc.

customTreeGrid.css

tr[data-row-key-value="ROW_KEY"]{
   background-color: yellow;
}

customLwc.html

<template>
  <div class="slds-p-around_medium">
    <template if:true={gridData}>
      <lightning-tree-grid
        columns={gridColumns}
        data={gridData}
        key-field="Id"
        is-loading={isLoading}
        hide-checkbox-column=true
        ontoggle={handleRowToggle}
        expanded-rows={currentExpanded}
        show-row-number-column=true
      >
      </lightning-tree-grid>
    </template>
  </div>
</template>

customLwc.js

import { loadStyle } from 'lightning/platformLoader';
import  CUSTOM_STYLES from 'lightning/resourceUrl/customTreeGrid';
export default class CustomLwc extends LightninEl....{
   isLoaded = !1;
   async renderedCallback(){
      if(!this.isLoaded){
       await loadStyle(this, CUSTOM_STYLES);
       this.isLoaded = !0;
      }
   }
 }
2

You can't peer past the Shadow DOM, so you're only allowed to style the "outside" of the component. You won't be able to affect elements inside the tree either by CSS or by JS, except as outlined in Styling Hooks. You'd need to make your own component, instead.

1

Ultimately, I decided to highlight the target row by simply selecting it. The implementation of this component already hides checkboxes from the user, so this was a very simple way to identify the row. Unfortunately, there are no styling hooks for changing the selection color, so I also added an icon.

enter image description here

// component.html
<template>
  <div class="slds-p-around_medium">
    <template if:true={gridData}>
      <lightning-tree-grid
        columns={gridColumns}
        data={gridData}
        key-field="Id"
        is-loading={isLoading}
        hide-checkbox-column=true
        ontoggle={handleRowToggle}
        expanded-rows={currentExpanded}
        show-row-number-column=true
      >
      </lightning-tree-grid>
    </template>
  </div>
</template>

// component.js (edited for brevity)
import { LightningElement, api, track } from 'lwc';
import getInitialData from '@salesforce/apex/ComponentController.getInitialData';
import getChildRecords from '@salesforce/apex/ComponentController.getChildRecords';

export default class Component extends LightningElement {
  @api recordId;
  isLoading = false;
  selectedRow = [];
  @track gridData;
  @track gridColumns = [
    {
      type: 'url',
      fieldName: 'url',
      label: 'Name',
      typeAttributes: {
        label: { fieldName: 'Name' },
        tooltip: { fieldName: 'Name' },
      },
      cellAttributes: {
        iconName: { fieldName: 'isCurrentAccount' },
        iconPosition: 'right',
        iconAlternativeText: 'Current Account',
      },
    },
    // other columns
];

  connectedCallback() {
    this.fetchRecords(this.recordId, true);
  }

  fetchRecords(parentRecordId, onLoad = false) {
    this.isLoading = true;
    this.getData(onLoad)({
      recordId: parentRecordId,
    })
    .then((serverData) => {
      if (serverData) {
        const newGridData = serverData.map(record => this.buildTreeNode(record));

        if (onLoad) {
          this.gridData = newGridData;
          this.selectedRow = [this.recordId]; // SELECT THE TARGET RECORD HERE
        } else {
          // async loading of nested records
        }

        this.isLoading = false;
      }
    })
    .catch((error) => {
      // handle errors
    });
  }

  buildTreeNode(element) {
    let record = element.record;

    // SPECIFY THE ICON VALUE HERE
    if (record.Id === this.recordId) {
      record.isCurrentAccount = 'utility:success';
    }

    // other stuff, mostly related to the nested _children

    return record;
  }

  // the rest, unrelated to this question
}

You must log in to answer this question.

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