I am quite new to Angular. I want to apply a custom class in ng-class in ng-grid's custom cell template. I am familiar with the overall usage of "ng-class". The default template is as follows:
<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text> {{row.getProperty(col.field)}}</span></div>
Now, I want to add a new class which is based on the row's data. Say:
ng-class="myClass:row.entity.Flag == 'something'"
Question:
There is already a col.colIndex() in ng-class which is required by ng-grid. Now how to add my class with it?
I know it seems easy but it is not working.
I have tried following things:
https://github.com/angular-ui/ng-grid/wiki/Templating
https://docs.angularjs.org/api/ng/directive/ngClass
Tried ng-class="[col.colIndex(),{myClass:row.entity.Flag == something}]". Didn't work.
//scotch.io/tutorials/the-many-ways-to-use-ngclass
I just want a working 'ng-grid' template (which is defined above).
Try using
row.entity.subGridOptions.Flag
I got the answer after further research.
I wanted to add a class through which I can strike-through the data on the ng-grid row. I was applying it to the rowTemplate, but rowTemplate in itself do not have any textual data.
I have to apply it inside cellTemplate, which is actually going to contain the text.
#Jesse, thanx for your answer.
ng-class="{\'red\': row.entity.Expiration == \'No\'}"
Related
I have a use case where i want to modify the whole template of the ui-grid. When i searched the files in the GitHub repository, i found that they use a template for the grid but couldn't find a way to change it anywhere. I also posted the same issue there but didn't get any response from them yet.
It is possible to replace any used template with a custom template. In the documentation you can find which gridOptions to use to define your own custom templates. You may choose rowTemplate, cellTemplate, footerTemplate, headerTemplate, etc. It is advisable to use the existing ui-grid template as starting point for creating your own custom template.
If you follow this example, you should be able to figure it out, I think :)
I'm new to js/html so I'm actually not sure if it's angular-formly specific. I can't figure out how to change the css style globally (or for a single field) when a field is invalid. Does someone know how to do it or where I can find documentation about it? All documention I find uses the default has-error class.
The css style for invalid fields can be applied using the wrapper.
Note: this is a minimalistic answer to mark this question as solved. I will add code at a later point when I managed to get it working.
I want a ui-grid where you can edit directly without changing the template.
I tried to override the cellTemplate with the standard of the editable celltemplate, but it isnt getting dirty now.
<div><form name="inputForm"><input type="INPUT_TYPE" ng-class="'colt' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD"></form></div>
So i dont want to show the cellTemplate instead i want to show the editable cellTemplate only.
It looks totally possible to me, just make sure your field attribute contains no unusual symbols (dash or dots mainly, use only letters to be on the safe side).
Look at this plunkr.
Edit: Solution found! See bottom of question for explanation.
I have a directive sfNgFieldWrapper that contains a tooltip that I got from angularjUI ui-bootstrap.
The text of the tooltip is set with tooltip="{{ttpText}}".
The problem is that the text contains html entities and these entities are not translated to the correct character.
I can't use ng-bind-html but I've checked and when I do use it on a span the text for the tooltip is correctly transformed.
However, I can't use span and ng-bind-html since I need to use tooltip.
To fix this predicament I thought I would use $sce.pareAsHtml. The problem is that the html entities are not correctly transformed to characters!
I use it in my directive link function like so:
scope.ttpText = $sce.parseAsHtml(scope.ttpText);
Why doesn't parseAsHtml work while ng-bind-html does?
I can't put the parseAsHtml inside scope.$watch because that triggers a loop.
TrustAsHtml doesn't work either.
The tooltip function binds the content like so:
$document.find( 'body' ).append( tooltip );
Solution
After looking into the code of ui-bootstrap I started search stackoverflow specifically for it and I found a question with a similar issue and solution!
Angular-ui tooltip with HTML
Stupid me could also just have checked the AngularUI guide:
http://angular-ui.github.io/bootstrap/#/tooltip
The solution is simple, I can just add -html-unsafe after data-tooltip.
Solution
I also updated the question for maximum visibility.
After looking into the code of ui-bootstrap I started search stackoverflow specifically for it and I found a question with a similar issue and solution! Angular-ui tooltip with HTML
Stupid me could also just have checked the AngularUI guide: http://angular-ui.github.io/bootstrap/#/tooltip
The solution is simple, I can just add -html-unsafe after data-tooltip.
I have a problem using ng-grid search filter on column wich references cellTemplate.
My data object has multiple fields. One of those fields is an array and I use cellTemplate to create a div with ng-repeat to show those values and apply a certain css class according values from that array.
Here is the plunkler that demonstrate my problem: plnkr.co/edit/jMvafIjqCsU0cnW6Ecvy?p=preview.
My problem is when I use cellTemplate grid propertie, the filter do not work properly. To simulate this scenario, you can try search by person2#gmail.com that you'll notice the problem. In this plunker, I use a cellTemplate to concatenate '#gmail.com' to person's email so if you type person2 the filter is applied, but after type # you'll see that filter do not work.
Can someone help me? Thank you!
ng-grid does not search on the rendered cellTemplate output but on the underlying data.
So the best way would be to transform your data to have searchable values.
angular.forEach($scope.myData, function(value) {
value.email+='#gmail.com';
});
Find a Plunker here