Readonly records

dan@19ideas.com

I know this has been asked before, but the solutions that I've seen hasn't helped me much, as the solutions only solved part of the problem.

I'm trying to make certain records read-only based on data selected. This would solve a huge design overhead if I can get this to work. If I select a specific record, I need the Edit button and Delete buttons to be disabled. I don't want to override any of the default functionality that's already in there.

This is what I have so far:

{
    text: 'Edit',
    action: function (e, dt, node, config) {
                   _editor.edit(_table.rows('.selected', { select: true }),
                            {
                                title: 'Edit entry',
                                buttons: 'Update',
                            }
                        );
                    }
  }

And this is how I enable and disable:

        _table.on('user-select', function (e, dt, type, cell, originalEvent) {
            var row = dt.row(cell.index().row);

            if (row.data().Condition) {
                if (row.data().Condition == "Design") {
                    //  e.preventDefault();
                    _table.button(1).disable();  //this works because the Edit is customed
                    _table.button(3).disable();  //this doesn't work because Delete isn't customed yet
                } else {
                    _table.button(1).enable();
                    _table.button(3).enable();
                }
            }
        });

But doing this removes the functionality of checking whether or not there are any selected values, so the Edit button is always enabled. I also need to disable the Delete button, but I really don't know much about how to create a custom Delete button that will allow me to disable or enable.

Can you help me provide default functionality for Edit and Delete buttons, while allowing me to disable and enable them appropriately based on records selected?

Also, is it possible to add a new feature for locking records, or creating read-only record, so that specific buttons would reflect on that?

allan

What I would suggest here is that you override the default init function for your edit button to add a check in to see if the selected row can enable the button or not. e.g.

{
  extend: 'editSingle',
  editor: editor,
  init: function ( dt, node, config ) {
    dt.on( 'select', function () {
      if ( dt.rows( { selected: true } ).count() === 1 && dt.row( { selected: true } ).data() !!! logic check !!! ) {
        that.enable();
      }
      else {
        that.disable();
    } );
  } );
}

Note I've simplified it a bit over the default code in the Select library since that needs to handle a lot more cases, also you'll need to fill in whatever the logic condition you want for enabling the button where I've put the !!! above.

Also, is it possible to add a new feature for locking records, or creating read-only record, so that specific buttons would reflect on that?

Locking would require server-side interaction to ensure that multiple users can edit the same row at the same time. That is possible, but it is outside the scope of what Editor attempts to provide out of the box. Read only records can be achieved with the above.

Allan

dan@19ideas.com

Thank you Allan, I copied most of what you did, and this solved my problem:

            if (vm.buttonList.indexOf('edit') > -1) {
                buttonsArray.push({
                    extend: 'editSingle',
                    editor: _editor,
                    init: function (dt, node, config) {
                        this.disable();
                        dt.on('select deselect', function () {
                            if (dt.rows({ selected: true }).count() === 1 && dt.row({ selected: true }).data()) {
                                if (dt.row({ selected: true }).data().Condition) {
                                    if (dt.row({ selected: true }).data().Condition == "Design") {
                                        //  e.preventDefault();
                                        this.disable();
                                    } else {
                                        this.enable();
                                    }
                                } else {
                                    this.enable();
                                }
                            }
                            else {
                                this.disable();
                            }
                        }.bind(this));
                    }
                });

The same code worked for the remove button as well.

As far as locked records go, it would be very useful in the long run to create attributes that mark records.. some examples would be as locked (unselectable), read-only (non-editable), editable (if by default the table is read only), important (rows moved to the top and can't be sorted).. etc etc.. or anything meta related, and customize buttons/selections in accordance to that. One big reason why is because I tried to make a library as agnostic as I can, datatables being reusableable based on parameters being passed in, as I used 3 datatables on a page all pointing to the same function. Adding dependent business logic to the code removes me from that pattern, overriding default core functionality with init just does jive well with me.

Anyways.. as far as the question goes, you answered it perfectly. Thanks.

allan

Thanks for the feedback - completely see where you are coming from.

At the moment, I think the user-select event might be the best option for this. it is cancellable, and since it is a callback event handler you can run any logic test you want for it. That would allow you to disallow selection of rows, based on some logic condition from the data in that row.

Of course the downside to that is that the end user wouldn't know why they weren't allowed to select that row. Perhaps using a colour tint or showing a selection checkbox on the rows they were allowed to select would resolve that.

Allan

mkucic

Problem with this example is it does not work as shown. Common problem in the forums. After looking at the select code you need to add var that = this outside the dt.on. The below worked for me and hopefully saves other debug time

init: function ( dt, node, config ) {
  var that = this;
  dt.on( 'select', function () {
    if ( dt.rows( { selected: true } ).count() === 1 && dt.row( { selected: true } ).data().project_count==0) {
      that.enable();
    }
    else {
      that.disable();
    }
  });
},