CODEWITHSUNDEEP
javascriptjqueryangularjsng-grid
Simon
Simon

Reputation: 1476

how to create a menu within an ng-grid

we are really having problems finding a way on how to create a menu within an ng-grid. Something similar to the ECB block within share point.

So, there would be a button that when clicked would show options for that particular row.

We may be looking in the wrong places, but we can't find any help or examples on the internet..

Upvotes: 0

Views: 297

Answers (2)

mainguy
mainguy

Reputation: 8331

As I told you few days ago you should use row and celltemplates to achieve something like this.

Here is the changed code to better match the current state of your question:

    $scope.gridOptions = {
    data: 'myData',
    rowTemplate: '<div   ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex() }" ' +
      'ng-repeat="col in renderedColumns" ng-class="col.colIndex()" ' +
      'class="ngCell {{col.cellClass}}" ng-cell></div>' +
      '<div ng-show="showmenu" class="hmenu">' +
      '<ul>' +
      '<li><button ng-click="viewme(row.entity.name)">View</button></li>' +
      '<li><button ng-click="editme(row.entity.name)">Edit</button></li>' +
      '</ul>' +
      '</div>',
    columnDefs: [{
      field: 'name',
      displayName: 'Name'
    }, {
      field: 'age',
      displayName: 'Age',
      cellTemplate: '<div class="ngCellText">{{row.getProperty(col.field)}}' +
        '<span  ng-click="$parent.showmenu=!$parent.showmenu"><button>click me</button></span>' +
        '</div>'
    }]
    };

True, this is no beauty, but it shows you how to go on. Do your styling in style.css and the row template. This is the best I can do with my weekend laptop.

Here is the Plunker

Upvotes: 1

robert.bo.roth
robert.bo.roth

Reputation: 1343

You could potentially set each CellTemplate to have its own ng-if/ng-show block that's hidden/shown based on a variable on your row.entity object. Then, when your function fires for the selection of the row, you can set that variable ($scope.whatever) to hide/show what's necessary. On my phone at the moment, but I'll try to make a plnkr/jsfiddle later.

Upvotes: 0

Related Questions