angular-ui/ui-grid

editableCellTemplate and enableCellEditOnFocus not working together

Open

#4,286 opened on Aug 28, 2015

View on GitHub
 (5 comments) (3 reactions) (0 assignees)JavaScript (5,395 stars) (2,496 forks)batch import
grid-edithelp wanted

Description

So we have an issue where we need to use an editableCellTemplate and need enableCellEditOnFocus together. However it seems that they are not working together correctly. The Next row receives focus but the caret/cursor isn't there. CellNav and edit are both enabled and it works on 'non-templated' cells. Is there something I can add to the template to allow it to edit on focus?

Cell Template (new to commenting on github had to get rid of the </>): editableCellTemplate: input id="editBtn" type="string" ng-model="MODEL_COL_FIELD" ng-enter="grid.appScope.edit(row)"

Edit: the edit on focus also works if I add ui-grid-editor to the template options but prevents the ng-enter event from firing.

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Familiarity with AngularJSBasic understanding of ui grid cell templatesAbility to debug AngularJS applications
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
Investigate the interaction between editableCellTemplate and enableCellEditOnFocus in ui grid. The issue reports that using a custom editableCellTemplate prevents the caret from appearing when enabling cell edit on focus. A workaround adding 'ui grid editor' to the template breaks the ng enter event. Examine the grid's edit and cellNav modules (e.g., ui grid edit.js and ui grid cellNav.js) to identify where focus handling occurs and why custom templates break it. Consider if a small modification to the template or the grid's core code can resolve the conflict.