How do I make certain rows non-editable?

How do I make certain rows non-editable?

burncharburnchar Posts: 118Questions: 12Answers: 0
edited October 2012 in Editor
Is there a simple way to make certain rows non-editable?

Replies

  • girishmrgirishmr Posts: 137Questions: 0Answers: 0
    Assuming this question is regarding DataTables only and not about editor plugin...

    Depends on how you are applying your edit controls ?.

    Are you making the whole row clickable or a particular TD clickable?
    Add a class and set disabled attribute to the edit control.

    May be there is a better way?
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    > Depends on how you are applying your edit controls ?.

    Also depends upon how you are using Editor :-).

    1. If you have inline controls such as this example: http://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html - then its relatively simple, you just don't call the `edit` method on the rows you don't want to be editable.

    2. If you have the more regular TableTools buttons, you need to modify the `fnClick` option for the edit button, so it will either call the `edit` method, or not, depending on whatever your condition is in the row.

    The normal `fnClick` method for TableTools looks like this:

    [code]
    "fnClick": function( nButton, oConfig ) {
    var selected = this.fnGetSelected();
    if ( selected.length !== 1 ) {
    return;
    }

    oConfig.editor.edit( selected[0], oConfig.formTitle, oConfig.formButtons );
    }
    [/code]

    So you just need a condition there.

    3. A final option is to use TableTools 'pre-row-selection' options, whereby you can reject a row from being selected: http://datatables.net/extras/tabletools/initialisation#fnPreRowSelect

    Allan
  • burncharburnchar Posts: 118Questions: 12Answers: 0
    edited November 2012
    Thank you once again for your amazing support, Allan!

    Quick note: the documented fnPreRowSelect example didn't work and may be out of date (though I am no jQuery expert).

    Documentation, didn't work (no targetNode object):
    [code]if ( e.targetNode.className.indexOf('no_select') != -1 )[/code]

    Worked for me:
    [code]if(e.target.parentNode.className.indexOf('no_select') != -1) [/code]


    Code I ended up with (with unrelated code trimmed) for future readers:
    [code]
    DataTableObject = $('#yourtable').dataTable({
    "oTableTools": {
    "sRowSelect": "multi",
    "aButtons": [
    { "sExtends": "editor_create", "editor": editor },
    { "sExtends": "editor_edit", "editor": editor },
    { "sExtends": "editor_remove", "editor": editor }
    ],

    "fnPreRowSelect": function (e) {
    var allowEdit = true;
    if(e.target.parentNode.className.indexOf('readonly') != -1) {
    allowEdit = false;
    }
    return allowEdit;
    }
    },

    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
    var noEditFlag = (aData.myColumnIndicatingNonEditableStatus == 'T');
    if(noEditFlag) {
    $(nRow).addClass("readonly");
    }

    return nRow;
    }
    }
    [/code]

    Note that if you simulate row selections in certain ways, like using back/next buttons in the following docs example:

    http://editor.datatables.net/release/DataTables/extras/Editor/examples/back-next.html
    ... That your fnPreRowSelect function will be called with an undefined event. In this case, simply ignore undefined events:

    [code]
    "fnPreRowSelect": function (e) {
    var allowEdit = true;
    if(e != undefined && e.target.parentNode.className.indexOf('readonly') != -1) {
    allowEdit = false;
    }
    return allowEdit;
    }
    [/code]
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Absolutely correct - the example in the documentation was wrong. Rather than `targetNode` (which didn't exist), it should have used `currentTarget` - which I've updated now. Thanks of rate heads up!

    Allan
This discussion has been closed.