How to bind a Dropdownlist to new row in webgrid?

Question

Is it possible to provide dropdownlist in the new row added to WebGrid? I tried adding this

'<td >@Html.DropDownList("Team", (IEnumerable<SelectListItem>)ViewBag.Teams, "")</td>'

and it says

Uncaught SyntaxError: Invalid or unexpected token at <td ><select id="Team" name="Team"><option value=""></option>.

Code:

var row = '<tr class="webgrid-row-style">'+
          '<td class="col3Width"><input type="text" id="Date" value=""     class="edit-mode date-picker" /></td>' +
          '<td >@Html.DropDownList("Team", (IEnumerable<SelectListItem>)ViewBag.Teams, "")</td>' +
          '<td ><span><input type="text" id="Name" value="" class="edit-mode /></span></td>' +
          '<td ><span><input type="text" id="Category" value="" class="edit-mode/></span></td>' +
          '<td ><span><input type="text" id="Received_Count" value="" class="edit-mode" /></span></td>' +
          '<td ><span><input type="text" id="Done_Count" value="" class="edit-mode" /></span></td>' +
          '<td ><button class="add-item edit-mode">Add</button>&nbsp;<button class="remove-item edit-mode">Cancel</button></td>' +
          '</tr>';

$('table tbody:last').append(row);

Error:

Answer 1

When you use @Html.DropDownList in a javascript string like

'<td >@Html.DropDownList("Team", (IEnumerable<SelectListItem>)ViewBag.Teams, "")</td>'

it generates a string in multiple lines like below

'<td ><select id="Team" name="Team"><option value=""></option>
 <option>Sukantha</option>
 <option>Shruti</option>
 <option>Shilpa</option>
 <option>Sachin</option>
 <option>Ramya</option>
 <option>Nishmitha</option>
 <option>Mahesh</option>
 </select></td>'

which is invalid, hence you got the error.

As a workaround, try to place the @Html.DropDownList inside a hidden div somewhere in your view

<div id="divTeams" style="display: none;">
    @Html.DropDownList("Team", (IEnumerable<SelectListItem>)ViewBag.Teams, "")
</div>

then get the generated string using $('#divTeams').html()

var row = '<tr class="webgrid-row-style">'+
          '<td class="col3Width"><input type="text" id="Date" value=""     class="edit-mode date-picker" /></td>' +
          '<td >' + $('#divTeams').html() + '</td>' +
          '<td ><span><input type="text" id="Name" value="" class="edit-mode /></span></td>' +
          '<td ><span><input type="text" id="Category" value="" class="edit-mode/></span></td>' +
          '<td ><span><input type="text" id="Received_Count" value="" class="edit-mode" /></span></td>' +
          '<td ><span><input type="text" id="Done_Count" value="" class="edit-mode" /></span></td>' +
          '<td ><button class="add-item edit-mode">Add</button>&nbsp;<button class="remove-item edit-mode">Cancel</button></td>' +
          '</tr>';

$('table tbody:last').append(row);