Bind Click Event to Kendo ToolBar - javascript

I am trying to bind click event to buttons I have in kendo Tool bar. I am creating button using template.
I am using Kendo Jquery with angular.
Any help will be highly appreciated.
So far I have tried this using Kendo Jquery Documentation:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/toolbar/index">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="toolbar"></div>
</div>
<script>
$(document).ready(function () {
$("#toolbar").kendoToolBar({
items: [
{
template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-save'></span>Save</a>"
},
{
template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-arrows-swap'></span>Top/Bottom</a>"
},
{
template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-pencil'></span>Edit</a>"
},
{
template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-calendar'></span>Schedule</a>",
click: onButtonClick()
},
{
type: "splitButton",
text: "Download",
menuButtons: [{
text: "PDF",
icon: "k-i-pdf"
},
{
text: "EXCEL",
icon: "k-i-excel"
}
]
},
{
type: "button",
text: "Action",
overflow: "always"
},
{
type: "button",
text: "Another Action",
overflow: "always"
},
{
type: "button",
text: "Something else here",
overflow: "always"
}
]
});
$("#dropdown").kendoDropDownList({
optionLabel: "Paragraph",
dataTextField: "text",
dataValueField: "value",
dataSource: [{
text: "Heading 1",
value: 1
},
{
text: "Heading 2",
value: 2
},
{
text: "Heading 3",
value: 3
},
{
text: "Title",
value: 4
},
{
text: "Subtitle",
value: 5
}
]
});
});
function onButtonClick() {
alert('clicked')
}
</script>
</div>
</body>
</html>
Dojo for the same: https://dojo.telerik.com/#amitdwivedi/uDOFeWev

According to the Telerik Docs for the toolbar Click function, the click event handler is only applicable for toolbar items of type button or splitButton. But, items with a template do not have a type.
So, you need to either use basic buttons instead of templates (then you can use the Telerik click handler), or put the click handler in the template itself like this:
$(document).ready(function() {
$("#toolbar").kendoToolBar({
items: [
{
template: "<a href='' onclick='onButtonClick()' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-save'></span>Save</a>"
// ^^^^^^^^^^^^^^^^^^^^^^^^^
}
]
});
});
function onButtonClick(){
alert('clicked')
}
Example Dojo: https://dojo.telerik.com/UniqiHuF/4

Related

Output image depending on selection vue.js

I am relatively new to vue.js and I am having a bit of difficulty. I want to show the images of NBA players depending on the selection using vue.js. For example: If the Dunk contest champion is selected: the image of only Kobe and Jordan should show up. To know if it should output the image of the player, it has to check the data in an object with key-values called properties, which contain conditions and every NBA player.
I created a variable called checksate initially set to false. I want it to turn true when the condition is met. I created an onChange method for that purpose. I am able to show the images and fill up the selection element by taking the data from the key-value objects. However, I cannot make the selection element and the images work together.
Any ideas?
<head>
<style>
a.incognito{
display: none;
}
</style>
</head>
<body>
<h2>NBA players</h2>
<p>A selection of the best NBA players</p>
<div id="app">
<select #change="onChange()" v-model="selected">
<option value="none">Select filter</option>
<option v-for="property in properties" :value="property.filter"> {{property.filter}}</option>
</select>
<div class="portfolio">
<a v-for="player in players" :href="player.href"
:class="{incognito: checkstate}" :playername="player.name">
<img :src="player.src" alt="" >
</a>
</div>
</div>
<script src="https://unpkg.com/vue#3"></script>
<script>
let app = Vue.createApp({
data() {
return {
players: [{ name: "Mike", href: "https://en.wikipedia.org/wiki/Michael_Jordan", src: "/Test/Michael_Jordan_in_2014.jpg" },
{ name: "Kobe", href: "https://en.wikipedia.org/wiki/Kobe_Bryant", src: "/Test/Kobe_Bryant_2014.jpg" },
{ name: "Lebron", href: "https://en.wikipedia.org/wiki/LeBron_James", src: "/Test/LeBron_James_-_51959723161_(cropped).jpg" },
{ name: "Kd", href: "https://en.wikipedia.org/wiki/Kevin_Durant", src: "/Test/Kevin_Durant_(Wizards_v._Warriors,_1-24-2019)_(cropped).jpg" },
],
properties: [{filter: "Guard position",Mike:true,Kobe:true,Kd:false,LeBron:false},
{ filter: "Foward position",Mike:false,Kobe:false,Kd:true,LeBron:true},
{ filter: "Multiple Championships",Mike:true,Kobe:true,Kd:true,LeBron:true},
{ filter: "Multiple MVP's",Mike:true,Kobe:false,Kd:false,LeBron:true},
{ filter: "Over 6'8",Mike:false,Kobe:false,Kd:true,LeBron:true},
{ filter: "Dunk contest champion",Mike:true,Kobe:true,Kd:false,LeBron:false}],
selected: 'none',
checkstate:false,
}
}, methods: {
onChange() {
const attr = this.properties.find((item) => item.filter === this.selected)
checkstate=this.properties[this.playername]
},
},
props:['playername']
,
})
app.mount('#app')
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<style>
a.incognito {
display: none;
}
</style>
</head>
<body>
<h2>NBA players</h2>
<p>A selection of the best NBA players</p>
<div id="app">
<select v-model="selected" >
<option value="none">Select filter</option>
<option v-for="property in properties" :value="property"> {{property}}</option>
</select>
<div >
<a v-for="player in players" :href="player.href" :class="{incognito: !player[selected]}" >
<img :src="player.src" alt="">
</a>
</div>
</div>
<script src="https://unpkg.com/vue#3"></script>
<script>
let app = Vue.createApp({
data() {
return {
players: [{ name: "Micheal Jordan", ID: "0", href: "https://en.wikipedia.org/wiki/Michael_Jordan", src: "/Test/Michael_Jordan_in_2014.jpg", GuardPosition: true, ForwardPosition: false, MultipleChampionships: true, MultipleMVP: true, Over6foot8: false, DunkContestChampion: true },
{ name: "Kobe Bryant", ID: "1", href: "https://en.wikipedia.org/wiki/Kobe_Bryant", src: "/Test/Kobe_Bryant_2014.jpg", GuardPosition: true, ForwardPosition: false, MultipleChampionships: true, MultipleMVP: false, Over6foot8: false, DunkContestChampion: true },
{ name: "Lebron James", ID: "2", href: "https://en.wikipedia.org/wiki/LeBron_James", src: "/Test/LeBron_James_-_51959723161_(cropped).jpg", GuardPosition: false, ForwardPosition: true, MultipleChampionships: true, MultipleMVP: true, Over6foot8: true, DunkContestChampion: false },
{ name: "Kevin Durant", ID: "3", href: "https://en.wikipedia.org/wiki/Kevin_Durant", src: "/Test/Kevin_Durant_(Wizards_v._Warriors,_1-24-2019)_(cropped).jpg", GuardPosition: false, ForwardPosition: true, MultipleChampionships: true, MultipleMVP: false, Over6foot8: true, DunkContestChampion: false },
],
properties: ["GuardPosition", "ForwardPosition", "MultipleChampionships", "MultipleMVP", "Over6foot8", "DunkContestChampion"],
selected: 'none',
checkstate: false,
}
}
})
app.mount('#app')
</script>
</body>
</html>

