How do I make certain rows non-editable?

burnchar

Is there a simple way to make certain rows non-editable?

girishmr

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?

allan

> 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

burnchar

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]

allan

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