How to configure an optional row delete?

I have a table of trades, and I only want to delete a trade if there is no foreign key relationship with any other table. So if i trade is deletable I send back from the server the primary key for that trade; TradeId. If it is NOT deletable, I send instead zero. That part works.
So my datatable is defined in the following way;

<fieldset>
    <legend>Trade Maintenance</legend>
    <p>To <span style="font-weight: bold;">edit</span> a trade, double click on the trade name, edit it and press enter.</p>
    <div style="width:500px;">
        <table id="tradeList" data-server-data-source='@Url.Action("GetTrades", "DataService")'
               data-update-url='@Url.Action("UpdateTrade", "DataService")'
               data-add-url='@Url.Action("AddTrade", "DataService")'
               data-delete-url='@Url.Action("DeleteTrade", "DataService")'
               style="width:320px;float:left;">
            <thead>
                <tr>
                    <th></th>
                    <th style="width:300px;">
                        TradeName
                    </th>
                    <th style="width:20px;"></th>
                </tr>
            </thead>
            <tbody>
            
            </tbody>
        </table>
    </div>
</fieldset>
<script type="text/javascript">
    $(document).ready(function () {
        var element = $('#tradeList');

        var serverDataSource = element.attr('data-server-data-source');
        var updateUrl = element.attr('data-update-url');
        var addUrl = element.attr('data-add-url');
        var deleteUrl = element.attr('data-delete-url');

        var otable = $('#tradeList').dataTable({
            "bServerSide": true,
            "sAjaxSource": serverDataSource,
            "bProcessing": true,
            "bLengthChange": false,
            "iDisplayLength": "15",

            "bPaginate": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [
                         {
                             "sName": "ID",
                             "bSearchable": false,
                             "bSortable": false,
                             "bVisible": false
                         },
                         { "sName": "TRADENAME" },
                        {
                            "sName": "TRADEID",
                            "bSearchable": false,
                            "bSortable": false,
                            "fnRender": function (oObj) {
                                // oObj.aData[2] returns the TradeId
                                var id = oObj.aData[2];
                                if (id > "0")
                                //return "<a href='" + deleteUrl + "?id=" + oObj.aData[2] + "'>Delete</a>";
                                    return "<input type='button' value='Delete' OnClick='dataService.deleteTrade(" + id + ", reloadTable, " + deleteUrl + ")'/>";
                                else
                                    return "";
                            }
                        }
                ]
        }).makeEditable({
            sUpdateURL: updateUrl,
            sAddURL: addUrl,
            sDeleteURL: deleteUrl
        });

        function reloadTable() {
            otable.fnDraw();
        }

        $('.dataTables_filter').attr("style", "float:left");
    });

I have at least 3 problems;
1/ I used the Jeditable library for updates. So where I return an empty string instead of a delete button, I get the text; "Click to Edit appear". I do not want this column to be editable and this appears.
2/ I can't get the onclick event to work, the callback function is not recognised
3/ Probably there is a better unobtrusive way of doing this?