CODEWITHSUNDEEP
angularangularjs-directiveangular-ui-grid
Bill
Bill

Reputation: 2352

ui-grid angular js - cell stuck in edit mode

I am adding a custom editablecelltemplate when using the ui-grid. The problem is once a cell enters edit mode, it remains there. The celltemplate is not showing at all later on.

This is the Javascript I am using:

name: app.localize('IsHiddenName'),
field: 'isHidden',
type: 'boolean',
cellTemplate:
    '<div class=\"ui-grid-cell-contents text-center\">' +
    '  <i class="fa fa-check-circle font-green" ng-if="row.entity.isHidden"></i>' +
    '</div>',
editableCellTemplate:
    '<div style="margin:5px;">' +
    '<div class="md-checkbox-list">' +
    '<div class="md-checkbox">' +
       '<input type="checkbox" id="check2-{{row.entity.id}}" class="md-check" ng-class="\'colt\' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD">' +
       '<label for="check2-{{row.entity.id}}"><span class="inc"></span><span class="check"></span><span class="box"></span></label>' +
   '</div>' +
   '</div>'+
   '</div>',

Upvotes: 3

Views: 526

Answers (1)

Michał Jarzyna
Michał Jarzyna

Reputation: 1906

This problem is from misunderstanding uigrid custom editable templates.

UI Grid is not finishing cell editing by itself. It is waiting for event
uiGridEditConstants.events.END_CELL_EDIT.

This event is emitting by 2 ui-grid directives:

  1. For input element: ui-grid-editor (your case):
    <input ui-grid-editor type="checkbox" id="check2-{{row.entity.id}}" ... >

  2. For select element: ui-grid-edit-dropdown:
    <select ui-grid-edit-dropdown ... >

  3. For custom element: you must emit event by yourself: scope.$emit(uiGridEditConstants.events.END_CELL_EDIT);

Upvotes: 2

Related Questions