Issue: Clicking on the image in the kendo menu item, the select event is not triggering.
what i have tried: See the sample code below
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/menu/images">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<h4>Menu with images</h4>
<ul id="menu-images"></ul>
</div>
<script>
$("#menu-images").kendoMenu({
dataSource: [
{
text: "Golf", imageUrl: "../content/shared/icons/sports/golf.png",
items: [
{
text: "Top News",
imageUrl: "../content/shared/icons/16/star.png",
select: function (e) {
alert('Clicking on image select event is not triggering')
}
},
{ text: "Photo Galleries", imageUrl: "../content/shared/icons/16/photo.png" },
{ text: "Videos Records", imageUrl: "../content/shared/icons/16/video.png" },
{ text: "Radio Records", imageUrl: "../content/shared/icons/16/speaker.png" }]
},]
});
</script>
<style>
#menu-sprites .k-sprite {
background-image: url("../content/shared/styles/flags.png");
}
.brazilFlag {
background-position: 0 0;
}
.indiaFlag {
background-position: 0 -32px;
}
.netherlandsFlag {
background-position: 0 -64px;
}
.historyIcon {
background-position: 0 -96px;
}
.geographyIcon {
background-position: 0 -128px;
}
</style>
</div>
</body>
</html>
Description:
I have edited this code sample taken from Telerik demo. in the above code i have added the items for Golf. that also have the select function which is what i am talking about. after executing this. If i click on the text "Top News" the alert will trigger.The alert is not working when i click/select on the image.
Posting in Telerik forum is only applicable for licensed users. I dont have.
Let me know if any body come across these kind of issue.
Thanks
Dev
It seems like you have nested the event-declaration within the dataSource-item.
Just move the declaration to the menu-level and it should work.
$("#menu-images").kendoMenu({
select: function(e) {
alert($(e.item).children('.k-link').text())
}
dataSource: [
{
text: "Golf", imageUrl: "../content/shared/icons/sports/golf.png",
items: [
{
text: "Top News",
imageUrl: "../content/shared/icons/16/star.png"
},
{ text: "Photo Galleries", imageUrl: "../content/shared/icons/16/photo.png" },
{ text: "Videos Records", imageUrl: "../content/shared/icons/16/video.png" },
{ text: "Radio Records", imageUrl: "../content/shared/icons/16/speaker.png" }]
},]
});
Using $(e.item) you can go further and figure out which item has been selected. Have a look the event-section of the online-demo. http://demos.telerik.com/kendo-ui/menu/events
Related
Hello, I have a little task in vue js and have a little problem, I need If statement which makes ul border color green if price < 140. I need help, thank you.I tried some ways but didn't work.
See the code below:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
ul{
border:2px solid black;
width:450px;
}
#app{
display: flex;
justify-content: center;
}
#card{
margin-left:5px;
}
</style>
<body>
<div id = "app" >
<div id ="card" v-for="post in posts" >
<ul>
<img :src="post.img" :value="post.id">
<li>{{post.title}}</li>
<li>{{post.price}}</li>
<li>{{post.date}}</li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
var card = new Vue({
el: '#app',
data: {
posts: [
{ id: 1, title: 'Cat', price: 145, date: "1 year ago", img: 'https://www.pngonly.com/wp-content/uploads/2017/06/Cat-Clipart-PNG-Image.png' },
{ id: 2, title: 'Cat2', price: 80, date: "2 years ago", img: 'https://www.pngonly.com/wp-content/uploads/2017/06/Cat-Clipart-PNG-Image.png' },
{ id: 3, title: 'Cat3', price: 180, date: "3 years ago", img: 'https://www.pngonly.com/wp-content/uploads/2017/06/Cat-Clipart-PNG-Image.png' }
],
baseStyles: {
borderColor:'green',
},
}
})
Solved
You can achieve it with the ternary operator
<ul :style="{ 'border-color': post.price < 140 ? 'green' : '' }">
<img :src="post.img" :value="post.id">
<li>{{post.title}}</li>
<li>{{post.price}}</li>
<li>{{post.date}}</li>
</ul>
Just started to learn Angular and I am facing an issue as described below:
Given the following scenario:
var app = angular.module('test', []);
app.controller('MainController', ['$scope',
function($scope) {
$scope.title = 'This is another test';
$scope.promo = 'More or less'
$scope.products = [{
name: 'Product 1',
price: 19,
stock: 20
}, {
name: 'Product 2',
price: 19,
stock: 12
}, {
name: 'Product 3',
price: 19,
stock: 3
}, {
name: 'Product 4',
price: 19,
stock: 0
}, ]
}
]);
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<style>
.stock {
color: green;
}
.zeroStock {
color: red;
}
.buy {
background-color: green;
color: #fff;
margin-bottom: 20px;
border: 0;
padding: 10px 20px;
}
.outOfStock {
background-color: red;
}
</style>
<body ng-app="test">
<div class="main" ng-controller="MainController">
<div class="test" ng-repeat="product in products">
<div class="name"> {{product.name}} </div>
<div class="price"> {{product.price}} </div>
<div id="stock" class="stock"> {{product.stock}} </div>
<button class="buy">BUY</button>
</div>
</div>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
</body>
</html>
What I'd like to achieve is:
Create a function or directive which will compare each stock quantity
if stock = 0:
button get class: "outOfStock"
button copy will change from "BUY" to "OUT OF STOCK"
stock copy will get the class: "zeroStock"
My apologies if this might sounds silly or if might be a duplicate question, I did try to look for it, but I have potentially used the wrong terminology.
Thank you for your help.
You can use ng-class and ng-if for this, there is even no need for any function:
Example:
var app = angular.module('test', []);
app.controller('MainController', ['$scope',
function($scope) {
$scope.title = 'This is another test';
$scope.promo = 'More or less'
$scope.products = [{
name: 'Product 1',
price: 19,
stock: 20
}, {
name: 'Product 2',
price: 19,
stock: 12
}, {
name: 'Product 3',
price: 19,
stock: 3
}, {
name: 'Product 4',
price: 19,
stock: 0
}, ]
}
]);
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<style>
.stock {
color: green;
}
.zeroStock {
color: red;
}
.buy {
background-color: green;
color: #fff;
margin-bottom: 20px;
border: 0;
padding: 10px 20px;
}
.outOfStock {
background-color: red;
}
</style>
<body ng-app="test">
<div class="main" ng-controller="MainController">
<div class="test" ng-repeat="product in products">
<div class="name"> {{product.name}} </div>
<div class="price"> {{product.price}} </div>
<div id="stock" class="stock" ng-class="{'zeroStock': product.stock == 0}"> {{product.stock}} </div>
<button class="buy" ng-if="product.stock != 0">BUY</button>
<button ng-if="product.stock == 0" class="outOfStock">Out Of stock</button>
</div>
</div>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
</body>
</html>
I am trying to draw circle diagram on html button click (would prefer it on kendo diagram toolbar which is not working too), the addShape method seems to be working fine without any errors, but the diagram doesn't show up on the page.
However the circle is drawn with no issues on initial kendo diagram load.
$(document).ready(createDiagram);
function createDiagram() {
$("#diagram").kendoDiagram({
shapes: [{
type: 'circle',
fill: {
color: 'blue'
}
},
{
type: 'rectangle'
}
],
shapeDefaults: {
editable: {
tools: ["createShape", "delete", "rotateClockwise", "rotateAnticlockwise"]
}
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 1
},
type: "polyline",
startCap: "FilledCircle",
endCap: "ArrowEnd"
},
editable: {
tools: ["createShape", "delete", "rotateClockwise", "rotateAnticlockwise"]
}
});
$("#diagram").getKendoDiagram().layout();
}
function drawCircle() {
var diagram = $("#diagram").getKendoDiagram();
/*diagram.addShape(new kendo.dataviz.diagram.Point(100, 220), {
background: "red"
});*/
diagram.addShape(new kendo.dataviz.diagram.Circle({
radius: 600,
stroke: {
width: 5,
color: "#586477"
},
fill: "#e8eff7"
}));
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<base href="http://demos.telerik.com/kendo-ui/diagram/events">
<input type="button" class="btn btn-warning" value="Circle" onclick="drawCircle();" />
<div id="diagram"></div>
I think the problem might be occurring as you have might have put your JS code after your HTML. i.e after the </body> tag ends. This might be leading to problems.
In this working DEMO, I have placed all the JS code into the <head> tag and now the function dramCircle() is being called successfully.
I have kendo grid separately in a fiddle,
I have delete function seprately in a fiddle
when I select ThreeDots in each row in the grid it should show delete in small popup and when you click delete confirmation popup should open up.
after I click yes it should delete that particular row and when I slect no it should not
delete.
trying to display my confirmation box for delete in jquery way..providing that code below
can you guys tell me how to combine my code.
providing code and fiddle below
http://jsfiddle.net/cjyh8Lyc/4/
https://jsfiddle.net/9qpLukrL/
<div class="sports">
<div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
<div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
<div class="kendoContent">Are you sure you want to upload file</div>
</div><div class="clearFloat"></div>
<div class="row kendoPopUpFooter textAligncenterImp">
<button class="commonBtn" type="button" id ="playerDocumentOk" (click)="uploadFile($event,document.value)">OK</button>
<button class="clearBtn" type="button" id ="playerDocumentCancel" (click)="cancel()">Cancel</button>
</div><div class="clearFloat"></div>
</div>
</div>
$('.sports').show();
$('.sports').hide();
#runningDocumentsPopup .sports {
position: relative;
}
.sports .kPopupConfirmationBox {
display: block;
z-index: 3;
left: calc(50% - 175px);
width: 350px;
position: absolute;
}
.sports {
display: none;
}
Not sure what is the purpose of your having delete function in the separate since kendo has built in function that can remove the row.You can attach a javascript function to delete(your code in a separate file for.
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
<script>
var data = [
{ Id: 1, Name: "Decision 1", Position: 1 },
{ Id: 2, Name: "Decision 2", Position: 2 },
{ Id: 3, Name: "Decision 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
//data: data,
transport: {
read: function(e) {
e.success(data);
},
update: function(e) {
e.success();
},
create: function(e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" },
Position: { type: "number" }
}
}
}
});
var grid= $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
editable : true,
navigatable: true,
toolbar: ["save","cancel", "create"],
columns: ["Id", "Name", "Position",{template:"<a class='mybutton'><span class=''></span>ThreeDots</a>"}]
}).data("kendoGrid");
grid.element.on('click','.mybutton',function(){
//var dataItem = grid.dataItem($(this).closest('tr'));
//alert(dataItem.Name + ' was clicked');
//built in kendo function to remove row
grid.removeRow($(this));
})
</script>
</body>
</html>
Jsbin Demo demo with delete confirmation
> <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">
Inline popup
</div>
<style>
#open-popup {padding:20px}
.white-popup {
position: relative;
background: #FFF;
padding: 40px;
width: auto;
max-width: 200px;
margin: 20px auto;
text-align: center;
}
</style>
<script type="text/javascript">
$('#open-popup').magnificPopup({
items: [
{
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg',
title: 'Peter & Paul fortress in SPB'
},
{
src: 'http://vimeo.com/123123',
type: 'iframe'
},
{
src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
type: 'inline'
},
{
src: '<div class="white-popup">Popup from HTML string</div>',
type: 'inline'
},
{
src: '#my-popup',
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image'
});
<script>
</body>
</html>
How can I make a logo float to the right automatically when clicked and make a pop out appear with some info.
Right now I used a button but I want to use a logo..so how can I put in the image instead of the button and also the pop up to appear when clicked on that logo image.
To use an image as the trigger for the pop-up window, it looks like you're using the id "open-popup." You can remove the button and add an image or put an image in the button (I like buttons, but you have to take measure to unstyle it) - so a <a> tag - or whatever you like + add the id of "open-popup."
..button id="open-popup">...
...$('#open-popup').magnificPopup({...
As far as moving the logo on click... you can add a class with jQuery/JavaScript and that class can do the animation.
jQuery
$('.element').on('click', function() {
$(this).addClass('active'); // $(this) refers to the element clicked in this case
});
styles
.element {
transition: .5s; // set speed (look up other options)
}
.element.active {
transform: translate(50%, 0); // random movement example
}
There are many different pop-up / light-boxes. If magnificPopup isn't enjoyable, try another.