2

I have created a datatable in lightning using a wrapper class. I have added a edit button inside the datatable to edit a particular column field from the table. Now i need the record id of the record for which i have clicked the edit button. the record id needs to be passed to controller for filtering purpose:

My table code

 var actions = [
            { label: 'Show details', name: 'show_details' },
            { label: 'Delete', name: 'delete' }
        ];
        var columns = [];
        component.set("v.columns",[
            {label: 'Outbound call number', fieldName: 'OutboundCallNumber', type: 'Auto Number', sortable: true,},
            {label: 'Target Name', fieldName: 'Targetname', type: 'Formula', sortable: true},
            {label: 'Project Name', fieldName: 'ProjectName', type: 'Formula'},
            {label: 'Call Date', fieldName: 'CallDate', type: 'date-local', sortable: true , editable:true},
            {label: 'Phone Number', fieldName: 'PhoneNumber', type: 'Formula'},
            {label: 'Completed', fieldName: 'Completed', type: 'boolean', sortable: true},
            {label: 'Assign To', fieldName: 'AssignTo', type: 'Name', sortable: true,},

             {type: "button", typeAttributes: {
                label: 'Edit',
                name: 'Edit',
                title: 'Edit',
                disabled: false,
                value: 'edit',
                iconPosition: 'left'
            }}

what are the ways from which i can fetch the recordId. i have included force:hasRecordId as well.

1 Answer 1

2

You need the handleRowAction method and then when you click on the edit button event.getParam('row') give you the row (object) that you clicked:

Here is an exemple of a handleRowAction method :

handleRowAction: function (component, event, helper) {
        var action = event.getParam('action');
        var row = event.getParam('row');
        switch (action.name) {
            case 'show_details':
                component.set('v.recordId', row.Id);
                /*component.set("v.currentView","RecordView");
                var evt = $A.get("e.c:eventShowContactClicked");
                evt.setParams({
                    "isOpen" : true
                });
                evt.fire();*/
                break;
            case 'edit':              
                component.set('v.recordId', row.Id);
                component.set("v.currentView","RecordEdit");
                var evt = $A.get("e.c:eventEditContactClicked");
                evt.setParams({
                    "isOpen" : true
                });
                evt.fire();
                break;
            case 'delete':
                /*component.set('v.recordId', row.Id);
                component.set("v.currentView","RecordDelete");
                var evt = $A.get("e.c:eventDeleteContactClicked");
                evt.setParams({
                    "isOpen" : true
                });
                evt.fire();*/

                break;
        }
    },

And in the markup:

 <lightning:datatable data="{! v.PaginationList }" class="slds-m-top_medium"
                                 columns="{! v.columns }" 
                                 keyField="id"
                                 onrowselection="{! c.getSelectedName }"
                                 hideCheckboxColumn="true"  
                                 onrowaction="{! c.handleRowAction }"
                                 showRowNumberColumn="true"/>

And Please change this code:

var actions = [
            { label: 'Show details', name: 'show_details' },
            { label: 'Delete', name: 'delete' }
        ];
        var columns = [];
        component.set("v.columns",[
            {label: 'Outbound call number', fieldName: 'OutboundCallNumber', type: 'Auto Number', sortable: true,},
            {label: 'Target Name', fieldName: 'Targetname', type: 'Formula', sortable: true},
            {label: 'Project Name', fieldName: 'ProjectName', type: 'Formula'},
            {label: 'Call Date', fieldName: 'CallDate', type: 'date-local', sortable: true , editable:true},
            {label: 'Phone Number', fieldName: 'PhoneNumber', type: 'Formula'},
            {label: 'Completed', fieldName: 'Completed', type: 'boolean', sortable: true},
            {label: 'Assign To', fieldName: 'AssignTo', type: 'Name', sortable: true,},

             {type: "button", typeAttributes: {
                label: 'Edit',
                name: 'Edit',
                title: 'Edit',
                disabled: false,
                value: 'edit',
                iconPosition: 'left'
            }}

with this code:

var actions = [
    { label: 'Show details', name: 'show_details' },
    { label: 'Edit', name: 'edit' },
    { label: 'Delete', name: 'delete' }
];
component.set("v.columns",[
    {label: 'Outbound call number', fieldName: 'OutboundCallNumber', type: 'Auto Number', sortable: true,},
    {label: 'Target Name', fieldName: 'Targetname', type: 'Formula', sortable: true},
    {label: 'Project Name', fieldName: 'ProjectName', type: 'Formula'},
    {label: 'Call Date', fieldName: 'CallDate', type: 'date-local', sortable: true , editable:true},
    {label: 'Phone Number', fieldName: 'PhoneNumber', type: 'Formula'},
    {label: 'Completed', fieldName: 'Completed', type: 'boolean', sortable: true},
    {label: 'Assign To', fieldName: 'AssignTo', type: 'Name', sortable: true,},
    {label: 'Actions', type: 'action',typeAttributes: { rowActions: actions } }}

Hope that is helpful.

Thanks

2
  • thanks a lot..... action.name was not defined for me so i added the action Edit for my edit button
    – Ankur ---
    May 27, 2019 at 9:18
  • I edited the answer, give it a look. you have to change how you add your actions button on the data table
    – dibocor
    May 27, 2019 at 9:55

You must log in to answer this question.

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