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 :)
Related
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\'}"
I need to create a form section template, so users can add/remove a new html form section on the fly.
I'm using Angular-Formly for the form template. It works really well for me. However, I need to include a rich editor inside of my form
Can anyone here please provide direction for how to do that? Can I write a angular directive to wrap a .Net rich editor in there? Has Angular-Formly provide a richEditor type or template already?
angular-formly doesn't provide a rich editor type out of the box, and I'm not aware of any open source integrations with one. But the textangular.com example as pointed out by #azium looks reasonable. It would be very simple to create a custom type using that directive. You could accomplish it like this (during the run phase):
formlyConfig.setType({
name: 'richEditor',
template: '<text-angular ng-model="model[options.key]"></text-angular>'
});
Here are the docs on custom templates, here's an example, and here's a lesson on egghead.io.
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 an ng-grid table that's populated with data. I looked through the documentation and searched on Google but I can find no examples of how to add a new row to the grid.
Is there any special way that people use to add new data. I am just hoping to find some examples that I can work from. So far I found nothing. I wish that the ng-grid site could have just one example. I'm sure I am not the only person who has needed to add a row to an ng-grid.
Thanks
Here is the example: http://plnkr.co/edit/1uLcok?p=preview
(fixed a broken link to the library): http://plnkr.co/edit/GdstXN?p=preview
You can simply modify the array. It is angularJs' responsible for updating the view.
(If the data modification happens outside of angularjs, then you need to call $apply
against the scope.)
i have been playing around with the ext js library for showing multi month calendar
http://www.lubber.de/extjs/datepickerplus/
one issue is in all the examples are either coming off of another control(combo, textbox) or inside a window object
does anyone know if there are any examples of simply displaying the calendars on a regular page?
If you check the source of http://www.lubber.de/extjs/datepickerplus/ around line 635 where the dWin object is being instantiated you should get an idea on how to add it to a page.
Basically this script (be warned, it has loads of commented code and actually is quite a mess) creates an Ext Window, with several items of which one has a datepickerplus xtype.
It should be possible to also render the datepicker to another dom element directly but i think that this extension to Ext doesn't support this out of the box so you should probably extend the object and override the render method.
Hope that helps