How to bind an actionLink with onClick Event to a DataTable row?

truecolor

Currently, the dataTable is populated via the server side and everything is working. But I want to add Details|Edit|Delete actionLinks when a row is clicked.

Right now I have them showing in a column at the right side, but I want the links to appear under the row of the one an user clicks on. I cannot figure out how to implement it to show onClick.

Can someone please assist me in getting them to show on click? Thank you.

var dt = $('#datatableServer').DataTable({
            "serverSide": true,
            "ajax":
            {
                "type": "POST",
                "url": "@Url.Action("DataHandler", "Department")"
                    },
                    "rowId": 'departmentID',
                    //"fnRowCallback": function (nRow, aData, iDisplayIndex) {
                    //    nRow.setAttribute('id', aData[0]);
                    //},
                    "columns":
                    [
                        {
                            "data": "Name",
                            "searchable": true
                        },
                        {
                            "data": "Budget",
                            "searchable": false
                        },
                        {
                            "data": "StartDate",
                            "searchable": false
                        },
                        {
                            "data": "Administrator",
                            "searchable": true,
                            "orderable": false
                        },
      {
// this is the Actions Column I want to show when a Datatable row is clicked, not under a "Action" column
              mRender: function (data, type, row) {
             var linkEdit = '@Html.ActionLink("Edit", "Edit", new {id= -1 })';
                                linkEdit = linkEdit.replace("-1", row.DT_RowId);

             var linkDetails = '@Html.ActionLink("Details", "Details", new {id= -1 })';
                                linkDetails = linkDetails.replace("-1", row.DT_RowId);

             var linkDelete = '@Html.ActionLink("Delete", "Delete", new {id= -1 })';
                                linkDelete = linkDelete.replace("-1", row.DT_RowId);

                   return linkDetails + " | " + linkEdit + " | " + linkDelete;
            }
         }
      ],
      "order": [0, "asc"],
      "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]]
   });


        $('#datatableServer tbody').on('click', 'tr', function () {

            console.log('clicked');
            // get the row Id 
            console.log(dt.row(this).data().DT_RowId);
        });
    }); // end of document.ready tag