I'm having trouble getting the Angular Deckgrid to simply display images.I have added the depency. I have an object. However nothing is showing up on the screen for title. The only error I'm getting in the console is angular-deckgrid: No CSS configuration found. I also am including the script files in the 'head' . Any help in this would be appreciated. See below sample code:
Index.html
<html ng-app="myApp">
<script src="javascripts/Angular/angular.min.js"></script>
<script src="javascripts/Angular/angular-route.min.js"></script>
<script src="javascripts/bower_components/angular-deckgrid/angular-deckgrid.js"></script>
<script src="javascripts/imagesloaded.pkgd.min.js"></script>
<script src="javascripts/Angular/app.js"></script>
<div ng-controller="mainController">
<div deckgrid class="deckgrid" source="photos">
<div class="a-card">
<h1>{{card.title}}</h1>
<img src="" data-ng-src="{{card.src}}">
</div>
</div>
</div>
app.js
var myApp = angular.module('myApp',['akoenig.deckgrid']);
myApp.controller('mainController', ['$scope',function($scope) {
$scope.photos = [ {title: 'something here',src: "Images/ipsum/one.jpg"},
{title: 'another picture', src: "Images/ipsum/two.jpg"},
{title: 'another picture', src: "Images/ipsum/three.jpg"},
{title: 'another picture', src: "Images/ipsum/four.jpg"},
{title: 'another picture', src: "Images/ipsum/five.jpg"},
{title: 'another picture', src: "Images/ipsum/six.jpg"}
];
}]);
you need use this css
<style>
.deckgrid[deckgrid]::before {
content: '4 .column.column-1-4';
font-size: 0;
visibility: hidden;
}
.deckgrid .column {
float: left;
}
.deckgrid .column-1-4 {
width: 25%;
}
</style>
Reference: https://github.com/akoenig/angular-deckgrid
Related
why do some styles inside jsx (in case of a width) stop working, for example, the red color span seems broken and does not change to the width value to 100px, the green ones without jsx work correctly
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<div class="title test">df</div>
<div class="title test">dfwertds4</div>
<script type="text/babel">
function App() {
let arr = [
{ title: '12', text: 'text' },
{ title: '43', text: 'text' },
{ title: '23', text: 'text' },
{ title: '56w2345', text: 'text' },
{ title: '34234645436', text: 'text' },
{ title: '2344f', text: 'text' }
];
return (
<>
{arr.map((i, index) => {
return (
<div className="item" key={i.title}>
<span className="title" >
{i.title}
</span>
<span>{i.text}</span>
</div>
);
})}
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
</script>
<style>
.title {
background: #e31937;
border-radius: 4px;
width: 100px;
height: 20px;
}
.test {
background: green;
}
</style>
</body>
</html>
Why is this happening?
And why, for example, background works correctly both inside jsx and without jsx
I use fullcalendar in angularjs as follows to display some event values in the calendar
It displays the values correctly.
<html>
<head>
<link rel="stylesheet" href="../fullcalendar-
4.1.0/packages/core/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-
4.1.0/packages/daygrid/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-
4.1.0/packages/list/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-
4.1.0/packages/timegrid/main.css"></script>
<script type="text/javascript" src="../fullcalendar-
4.1.0/packages/core/main.js"></script>
<script type="text/javascript" src="../fullcalendar-
4.1.0/packages/daygrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-
4.1.0/packages/timegrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-
4.1.0/packages/list/main.js"></script>
</head>
<script>
$scope.event = {events: [{
title:'test1',
start: '2019-05-05 08:00',
end: '2019-05-10 08:00'
},
{
title:'test2',
start: '2019-05-05 12:00'
}]};
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
events: $scope.event.events,
plugins: [ 'dayGrid','timeGrid','list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,timeGridDay'
}
});
calendar.render();
});
</script>
<body ng-app="myApp" ng-controller="myController">
<div id="calendar" ng-model="eventSources"></div>
</body>
</html>
Although I have declared a title in the above it always appends the time with a or p accordingly on the specific date. How can I only display the title in the calendar ?
if there is a time specified, it will be displayed as a (for AM) or p (for PM); for all-day events, you can skip entering a time at all... you can check the following code below:
UPDATE: You can use CSS to remove the time also - this way there will be no difference between all-day events and events with a fixed start and/or end times.
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.event = {
events: [{
title: 'test1',
start: '2019-05-05',
end: '2019-05-10'
},
{
title: 'test2',
start: '2019-05-05'
},
{
title: 'test3',
start: '2019-05-13 15:00',
end: '2019-05-15 11:30'
},
{
title: 'test4',
start: '2019-05-26 10:00',
end: '2019-05-28 13:30'
}
]
};
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
events: $scope.event.events,
plugins: ['dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,timeGridDay'
}
});
calendar.render();
});
html,
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
}
.fc-day-grid-event .fc-time {
display: none;
}
<link href='https://fullcalendar.io/assets/demo-to-codepen.css' rel='stylesheet' />
<link href='https://fullcalendar.io/releases/core/4.1.0/main.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/releases/daygrid/4.1.0/main.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/releases/timegrid/4.1.0/main.min.css' rel='stylesheet' />
<script src='https://fullcalendar.io/assets/demo-to-codepen.js'></script>
<script src='https://fullcalendar.io/releases/core/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/interaction/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/daygrid/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/timegrid/4.1.0/main.min.js'></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<div id="calendar" ng-model="eventSources"></div>
</body>
If we want to prevent appending the time to the title we need to define the start and end time without declaring the time as below.
$scope.event = {events: [{
title:'test1',
start: '2019-05-05',
end: '2019-05-10'
},
{
title:'test2',
start: '2019-05-05'
}]};
Please note that I haven't uploaded the whole code but have updated the changed code only. Rest of the code remains the same.
I am developing a site in angular js, i am uploading vimeo(https://vimeo.com/) or youtube video url. For this i have to show a thumbnail on my listing so is it possible to show preview of a video url using angular js.
Thank You
You can do this using ng-repeat,
var app = angular.module('myApp', []);
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.youtube.com/**'
]);
});
app.controller('videoController', ['$scope',
function MyCtrl($scope) {
$scope.product = [{
name: 'some name',
description: 'some description',
media: [{
src: 'v5Asedlj2cw'
}]
},
{
name: 'some name 2',
description: 'some description 2',
media: [{
src: 'v5Asedlj2cw'
}]
}
]
;
$scope.getIframeSrc = function(src) {
return 'https://www.youtube.com/embed/' + src;
};
}
]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="videoController">
<div ng-repeat="media in product">
<div class="thumbnail">
<div class="video-container">
<iframe width="100%" ng-src="{{getIframeSrc(media.src)}}" frameborder="0 " allowfullscreen></iframe>
</div>
</div>
</div>
</body>
</html>
I tried implementing the Kendo spreadsheet widget using angular directive but it does not show up.
Here is my code:
HTML:
<div kendo-spreadsheet style="height:580px;" k-options="spreadsheetOptions"></div>
Controller:
$scope.spreadsheetOptions = {
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}],
excel: {
fileName: "Order.xlsx"
}
};
No errors shown in the console either. Any ideas?
Kendo Angular Spreadsheet directive works. Please see below example. You can also paste below example in html file.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.bootstrap.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div kendo-spreadsheet style="width:100%" k-options="spreadsheetOptions"></div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.spreadsheetOptions = {
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}],
excel: {
fileName: "Order.xlsx"
}
};
})
</script>
</body>
</html>
I am using ui-grid in angular, I want to have a "click me" button that when clicked, alerts or logs the contents of the specific row data or index that is associated. How do I get to that? Right now I can trigger an alert box, but not get the actual contents of the row (or even for example, a specific key).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angularjs Show No Records Found in UI Grid</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<script type="text/javascript">
var myApp = angular.module('sampleapp', ['ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
myApp.controller("appcontroller", function ($scope, $http) {
$scope.gridOptions = {
data: 'sampledata',
columnDefs: [
{ field: 'name' },
{ field: 'gender' },
{ field: 'company' },
{ field: 'click', cellTemplate: '<button class="btn primary" ng-click="grid.appScope.sampledetails()">Click Me</button>' }
]
};
$scope.sampledata = { "data": [] };
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
$scope.sampledata = data;
});
$scope.sampledetails = function () {
alert('Hi Click is working');
return false;
};
});
</script>
<style type="text/css">
.grid {
width: 500px;
height: 400px;
}
.nodatatxt {
position: absolute;
top : 80px;
opacity: 0.25;
font-size: 1.5em;
width: 100%;
text-align: center;
z-index: 1000;
}
</style>
</head>
<body>
<form id="form1">
<div ng-app="sampleapp" ng-controller="appcontroller">
<br /><br />
<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
<div class="nodatatxt" ng-if="sampledata.data.length==0">No Records Found</div>
</div>
</div>
</form>
</body>
</html>
At first, your code is unreadable. Use embedded code snippets, jsfiddle, codepen or plunkr
Secondly, if you will take a look at template of your ui-grid, you will see that it just uses ng-repeat. Something like this:
ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"
So you can override cell template:
var actionCellTemplate = '<div class="ui-grid-cell-contents"' +
'ng-model="row.entity.username"' +
'ng-click="clickMe(row)">....</div>'
$scope.gridOptions = {
columnDefs: [
....
{
name: 'action',
cellTemplate: actionCellTemplate
}
]
};