Как сделать dropdownlist из datatable?

---

Привет Команда

Я создал dropdownlist, но я хочу найти способ создать его внутри dataTable не в стороне, чтобы позволить пользователю выбирать внутри DataTable не снаружи, но я изо всех сил пытаюсь это сделать.

Что я уже пробовал:

<pre> // Drop downlist for WhoAttended. Model class objects

    public enum Attendees
    {
        Engineers,
        Technicians,
        Inspectors
    }

Просмотр cshtml

@using ContentManagementSystem.Models

@model EventsManagementTb
@Html.DropDownListFor(w=>w.WhoAttend, new SelectList(Enum.GetValues(typeof(Attendees))),
    
               "EventsManagementsTable" )

@{
    ViewBag.Title = "EventManagement List";
}
<hr />
<hr />
<hr />
<h2>EventManagement List</h2>
<table id="EventsManagementsTable" class="ui celled table" style="width:100%">
  

    <thead>
        <tr>
           
            <th>TrainingType</th>
            <th>TrainingDescription</th>
            <th>Price</th>
            <th>Venue</th>
            <th>Facilitator</th>
            <th>WhoAttend</th>
            <th>RSVP</th>
        </tr>
    </thead>
  

</table>
<!---DropDownlist for Who Attend-->
<select class="form-control" id="EventsManagementsTable" name="EventsManagementsTable">
<option>Engineers</option>
<option>Inspectors</option>
<option>Technicians</option>
</select>

<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.semanticui.min.css" rel="stylesheet" />

@section scripts{

      <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.semanticui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>

    <script>

        $(document).ready(function () {

            $("#EventsManagementsTable").DataTable({

                "columnDefs": [
                { "width": "5%", "targets": [0] }, 
                { "className": "text-center custom-middle-align" ,"targets":[0, 1, 2, 3, 4, 5, 6] },
                ],
            
                "serverSide": "true",
                "order":[0,"asc"], 
                "processing": "true",
                "language": {
                    "processing": "processing...... please wait"
                },
                "ajax": {
                    "url": "/Dashboard/GetData",
                    "type": "POST",
                    "datatype": "JSON"
                    
                },
                "columns": [
                    {"data": "TrainingType", "name": "TrainingType"},
                    { "data": "TrainingDescription", "name": "TrainingDescription"},
                    { "data": "Price", "name": "Price"},
                    { "data": "Venue", "name": "Venue"},
                    { "data": "Facilitator", "name":"Facilitator" },
                    { "data": "WhoAttend", "name" : "WhoAttend" },
                    {"data": "RSVP", "name":"RSVP" },
                ]
                

            });

        });

   




    </script>

---