I would like to use ng-repeat in cellTemplate tooltip in following way:
self.gridOptions = {
data: 'screenController.data',
enableColumnResizing: true,
minRowsToShow: 15,
columnDefs : [
{ field: 'setups', displayName: 'Setups', cellTemplate: 'setupTemplate.html'}]
where setupTemplate.html content is:
<div class="grid-tooltip" tooltip-append-to-body="true" tooltip-html-unsafe="<span ng-repeat='setup in row.entity.setups'>{{setup}}<br /></span>">
<div class="ui-grid-cell-contents">
details
</div>
</div>
The idea is to have multiline tolltip based on content of setups field which is a list of strings. But I can not see any result in tooltip. Any help?
Related
I am very new to angular ui-grid.
I am displaying data using cell template but sorting is not working.
I want to sort that particular column using 'username'.
Can anyone please help me with this.
{
field: 'usernameandgender',
width: '29%',
displayName: 'Dr. İsim / Uzmanlık',
name:'username' ,
cellTemplate:'
<div style="height:47px;">
<span style="font-size:15px;">{{row.entity.username}}</span> -
<span style="color:gray; font-weight:normal;font-size:13px;">
{{row.entity.gender}}
</span>
<br/>
</div>'
}
Please change the field value to 'username'. It should work.
I used the same type of cell template to display icon based on true/false, and though it is displaying lock icon in grid, I can filter on basis of true/false.
I am using Angularjs ui grid with progress bar in first column and my grid options are shown below :
ctrl.gridOptions = {};
ctrl.gridOptions.columnDefs = [{
field: 'completeStatus',
cellTemplate: '<span>{{row.entity.completeStatus}} % </span> <uib-progressbar value="row.entity.completeStatus"> </uib-progressbar>',
width: 100
},
{
field: 'invoiceNum'
}
];
html:
<div id="regGrid" ui-grid="ctrl.gridOptions" class="reg-grid"></div>
Which is working fine. Now I want to display bootstrap popover upon hovering the first cell of the grid, I mean the cell with field 'completeStatus'. Can any one help me how to configure it?
Add popover attributes to your cell template and have a popover template located in your component html. Like this:
Component HTML:
This will be located at the bottom of your HTML just before the closing root </div>.
<script type="text/ng-template" id="cellPopover.html">
<div>Your popover Template</div>
</script>
Component Controller:
Adding the popover attributes to your cell template.
ctrl.gridOptions.columnDefs = [{
field: 'completeStatus',
cellTemplate: '<div popover attributes><span>{{row.entity.completeStatus}} % </span> <uib-progressbar value="row.entity.completeStatus"> </uib-progressbar></div>',
width: 100
}
Where I wrote popover attributes you will place the actual attributes such as:
1. uib-popover-template="'cellPopover.html'"
2. popover-trigger="mouseenter"
3. popover-placement="bottom"
Inside my controller I have an array of objects like this:
this.set = [{
"display": "Name",
"pass": "name"
}, {
"display": "Subject",
"pass": "subject"
}, {
"display": "Batch",
"pass": "batch"
}];
I have provided checkboxes: name, batch and subject. Checking the checkboxes will filter a category.
HTML:
<div flex class="filters" layout="row" ng-repeat="menu in menu">
<md-checkbox class="md-primary" ng-model="query.{{menu.pass}}">
{{menu.display}}
</md-checkbox>
</div>
{{menu.display}} Is displaying the names correctly. Now i want to dynamically bind the ng-model also. How is this possible?
The ng-model attribute already expects an angular expression, so throwing in the curly braces inside that will not work, instead try something like:
<div flex class="filters" layout="row" ng-repeat="menu in set">
<md-checkbox class="md-primary" ng-model="query[menu.pass]">
{{menu.display}}
</md-checkbox>
</div>
So now it's just setting query.batch by passing in the value of menu.pass.
DEMO: https://jsfiddle.net/qvw9bmhe/32/
Just click on the names and see the query object update.
I am using angular ui grid.
I have edit button showing for each row as last column. I want to change row to edit mode when edit button clicked.
Appreciated if someone can guide me.
{
field: 'edit',
displayName: '',
enableFiltering: false,
enableSorting: false,
width: '5%'
},
Right now i have made it editable for each cell individually using the following line
<div class="grid testGrid" ui-grid="GridOptions" ui-grid-edit ui-grid-row-edit style="width: 100%;"></div>
The only way to do this in ui-grid, as for now, is to avoid using ui-grid-edit and implementing some custom templates with ng-ifs conditions inside.
I built this plunker as a starting step, there you can see only one button, but you can simply put a similar logic inside your edit button.
Angular newb here.
I'm trying to set up templates to display a collection of 'questionnaire' items. The questionnaire items may be a choice list or check box. Each questionnaire choice has an associated cost with it.
EG:
{ "Name" : "Product Packaging", "Template" : "TemplateList",
"Choices" : [ { "Box", 20 }, { "Tube", 30 } ] },
{ "Name" : "Custom Printing" , "Template" : "TemplateCheckbox",
"Choices" : [ { true, 10 }, { false, 0 } ] }
Templates:
<script type="text/ng-template" id="TemplateList.html">
<div>{{configitem.Name}}</div>
<div class="choiceValue">
<select ng-model="configitem.CurrentChoice" ng-options="choice.Value for choice in configitem.Choices" ng-change="update()">
</select>
</div>
</script>
<script type="text/ng-template" id="TemplateCheckbox.html">
<div>{{configitem.Name}}</div>
<div>
<input type="checkbox" ng-model="configitem.CurrentChoice.Value" ng-change="update()"/>
</div>
</script>
HTML:
<div ng-controller="ConfiguratorCtrl">
<div ng-repeat="configitem in model.ConfigurableItems">
<div ng-include="configitem.Template + '.html'"></div>
</div>
<div>Price: {{model.CurrentPrice | currency}}</div>
</div>
I'm using templates to display these objects based on the 'Template' type. This works well. However, I'd like to figure out a way to indirectly bind to my controller for the checkbox items. I need the on/off state for the checkbox to bind to one of the true/false 'choice' objects. Right now, it's binding to the first choice element. Any suggestions?
Fiddle