CODEWITHSUNDEEP
javascriptangularjsgridng-gridangular-ui-grid
juleekwin
juleekwin

Reputation: 531

EditableCellTemplate in ui-grid stuck in edit mode [ng-grid 3.X]

this is a slight continuation of this question.

I am working with ng-grids new release ui-grid and am having an issue with editableCellTemplate. I am using the template to show a dynamic dropdown list using ng-options for editing. This works fine, however the cell seems to get stuck in edit mode. I have seen this issue before on stack overflow in relation to older versions of ng-grid. (like this post)

Those solutions usually end up pointing out that they forgot to use ng-input="COL_FIELD" in their select.

I have tried such methods, but it does not seem to be working for ui-grid. Perhaps it's because I am using ng-options and the other examples were not? Here is a plunker of the dropdown in the grid. Notice how if you lose focus, the cell still stays in edit mode.

Has anyone came across this problem with ui-grid and conquered it? If so, any help would be greatly appreciated.

Upvotes: 1

Views: 5899

Answers (2)

mainguy
mainguy

Reputation: 8331

Here is a little update to the answer from @allyusd which is generally right but the plunker is not working correctly after you blur the cell.

Change the template to:

<div>
    <select ui-grid-edit-dropdown ng-class="'colt' + $index" ng-model="MODEL_COL_FIELD" data-ng-options="d.type as d.type for d in getExternalScopes().genderTypes">
        <option value="" selected disabled>Choose Gender</option>
    </select>
</div>

Especially the part data-ng-options="d.type as d.type...

This will pass only the type into your model.

See the (slightly) forked Plunker here. (Note that I added some debug info after the grid again)

Don't regard this as an answer. It's just a mild correction to allyusds answer.

Upvotes: 1

allyusd
allyusd

Reputation: 365

replace ng-cell-input with ui-grid-edit-dropdown

Here is Plunker

BTW, This is default template

<div>
  <form name="inputForm">
    <select ng-class="'colt' + col.uid" ui-grid-edit-dropdown ng-model="MODEL_COL_FIELD" ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray"></select>
  </form>
</div>

If no reason, maybe don't need custom template, check this tutorial.

Upvotes: 1

Related Questions