I'm having trouble getting an iframe inside a popover to render to show a map per row for each address in that row.
My grid:
<div class="form-group col-xs-12">
<div ui-grid="gridOptions" class="grid" ui-grid-cellNav ui-grid-selection ui-grid-auto-resize></div>
</div>
Grid config:
$scope.gridOptions = {
enableSorting: true,
enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
enableVerticalScrollbar: uiGridConstants.scrollbars.NEVER,
enableColumnResizing: true,
columnDefs: $scope.columns,
enableRowHeaderSelection: false,
multiSelect: false,
rowHeight: 40,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
The none working column:
{
name: 'Map',
width: 55,
cellClass: 'grid-align-center',
headerCellClass: 'grid-align-center grid-header-text',
cellTemplate: '<a style="margin-right: 3px; color: #006699; cursor: pointer;" class="material-icons place" ' +
'popover-trigger="'outsideClick'" popover-placement="bottom" popover-append-to-body="true"' +
'uib-popover-html="'<div style="height: 300px; width: 300px; position: relative;">' +
'<iframe height="100%" width="100%" frameborder="0" ng-src="{{ sce.trustAsResourceUrl(row.entity.mapUrl) }}" ' +
'scrolling="no"></iframe></div>'"' +
'</a>'
},
A screenshot of the behaviour:
I've also tried
$scope.gridOptions.data.mapUrl = $sce.trustAsResourceUrl($scope.gridOptions.data.mapUrl);
Any help getting this to work would be greatly appreciated!
I simplified your example and created something similar:
// dummy URL for iframe
$scope.cvUrl =
'http://docs.google.com/gview?url=https://d9db56472fd41226d193-1e5e0d4b7948acaf6080b0dce0b35ed5.ssl.cf1.rackcdn.com/spectools/docs/wd-spectools-word-sample-04.doc&embedded=true';
var trusted = {};
$scope.getPopoverContent = function(url) {
var content = '<iframe src="' + url + '"></iframe>';
return trusted[ content] || (trusted[content] = $sce.trustAsHtml(content));
}
Where ui-grid template will look like:
<div class="ui-grid-cell-contents">
<a popover-placement="right"
uib-popover-html="grid.appScope.getPopoverContent(grid.appScope.cvUrl)"
href="" >Popover</a>
</div>
Here is working Plunker Demo
Hope it will give you right direction
Related
I want to make an angular attribute directive for Google line charts rather than manually load the chart in controllers because the first time when the page loads the chart draws easily and navigate to another page and controller and return back previous page so its not draw chart. Here I am drawing the chart like below but I want to make an angular directive because its not working with page navigation
<ion-view title="Select Medicines" catch-view="false">
<ion-content>
<div class="list med-select inven-l">
<div class="list" style="background-color:52487B;">
<div class="row item item-icon-left item-icon-right item-stable">
<div curve_chart style="width:100%; height: 250px" > </div>
</div>
<div class="row item item-icon-left item-icon-right item-stable" style="margin-bottom: 5px;" ng-click="gotoDetail(weekSales.OrderNo)" ng-repeat="weekSales in WeeklyData.orders | orderBy:'CreatedOn'">
<div class="col col-70">
<h2>{{weekSales.Customer.FName}} {{weekSales.Customer.LName}} </h2>
<p>Order No: MY-{{weekSales.OrderNo}} - {{weekSales.CreatedOn| date : 'dd'}}/{{weekSales.CreatedOn| date : 'MM'}}/{{weekSales.CreatedOn| date : 'yyyy'}}</p>
</div>
<div class="col col-20">
<span style="color:#d5d1e7">₹ {{weekSales.Amount}}</span>
</div>
<div class="col col-10">
<i class="icon ion-chevron-right"></i>
</div>
</div>
</div>
</div>
</ion-content>
angular.module('controllers.Chemist_sales_monthlyCtrl', [])
.controller('Chemist_sales_monthlyCtrl', function($scope, $state, $ionicHistory,serverRepo,$ionicLoading,profileInfo) {
$scope.data = {};
$scope.gotoDetail = function(orderNo){
//alert(orderNo)
profileInfo.orderId=orderNo
$state.go('pannel.chem_order_history_Detail');
}
$scope.myGoBack= function(){
$ionicHistory.goBack()
}
$scope.$on('$ionicView.enter', function() {
$ionicLoading.show({
template: '<ion-spinner icon="spiral"></ion-spinner>',
noBackdrop:false
});
serverRepo.salesMonthly().then(function(objS){
console.log(objS)
$scope.monthlyData=objS.data;
angular.forEach(objS.data.orders, function(value, key) {
objS.data.orders[key].CreatedOn=new Date(objS.data.orders[key].CreatedOn)
})
var options = {
legend: { position: 'bottom' },
curveType: 'function',
titlePosition: 'in',
axisTitlesPosition: 'in',
hAxis: {
textPosition: 'in',
minValue: 0,
textStyle:{color: "#fff"}
},
vAxis: {
minValue: 0,
maxValue: 13,
textPosition: 'in',
textStyle:{color: "#fff"},
minorGridlines:{color: "#ccc"}
},
lineWidth: 6,
fontSize:11,
chartArea:{left:0,top:0,width: '100%', height: '100%',backgroundColor: '#43396D'},
colors: ['#32BD76'],
animation:{
duration: 1500,
easing: 'out',
startup: true
}
};
google.charts.setOnLoadCallback( function () {
// Create and populate the data table.
console.log(objS.data.labels)
console.log(objS.data.datasets.data)
var data = new google.visualization.DataTable();
data.addColumn('string', 'labels');
data.addColumn('number', 'data');
for(i = 0; i < objS.data.labels.length; i++)
data.addRow([objS.data.labels[i], objS.data.datasets.data[i]]);
// Create and draw the visualization.
var chart = new google.visualization.LineChart(document.getElementById('curve_chartmonthly')).
chart.draw(data, options);
});
$ionicLoading.hide();
},function(objE){
// alert(JSON.stringify(objE));
console.log("Error:-\n"+JSON.stringify(objE));
$ionicLoading.hide();
});
});
})
I have a collection repeat list with a search bar on top of the list (that is inside ionic pop up body). On the real device (Android 4.4), the list displays only 9 records.
I have a codepen created collection repeat inside ionic pop up. Here it displays all the records, but not on the actual device.
Recently I updated from Ionic 1.1.1 to Ionic 1.2.4 . Is it a problem because of the new Ionic version, I also tried Ionic 1.2.4's nightly build it also dint work.
Does the phone's browser version cause a difference, My phone's browser version is "Mozilla/5.0(Linux 4.4.2; en-us; 6043D Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) version/4.0 chrome/ 30.0.0 Mobile Safari/537.36."
Here is the HTML code of the ionic pop up.
<div class="list list-inset" ng-style="{ 'display': 'inline-flex', 'padding': '0'}">
<label class='item item-input' ng-style='{ 'border-right-color': '#FFFFFF'}'>
<i class='icon icon-left ion-ios7-search placeholder-icon''></i>
<input type='text' ng-model='search' placeholder='Search'>
</label>
<a class='button button-icon icon ion-ios7-close-empty placeholder-icon'
ng-style='{ 'color': '#B83E2C' }'
on-touch='clearSearch()''>
</a>
</div>
<div class='listPopUpHeight'>
<ion-scroll direction="y" class="available-scroller" style="height:350px">
<ion-list>
<ion-item
class="dataSourceItem"
collection-repeat="item in dataSource | filter:search"
collection-item-width="100%"
item-height="15%"
on-tap="tapped(item)">
{{item.Text}}
</ion-item>
</ion-list>
</ion-scroll>
</div>
Here is the JS code:
angular.module('ionicApp', ['ionic'])
.controller('PopupCtrl', function($scope, $ionicPopup, $timeout) {
$scope.dataSource = [];
$scope.showList = function(){
var list=[];
for (var i = 0; i < 1000; i++) {
list.push({ 'Id': i, 'Text': 'Text_' + i });
}
$scope.dataSource = list;
var listPopup = $ionicPopup.show({
templateUrl: 'popupTemplate.html',
title: 'List',
scope: $scope,
buttons: [
{ text: 'Cancel' },
]
});
};
});
Is there something I am missing out. Kindly do reply.
Thanks in advance :)
Please check below link. I made a popup with radio button with searchbar for Ionic v1.
https://codepen.io/engabdalb/pen/LYpWbZa
HTML
<a class="item" ng-click="open('aracyakit.html')">
Yakıt
<span style="color:#0097A4" style="color:#0097A4" class="item-note" >
{{arackayit.araba_yakit}}
</span>
</a>
<script id='aracyakit.html' type='text/ng-template'>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" ng-model="arama" placeholder="Arama">
</label>
<ion-radio name="araba_yakit" id="araba_yakit" ng-repeat="ay in arabayakitlari | filter:arama" class="wrapping-list" ng-model="arackayit.araba_yakit" ng-value="'{{ay.value}}'">{{ay.name}}</ion-radio>
</script>
<a class="item" ng-click="open('aracvites.html')">
Vites
<span style="color:#0097A4" style="color:#0097A4" class="item-note" >
{{arackayit.araba_vites}}
</span>
</a>
<script id='aracvites.html' type='text/ng-template'>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" ng-model="arama" placeholder="Arama">
</label>
<ion-radio name="araba_vites" id="araba_vites" ng-repeat="av in arabavitesleri | filter:arama" class="wrapping-list" ng-model="arackayit.araba_vites" ng-value="'{{av.value}}'">{{av.name}}</ion-radio>
</script>
CSS
.popup-body {
padding: 10px;
overflow: auto;
width: 100%;
}
.popup-open .popup-backdrop,
.popup-open .popup {
pointer-events: auto;
width: 100%;
}
.popup-head {
padding: 0px 0px;
border-bottom: 1px solid #eee;
text-align: center;
}
JS
$scope.arackayit = [];
$scope.arabavitesleri = [
{ value: "Otomatik", name: "Otomatik" },
{ value: "Manuel", name: "Manuel" }
]
$scope.arabayakitlari = [
{ value: "Dizel", name: "Dizel" },
{ value: "Benzin", name: "Benzin" },
{ value: "Benzin-LPG", name: "Benzin-LPG" }
]
$scope.open = function(clicked) {
$ionicPopup.confirm({
templateUrl: clicked,
scope: $scope,
buttons: [{
text: 'Iptal',
type: 'button-default',
onTap: function(e) {
// Change/ write here current page
$state.go('tab.aracekle');
}
}, {
text: 'Tamam',
type: 'button-positive',
onTap: function(e) {
//open next when OK clicked
switch (clicked) {
case 'aracyakit.html':
$scope.open('aracvites.html');
break;
//Do nothing when OK clicked
case 'aracvites.html':
default:
// code block
}
}
}]
});
}
I am currently facing a problem. I have a HTML page which contains multiple div to load highcharts. Same page have all the jquery script.
I am using angularJS to route the page. Index page, Chart1Page and Chart2Page. When i am loading chart1page 1st time all charts load but if i come back from chart2page to chart1page some charts does not load. Below code is one of the chart which not load. If i replace with some other chart like pie the result is same. Do i need to check the sequence?
<script>
function freecapacity() {
$(function () {
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'freecapacity',
type: 'column',
margin: 75
},
title: {
text: 'Free Capacity'
},
subtitle: {
text: ''
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: ['A', 'B', 'C', 'S', 'D', 'DD', 'PD']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
}]
});
});
}
freecapacity();
</script>
<html>
<div class="row">
<h5 class="form-control" style="background-color:#D2D7D3"><label>Hub and GSA Information</label></h5>
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 small">
<div class="form-control" style="height: 350px;" id="freecapacity"></div>
</div>
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 small">
<div class="form-control" style="height: 350px;" id="gsanomination"></div>
</div>
</div>
</html
I recommend you use the Angularjs directive for Highcharts: https://github.com/pablojim/highcharts-ng
Than set up the Highchart object in the view controller instead of using script tags in the html file.
This is my code
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
var paginationOptions = {
pageNumber: 1,
pageSize: 25,
sort: null
};
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
useExternalPagination: true,
useExternalSorting: true,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableSorting: false },
{ name: 'company', enableSorting: false }
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
if (sortColumns.length == 0) {
paginationOptions.sort = null;
} else {
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
}
};
var getPage = function() {
var url;
switch(paginationOptions.sort) {
case uiGridConstants.ASC:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_ASC.json';
break;
case uiGridConstants.DESC:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_DESC.json';
break;
default:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';
break;
}
$http.get(url)
.success(function (data) {
$scope.gridOptions.totalItems = 100;
var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
$scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
});
};
getPage();
}
]);
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
In the above code pagination is displayed on ui-grid. but i want to display pagination outside the ui-grid and if data is less than 10 disable pagination.
This is my plunker http://plnkr.co/edit/XD06tjcTQsg6YiWpjRsN?p=preview
To use a custom pagination outside the grid, set enablePaginationControls: false in its gridOptions.
$scope.gridOptions = {
data: 'data',
totalItems: $scope.data.length,
paginationPageSize: 10,
enablePaginationControls: false,
paginationCurrentPage: 1,
columnDefs: [
{name: 'name'},
{name: 'car'}
]
}
You can then create your custom pagination directive (or use Bootstrap pagination directive), and bind paginationCurrentPage property to it.
Here is a Plunker with live demo that uses external Bootstrap pagination directive.
I was able to create my own pagination for angular-ui-grid by utilizing the publicApi and gridApi functions
Below is my HTML, and below that is my javascript.
<div>
<button ng-disabled="videoListPaginationOptions.pageNumber === 1"
ng-click="videoListGridApi.pagination.seek(1)"
ng-class="{'cancelCursor':videoListPaginationOptions.pageNumber === 1}"
role="menuitem" type="button" title="Page to first" aria-label="Page to first"
>
<i class="fa fa-step-backward "></i>
</button>
<button
ng-disabled="videoListPaginationOptions.pageNumber === 1"
ng-class="{'cancelCursor':videoListPaginationOptions.pageNumber === 1}"
ng-click="videoListGridApi.pagination.previousPage()"
role="menuitem" type="button" title="Previous Page" aria-label="Previous Page">
<i class="fa fa-play fa-rotate-180 "></i>
</button>
<input ng-model="videoListPaginationOptions.pageNumber"
ng-change="seekPage('videoList',videoListPaginationOptions.pageNumber)"
class="ui-grid-pager-control-input" type="text" width="50px"/> / {{ videoListGridApi.pagination.getTotalPages() }}
<button role="menuitem" type="button" title="Next Page" aria-label="Next Page"
ng-click="videoListGridApi.pagination.nextPage()"
>
<i class="fa fa-play "></i>
</button>
<button
ng-disabled="videoListGridApi.pagination.pageNumber === videoListGridApi.pagination.getTotalPages()"
ng-click="videoListGridApi.pagination.seek(videoListGridApi.pagination.getTotalPages())"
role="menuitem" type="button" title="Page to last" aria-label="Page to last">
<i class="fa fa-step-forward "></i>
</button>
</div>
Please note that I created a scope variable called videoListGridApi, which I populate when I register my grid api on the onRegisterApi event:
scope.videoListGridOptions = {
data: 'data',
paginationPageSizes: [5, 10, 25, 50],
paginationPageSize: 5,
enableFullRowSelection: false,
enableSelectAll: true,
enableRowHeaderSelection: true,
useExternalPagination: true,
columnDefs: videoListColDefs,
onRegisterApi: function (gridApi) {
scope.videoListGridApi = gridApi;
}
}
How I replicated the Icons
In my example, you can see that I use font-awesome icons to replicate the
icons in the ui-grid pagination.
I also added another class called fa-rotate-180 to get a backwards play button:
.fa-rotate-180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
My Seek Page function is as follows:
(By the way, I have multiple tables in different tabs, so ignore the switch statement)
scope.seekPage = function(tab,page){
switch (scope.currentTab) {
case "videoList":
scope.videoListGridApi.pagination.seek(parseInt(page));
break;
case "zeroTags":
scope.videoListGridApi.pagination.seek(parseInt(page));
break;
case "duplicates":
scope.videoListGridApi.pagination.seek(parseInt(page));
break;
}
}
I hope this helps u!
I want to bind my ng-grid celltemplate to html textbox ( I am having ng-grid , which displays the data,below that I want to add a textbox, so that as I type something in textbox, the values should get update in cell Template of ng-grid).
Here is my html page:
<div ng-controller="bulkAssign" >
<form name="signup_form" method="POST">
<div style=" border: 1px solid rgb(212,212,212);
width: 1000px;
height: 200px;" ng-grid="gridUser">
</div>
<p><b>Editing grid</b></p>
<div class="gridStyle" ng-grid="gridOptions" data-ng-click="testSeletion()"></div>
<label>Edit grid from textbox</label>
<input type="number" name="assignTo" ng-model="assignTo" placeholder="Assign order to" class="form-control" >
</form>
</div>
Here is my controller:
$scope.gridOptions = {
data: 'names',
enableCellSelection: false,
enableRowSelection: true,
showSelectionCheckbox: true,
multiSelect: true ,
columnDefs: [
{
field: 'orderId',
displayName: 'OrderId',
enableCellEdit: false,
cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="loadById(row)">{{row.getProperty(col.field)}}</a></div>'
},
{field: 'trackingId', displayName: 'trackingId', enableCellEdit: false, cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="loadById(row)">{{row.getProperty(col.field)}}</a></div>' },
{field: 'orderTitle', displayName: 'OrderTitle', enableCellEdit: false},
{field:'customerName', displayName:'CustomerName', enableCellEdit: false},
{field:'customerContactno', displayName:'ContactNo', enableCellEdit: false},
{field:'assignTo', displayName:'assignTo', enableCellEdit:true,cellTemplate:'<input type="number">'}
],
selectedItems: $scope.mySelections,
filterOptions: $scope.filterOptions
};
My question is after entering value in textbox, when i click button, is it possible to update values in ng-grid celltemplate?