DataTables eDITOR - disable edit button when certain row value is selected

rainolf · May 2014

Hello,
i just want to disable the possibility to edit certain row when some column in a selected row is identified.

Could anyone pointing me to the right way?

Thank you

allan · May 2014

You would probably need to use a custom fnClick function in TableTools: https://datatables.net/extensions/tabletools/button_options#fnClick

Allan

rainolf · May 2014

Yes...could be..

But how to retrieve row data to check if edit can be enabled or not?

i mean

Let's suppose we have a column called "Status".

"oTableTools": {
"aButtons": [
{
"sExtends": "edit",
"fnClick": function ( nButton, oConfig, oFlash ) {
if(status == "Inactive")
alert( 'you cannot modify this record );
else
"sExtends": "editor_edit", "editor": editor
}
}
]
}

Thank you

allan · May 2014

Use fnGetSelectedData.

Allan

rainolf · May 2014

Interesting.
Tried something like:

"aButtons": [
//{ "sExtends": "editor_create", "editor": editor },
{
"sExtends": "editor_edit",
"editor": editor,
"fnClick": function ( nButton, oConfig, oFlash ) {
//alert( 'Mouse click' );
var oTT = TableTools.fnGetInstance( '#meetings' );
var aData = oTT.fnGetSelectedData();
alert( aData.status );
}
},

but when clicked this error comes:

TypeError: oTT is null
var aData = oTT.fnGetSelectedData();

May i coded wrong?

Thank you

rainolf · May 2014

found a syntax error cause #meetings must be replaced to meetings withou #.
but still not able to get data..

{ "sExtends": "editor_edit", "editor": editor,
"fnClick": function () {
var oTT = TableTools.fnGetInstance( 'meetings' );
var aData = oTT.fnGetSelectedData();
alert( aData.status ); } },

this produce only an empty alert...

Thank you

rainolf · May 2014

Another possibility i'm exploring is something like:

editor
.on( 'initEdit', function (e, node, data) {
//console.log( data );
val_status = editor.val( 'status' );
if (val_status=="Active") {
alert("you cannot modify");
}
}

but how force the editor form to do not appear?

allan · May 2014

aData is an array, not an object, so it doesn't have a status property. Use console.log( aData ) and look at the browser console.

Allan

rainolf · June 2014

Hi Allan,
status is a field on my table not a property of an object.

so aData.status code would access on the status field of an array but it doesn't.

Thank you

allan · June 2014

As I say, aData is an array - since you can have more than one row selected, it must return an array. So you might use aData[0].status to access the status property of the object for the data in the first row that is selected.

Allan

rainolf · June 2014

Good, now i can access to the right value and the code is teh following:

 "aButtons": [
            //{ "sExtends": "editor_create", "editor": editor },
            {
            "sExtends": "editor_edit",
            "editor": editor,
            "fnClick": function ( nButton, oConfig, oFlash ) {
                        //alert( 'Mouse click' );
            var oTT = TableTools.fnGetInstance( 'meetings' );
            var aData = oTT.fnGetSelectedData();
            if ((aData[0].status == "Closed") || (aData[0].status == "Cancelled")) {
                alert( "You cannot modify Closed or Cancelled Meetings" );
            }
                    }
            },
            //{ "sExtends": "editor_remove", "editor": editor }
        ],

but now in case of if statement return false i need to proceed with normal editing.

How to accomplish this?

Thank you

rainolf · June 2014

Sorry to disturb you.
This is my last request cause with this part i will finish my project.

Could you please pointing me on the right way?

Thank you

allan · June 2014

You would use the edit() method to start editing the row.

Allan

rainolf · June 2014

thank you.

My code now is:

 "aButtons": [
            {
            "sExtends": "editor_edit",
            "editor": editor,
            "fnClick": function (nButton, oConfig, oFlash) {
                var oTT = TableTools.fnGetInstance( 'meetings' );
                var aData = oTT.fnGetSelectedData();
                if ((aData[0].status == "Closed") || (aData[0].status == "Cancelled")) {
                alert( "You cannot modify Closed or Cancelled Meetings" );
                return;
                }
                else {
                console.log(aData);
                alert(aData[0].DT_RowId);
                editor.edit( aData[0].DT_RowId );
                
                }
            },
            
            },
            
            //{ "sExtends": "editor_remove", "editor": editor }
        ],

but it comes me the error:

[Object { DT_RowId="row_69", meeting_name="pppp", room_number="429977", more...}]  -> this from console.log()

table.meetings.js (line 207)
TypeError: data is undefined

return data[mSource];

the alert in the else statement returns me the right value, and if i try to replace:

editor.edit( aData[0].DT_RowId );

with:

editor.edit( row_67 );

It works as expected

Why editor does not accept this value?

Thank you

allan · June 2014

As the documentation for edit() notes, the first parameter should be a row-selector. I would suggest you use the row node for that, which you can get using the fnGetSelected() TableTools method: http://datatables.net/extensions/tabletools/api

Allan

rainolf · June 2014

I've read the documentation and my code:

{
"sExtends": "editor_edit",
"editor": editor,

        "fnClick": function (nButton, oConfig, oFlash) {
            var oTT = TableTools.fnGetInstance( 'meetings' );
            var aData = oTT.fnGetSelectedData();
            if ((aData[0].status == "Closed") || (aData[0].status == "Cancelled")) {
            alert( "You cannot modify Closed or Cancelled Meetings" );
            return;
            }
            else {
            console.log(aData);
            var data = meetings.row( 0 ).data();
            //alert(aData[0].DT_RowId);
            editor.edit( aData[0].DT_RowId, {
                title: 'Edit entry',
                buttons: 'Update',
            });
            }
        },

        },

in my opinion seems to be exactly as explained.in fact if you change aData[0].DT_RowId with a real rowID (for example row_55) it works.

How in your way it should be?

Thank you

rainolf · June 2014

Finally i found a solution.

"aButtons": [
//{ "sExtends": "editor_edit", "editor": editor },

        {
        "sExtends": "editor_edit",
        "editor": editor,
        "fnClick": function (nButton, oConfig, oFlash) {
            var oTT = TableTools.fnGetInstance( 'meetings' );
            var aData = oTT.fnGetSelectedData();
            if ((aData[0].status == "Closed") || (aData[0].status == "Cancelled")) {
            console.log(aData);
            alert( "You cannot modify Closed or Cancelled Meetings" );
            return;
            }
            else {
            console.log(aData);
            //var data = meetings.row( 0 ).data();
            //alert(aData[0].DT_RowId);
            editor.edit( '#'+aData[0].DT_RowId+'', {
                title: 'Edit entry',
                buttons: 'Update',
            });
            return;
            }
        },
        },

        //{ "sExtends": "editor_remove", "editor": editor }
    ],

Probably not the best elegant way but it works.

Thanks

DataTables eDITOR - disable edit button when certain row value is selected

DataTables eDITOR - disable edit button when certain row value is selected

Replies

Howdy, Stranger!

Categories

DataTables

DataTables eDITOR - disable edit button when certain row value is selected

DataTables eDITOR - disable edit button when certain row value is selected

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables