need popover over custom template cell of Angularjs ui grid - angularjs

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"

Related

Angularjs: Sorting not working in ui-grid with CellTemplate data

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.

Angularjs ui-grid ng-repeat in cellTemplate tooltip

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?

How to make Angular UI Grid row editable when button is clicked

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.

Drag and drop row on KendoUI Grid with AngularJs

How can I make a row in a KendoUI Grid draggable with AngularJs?
The documentation says you have to initialize the draggable component with a filter ie "tbody > tr", but I don't understand how to apply the kendo-draggable directive on just the rows.
This is how I initialize kendo-grid:
<div
kendo-grid
k-options="activityGridOptions"
k-rebind="activityGridOptions"
></div>
The solution is to define a rowTemplate and altRowTemplate on the config object and adding a template inside the html like so:
<!-- Grid row template -->
<script type="text/x-kendo-template" id="grid-row-template">
<tr data-uid="#= uid #" draggable draggable-data="dataItem" draggable-type="'planner.activity'" ng-class="{'current-item': currentActivityId == dataItem.SyncTableUniqueId}" ng-click="setCurrentActivity(dataItem)">
<td>{{dataItem.AvtaleNr}}.{{dataItem.VareLøpenummer}}</td>
<td>
{{dataItem.Date| moment:'ll'}} {{dataItem.Time| moment:'HH:mm':'HH:mm:ss'}}
</td>
<td>{{dataItem.FirstName}}</td>
</tr>
</script>
As you might notice, I am using a non-kendo draggable directive. The rowTemplate and altRowTemplate is assigned inside my controller:
$scope.activityGridOptions = {
dataSource: $scope.gridDataSource,
// ...
rowTemplate: kendo.template($("#grid-row-template").html()),
altRowTemplate: kendo.template($("#grid-row-template").html())
};
In addition to the answer above, you can try to use this angular directive:
https://github.com/neoziro/angular-draganddrop

trying to insert directive into ui accordion body but gets converted to text

From the docs of angular bootstrap accordion I am trying to insert html into the accordion body.
$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: '<h1>Dynamic Group Body - 1</h1>'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];
However this converts it to text and does not give me the html. Is there a way to achieve this?
Thanks
You cannot directly bind html using angular binding, they will be rendered as text. They need to be sanitized. So try:-
In your accordion bind the content with ng-bind-html:-
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
<div ng-bind-html="group.content"></div>
</accordion-group>
and also include ng-sanitize to your module dependencies, after including the script.
Example:-
angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngSanitize']);
Demo

Resources