Does select overrule disabled buttons?

cha59 · January 2020

Hi
I want to have two users of my datatable, read-only users and administrators. So a user has either 0 (read-only) or 1 in var admin. The page loaded is editable, so I want to disable the buttons, that are used for create, edit, duplicate and delete. I've tried class, name and index for controlling the buttons, but it seems, that I can only controle the first of my buttons. When I select a row it seems to me, that select overrules the disabled buttons, so that button index 1, 2 and 3 gets enabled.

Has anyone got an idea to why this is?

buttons: [       
        { extend: 'create', text: 'Opret', editor: editor},
        { extend: 'edit', text: 'Rediger', editor: editor },
        { extend: "selected", text: 'Kopier',
                action: function ( e, dt, node, config ) {
                    // Start in edit mode, and then change to create
                    editor
                        .edit( table.rows( {selected: true} ).indexes(), {
                            title: 'Kopier fag',
                            buttons: 'Opret'
                        } )
                        .mode( 'create' );
                }
            },
        { extend: 'remove', text: 'Slet', editor: editor},
        { extend:'pageLength', text: 'Vis'},
        { extend: 'collection', text: 'Eksporter',
            buttons: [
                'copy',
                'excel',
                'csv',
                'pdf',
                'print'
            ]
        },
        { extend: 'colvisGroup', text: '- efterår',// koden, der skjuler efterårs ugerne
          hide: [ 11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33 ] //efterårskollonner
          },
        { extend: 'colvisGroup', text: '+ efterår', show: [ 11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33]}, //alle uger i efteråret
    ],//lukker button

(................. the if sentence is inside a onInitComplete function...........)

if ( admin = 0 )
                { table.buttons([0, 1, 2, 3]).disable();
                console.log(admin);
                 };

I hope someone has an idea. This is the last part I need to change between editable and read-only.

Claus

kthorngren · January 2020

What you have sets the initial state. Haven't tried it but you may be able to use the same code in the select event to force the disable each time the row is selected. Let us know if this works.

Kevin

cha59 · January 2020

Hi Kevin
I'm not sure I understand. The original page is the editable one with all the buttons as you see in my code. I have not added enabled og disabled to them. The code for select:

select: {
            style:    'os',
            selector: 'td.select-checkbox',//select er sammen med fluebens kolonne
            blurable: true
            },

I use a select box for select. I have inline editing also.
Do you mean that I should have the if sentence in my select too?

Claus

kthorngren · January 2020

Don't add or updated anything in the initialization code. Use the select event function to do the same thing you have in initComplete. For example:

table.on( 'select', function ( e, dt, type, indexes ) {
    if ( admin = 0 )
        { table.buttons([0, 1, 2, 3]).disable();
          console.log(admin);
        };
} );

Kevin

cha59 · January 2020

Hi Kevin
Thank you for your proposal. I put your code in. On loading it disables the 0 button as it should following my code. Index 1,2 and 3 are disabled because no row is selected. So this is no different from before.

On select of a row it's only button 0 that stays disabled. So no change.
Claus

kthorngren · January 2020

Didn't catch this initially but your if statement isn't correct. if ( admin = 0 ) is an assignment statement not an equality statement. It should be either if ( admin == 0 ) or better if ( admin === 0 ). Here is a working example:
http://live.datatables.net/guwafemu/31/edit

Kevin

cha59 · January 2020

Hi Kevin
Yes, one "=" is an assignment - my mistake.
Thanks for your help. It works in bin, I can see.
Tried your code in my code, but it still only works for button 0. My select is a check-box, while the select in your bin is only "select: true,", so maybe the problem lies in the extra code concerning the check-box. I am still working on it to find a solution.
Thanks for your help.
Claus

kthorngren · January 2020

The use of the select checkbox shouldn't matter. It is still going to fire the select event. Is admin a global variable? Do you see output from console.log(admin); in the select event?

I updated the test case with the select checkbox to show it works:
http://live.datatables.net/guwafemu/34/edit

Can you update the test case to better reflect your environment to try replicating the problem? Maybe you have something in a different order that is not working.

Kevin

cha59 · January 2020

Hi Keven
Thanks a lot for your example.
Instead of trying to make my most complicatede datatable to work in to versions, I have shifted to the most simpel one I have. When this works, I can incorporate it in the more complex.

I have deleted my old JS and taken a copy of your JS and put it into my own page instead.Then piece for piece adopted it for my own data, but I get this warning:Uncaught TypeError: "Cannot read property 'on' of undefined"
I've checked again and again for differences between this page that makes this error, and my other pages, that doesn't pull this alarm but with little luck.

All in all I might go with a less elegant plan B, which is to have one initialization for administrator and one for read-only. I will delete the buttons I'am trying to disable in the read-only version. I have made a simpel version, and it works. It's not as elegant but seems bulletproof.

Again thans for your patience and help.

Claus

kthorngren · January 2020

Then piece for piece adopted it for my own data, but I get this warning:Uncaught TypeError: "Cannot read property 'on' of undefined"

Is this in initComplete? If so it may be that the table variable is not ready as the Datatable is still initializing. You will then need to use this.api() like my example. Otherwise post you code and let us know if the error happens during initialization or after selecting a row.

All in all I might go with a less elegant plan B

Instead of using two different initialization codes you could use a variable to contain the buttons init options and assign that in the single initialization code. This would make maintaining the other Datatables options much easier - one place.

Example pseudo code:

var buttons = [{button1}, {button2},.....];  // Non admin set of buttons
if (admin === 1) {
  buttons = [{create}, {edit},.....}];   // Admin set of buttons
}

var table = $('myTable').DataTable({
  dom: ....,
  .....
  buttons: buttons,
  .....
});

Kevin

cha59 · January 2020

Hi Kevin
Thanks for your proposal. For the time being I'm living with a bit of double maintenance, because I also have to shut down for inline edit and check-boxes. I haven't got the time right now to make it better and more elegant.
But thanks again.
Claus

Does select overrule disabled buttons?

Does select overrule disabled buttons?

Answers

Howdy, Stranger!

Categories

DataTables

Does select overrule disabled buttons?

Does select overrule disabled buttons?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables