TableSorter embedded dropdowlist

TableSorter embedded dropdowlist

HTML Generated:
 

<th>

<div class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Options <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="/units/Edit" id="186c2de7-9328-4d92-8061-4e0b4cc97b28">Edit</a></li><li><a href="/units/Details" id="186c2de7-9328-4d92-8061-4e0b4cc97b28">Details</a></li><li class="divider"></li><li><a href="/units/Delete" id="186c2de7-9328-4d92-8061-4e0b4cc97b28">Delete</a></li></ul></div> </th>

 
 
Code:

<tbody>

@foreach (var item in Model)

{

<tr>

<th>

@Html.DisplayFor(modelItem => item.Code)

</th>

<th>

@Html.DisplayFor(modelItem => item.Description)

</th>

<th>

@Html.DisplayFor(modelItem => item.MultQty)

</th>

<th>

@Html.DisplayFor(modelItem => item.ModifiedBy)

</th>

<th>

@Html.DisplayFor(modelItem => item.ModifedDateTime)

</th>

<th>

@Html.DisplayFor(modelItem => item.CreatedBy)

</th>

<th>

@Html.DisplayFor(modelItem => item.CreatedDateTime)

</th>

<th>

@Html.DisplayFor(modelItem => item.Active)

</th>

<th>

@using (var dropDown = Html.Bootstrap().Begin(new DropDown("Options")))

{

@dropDown.ActionLink("Edit", "Edit").HtmlAttributes(new { id = item.UnitID })

@dropDown.ActionLink("Details", "Details").HtmlAttributes(new { id = item.UnitID })

dropDown.Divider();

@dropDown.ActionLink("Delete", "Delete").HtmlAttributes(new { id = item.UnitID })

}

</th>

</tr>

}

</ tbody >
 
The problem is when added I can not select the dropdown or anything the dropdown shows up ok but no functionality.