m trying to implement a bootstrap dropdown on button click in a specific column of ngGrid http://angular-ui.github.io/ng-grid/ but couldnt display the dropdown.
P.S. : i have tried making the overflow visible for cells
javascript code:
var app = angular.module('myApp', ['ngGrid','ui.bootstrap']);
app.controller('MyCtrl', function($scope) {
$scope.editableInPopup = '<div class="btn-group" dropdown dropdown-append-to-body>'+
'<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>'+
' Drop<span class="caret"></span>'+
'</button>'+
'<ul class="dropdown-menu" role="menu">'+
'<li><a href="#">Action</a></li>'+
'<li><a href="#">Another action</a></li>'+
'<li><a href="#">Something else here</a></li>'+
'<li class="divider"></li>'+
'<li><a href="#">Separated link</a></li>'+
'</ul>'+
'</div>'
$scope.edit = function edit(row){
console.log("Here I need to know which button was selected " + row.entity.name)
}
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData',
columnDefs: [{field:'name', displayName:'Name'}, {field:'age', displayName:'Age',editableCellTemplate:self.editableCellTempate ,enableCellEdit:true},
{displayName:'Pop up',cellTemplate:$scope.editableInPopup}]};
});
