drop down menu button in grid row

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>

Hello dcg1212,

The dropdown is not visible, due to the fact that its container is placed within the grid cell. If you want to be visible when pressing the button, it should be placed on the same level in the DOM as the grid table element and after that it should be positioned absolute against the grid cell. Instead I would suggest you to use the igCombo in a template column. I'm attaching a sample that demonstrates this for your reference. Please let me know if you have any further questions.

Regards,

Tsanna