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

David Rubin · Accepted Answer · 2022-07-27 07:40:21Z

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, 2022 at 7:40

David Rubin

2061 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Prasanna Kumar Over a year ago

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

David Rubin Over a year ago

Can you provide an example of how your gridData (or tempDomains) looks? You can censor data, I am interested in the structure

Prasanna Kumar Over a year ago

[i.sstatic.net/XztOL.png]tempData is printing in the console like this

David Rubin Over a year ago

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

Collectives™ on Stack Overflow

LWC tree grid not rendering the data

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related