CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvc
StackTrace
StackTrace

Reputation: 9416

How to copy or insert dropdownlist to html table column

function DisplayADSearchResults(result) {
        var table = "<table id='myTable'>" +
        "<tr>" +
        "<th style='width:20px;'>&nbsp;</th>" +
        "<th style='width:100px;'><b>First Name</b></th>" +
        "<th style='width:100px;'><b>Last Name</b></th>" +
        "<th style='width:200px;'><b>Email</b></th>" +
        "<th style='width:200px;'><b>Login Name</b></th>" +
        "<th style='width:200px;'><b>Role</b></th>" +
        "</tr>";
    for (var counter = 0; counter < result.length; counter++) {
        var chkId = 'chkUserSearch' + counter;
        var fId = 'fUserSearch' + counter;
        var lId = 'lUserSearch' + counter;
        var eId = 'eUserSearch' + counter;
        var unid = 'unUserSearch' + counter;

            var myData = "<tr>" +
            "<td><input type='checkbox' id='" + chkId + "' /></td>" +
            "<td id='" + fId + "' class='searchFirstName'>" + result[counter].FirstName + "</td>" +
            "<td id='" + lId + "' class='searchLastName'>" + result[counter].LastName + "</td>" +
            "<td id='" + eId + "' class='searchEmail'>" + result[counter].EmailAddress + "</td>" +
            "<td id='" + unid + "' class='searchUn'>" + result[counter].LoginName + "</td>" +
            "<td id='" + unid + "' class='searchUn'>" + ddlStaffCategory + "</td>" + //i want do display my "ddlStaffCategory" drop dropdownlist in this column. 
            "</tr>";
        table += myData;
    }
    table += "</table>";}

I have the above function that am using to dynamically create an html table from the results of a search. In my razor view, i have a dropdownlist that is already created and populated with values.

Does any one know how i can display that dropdownlist in the last column of my table above for each row?

Below is the dropdownlist source.

@Html.DropDownList("ddlStaffCategory", new SelectList(ViewBag.CategoryList as System.Collections.IEnumerable, "Value", "Text"), new { @class = "form-control form-control-dropdown-medium" })

UPDATE

I have tried @ADyson's suggestion like below (last 2 columns) but that just prints the html as plain text not as an dropdownlist control

var searchData = "<tr>" +
            "<td><input type='checkbox' id='" + chkId + "' /></td>" +
            "<td id='" + dId + "' class='searchDomain'>" + userDomain + "</td>" +
            "<td id='" + fId + "' class='searchFirstName'>" + result[counter].FirstName + "</td>" +
            "<td id='" + lId + "' class='searchLastName'>" + result[counter].LastName + "</td>" +
            "<td id='" + eId + "' class='searchEmail'>" + result[counter].EmailAddress + "</td>" +
            "<td id='" + unid + "' class='searchUn'>" + result[counter].LoginName + "</td>" +
            "<td id='" + unid + "' class='searchUn'>" + "@Html.DropDownList(\"ddlStaffCategory\", new SelectList(ViewBag.CategoryList as System.Collections.IEnumerable, \"Value\", \"Text\"), new { @class = \"form-control form-control-dropdown-medium\"})" + "</td>" +
            "<td>@Html.DropDownList(\"ddlStaffCategory\", new SelectList(ViewBag.CategoryList as System.Collections.IEnumerable, \"Value\", \"Text\"), new { @class = \"form-control form-control-dropdown-medium\"})</td>" +
            "</tr>";

Upvotes: 0

Views: 213

Answers (1)

A.LeBreton
A.LeBreton

Reputation: 85

@Html.DropDownList(...) just generates something like :

<select id="SelectId" name="SelectName">
    <option value="Opt1">Option 1</option>
    <option value="Opt2">Option2</option>
    ...
</select>

Put your razor helper inside a <td></td> and you should be fine

var myData =
    "<tr>" +
    "<td><input type='checkbox' id='" + chkId + "' /></td>" +
    "<td id='" + fId + "' class='searchFirstName'>" + result[counter].FirstName + "</td>" +
    "<td id='" + lId + "' class='searchLastName'>" + result[counter].LastName + "</td>" +
    "<td id='" + eId + "' class='searchEmail'>" + result[counter].EmailAddress + "</td>" +
    "<td id='" + unid + "' class='searchUn'>" + result[counter].LoginName + "</td>" +
    "<td id='" + unid + "' class='searchUn'>@Html.DropDownList("ddlStaffCategory", new SelectList(ViewBag.CategoryList as System.Collections.IEnumerable, "Value", "Text"), new { @class = "form-control form-control-dropdown-medium" })</td>" +
    "</tr>";

Upvotes: 1

Related Questions