Click here to Skip to main content
14,454,989 members
Rate this:
Please Sign up or sign in to vote.
See more:
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> // Drop downlist for WhoAttended. Model class objects

    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>
Posted
Updated 14-Feb-20 3:24am

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Use the render option on the relevant column to override how the column is displayed.
"columns":[
    ...
    {
        "data": "WhoAttend",
        "name": "WhoAttend",
        "render": function(value){
            return $("<select/>")
                .addClass("form-control")
                .attr("name", "WhoAttend")
                .append($("<option/>").text("Engineers"))
                .append($("<option/>").text("Inspectors"))
                .append($("<option/>").text("Technicians"))
                .val(value)
                .html();
        }
    }
    ...
]
columns.render[^]

If you want an easier way to generate the HTML, you can use a templating engine like Handlebars.js[^] to create a template for your column.
   
Comments
gcogco10 14-Feb-20 8:33am
   
This can be done on Ajax side on my View mate?
Richard Deeming 14-Feb-20 8:35am
   
Possibly. But it's a UI concern, so it really should be handled in the view.
gcogco10 14-Feb-20 8:36am
   
shot thanks let me do it.
gcogco10 14-Feb-20 8:51am
   
last question Richard, must all columns be before or after ajax call function, mine its after ajax call and yet its not loading, i see some errors when inspect on the browser. please assist here.
Richard Deeming 14-Feb-20 8:53am
   
It doesn't matter whether the columns property appears before or after the ajax property.

If you want help to fix the errors, you'll need to post the full details of the errors.
gcogco10 14-Feb-20 9:07am
   
You see i did put the columns, but they do not show within the DataTable and no error shown when i inspect. Could this perhaps i have few records from the DataTable?
Richard Deeming 14-Feb-20 9:30am
   
If there are no errors and no records, then something else is going wrong. Can you see the XHR / AJAX request in the network requests? Does it return any data?
gcogco10 14-Feb-20 9:34am
   
downloadable font: OS/2: Bad sTypoLineGap, setting it to 0: -32 (font-family: "Dropdown" style:normal weight:400 stretch:100 src index:0) source: data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAA … AG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=
Richard Deeming 14-Feb-20 9:35am
   
No, you're looking for the XHR request to your /Dashboard/GetData action.
gcogco10 14-Feb-20 9:47am
   
XHR request does come with status 200 with data response only data with records not one i just implemented.
gcogco10 17-Feb-20 3:45am
   
Richard kindly assist, the column to get render you doing this inside the existing column or override new one below? Mine doesnt work well and getting this error. 92 TypeError: n[m] is undefined
Richard Deeming 17-Feb-20 13:37pm
   
n[m] is undefined - Trying to use the non-basic JSON format. — DataTables forums[^]

Sounds like you have a mismatch between the number of <th> elements and the number of items in your columns array.
gcogco10 18-Feb-20 0:22am
   
Ok i fix that Richard, but i am still stuck not getting this select option to work. My logic is there and even if i troubleshoot no errors at all.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100