1

I want to call a javascript function from the icon in the first column. I had it working with the checkbox that comes out of the box but a checkbox doesn't make sense for an edit function. In my saColumns definition, I added the first column and want it to call the js function below

js:

   const saColumns = [
        {
            type: 'button-icon',
            fixedWidth: 40,
            typeAttributes: {
                iconName: 'utility:edit',
                name: 'edit_record',
                title: 'Edit',
                variant: 'bare',
                alternativeText: 'edit',
                disabled: false
            }
        },
        {label: 'Title', fieldName: 'Title__c', type: 'pickList'},
        {label: 'User', fieldName: 'UserName', Id: 'User__c',type: 'text'}
    ];

handleRowSelection(event) {
    //alert('1');
    const selectedRows = event.detail.selectedRows;
    this.selectedSAIds = [];
    this.showTable = false;

    for (let i = 0; i < selectedRows.length; i++) {
        this.selectedSAIds.push(selectedRows[i].Id);
    }
}

html:

        <template if:true={hasSAs}>
            <lightning-datatable
                    data={datatableSAs}
                    columns={saColumns}
                    key-field="Id"
                    onrowselection={handleRowSelection}
                    hide-checkbox-column="true"
                    selected-rows={selectedSAIds}>
            </lightning-datatable>
        </template>

enter image description here I have not been able to find a way to call the handleRowSelection. Any direction would be appreciated!

2

This is basically a row action rather than row selection. So, it should be onrowaction and NOT onrowselection. And below is how you can handle row action:

handleRowAction(event) {
    var action = event.detail.action;
    var row = event.detail.row;
    switch (action.name) {
        case 'edit_record':
            this.editRecord(row.Id); // implement this
            break;
        default:
            this.navigateToFiles(row.Id);
            break;
    }
}
3

You need to use a row-level action here. Add the name to typeAttriibute of the edit column

{
    type: 'button-icon',
    fixedWidth: 40,
    typeAttributes: {
        iconName: 'utility:edit',
        name: 'edit_record',
        title: 'Edit',
        variant: 'bare',
        alternativeText: 'edit',
        disabled: false,
        name: 'edit' /// this will be useful to identify the 'edit' action.
    }
},

And add row action handler to the datatable.

handleRowAction(event) {
    if (event.detail.action.name === 'edit') {
        let row = event.detail.row;
        // do edit logic here.
    } // you can handle other actions as well here 
}

Add the handleRowAction to data table in HTML like below.

<template if:true={hasSAs}>
    <lightning-datatable
            data={datatableSAs}
            columns={saColumns}
            key-field="Id"
            onrowselection={handleRowSelection}
            hide-checkbox-column="true"
            onrowaction={handleRowAction}
            selected-rows={selectedSAIds}>
    </lightning-datatable>
</template>

Documentation | Similar Playground Example

0

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.