Angular ui-grid , add custom message to editableCellTemplate

I need to add a custom error message to cell when it is in editable mode, basically i just need to add message to the editable html template as follow

<a href=\'#\' data-toggle=\'tooltip\' data-placement=\'top\' title=\'error!\' ng-show=\'!inputForm.$valid\'>errMsg - {{customMsg}}</a>

i have just bind the customMsg to the global scope just for testing purposes , but still it doesnt seems to be appearing. sample plunker added here, it would be a great help if you can tell me what i am doing wrong here

Thanks

Solution

You might want to take a look at this answer

https://stackoverflow.com/a/28127498/1585304

When you are working with the ui-grid, you are actually working in an isolated scope.

This means that you cannot access to the parent scope simply by type the name of the var into your html.

In order to access to your customMsg variable, you need to refer to the parent scope using grid.appScope.

Your column definition should look more like this.

 {
      field: 'company',
      displayName: 'Company',
      enableColumnMenu: false,
      editableCellTemplate: "<div><form name=\"inputForm\">
      <input type=\"INPUT_TYPE\" ng-class=\"'colt' + col.uid\" 
       ui-grid-editor ng-model=\"MODEL_COL_FIELD\"  minlength=3 
       maxlength=10 required><a href=\'#\' data-toggle=\'tooltip\' 
       data-placement=\'top\' title=\'error!\' 
       ng-show=\'!inputForm.$valid\'>errMsg - {{grid.appScope.customMsg}}
       </a></form></div>"
    }

The only problem is that is really hard to see the message since the form is almost completely hidden by the row.

Hope this helps.