1

I need to show timepicker in ui grid cell. I have implemented it but there is an issue. It works fine for upper cells but for bottom cells some part of timepicker is hiding behind the grid. Here is the plunker.

http://plnkr.co/edit/YbZbboMz36xTCdikNyhN?p=previewenter code here

Double click on cell3 in second last row. Editable cell template will open. Now click on timer icon. Time picker will be open. But it's lower part is hidden behind the grid.

MMM
  • 31
  • 1

1 Answers1

0

I see, problem is that you this construction:

 $(function () {

            $('#timepicker').datetimepicker({
                //format: 'LT'
                format: 'HH:mm'
            });
 });

You have the same id #timepicker for every row

Solution

Create a directive, also we need position to store position config, and if we have $last element, we should toggle vertical position to top :

app.directive('timeControl', [function(){

  return {
     restriction: 'A',
     link: function(scope, elem, attr) {

    var position = {
        horizontal: 'right',
        vertical: 'bottom'
    }

     if(scope.$last === true) {
        position = {
        horizontal: 'right',
        vertical: 'top'
    }
     }

     elem.datetimepicker({
                //format: 'LT'
                widgetPositioning: position,
                widgetParent: elem,
                format: 'HH:mm'
            });



          elem.datetimepicker({
                //format: 'LT'
                format: 'HH:mm'
            });
  }
}

}]);

HTML

 <form name="inputForm">
<div class='input-group date' time-control style="position:absolute; width: 80px;">
                <input type='text' class="form-control" ng-class="col.colIndex()"  ng-model="MODEL_COL_FIELD" style="height:28px"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-time timer"></span>
                </span>
 </div>

You just add time-control attribute to div <div class='input-group date">

Plnkr example

Also screenshot

Leguest
  • 2,097
  • 2
  • 17
  • 20
  • Hi Leguest. Thanks for your response. Actually in my original code $last is coming as false and $middle is true for each row. In your plunker I think $last is true for each row because if you check time picker for first row , its opening at top and now time picker is hiding behind the grid for top rows. – MMM Apr 25 '17 at 09:36
  • Hi Leguest. Did you get a chance to look into it? – MMM Apr 27 '17 at 09:52
  • Yea, I see. I think to solve this issue you should map your data before putting it in ui.grid. Look here http://stackoverflow.com/questions/29637188/how-to-get-row-index-in-angular-ui-grid-3-0. So you need to replace `scope.$last` with `currentRowIndex == $scope.gridOpts.data.length - 1`. I hope it will help you – Leguest Apr 27 '17 at 10:03
  • I was checking index for first row using if(scope.grid.renderContainers.body.visibleRowCache.indexOf(row) === 0) inside link in directive . But here issue is 'row' which we are passing (.indexOf(row) ). This is the selected row. I am not finding way to get this selected row inside link function. – MMM Apr 27 '17 at 15:56
  • Yes, that is a problem with ui grid. Check this approach http://plnkr.co/edit/9QbQCqTSz8aluh9n62Hl?p=preview, colomn Seq is that you need – Leguest Apr 27 '17 at 17:02