Self Parent Tree Grid in Lightning Web Component Salesforce | LWC Stack ☁️⚡️

Kapil March 19, 2022

 In this blog I will show you how you may create a self parent Tree Grid ! 

If you are following my blogs than few weeks back I have created a video on Tree Grid in which Account was the parent and Contacts was the child.

You may check that post below as well - 

https://www.salesforcebolt.com/2021/12/tree-grid-in-lightning-web-component.html


In the self parent Tree Grid both Parent and Child comes from the same object. In this example I have created a tree grid with Account's Rating as a Parent and Accounts which belongs to that rating as Child.

Please check the code below : 

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<template>
  <lightning-card title="Tree Grid Self Parent Example">
    <lightning-tree-grid
      columns={columns}
      data={accounts}
      key-field="Id"
      hide-checkbox-column
    ></lightning-tree-grid>
  </lightning-card>
</template>


JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import { LightningElement, wire, track } from "lwc";
import getAccountList from "@salesforce/apex/AccountController.getAccList";

export default class TreeGridSelfParent extends LightningElement {
  accounts;
  error;
  @track expandedRows = [];

  @wire(getAccountList)
  wiredAccounts({ error, data }) {
    if (data) {
      let accounts = JSON.parse(JSON.stringify(data));
      let parseData = [];
      let parentId = 0;
      let parentEntity = "";

      for (let i = 0; i < accounts.length; i++) {
        let jsonData =
          '{"Id":"' +
          parentId +
          '","Name":"","Rating":"' +
          accounts[i].Rating +
          '","Phone":""}';
        if (parentId === 0) {
          parseData.push(JSON.parse(jsonData));
          parseData[parentId]._children = [];
          parseData[parentId]._children.push(accounts[i]);
          parentEntity = accounts[i].Rating;
          parentId++;
        } else {
          if (accounts[i].Rating === parentEntity) {
            parseData[parentId - 1]._children.push(accounts[i]);
          } else {
            parentEntity = accounts[i].Rating;
            parseData.push(JSON.parse(jsonData));
            parseData[parentId]._children = [];
            parseData[parentId]._children.push(accounts[i]);
            parentId++;
          }
        }
      }
      this.accounts = parseData;
    } else if (error) {
      this.error = error;
      this.accounts = undefined;
    }
  }
  constructor() {
    super();
    this.columns = [
      {
        type: "text",
        fieldName: "Rating",
        label: "Rating"
      },
      {
        type: "text",
        fieldName: "Name",
        label: "Name"
      },
      {
        type: "text",
        fieldName: "Phone",
        label: "Phone"
      },

      { type: "action", typeAttributes: { rowActions: this.getRowActions } }
    ];
  }
  get expandedRowItems() {
    return this.expandedRows;
  }
  getRowActions(row, doneCallback) {
    const actions = [];
    actions.push({
      label: "Edit",
      name: "edit"
    });
    actions.push({
      label: "Delete",
      name: "delete"
    });
    doneCallback(actions);
  }
}


Output



Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments