1

I am newbie to lightning and I am having treegrid lightning component in which I have button column. My requirement is to disable or hide the button on parent record. Below are my code. I am not sure whether we can override this standard behavior.

Component

 <aura:attribute name= "buttondisable" type= "boolean" default= "true" />
 <lightning:treeGrid aura:id="abc" 
                            columns="{!v.gridColumns}" 
                            data="{!v.gridData}" 
                            keyField="Order"
                            expandedRows="{!v.gridExpandedRows}"
                            onrowaction="{! c.callview }"
                            />

Controller.js

doInit : function(component, event, helper) {
var columns = [
            {
                type: 'text',
                fieldName: 'Order',
                label: 'Order Checked',

            },
            {
                type: 'currency',
                fieldName: 'Total',
                label: 'Total'
            },
            {
                type: 'dropdown',
                fieldName: 'test',
                label: 'test'
            },
           {
                type: 'button',
               fieldName: 'test1',
                label: 'View Detail',
                    typeAttributes: {
                        iconName: '',
                        name: 'validate', 
                        title: 'View Detail',
                        label:'View Detail',
                        alternativeText:'Return',
                        variant: 'brand', 
                        disabled: component.get('v.buttondisable')
                    }
            }

        ];
         component.set('v.gridColumns', columns);
}

enter image description here I want the button to be enabled only for child records. I have created this attribute component.get('v.buttondisable') so that I tried to pass this value as false from child record but this is not working.

Any help is highly appreciated.

2

i think you need use row-based data to make if the button item is disabled or not, this should be done by your row data. before you bind your data in to aura attribute (in below example i used "isbutton") , you should bind extra field in to your data please use below tested code. i used data from here since i don't have your data set up

cmp:

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global" >
 <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="gridColumns" type="List" access="PRIVATE" />
<aura:attribute name="gridData" type="Object" access="PRIVATE" />
<aura:attribute name="gridExpandedRows" type="List" access="PRIVATE" />
<aura:attribute name="currentExpandedRows" type="String" />


<div>
    <p class="slds-m-top_medium slds-m-bottom_medium">
        <lightning:button label="Get Current Expanded Rows" onclick="{! c.getState }"></lightning:button>
        <p>Current expanded rows: {! v.currentExpandedRows }</p>
    </p>

    <lightning:treeGrid
        aura:id="treeGrid"
        columns="{! v.gridColumns }"
        data="{! v.gridData }"
        onrowaction = "{!c.handlerowaction}"
        expandedRows="{! v.gridExpandedRows }"
        keyField="name"
    />
</div>

controller.js

({
doInit: function(component, event, helper) {
     var actions = helper.getRowActions.bind(this, component);        // data
    var nestedData = [
        {
            "name": "123555",
            "accountName": "Rewis Inc",
            "employees": 3100,
            "phone": "837-555-1212",
            "accountOwner": "http://example.com/jane-doe",
            "accountOwnerName": "Jane Doe",
            "billingCity": "Phoeniz, AZ",
             "isbutton":"slds-hide",
        },

        {
            "name": "123556",
            "accountName": "Acme Corporation",
            "employees": 10000,
            "phone": "837-555-1212",
            "accountOwner": "http://example.com/john-doe",
            "accountOwnerName": "John Doe",
            "billingCity": "San Francisco, CA",
             "isbutton":"slds-hide",
            "_children": [
                {
                    "name": "123556-A",
                    "accountName": "Acme Corporation (Bay Area)",
                    "employees": 3000,
                    "phone": "837-555-1212",
                    "accountOwner": "http://example.com/john-doe",
                    "accountOwnerName": "John Doe",
                    "billingCity": "New York, NY",
                     "isbutton":"slds-show"
                }
            ]
        },
        {
            "name": "123557",
            "accountName": "Rhode Enterprises",
            "employees": 6000,
            "phone": "837-555-1212",
            "accountOwner": "http://example.com/john-doe",
            "accountOwnerName": "John Doe",
            "billingCity": "New York, NY",
            "isbutton":'slds-hide',
            "_children": [
                {
                    "name": "123557-A",
                    "accountName": "Rhode Enterprises (UCA)",
                    "employees": 2540,
                    "phone": "837-555-1212",
                    "accountOwner": "http://example.com/john-doe",
                    "accountOwnerName": "John Doe",
                    "billingCity": "New York, NY",
                    "isbutton":'slds-show'
                }
            ]
        },
        {
            "name": "123558",
            "accountName": "Tech Labs",
            "employees": 1856,
            "phone": "837-555-1212",
            "accountOwner": "http://example.com/john-doe",
            "accountOwnerName": "John Doe",
            "billingCity": "New York, NY",
             "isbutton":'slds-hide',
            "_children": [
                {
                    "name": "123558-A",
                    "accountName": "Opportunity Resources Inc",
                    "employees": 1934,
                    "phone": "837-555-1212",
                    "accountOwner": "http://example.com/john-doe",
                    "accountOwnerName": "John Doe",
                    "billingCity": "Los Angeles, CA",
                     "isbutton":'slds-show'
                }
            ]
        }
    ];

    component.set('v.gridData', nestedData);
     var expandedRows = ["123556", "123557","123558"];

    component.set('v.gridExpandedRows', expandedRows);
    component.set('v.gridColumns', [
        {
            type: 'text',
            fieldName: 'accountName',
            label: 'Account Name',
            initialWidth: 300
        },
        {
            type: 'number',
            fieldName: 'employees',
            label: 'Employees'
        },
        {
            type: 'phone',
            fieldName: 'phone',
            label: 'Phone Number'
        },
        {
            type: 'url',
            fieldName: 'accountOwner',
            label: 'Account Owner',
            typeAttributes: {
                label: { fieldName: 'accountOwnerName' }
            }
        },
        {
            type: 'text',
            fieldName: 'billingCity',
            label: 'Billing City'
        },
        {
            type: 'button',
           fieldName: 'test1',
            label: 'View Detail',
                typeAttributes: {
                    iconName: '',
                    name: 'validate', 
                    title: 'View Detail',
                    label:'View Detail',
                    alternativeText:'Return',
                    variant: 'brand', 
                    class: {fieldName: 'isbutton'}
                }
        }

    ]);
},
})

enter image description here

  • Awesome !!!!. It works great. Is there nay similar way where i Can completely remove the button on parent. – Mangoski May 13 at 18:38
  • I am also looking to remove the checkbox in parent is that do able? – Mangoski May 13 at 18:46
  • you can hide and show instead disabled & Enabled by using "class" Attribute just like add " class: {fieldName: 'isbutton'}" instead of "disabled: {fieldName: 'isbutton'}" but your data should be set up "slds-hide / slds-show" instead of true /false – sdandamud1 May 13 at 19:05
  • I believe there is no class: attribute for button. Correct me If I am wrong, It showing error when I try to put class attribute – Mangoski May 14 at 13:24
  • 1
    button had class attribute, it works for me, i updated answer with latest code and result image, please have a look – sdandamud1 May 14 at 13:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.