CODEWITHSUNDEEP
angularjsbuttondrop-down-menuangular-ui-bootstrapng-grid
vedant sali
vedant sali

Reputation: 80

ui bootstrap dropdown in ngGrid

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}]};
});

plunkr: http://plnkr.co/edit/7eon4Psrol2DeVWjZPwN?p=preview

Upvotes: 0

Views: 475

Answers (1)

Rob J
Rob J

Reputation: 6629

Updating the libraries in your plunker fixed the problem, changes made:

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <link data-require="[email protected].*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>

Upvotes: 1

Related Questions