I have a Kendo grid with a detailTemplate (textarea with some styling) and am trying to intercept and handle a keypress event.
I have tried AngularJS and jQuery patterns with no luck.
If anybody has been successful I would be grateful for any suggestions.
$("#grid").kendoGrid({
detailTemplate: kendo.template( $("#template" ).html()),
detailInit: detailInit
});
function detailInit(e) {
var detailRow = e.detailRow;
var txtArea = detailRow.find(".myTextArea");
$(txtArea).on("keypress", function(e) {
console.log(e)
});
}
<div id="gid"></div>
<script id="template" type="text/x-kendo-template">
<textarea class="myTextArea"></textarea>
</script>
If you are interested in the control characters such as CR or Tab, then also listen to the KeyDown event.
function detailInit(e) {
var detailRow = e.detailRow;
detailRow.find(".myTextArea").on("keypress", function(e) {
console.log(e);
});
detailRow.find(".myTextArea").on("keydown", function(e) {
console.log(e);
});
}
Related
I am new to Kendo-UI and Web-Engineering and I am facing a problem which I haven't solved after investing hours of time.
I have a grid with 8 columns, and a Excel toolbar button. When I fire the excelExport event, i show 2 more hidden columns to include their data in the report, and after that I hide them again.
My Problem is that my columns shrink for the hidden columns when they are shown, yet dont expand their width afterwards when they're hidden again.
Here's my script for the excelExport event:
<script type="text/javascript">
var exportFlag = false;
$(window).load(function() {
$("#pr-grid").data("kendoGrid").bind("excelExport",function(e) {
if (!exportFlag) {
e.sender.showColumn("CallOff");
e.sender.showColumn("LastChange");
e.preventDefault();
exportFlag = true;
setTimeout(function() {
e.sender.saveAsExcel();
});
} else {
e.sender.hideColumn("CallOff");
e.sender.hideColumn("LastChange");
exportFlag = false;
}
});
});
</script>
I'd appreciate any help.
Regards Paparis
$('#pr-grid table').width('100%');
<script type="text/javascript">
var exportFlag = false;
function excelExport(e) {
if (!exportFlag) {
e.sender.showColumn("CallOff");
e.sender.showColumn("LastChange");
e.preventDefault();
exportFlag = true;
setTimeout(function() {
e.sender.saveAsExcel();
});
} else {
e.sender.hideColumn("CallOff");
e.sender.hideColumn("LastChange");
exportFlag = false;
$('#grid table').width('100%');
}
}
</script>
I've tried to make event deledation, set "click" event on body. Event works on button. But why it doesn't work on body?
window.onload = function(){
var bodyN = document.body,
bodyS = bodyN.style
bodyS.transition = "all 0s";
bodyS.backgroundColor = localStorage.getItem("bgc")
bodyN.addEventListener("click", function(e){
console.log(e.target); // why doesn't work this when I click on body?
if (e.target.tagName == "BUTTON") {
console.log(e);
bodyS.transition = "";
bodyS.backgroundColor = e.target.id;
localStorage.setItem("bgc", e.target.id);
}
});
};
the same via jQuery:
$(document).ready(function(){
$("body").css("transition", "all 0s" );
$("body").css("backgroundColor", localStorage.getItem("bgc"));
$("body").on("click", "button", function(e){
console.log(e);
$("body").css("transition", "" );
$("body").css("backgroundColor", e.target.id);
localStorage.setItem("bgc", e.target.id);
})
});
With jQuery, I used "click" instead of "on". Here's an example:
$("body").click(function(e){
console.log(e);
if(e.target.id == "button"){
alert('button');
}
else{
alert('body');
}
});
https://jsfiddle.net/aumayk6s/
Hope it helps you!
Why Select change event execution times will increase with the number of button's click.
HTML :
<button id="btn">click me</button>
JS
require(["dojo/_base/declare", "dojo/dom", "dojo/on", "dojo/_base/lang", "dijit/registry", "dijit/TooltipDialog", "dijit/popup","dijit/form/Select", "dojo/_base/array", "dojo/domReady!"],
function(declare, dom, on, lang, registry, TooltipDialog, popup,Select, Array) {
var InfoWindow= declare( // 类名省略
TooltipDialog,
{
constructor: function (parameters) {
console.log("hello");
},
test:function(){
var tNode=dom.byId("btn");
var myTooltipDialog = new TooltipDialog({
id: 'myTooltipDialog',
style: "width: 300px;",
content: '<div id="tpDialog006" class="pDlg"></div><div id="selectMenu" class="right"><select name="select1" id="sel006" data-dojo-type="dijit/form/Select"> <option value="037" selected="selected">1</option><option class="left" value="005" >2</option><option class="left" value="007" >3</option><option value="006">4</option></select></div>',
onMouseLeave: function(e){
if(registry.getEnclosingWidget(e.target).name=="select1")
return;
popup.close(myTooltipDialog);
},
onOpen:lang.hitch(this, function(e) {
})
});
var sHu = registry.byId("sel006" );
sHu.on("change", function (e) {
alert( "value is" +sHu.value);
});
on(tNode,"click",function(){
popup.open({
popup: myTooltipDialog,
around: dom.byId('btn')
});
})
this.m1="t1";
}
}
);
var infoWindow = new InfoWindow({
});
infoWindow.test();
});
The code is at the link:code link
there may be some problem for the tooltipdialog shows but it will not affect the issue to be reproduced.
This is normal that the click is reproduced because :
in the button click (above) :
on(tNode,"click",function(){
popup.open({
popup: myTooltipDialog,
around: dom.byId('btn')
});
})
In every button click you are opening the Popup so, the tooltip's open function is being executed ( onOpen event fired ) which means that the change event is attached again to your sel006 select input .
What I propose to you is not to assign the select change event inside the tooltips onOpen event and just declare it after the toolTip initialization
So the code became :
var myTooltipDialog = new TooltipDialog({
id: 'myTooltipDialog',
style: "width: 300px;",
content: '<div id="tpDialog006" class="pDlg"></div><div id="selectMenu" class="right"><select name="select1" id="sel006" data-dojo-type="dijit/form/Select"> <option value="037" selected="selected">1</option><option class="left" value="005" >2</option><option class="left" value="007" >3</option><option value="006">4</option></select></div>',
onMouseLeave: function(e){
if(registry.getEnclosingWidget(e.target).name=="select1")
return;
popup.close(myTooltipDialog);
},
onOpen:lang.hitch(this, function(e) {
// remove event from here
})
});
var sHu = registry.byId("sel006" );
sHu.on("change", function (e) {
alert( "value is" +sHu.value);
});
Bellow a fiddle example : Fiddle
Im using jQuery to delete and fade the item container. This code will delete and fade div class box2. what i want to do this to fade div class box1. without changing the delete link to box1.
if anyone can point me out how to do this, highly appropriated. thanks in advace.
<div class="box1">
<div class="box2">
x
</div>
</div>
JavaScript
<script type="text/javascript">
$(document).ready(function () {
$('#load').hide();
});
$(function () {
$(".delete").click(function () {
$('#load').fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'id=' + id;
$.ajax({
type: "POST",
url: "delete.php",
data: string,
cache: false,
success: function () {
commentContainer.slideUp('slow', function () {
$(this).remove();
});
$('#load').fadeOut();
}
});
return false;
});
});
</script>
Try this code :
$(function() {
$('#load').hide();
$('.delete').click(function(){
$('#load').fadeIn();
$(this).parent().slideUp('slow', function () {
$('.delete').appendTo('.box1')
$(this).remove();
$('#load').fadeOut();
});
return false;
})
})
If you change it to var commentContainer = $(this).parent().parent();. It will now target .box1. You can then unwrap .box2 :
commentContainer.slideUp('slow', function() {
$('.box2').unwrap();
$(this).remove();
});
I believe you want
var commentContainer = $(this).parent().parent();
to get to .box1 and not .box2 Does that solve the problem?
Just a couple of comments though. A valid id should start with an alphabetic character. The digit '1' is not valid. 'a1' would be better, or just 'a'. Also use the ajax callback done rather than success as it is currently deprecated.
I'm working on a site, http://teneo.telegraphbranding.com/, and I am hoping to load the pages via ajax so that the sidebar and its animation remain consistent.
When the 'About' link is clicked I need it to load about2.php via a jquery ajax function. But I'm not having any luck. When I can get the page to load via ajax it kills all the jquery functionality on the page. From what I've read I think I need to call the jquery upon successful completion of the ajax call.
I've tried everything it seems and can't get it work. What I need is about2.php to load when the link is clicked and the jquery to dynamically size the divs, like it does on the homepage.
I tried this, but it won't even load the page:
//Dropdown
$(document).ready(function () {
var dropDown = $('.dropdown');
$('h3.about').on('click', function() {
dropDown.slideDown('fast', function() {
var url = 'about2.php'
$.get(url, function(data) {
//anything in this block runs after the ajax call
var missionWrap = $('#mission-wrap');
var w = $(window);
w.on('load resize',function() {
missionWrap.css({ width:w.width(), height:w.height()});
});
var missionContent = $('#mission-content');
var w = $(window);
w.on('load resize',function() {
missionContent.css({ width:w.width() - 205 });
});
});
});
});
});
And then this loads the page, but kills all the jQuery associated with it:
var dropDown = $('.dropdown');
$('h3.about').on('click', function() {
dropDown.slideDown('fast', function() {
$('#index-wrap').load('/about2.php');
});
});
Thank you very much.
I also tried this and it just broke everything:
$(document).ready(function () {
var dropDown = $('.dropdown');
$('h3.about').on('click', function () {
dropDown.slideDown('fast', function () {
$.ajax({
type: 'GET',
url: 'about2.php',
success: function () {
var missionWrap = $('#mission-wrap');
var w = $(window);
w.on('load resize', function () {
missionWrap.css({
width: w.width(),
height: w.height()
});
});
var missionContent = $('#mission-content');
var w = $(window);
w.on('load resize', function () {
missionContent.css({
width: w.width() - 205
});
});
};
});
});
});
});
This should work.
function resize_me () {
var w = $(window);
var missionWrap = $('#mission-wrap');
var missionContent = $('#mission-content');
missionWrap.css({ width:w.width(), height:w.height()});
missionContent.css({ width:w.width() - 205 });
}
//Dropdown
$(document).ready(function () {
$(window).on('load resize', function () {
resize_me();
});
var dropDown = $('.dropdown');
$('h3.about').on('click', function() {
dropDown.slideDown('fast', function() {
var url = 'about2.php'
$.get(url, function(data) {
resize_me();
});
});
});
}
I believe that the problem was that the load event that you were attaching to the window object was not being triggered by the successful load of the $.get.
This is a rough outline of how to structure your application to handle this correctly.
Assuming your HTML looks something like this:
<html>
...
<div id="index-wrap">
<!-- this is the reloadable part -->
...
</div>
...
</html>
You need to refactor all the jQuery enhancements to the elements inside #index-wrap to be in a function you can call after a reload:
function enhance(root) {
$('#some-button-or-whatever', root).on('click', ...);
}
(I.e. look up all the elements under the root element that was loaded using AJAX.)
You need to call this function when the page is first loaded, as well as after the AJAX call in the completion callback:
$('#index-wrap').load('/foo.php', function() {
enhance(this);
});
You can also potentially get rid of some of this using delegated ("live") events, but it's best to hit the jQuery documentation on how those work.
As for events bound to window or DOM elements which aren't loaded dynamically, you shouldn't need to rebind them at all based on which subpage is loaded, just check which of your elements loaded is in a handler that you set up once:
$(window).on('load resize', function() {
var $missionContent = $('#missionContent');
if ($missionContent.length) {
$missionContent.css(...);
}
});