Header Dropdown in ui-grid AngularJS

Question

I am trying to get dropdown values in header for one of the field in ui-grid. For the same field I have the dropdown for every row working fine. Based on the header dropdown selection every dropdown values in rows should be selected. Here is my plunker link. Can someone help please?

Here's a link!

var jsonDef = { name: 'Status', field: 'Status', width: 150, 
editType: 'dropdown', 
editableCellTemplate: 'ui-grid/dropdownEditor', 
headerCellTemplate: '<div class="ui-grid-cell-contents header-tcsi"><select 
ng-required = "true" ng-options="options.id as options.type for tcsiOption 
in grid.appScope.MainCtrl" ng-model="grid.appScope.selectedTCSI"></select> 
</div>',
editDropdownIdLabel: 'id', 
editDropdownValueLabel: 'type',
filter: { 
type: uiGridConstants.filter.SELECT, 
condition: uiGridConstants.filter.EXACT } 
};

var options = [{
id: 1,
type: 'Closed'
}, {
id: 2,
type: 'Pending'
}, {
id: 3,
type: 'Open'
}];

I am trying to assign the selected header value to the every row value(the dropdown values will be the same for header and rows). — krunal.cp
– krunal.cp, Commented Apr 10, 2017 at 17:11

Guranjan Singh · Accepted Answer · 2017-04-10 20:51:44Z

1

You were using the ng-options incorrectly. If you want to access something from the appScope you have to the attach it to the controller $scope. Then you can change your template where you use the options like so:

 headerCellTemplate: '<div class="ui-grid-cell-contents header-Status"><select ng-required = "true" ng-options="options.id as options.type for options in grid.appScope.dropdownoptions" ng-change= "grid.appScope.selectionChanged()"ng-model="grid.appScope.selectedStatus"></select> </div>'

Pay attention to ng-options:

ng-options="options.id as options.type for options in grid.appScope.dropdownoptions"

The way you've written your code, you need to listen to when the dropdown changes and then update the values in the grid. Check the Updated Plnkr for the working example.

answered Apr 10, 2017 at 20:51

Guranjan Singh

7442 gold badges7 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

krunal.cp Over a year ago

HI Guranjan, for some reason I have to post a question from another account. here a link for that. Can you please help me with some dropdown display things and filter please? stackoverflow.com/questions/43924161/…

Collectives™ on Stack Overflow

Header Dropdown in ui-grid AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related