I'd like to provide a button with a drop down menu as part of the table to give the user a list of actions to take for a particular entry.

I've got it all set to run except there is a z indexing issue where the menu is clipped by the row...

I;ve tried applying varying positioning and zindex values to parent items, but I can't seem to find how to get the menu to appear always on top.

This is all done use bootstrap styles.  I pretty much a novice with bootstrap, css and ignite ui.

any help would be appreciated:

Here is the script being generate as part of the asp.net mvc view, the importent bit is the last column's template:

<script type="text/javascript">

var hiddenColumns = [];

function showHideGroupedColumns(groupBy) {
for (var i = 0; i < hiddenColumns.length; i++) {
if (!groupBy.checkColumnIsGrouped(hiddenColumns[i])) {
groupBy.grid.showColumn(hiddenColumns[i]);
delete hiddenColumns[i];
}
}

for (var i = 0; i < groupBy.options.groupedColumns.length; i++) {
groupBy.grid.hideColumn(groupBy.options.groupedColumns[i].key);
hiddenColumns.push(groupBy.options.groupedColumns[i].key);
}
}

$(document).ready(function () {
$('#grid').igGrid(
{
dataSource: '/TrackManagement/GetUsers',
autoGenerateColumns: false,
autoGenerateLayouts: false,
mergeUnboundColumns: false,
responseDataKey: 'Records',
generateCompactJSONResponse: false,
enableUTCDates: true,
columns: [
{ key: 'AccountType', dataType: 'string', headerText: 'Acct' },
{ key: 'FirstName', dataType: 'string', headerText: 'First Name' },
{ key: 'LastName', dataType: 'string', headerText: 'Last Name' },
{ key: 'Id', dataType: 'string', headerText: 'Email' },
{ key: 'PhoneNumber', dataType: 'string', headerText: 'Phone' },
{ key: 'SubscriptionExpiration', dataType: 'date', headerText: 'End Date' },
{
headerText: "",
key: "Id",
dataType: "string",
template:
"<div class=\"btn-group\" style=\"z-index: 1001\">" +
" <button type=\"button\" " +
" data-toggle=\"dropdown\" " +
" class=\"btn btn-default btn-xs dropdown-toggle\" style=\"z-index: 1001\">" +
" Action <span class=\"caret\"></span></button>" +
" <ul class=\"dropdown-menu\" >" +
" <li><a href=\"./TrackManagement/EmailUser?id =${Id}\">Send email</a></li>" +
" <li><a href=\"./TrackManagement/Details?id =${Id}\">Details...</a></li>" +
" <li><a href=\"./TrackManagement/UserActivity?Id =${Id}\">Activity...</a></li>" +
" <li class=\"divider\"></li>" +
" <li><a href=\"./TrackManagement/ResetPwd?Id =${Id}\">Reset password...</a></li>" +
" </ul>" +
"</div>",
width: '150px'
}
],
features: [
{
name: 'Sorting',
type: 'remote',
sortUrlKey: 'sort',
sortUrlKeyAscValue: 'asc',
sortUrlKeyDescValue: 'desc',
columnSettings: [
{ columnkey: 'LastName', currentSortDirection: 'asc' }
]
},
{ filterExprUrlKey: 'filter', filterLogicUrlKey: 'filterLogic', name: 'Filtering', type: 'remote' },
{
name: 'GroupBy', resultResponseKey: 'GroupBy',
columnSettings: [{ columnKey: 'AccountType', isGroupBy: true }],
groupedColumnsChanged: function (evt, ui) { showHideGroupedColumns(ui.owner); },
groupByUrlKey: 'sort',
groupByUrlKeyAscValue: 'asc',
groupByUrlKeyDescValue: 'desc',
initialExpand: false
}],
rowsRendered: function (evt, ui) { showHideGroupedColumns(ui.owner.element.data("igGridGroupBy")); },
width: '100%',
localSchemaTransform: false
});
});
</script>