How to make dropdownlist from the datatable?

Question

0.00/5 (No votes)

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:

C#

<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 14-Feb-20 1:54am

gcogco10

Updated 14-Feb-20 2:24am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Answer 1 · 2020-02-14T02:25:00

Solution 1

Use the render option on the relevant column to override how the column is displayed.

JavaScript

"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.

Posted 14-Feb-20 2:25am

Richard Deeming

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.