3

Apologies for the confusing title. So I have multi-select + ng-grid working here .

For anyone who isn't sure what the master/detail paradigm is. I select a row from my grid and expose all of its properties in some fashion for a complete view of the row from my grid (master being inside the grid, details being the object properties)

I want it to do something like this

But I cannot seem to figure out how to get this type of detail view to occur. I presume I need to have some type of emit/broadcast/on type set of events. So again the question is how do I do the master/detail view with a modal and multiple selections in angularjs + ng-grid?

Community
  • 1
  • 1
Woot4Moo
  • 23,987
  • 16
  • 94
  • 151

1 Answers1

5

I'm not exactly sure how you want to create the modal, but there are plenty of choices out there. One being the angular bootstrap modal.

That aside, in terms of getting data out of ng-grid, you can use the afterSelectionChange grid option to delegate to a function that will fire after a selection has been made.

This fork of your plunker demonstrates using afterSelectionChange.

$scope.gridOptions = { 
  data: 'myData',
  selectedItems: $scope.mySelections,
  multiSelect: true,
  afterSelectionChange: function() {

    $scope.details = $scope.mySelections;
  }
};

$scope.details = null;

You can then ng-repeat the results:

<button ng-click="show = !show">Show/Hide Details</button>
<div class="selectedItems" ng-show="show">
  You have selected:<br/><br/>
  <div ng-repeat="detail in details">
    name: {{ detail.name }}<br/>
    age: {{ detail.age }}
  </div>
</div>

I hope this helps. Let me know if there is something I missed.

EDIT:

Ok, I integrated angular bootstrap modal into this plunker.

It might also help to look at an example of the angular bootstrap modal without ng-grid. You can find that here in this modal plunker.

Davin Tryon
  • 66,517
  • 15
  • 143
  • 132
  • so what i would anticipate to happen is i would select multiple rows, for instance the first two. Then I would be able to click something that would give me a modal showing everything i have selected. – Woot4Moo Nov 11 '13 at 15:24
  • Sounds fine, should I update my plunker to show something like this? In the simple case, I would use a `button` with an `ng-click` to show. And then show the same `div`. I'll update it. – Davin Tryon Nov 11 '13 at 15:30
  • yes much closer :) . The last piece I need is for that to render inside a modal after button click. So the reasoning behind it is I want the users to know which subset of data they are using. – Woot4Moo Nov 11 '13 at 15:38
  • @Woot4Moo Alright, see the latest EDIT. I integrated angular bootstrap into the plunker. This is pretty rough, but should give you an idea of how to wire it together. – Davin Tryon Nov 11 '13 at 16:37