ui-grid Edit Feature not working properly

Question

I am using ui-grid. I enabled edit feature using ui-grid-edit. The problem is datepicker. I want the datepicker to work in all browsers but it is not possible by enabling the type : "date" because it will give the same datepicker supported by HTML5. So i thought of enabling bootstrap datepicker for angular using custom template by adding editableCellTemplate

columnDefs : {
    field:'accbirthdate',displayName :"Birth Date",enableCellEditOnFocus:true,editableCellTemplate: '<input type="text" ng-input="COL_FIELD" ng-model="COL_FIELD" datepicker-popup="dd-MM-yyyy" datepicker-append-to-body="true"/>'}
}

but it is not working at all. I found that even ng-click in the input text also is not working.So anyone please help on how to enable bootstarp date-picker in angular ui-grid

Answer 1

Yes as i think it is because the HTML code is not compiled when we are using it directly on editableCellTemplate. For more info on how Angular Template Compiling Works refer here Angular Template Compiling

Here's what i do to resolve this issue. I replaced my column defs editableCellTemplate to the following

columnDefs : {
    field:'accbirthdate',displayName :"Birth Date",enableCellEditOnFocus: true,editableCellTemplate: '<input type="text" class="form-control" datepicker-popup="dd/MM/yyyy" ng-class="\'colt\' + col.index" ng-model="row.entity[col.field]" datepicker-append-to-body="true" is-open="istableDate" close-text="Close" table-date/>'}
}

as like gridEditor i created my own directive in my directive.js i have created the directive

app.directive('tableDate',function($filter){
   function parseDateString(dateString) {
      if (typeof(dateString) === 'undefined' || dateString === '') {
        return null;
      }
      var parts = dateString.split('/');
      if (parts.length !== 3) {
        return null;
      }
      var year = parseInt(parts[2], 10);
      var month = parseInt(parts[1], 10);
      var day = parseInt(parts[0], 10);

      if (month < 1 || year < 1 || day < 1) {
        return null;
      }
      return new Date(year, (month - 1), day);
    }
    function pad(s) { return (s < 10) ? '0' + s : s; }
    return {
        priority: -100, // run after default uiGridEditor directive
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {
          scope.istableDate = false;

          scope.$on( 'uiGridEventBeginCellEdit', function () { 
            scope.istableDate = true;
          });

          element.on("click",function(){
            scope.istableDate = true;
          });

          element.bind( 'blur', function () { 
            if(!scope.istableDate){
              scope.$emit( 'uiGridEventEndCellEdit' ); 
            }else{
              scope.istableDate =  false;
            }
          }); //when leaving the input element, emit the 'end cell edit' event

          if (ngModel) {
            ngModel.$formatters.push(function (modelValue) {
              var modelValue= new Date(modelValue);
              ngModel.$setValidity(null,(!modelValue || !isNaN(modelValue.getTime())));
              return $filter('date')(modelValue, 'dd/MM/yyyy');
            });

            ngModel.$parsers.push(function (viewValue) {
              if (viewValue ) {
                var dateString =  [pad(viewValue.getDate()), pad(viewValue.getMonth()+1), viewValue.getFullYear()].join('/')
                var dateValue = parseDateString(dateString);
                ngModel.$setValidity(null, (dateValue && !isNaN(dateValue.getTime())));
                return dateValue;
              }
              else {
                ngModel.$setValidity(null, true);
                return null;
              }
            });
          }
        }
      };
});

My Date format is dd/MM/yyyy, choose yours once we emit the event it will mentioned as changed. Now i have my bootstrap date-picker working for my ui-grid on all browsers.

If you have any doubt on this feel free to ask me. i Spend One day on this and I would like to share my experience to others.

Oops not in IE6 :)