v-show inside a v-for loop, i need to open only the clicked option

I just started learning Vue.js and I need some help. I have a v-show within a v-for loop set up, there is a show button within the loop, when I click this, at the moment it opens all the hidden divs, I want it to open only the relevant one that's clicked. Maybe there is another way to do this or a better way I have been reading that v-show might not be suited to be used inside a loop.
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
}
.content {
width: 100px;
height: 100px;
background-color: red;
}
.contenttwo {
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div id="root">
<div v-for="item in dropdownVoices" :key="item.voice" class="">
<div v-show="active" class="content">
</div>
<div v-show="!active" class="contenttwo">
</div>
<button type="button" name="button" v-on:click="active = !active">Change me</button>
</div>
</div>
<script charset="utf-8">
var app = new Vue({
el: '#root',
data: {
active:true,
dropdownVoices:[
{ voice: 'One' },
{ voice: 'Two' },
{ voice: 'Three' },
{ voice: 'Four' },
{ voice: 'Five' },
{ voice: 'Six' }
],
},
method:{
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
Thanks in advance for the help.
The problem is you are tracking the active changes with only one variable active but you need to track each item, so you have two options add an active property to each item object or track the active item in an array. I'm going to show you the first
// script
data: {
dropdownVoices:[
{ voice: 'One' , active: true},
{ voice: 'Two' , active: true},
{ voice: 'Three' , active: true},
{ voice: 'Four' , active: true},
{ voice: 'Five' , active: true},
{ voice: 'Six', active: true }
],
}
// template
<div v-for="item in dropdownVoices" :key="item.voice" class="">
<div v-show="item.active" class="content"></div>
<div v-show="!item.active" class="contenttwo"></div>
<button type="button" name="button" v-on:click="item.active = !item.active">Change me</button>
</div>
Note: If you only want to change the div styles you can do it with a bind class.
<div :class="item.active ? 'content' : 'contenttwo'"></div>

Print window prints only the first page. No scroll visible on print preview in jQuery Datatables in angular 7

I am using Jquery Datatable in angular 7 so as to open the table contents in Print Preview window as given in example
Datatable. I am able to get the data but when I click on Print button to open the print preview screen It opens but only first page is displayed as my table contains 50+ rows. The outer scroll is not visible as in the example Datatable.
<table id="tblDetails" class="stripe responsive no-wrap" style="width:100%">
<thead>
<tr>
<th>TRANSACTION DATE</th>
<th>DESCRIPTION</th>
<th>DEBIT</th>
<th>CREDIT</th>
<th>CURRENT BALANCE</th>
</tr>
</thead>
</table>
In My component.ts
$("#tblStatementDetails").DataTable({
data: this.statementDetails,
retrieve: true,
border: false,
className: "",
orderClasses: false,
responsive: true,
scrollX: true,
paging: false,
dom: "Bfrtip",
buttons: [
{
extend: "print",
title: "",
customize: function (win) {
debugger;
$(win.document.body)
.find("table").addClass('compact');
}
}
],
columns: [
{ data: "dtCaptureDate", className: "text-center ", width: "7%", border: "none", color: "#8a807f !important", },
{ data: "szTransactionDescription", className: "text-center", width: "15%", border: "none", color: "#8a807f !important" },
{ data: "Debits", className: "text-center", width: "7%", border: "none", color: "#8a807f !important" },
{ data: "Credits", className: "text-center", width: "7%", border: "none", color: "#8a807f !important" },
{ data: "szRedCapital", className: "text-center", width: "7%", border: "none", color: "#8a807f !important" },
]
});
in my angular.json
"src/assets/datatable/js/jquery.dataTables.min.js",
"src/assets/datatable/js/dataTables.buttons.min.js",
"src/assets/datatable/js/buttons.flash.min.js",
"src/assets/datatable/js/jszip.min.js",
"src/assets/datatable/js/pdfmake.min.js",
"src/assets/datatable/js/vfs_fonts.js",
"src/assets/datatable/js/buttons.html5.min.js",
"src/assets/datatable/js/buttons.print.min.js"
In index.html I have added
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" />

Adding buttons for previous and next slide in Vegas slider

I have very simple slider created with Vegas Slideshow. Now I'm trying to add simple Prev/Next buttons. This is the slider
<div class="slide-caption"></div>
<script src="/assets/js/jquery-3.4.0.min.js"></script>
<script src="/assets/js/vegas.min.js"></script>
<script>
$(".slider-wrapper").vegas({
slides: [
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
],
walk: function (index, slideSettings) {
$('.slide-caption').html(slideSettings.text);
}
});
</script>
This works perfectly. It is showing the image and the caption bellow.
Now I've tried to add this for the buttons but nothing is appeared on page. There is no errors in console. I'm not sure also if I need to add the HTML for the buttons or it is pull them from the JS and CSS of the Vegas
<script>
$(".slider-wrapper").vegas({
slides: [
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
],
walk: function (index, slideSettings) {
$('.slide-caption').html(slideSettings.text);
}
});
// buttons
$('a#previous').on('click', function () {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('previous');
});
$('a#next').on('click', function () {
$elmt.vegas('options', 'transition', 'slideLeft2').vegas('next');
});
</script>
Anyone know how exactly I can add the buttons?
I haven't tested this, but it may get you heading in the right direction...
HTML...
<div id="previous" class="button"></div>
<div id="next" class="button"></div>
JQUERY...
<script>
$("#previous").click( function() {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('previous');
});
$("#next").click( function() {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('next');
});
</script>
CSS...
.button {
display: block;
height: 100px;
width: 100px;
background-color: purple;
}

Why are onclick events inside qtip2 tooltips not working?

In the jsfiddle link given below, there are 2 buttons and a tooltip is displayed on clicking of any one of them. I want the button inside the tooltip to change the display and other attributes of the "delete" text and "input text"(make the text field editable) The problem is that the value does update but still the text does not become editable" Please suggest a solution to the problem
JSFIDDLE
HTML
<button id="gear">Gear</button>
<button id="gear1">Gear</button>
<div style="display:none;" id="menu">
<button class="menuitem">Rename</button><br>
<input type= "text" id = "try" readonly = "true"><br>
<div id = "delete" style = "display: block">Delete</div><br>
</div>
​
JavaScript
$(function() {
$("#gear").button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
}).qtip({
content: {
text: $('#menu')
},
show: {
event: 'click',
solo: true,
modal: true
},
style: {
classes: 'ui-tooltip-dark ui-tooltip-shadow'
},
position: {
my: 'top center',
at: 'bottom center',
}
});
$("#gear1").button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
}).qtip({
content: {
text: $('#menu')
},
show: {
event: 'click',
solo: true,
modal: true
},
style: {
classes: 'ui-tooltip-dark ui-tooltip-shadow'
},
position: {
my: 'top center',
at: 'bottom center',
}
});
$(".menuitem").click(function(){
document.getElementbyId("try").readOnly = false;
document.getElementbyId("delete").style.display = none; alert($(this).text());
});
});​
CSS
#gear {
margin:100px;
}
.menuitem {
padding-left: 10px;
padding-right: 10px;
font-size: 9px;
margin-bottom: 3px;
width: 75px;
}
I can suggest you to use jquery selectors:
$(".menuitem").click(function(){
$("#try").attr('readonly', false);
$("#delete").hide();
alert($(this).text());
});

Categories

Resources