Hi Team
I have created dropdownlist, but i want to find a way to create it within the dataTable not aside to allow user to select within the DataTable not outside but i am struggling to do this.
What I have tried:
<pre>
public enum Attendees
{
Engineers,
Technicians,
Inspectors
}
View 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>