Angularjs: UI-Grid dynamic dropdown for each row

Question

I am using 'ui-grid/dropdownEditor' for one of my column and I want to dynamically load the drop down options which is unique for each row. I want to load the drop down options dynamically on demand via async http call.

I tried the following without success,

$scope.gridOptions = {
columnDefs: [
     { field: 'priority',
displayName: 'Priority',
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownIdLabel: 'id',
editDropdownValueLabel: 'name',
    },
]}

onRegisterApi: function(gridApi) {
        gridApi.edit.on.beginCellEdit($scope, function(rowEntity, colDef) {
            if (colDef.field === "priority") {
                localServices.getPriorityById(rowEntity.id).then(function(data) {
                     colDef.editDropdownOptionsArray = data;
                });
            }
        });

Any suggestion or help to achieve this is appreciated.

Mike · Accepted Answer · 2019-11-01 17:16:37Z

2

You should look into the usage of editDropdownRowEntityOptionsArrayPath instead of editDropdownOptionsArray

editDropdownRowEntityOptionsArrayPath can be used as an alternative to editDropdownOptionsArray when the contents of the dropdown depend on the entity backing the row.

Here is a link to tutorial

edited Nov 1, 2019 at 17:16

Mike

1,6573 gold badges14 silver badges21 bronze badges

answered Jun 23, 2016 at 14:31

Pratik Bhat

7,7642 gold badges41 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

Angularjs: UI-Grid dynamic dropdown for each row

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related