2

I can't figure out how to do what's supposed to be very simple.

I have 10 columns in my UI grid, they are all editable. My objective is dynamically "disable" or have them be "required" inputs, depending on the options of a scope object.

The object:

$scope.columnOptions = {
    'column1': 'MANDATORY',
    'column2': 'DISABLED'....
}

The cell templates

cellTemplate: '<input ng-disabled="{{ grid.appScope.columnOptions.column1=== \'DISABLED\' }}" ' +
                'ng-required="{{ grid.appScope.columnOptions.column1=== \'MANDATORY\' }}" ' +
                'data-ng-model="row.entity.column1" style="width:95%">'

This works if the object exists upon initialization.

The problem is that when I change the value of columnOptions, the rows don't get updated.

I have tried different ui-grid APIs to reload my template but it did not work:

        $scope.gridApi.core.refresh();
        $scope.gridApi.core.raise.reloadData();
        $scope.gridApi.core.refreshRows();
        $scope.gridApi.core.notifyDataChange('all');

I've added a plunker: http://plnkr.co/edit/3bIrtJuwHNrTeltIPAXw?p=preview

Sedky A
  • 184
  • 2
  • 15

1 Answers1

2

Your cell templates are not correct:

cellTemplate: '<input ng-disabled="grid.appScope.columnOptions.column1=== \'DISABLED\'" ' +
            'ng-required="grid.appScope.columnOptions.column1=== \'MANDATORY\' " ' +
            'data-ng-model="row.entity.column1" style="width:95%">'

You do not use {{}} within ng- related syntax as it already parses it as angular:

Fixed Plnkr here

KreepN
  • 8,528
  • 1
  • 40
  • 58
  • Yes.. Thank-you very much. 1 Question, why does it work initially? – Sedky A Aug 14 '17 at 18:26
  • I don't know enough about the internal workings of UI Grid but I'd assume there is a different set of code that fires on initial bind vs the code that fires when you change a variable tied to the grid. In your case the variable in question is the `grid.appScope.columnOptions` property. – KreepN Aug 14 '17 at 19:02