CODEWITHSUNDEEP
angular-ui-griddropdown
Kenny Eng
Kenny Eng

Reputation: 149

Angular UI-Grid dropdown is not capturing the changes

I'm new to angular ui-grid.

I want to implement a dropdown box for inline editing and I follow this tutorial (gender column): http://ui-grid.info/docs/#/tutorial/201_editable and I modified it by using a new cshtml page (as shown below) because I want to set the option from database instead of enter the options manually.

The code below is where I implemented the dropdown box:

name: app.localize('Roles'),
field: 'getRoleNames()',
minWidth: 160,
editableCellTemplate: '~/App/common/views/users/roleDropDownList.cshtml'

And here is the code of roleDropDownList.cshtml

<div ng-controller="common.views.users.index as vm">
    <select>
        <option ng-repeat="role in vm.roles">{{role.displayName}}</option>
    </select>
</div>

Now I'm able to choose the option but it's like not capturing the changes when I choose 1 of the options.

Here is the example: DropDown sample

As you can see in the image, the row in red color means it's dirty row (edited) but the row that I edited with dropdown is not in red color means it's not being edited and it can't be save.

Upvotes: 0

Views: 104

Answers (1)

Kenny Eng
Kenny Eng

Reputation: 149

I found a way that more easier to implement what I want.

name: app.localize('Roles'),
field: 'getRoleNames()',
minWidth: 160
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownValueLabel: 'displayName',
editDropdownIdLabel: 'displayName'

editDropdownValueLabel is to set the value of the options otherwise it will shows "undefined" as image shown below

Example of dropdown undefined options

editDropdownIdLabel is to show the value of the selected option otherwise it will shows ID as image shown below

Showed Id

The code below is to get the data from database:

vm.userGridOptions.columnDefs[3].editDropdownOptionsArray = result.data.items;

Upvotes: 1

Related Questions