4

I would like add functionality to the Lightning Tree Grid component.

Starting with a base component of:

import LightningTreeGrid from 'lightning/treeGrid';

export default class CustomTreeGrid extends LightningTreeGrid {}

And referencing the component as

<c-custom-tree-grid
    data={data}
    columns={columns}
    key-field="Id"
    expanded-rows={currentExpanded}
    onrowaction={handleRowAction}
    selected-rows={selectedRows}
    hide-checkbox-column="true"
></c-custom-tree-grid>

I would expect this to render a normal Tree Grid, but instead nothing is rendered at all. Walking through the component life cycle tells me that all the attributes are being correctly set, and the constructor on the actual LightningTreeGrid is being called properly.

The one oddity I noticed is that the rendered CustomTreeGrid javascript's template function is blank.

(function() {
    const {$A, aura, Sfdc, sforce} = {};

    return function (lwc, LightningTreeGrid) {

        function tmpl($api, $cmp, $slotset, $ctx) {
        return [];
        }

        var _tmpl = lwc.registerTemplate(tmpl);
        tmpl.stylesheets = [];
        tmpl.stylesheetTokens = {
        hostAttribute: "c-customTreeGrid_customTreeGrid-host",
        shadowAttribute: "c-customTreeGrid_customTreeGrid"
        };

        class CustomTreeGrid extends LightningTreeGrid {}

        var customTreeGrid = lwc.registerComponent(CustomTreeGrid, {
        tmpl: _tmpl
        });

        return customTreeGrid;

    }

}())

Here is a playground demonstrating the issue.

1
  • Hello @SethBoyd it seems that your playground is correct, I have working example in my project, where I extend RadioGroup, but it doesn't work in Playground. Did you try your option without .HTML file in real project?
    – ytiq
    Jul 14, 2020 at 16:01

2 Answers 2

2

I am not a Javascript wizard but will try to answer what I noticed.

You are extending LightningTreeGrid as

export default class CustomTreeGrid extends LightningTreeGrid {}

This only extends the Javascript of LightningTreeGrid, but does not extends the markup. Now this means you can access all methods and attributes of LightningTreeGrid class in CustomTreeGrid .

Now in your LWC component CustomTreeGrid the html markup is blank, thus it does not know you intend to build a lightning-tree-grid . It only means you intend to use JS method from LightningTreeGrid

Solution: Add markup of lightning-tree-grid in CustomTreeGrid html.

CustomTreeGrid.html :

<template>
    <lightning-tree-grid                   
                columns={columns}
                data={data}               
                key-field={keyField}
            ></lightning-tree-grid>
</template>

CustomTreeGrid.js :

import LightningTreeGrid from 'lightning/treeGrid';
import { LightningElement, track, api } from 'lwc';

export default class CustomTreeGrid extends LightningTreeGrid {
    @api data;
    @api columns;
    @api keyField;

}

Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/Dulcc42an/3/edit

4
1

As per the documentation https://developer.salesforce.com/docs/component-library/bundle/lightning:treeGrid/documentation, I can't see if lightning has exported treeGrid likewise LightningDataTable. Thanks

You must log in to answer this question.

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