javascript - Cell-Nav does not automatically double click into editable input when scrolling in Ui-Grid -

-

using ui-grid - v4.0.2 - 2016-12-30

hello,

i have following 2 issues related cell-navigation during scroll events.

1. keypress arrowdown scrolling custom celltemplate , custom editablecelltemplate

pre-conditions: coldef has custom celltemplate , custom editablecelltemplate have input inside div height of 100% on both div , input.

(my requirement make editable cells inputs when not in focus)

the "arrowdown" keypress navigation through editable cells broken when scroll event takes place on viewport. new cell fails dblclick'ed into.this continues few more cells , cell-nav seems works on random jump. depending on size of gridoption.data , viewport number of "skipped cells" vary.

steps reproduce:

  1. click first cell in 'my fancy column'
  2. navigate down cells pressing down arrow key, once each jump
  3. you see grid scrolls, bring new row viewport, new 'my fancy column' cell not 'dblclick'ed into

if height dropped >95% or auto. downward navigation seems work again. means see space between cells of column (which not want).

(change height editing ".editable-cell, div.ui-grid-cell .editable-cell input" styling in main.css)

2. keypress arrowup scrolling custom/default celltemplate , editablecelltemplate

the "arrowdown" keypress navigation works fine default templates (because think height auto) , next editable cell gets 'dblclick'ed i.e. celltemplate switched out editablecelltemplate , text inside input selected.

the same functionality breaks when grid scrolls on keypress event (not though). cells in middle rows fails 'dblclick'ed into

steps reproduce:

  1. comment out celltemplate , editablecelltemplate on app.js on plunk
  2. click cell in 'my fancy column'
  3. scroll way down in grid keeping down arrow key pressed
  4. navigate cell pressing arrow key, once each jump
  5. you see cells in middle rows not 'dblclick'ed into

please @ plunk, http://plnkr.co/edit/gwwhge5qp0wmotbswcxg?p=preview.

this app.js

var app = angular.module('app', ['ngtouch', 'ui.grid', 'ui.grid.cellnav', 'ui.grid.edit',                                   'ui.grid.autoresize', 'ui.grid.pinning', 'ui.grid.pagination']);  app.controller('mainctrl', ['$scope', '$http', '$timeout', '$interval', function ($scope, $http, $timeout, $interval) {   var x = 1;   $scope.waiting = 'waiting ajax call';    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')     .success(function (data) {       angular.foreach(data, function(rowentity, index) {         rowentity.temp = x;         x = x+1;       });       $scope.data = data;       $scope.waiting = 'done!'   });    $scope.gridoptions = {     data: 'data',     columndefs: [       { name: 'name' },       { name: 'gender' },       { name: 'gender' },       { name: 'myfancycolumn', field: 'temp', celltemplate: '<div class="editable-cell"><input type="number" ng-model="row.entity.temp"/></div>', editablecelltemplate: '<div class="editable-cell"><input type="number" ng-model="row.entity.temp" ui-grid-editor/></div>', enablecelledit: true, enablecelleditonfocus: true}     ]   };  }]);

this index.html

<!doctype html> <html ng-app="app">   <head>     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>     <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>     <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>     <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>     <script src="http://ui-grid.info/release/ui-grid.js"></script>     <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">     <link rel="stylesheet" href="main.css" type="text/css">   </head>   <body>  <div ng-controller="mainctrl">   <strong ng-bind="waiting"></strong> <strong>{{ wait }}</strong>   <br>   <div class="grid" ui-grid="gridoptions" ui-grid-cellnav ui-grid-row-edit ui-grid-edit ui-grid-auto-resize ui-grid-pinning></div> </div> <footer class="footer footer-global">         <div class="text-center">fancy footer</div> </footer>       <script src="app.js"></script>   </body> </html>

and main.css

.grid {   width: 100%;   height: 300px; }  .my-css-class { color: blue }  .editable-cell, div.ui-grid-cell .editable-cell input {   height: 100%; }


Comments

Post a Comment