Datatables row by row visibility #5213

Hi,

I need to configure the visibility of some specific buttons on a row by row basis. For example, for some rows i might want an edit button to show, but not for others.

What we are doing is sending in the JSON two properties: CanBeEdited, CanBeDeleted, which i am then adding into the visibility definition of the button.

The problem is that it seems that the button will only show if ALL the rows have the visibility set for it, if one of them does not, then the button does not show.

Please see DataTables definition below:

var dataTable = _$affiliateGroupsTable.DataTable({
            paging: true,
            serverSide: true,
            processing: true,
            listAction: {
                ajaxFunction: _affiliateGroupsService.getAll,
            },
            columnDefs: [
                {
                    targets: 0,
                    data: "affiliateGroup.name"
                },
                {
                    targets: 1,
                    data: "affiliateGroup.id",
                    render(data, type, row, meta) {
                        return "http://" + window.location.hostname + "/?a=" + row.affiliateGroup.id;
                    }
                },
                {
                    width: 120,
                    targets: 2,
                    data: null,
                    orderable: false,
                    autoWidth: false,
                    defaultContent: '',
                    rowAction: {
                        cssClass: 'btn btn-brand dropdown-toggle',
                        text: '<i class="fa fa-cog"></i> ' + app.localize('Actions') + ' <span class="caret"></span>',
                        items: [
                            {
                                text: app.localize('Edit'),
                                visible: function (data) {
                                    debugger;
                                    return _permissions.edit && data.record.affiliateGroup.canBeEdited;
                                },
                                action: function (data) {
                                    _createOrEditModal.open({ id: data.record.affiliateGroup.id });
                                }
                            },
                            {
                                text: app.localize('Delete'),
                                visible: function (data) {
                                    return _permissions.delete && data.record.affiliateGroup.canBeDeleted;
                                },
                                action: function (data) {
                                    deleteAffiliateGroup(data.record.affiliateGroup);
                                }
                            },
                            {
                                text: app.localize('Configure Payouts'),
                                visible: function (data) {
                                    return _permissions.configurePayouts && data.record.affiliateGroup.canBeEdited;
                                },
                                action: function (data) {
                                    window.location.href =
                                        'AffiliateGroupItems/?group=' + data.record.affiliateGroup.id;
                                }
                            }
                        ]
                    }
                },
            ]
        });