LWC tree grid not rendering the data

Question

tempdata in consoleHi iam creating an lwc component for tree grid view i have get the data from my controller but it is not rendering into the user interface.

My js code

import { LightningElement, track,wire,api} from 'lwc';
import getDomainsList from "@salesforce/apex/DataDomainTreeViewController.getDomainsList";

export default class Datadomaintreeview extends LightningElement {
dataDomainsval;
error;
@track expandedRows = [];
@track gridColumns = [{
    type:'url',
    fieldName:'name',
    label:'Data Domain Name',
    typeAttributes: {label: { fieldName: 'name' }, target: '_blank'}
}];


@track gridData;
@track gridData2;


connectedCallback(){
    //var tempDomains = JSON.parse(JSON.stringify([{"Id":"a1b04000000tEQgAAM","Name":"Shared Services","Data_Domains__r":[{"Parent_Data_Domain__c":"a1b04000000tEQgAAM","Id":"a1b04000000tERPAA2","Name":"Human Resources","Data_Domains__r":[{"Parent_Data_Domain__c":"a1b04000000tERPAA2","Id":"a1b04000000tERyAAM","Name":"Employee Data"}]},{"Parent_Data_Domain__c":"a1b04000000tEQgAAM","Id":"a1b04000000tER1AAM","Name":"Manufacturing"},{"Parent_Data_Domain__c":"a1b04000000tEQgAAM","Id":"a1b04000000tEQnAAM","Name":"Finance"},{"Parent_Data_Domain__c":"a1b04000000tEQgAAM","Id":"a1b04000000tEQUAA2","Name":"Supply Chain"}]}]));
    getDomainsList().then(result =>{
        var tempDomains = [];
        for(var i=0;i<result.length;i++){
            if(result[i]?.Parent_Data_Domain__c == undefined){
                console.log('this is the root list',result[i]);
               tempDomains = JSON.parse(JSON.stringify(result[i]));
               var arr = [];
               for(let j in tempDomains){
                console.log('>>>>>>>>>>>>>',tempDomains);
                         console.log('this is the result',result);
                    var newDomain = tempDomains.Data_Domains__r;
                    delete tempDomains.Data_Domains__r;
                    if(newDomain){
                        for(let x in newDomain){
                            console.log('every new domain value',newDomain[x]);
                            tempDomains._children = newDomain[x];
                        }
                    }
                }
                
            }
        }
        tempDomains = '['+JSON.stringify(tempDomains)+']';
        console.log('temp json static data',this.data2);
        console.log('my dasta',tempDomains);
        console.log('type of both STAT',JSON.stringify(this.data2));
        console.log('type of both SDYN',JSON.stringify(tempDomains));
        // var obj = JSON.parse(json.stringify(tempDomains));
        // console.log('temp data',obj);
        this.gridData= tempDomains;
    })
     
}}

My html code

<template>
<lightning-card title = "Data Domains">
    <lightning-tree-grid
    columns = {gridColumns}
    max-column-width="1500"
    data={gridData}
    key-field="name"
    hide-checkbox-column></lightning-tree-grid>
    </lightning-card>
</template>

My handler class code

public class DataDomainTreeViewController {
@AuraEnabled
public static List<Data_Domain__c> getDomainsList(){
    List<Data_Domain__c> domainList = [SELECT id,Name,Parent_Data_Domain__c,(SELECT ID,Name FROM Data_Domains__r) FROM Data_Domain__c];
    if(!domainList.isEmpty()){
        return domainList;
    }
    return null;
    
}}

i need to show the tree view which is the top most parent on the top and its child in tree view can anyone help me on this tree view is like this

score 0 · Answer 1 · answered Jul 27 '22 at 07:40

0

...
tempDomains = '['+JSON.stringify(tempDomains)+']';
this.gridData= tempDomains;

You are passing a string value to gridData. Take a look at the documentation example, specifically the sampleData.js file. data should be a list of objects, by the looks of your code you are passing a string to it.

answered Jul 27 '22 at 07:40

David Rubin

196
6

thanks for the reply i tried `tempDomains = '['+JSON.stringify(tempDomains)+']';` removing this line that is converting to string format but still the issue is not resolved – Prasanna Kumar Jul 27 '22 at 14:00
Can you provide an example of how your `gridData` (or `tempDomains`) looks? You can censor data, I am interested in the structure – David Rubin Jul 27 '22 at 18:15
[https://i.stack.imgur.com/XztOL.png]tempData is printing in the console like this – Prasanna Kumar Jul 28 '22 at 04:40
Could you try making it an array instead of an object? `gridData = [ tempDomains ]`. Make sure `_children` is an array as well. Again I would like to point out the [example](https://developer.salesforce.com/docs/component-library/bundle/lightning-tree-grid/example) – David Rubin Jul 29 '22 at 10:22

LWC tree grid not rendering the data

1 Answers1