I am using below code:
Can someone please let me know whats incorrect in this?
{headerName: 'Status', field: 'RequestCategory' ,
tooltip: (p: any) => {
return 'Download';
},
cellRenderer: CellRendererFunc, editable : false}
function CellRendererFunc(params) {
return '<button style="background:none !important;border: none; padding: 0 !important; color: #7c77ad; cursor: pointer; text-decoration: underline; text-underline-position: under;" (click)="loadRequestsHistory(id)">'+params.value+'</button>';
}
function loadRequestsHistory(id) {
this.accountTransferAuditHistoryService.GetRequestIdDetailsByBatch(id).
subscribe(res => {
this.BindRequestsTable(res,id);
this.blockUI.stop();
},
(err) => this.handleMessageError(err));
}
I am able to see button on my grid but its not hitting the button click event
Related
Hi I have problem firing event when I scroll. I want event to fire when I scroll menu and not whole page. If you look at console, and disable overflow and height in CSS for #app, event will fire. Please check link.
Assign id of inner div element. Let's say longlist here.
<div id="app">
<div id="longlist" class="some-long-list">
<ul>
...
</ul>
</div>
</div>
Add scroll event to the longlist element. Here you should use mounted() instead of created()
new Vue({
el: "#app",
data: {
list: null
},
methods: {
handleScroll (event) {
// Any code to be executed when the window is scrolled
console.log(event)
console.log("metallica")
}
},
mounted () {
this.list = document.getElementById('longlist')
this.list.addEventListener('scroll', this.handleScroll);
},
destroyed () {
this.list.removeEventListener('scroll', this.handleScroll);
}
})
Also, change css to enable scrolling only inside inner div.
#app {
background: #fff;
border-radius: 4px;
/* padding: 20px; */
transition: all 0.2s;
height: 100vh;
/* overflow: auto; */
}
.some-long-list {
background:red;
width: 300px;
margin:0px auto;
overflow: auto;
height: 100%;
}
Hope this could help.
You currently have this in your pen:
...
created () {
window.addEventListener('scroll', this.handleScroll);
},
...
...so your event listener is attached to the whole window. Try selecting the relevant element first with something like document.getElementsByClassName('my-list')[0] or similar to attach the event listener to the element itself.
e.g.
...
created () {
const list = document.getElementsByClassName('my-list')[0]
list.addEventListener('scroll', this.handleScroll);
}
...
Please open https://jsfiddle.net/gfmyt9u8/31/
When user clicks outside <section> tag area, then the opened div overlay panel should be closed.
Steps to produce scenario :
Click "Please Select Options"
Now, click first item from opened overlay panel (by doing this, the panel got closed automatically)
Next, Click inside the blue color border div (This shows "Please Select Options" as label) again
Now, try to click outside the "blue color border div" and "opened div overlay panel beneath" both
overlay panel will not close
Actual Result : overlay panel is not closing
Expected Result : overlay panel should close when clicked outside the "blue color border div" and "open overlay panel
beneath"
Use the mounted lifecycle hook to add a click event listener to check if the click event is outside the element or not, and based on that hide the element.
A working example:
new Vue({
el: '#app',
data: {
displayList: false,
cat: ['A', 'B']
},
methods: {
itemSelect(o) {
this.displayList = false;
}
},
mounted: function () {
// Listen to all clicks on the document
document.addEventListener("click", function(event) {
// If the click inside the element, do nothing
if (event.target.closest(".section-main")) return;
// If the clicks outside the element, hide it!
this.displayList = false;
}.bind(this));
}
});
.display-no-selected {
cursor: text;
width: 300px;
height: 25px;
border: solid 2px blue;
}
.display-list {
border: solid 1px wheat;
width: 300px;
max-height: 150px;
overflow-y: auto;
}
.toggle-list {
display: none;
}
ul, .selected-ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.inner-ul li {
cursor: pointer;
font-weight: normal;
}
ul.inner-ul li:hover {
background-color: wheat;
}
.default-highlight {
background-color: wheat;
}
ul.inner-ul li span {
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<section class="section-main">
<div class="display-no-selected" #click="displayList=true"> Please Select Options
</div>
<div class="display-list"
v-bind:class="{'toggle-list': !displayList}">
<ul class="inner-first-ul inner-ul">
<li v-for="o in cat" #click="itemSelect(o)">
<span>{{o}}</span>
</li>
</ul>
</div>
</section>
</div>
I would like to customize my tooltip for my table and I used the following example :
https://datatables.net/beta/1.9/examples/advanced_init/events_post_init.html
I copied CSS and JS tooltip file but my tooltip look like a default one.
How can I customize my tooltip ? Do you have examples ?
Cheers
There is nothing fancy about it, really. It is just a <div> following the mouse showing some content. You can use one of the zillion tooltip / popover plugins out there, or you can do it by yourself. Here is an example showing the content of a hovered row in a "tooltip" :
#tooltip {
position: absolute;
z-index: 1001;
display: none;
border: 2px solid #ebebeb;
border-radius: 5px;
padding: 10px;
background-color: #fff;
}
event handlers
$('#example').on('mousemove', 'tr', function(e) {
var rowData = table.row(this).data().join(',')
$("#tooltip").text(rowData).animate({ left: e.pageX, top: e.pageY }, 1)
if (!$("#tooltip").is(':visible')) $("#tooltip").show()
})
$('#example').on('mouseleave', function(e) {
$("#tooltip").hide()
})
demo -> http://jsfiddle.net/0g2axdt5/
The use of animate() is to avoid flicker.
Well, this is exactly what I need to do :
When the user right-clicks on a WebView, the typical menu (without "reload",etc) should not show up.
How can this be done? Any ideas?
P.S. Also : is it possible that a custom menu is shown?
It is simple to prevent the context menu with html:
<body oncontextmenu="return false;">
or with javascript (jquery):
$(document).bind(“contextmenu”, function (e) {
e.preventDefault();
});
Or, if you want to show a custom html context menu using javascript...
HTML:
<div id="context-menu">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
<div id="op">Right click anywhere!</div>
CSS:
#context-menu {
display: none;
position: fixed;
border: 1px solid #ddd;
background: white;
box-shadow: 2px 2px 1px grey;
}
#context-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#context-menu li {
width:150px;
padding: 5px 8px;
}
#context-menu li:hover {
background:#eaeaea;
cursor:pointer;
}
JS:
function startFocusOut() {
$(document).on("click", function () {
$("#context-menu").fadeOut(20); // To hide the context menu
$(document).off("click");
});
}
$(function(){
$(document).bind("contextmenu", function (e) {
e.preventDefault(); // To prevent the default context menu.
$("#context-menu").css("left", e.pageX); // position with cursor
$("#context-menu").css("top", e.pageY);
$("#context-menu").fadeIn(20, startFocusOut()); // show the menu
});
$("#context-menu li").click(function () {
$("#op").text("You have selected " + $(this).text()); // Performing the selected function.
});
});
Jsfiddle: http://jsfiddle.net/VRy93/
I want to dynamically add items to the list. the list's height should be as high as the items are. but at a certain point, it's 300px, the ul should stop "growing" … i did this with "max-height". so far so good. NOW that i have a scrollbar I want to add a resize functionality, so that the user can decide if it's bigger than max-height or not.
The problem is that it can't resize higher than max-height. Does anybody know how to do this? the best way?
html:
click to add
<ul>
<li>start</li>
</ul>
css:
ul {
background: #f2f2f2;
overflow: auto;
height: auto;
max-height: 300px;
resize: vertical;
}
js/jquery:
$('a').on('click', function (e) {
e.preventDefault();
$('ul').append('<li>item</li>');
});
here is the same on fiddle to see it in action: http://jsfiddle.net/ZwrzX/
thx in advance!
Working fiddle: http://jsfiddle.net/ZwrzX/4/
When the UL height reaches 290px, a link appears besides the add item link and the user can click on it to add 25px to the max-height of the UL, if the user clicks it 2 times, 50px (2 x 25px) is added to the max-height of the UL.
HTML
click to add item
Add 25px to UL Max height
<ul>
<li>start</li>
</ul>
JavaScript
$('#addItem').on('click', function (e) {
e.preventDefault();
$('ul').append('<li>item</li>');
if ($('ul').height() > 290) {
$('#addHeight').css('visibility', 'visible');
}
});
$('#addHeight').on('click', function() {
var currenULtHeight = $('ul').height();
$('ul').css('max-height', currenULtHeight + 25 + 'px')
});
CSS
ul {
background: #f2f2f2;
overflow: auto;
height: auto;
max-height: 300px;
resize: vertical;
}
#addHeight {
visibility: hidden;
}
ok. i tried again on my own and came to the following:
var max_h = $('ul').css('max-height').replace('px', '');
function check_height() {
var sum = 0;
$('li').each(function () {
sum += $(this).height();
});
if (sum >= max_h) $('ul').css({ 'height': max_h, 'max-height': sum });
else $('ul').css({ 'height': 'auto', 'max-height': max_h });
}
$('#addItem').on('click', function (e) {
e.preventDefault();
$('ul').append('<li>item</li>');
check_height();
});
$('#removeItem').on('click', function (e) {
e.preventDefault();
$('li').last().remove();
check_height();
});
fiddle: http://jsfiddle.net/ZwrzX/6/
I was asking if there is a cleaner solution. or a solution with less js?
any further ideas?