I have a gauge chart which has one arrowIndicator.
Im trying to capture the value change event on the arrowIndicator. I tried dojo.connect() and on() methods to set the event handler for my gauge but failed both times.
This is what I did...
var arrow = new dojox.gauges.AnalogArrowIndicator({....});
dojo.connect(arrow, 'change', handlerFunction);
AND
var arrow = new dojox.gauges.AnalogArrowIndicator({....});
define(["dojo/on"], function(on){
on(arrow, "change", myHandleFunction);
});
I don't get any error message or anything...
How should I go about this?
the valuechange event is exposed at the guage chart level:
dojo.connect(gauge.indicators[0], "valueChanged", dojo.hitch(gauge, function(){
//new value is in this.indicators[0].value
}));
where, gauge is the jsid or js variable holding the gauge dijit
depending on how you are adding the indicators, it might be indicators[1] or similar
Related
I have seen https://www.amcharts.com/docs/v4/concepts/event-listeners/ and
https://www.amcharts.com/docs/v4/reference/categoryaxis/#Events
categoryAxis.events.on('hit', function (ev) {
console.log('clicked on ', ev.target)
}, this)
works. However, this returns the complete CategoryAxis. I would like to distinguish on which catgeory the user clicked.
e.g. categoryAxis.category.template.events.on('hit', function (ev) does not exist.
You need to add the hit event listener on the axis renderer's label template in order to capture the category label that was clicked:
categoryAxis.renderer.labels.template.events.on('hit', function(ev) {
alert(ev.target.dataItem.category)
})
In a scheduler timeline view having a second_scale, is it possible to click on a single date? I have found this answer, but I'm wondering if there is an event in the meantime.
There are onXScaleClick, onXScaleDblClick events for the Timeline view. But in case, when you have 2 scales, they fire only for the second one. Check console in the snippet that demonstrates it.
Nonetheless, you can add onclick event listener for the first scale using js:
var dateScaleEl = document.querySelector(".dhx_second_scale_bar");
dateScaleEl.onclick = function() {
var targetDate = scheduler.getState().date;
console.log(targetDate);
}
Demo.
getState() is a method to get the active date.
The question basically is how to convert this:
var evt = 'click' || 'touchstart'; // Based on some logic
$('.selector').on(evt, function(){});
into Meteor event handler
Template.MyTemp.events({
....??? : function(e, t){}
});
UPDATE
Based on the comments below, seems like chrome is the problem, as it sets the touch events passive = true.
So the new question would be:
How to set the passive property for event listeners in Blaze Template
Events?
You can specify multiple events in a single handler by using a / as a delimiter between the event types. docs
Template.MyTemp.events({
'click/touchstart .selector'(e,t){
e.preventDefault(); // prevents default click after touchstart
// your handler
}
});
In english:
for the template MyTemp handle click or touchstart events on the
selector class.
This is also useful reading: touch and mouse
I haven't seen much documentation and cant seem to get my code to work. the code snippet is below. I'm trying to remove the on mouse over listener but have had no success. Google charts docs has the method as such - google.visualization.events.remove Listener(listener_handler).
I'm uncertain what the listener_handler actually pertains to. Im trying to remove the on mouse over listener once the chart has been clicked.
google.visualization.events.addListener(chart, 'onmouseover', chartMouseOver);
google.visualization.events.addListener(chart, 'onmouseout', chartMouseOut);
google.visualization.events.addListener(chart, 'select', function () {
google.visualization.events.removeListener(chartMouseOver);
}
You need to store the returned event object in a variable, and pass that to removeListener :
var event = google.visualization.events.addListener(chart, 'onmouseover', function() {
alert('onmouseover');
google.visualization.events.removeListener(event); //the event object as param
});
demo -> http://jsfiddle.net/cmDT2/
Is the dataSource.changed event working?
After my Kendo UI grid is instantiated, I am binding the change event per the documentation here:
http://docs.kendoui.com/api/framework/datasource#change
//To set after initialization
dataSource.bind("change", function(e) {
// handle event
});
I am doing this:
// initialize
$("#grid").kendoGrid({
dataSource: dataSource,
blah blah blah
)
});
// end of initialization
// bind afterwards
var grid = $('#grid').data('kendoGrid');
grid.dataSource.bind("change", function (e) {
dataChanged();
});
//also tried a setTimeout:
// bind afterwards
setTimeout(function () {
var grid = $('#grid').data('kendoGrid');
grid.dataSource.bind("change", function (e) {
dataChanged();
});
}, 350);
function dataChanged() {
// handle "change" whatever that means -- documentation definition is hazy
// does reassigning the data array constitute a change?
// does changing the value of a particular item in the data array
// constitute a change?
// does removing an item from the data array constitute a change?
var grid = $("#grid").data("kendoGrid");
grid.refresh();
}
But my dataChanged() function is not called when I do either of these things:
var grid = $('#grid').data('kendoGrid');
grid.dataSource.data()[1]["deptname"] = 'XXX';
or
grid.dataSource.data = aDifferentArray;
I am not sure exactly what the 'changed' event is listening for. What, precisely, is supposed to trigger it?
If I create a completely new dataSource, and assign it to the grid that already has a dataSource, I don't see how that would trigger an existing data source's changed event. Such an event (the grid noticing that its dataSource has been replaced with a different one) would be a grid-level event, not a dataSource-level event, right?
The important thing to note is that the data backing the DataSource is an ObservableArray, and that the data items in that array are converted to ObservableObjects.
The change event of the datasource is fired under 2 conditions:
The data ObservableArray changes (a record is inserted, deleted). An example of this would be using the DataSource.add() or DataSource.remove() functions.
If a property changed event bubbles up to the DataSource from one of the ObservableData objects in the array. However, just like the rest of the Kendo MVVM framework, the notification that a property changed only occurs when its .set("propertyName", value) function is called.
This is why grid.dataSource.data()[1]["deptname"] = 'XXX'; is not triggering the change event. If you change it to: grid.dataSource.data()[1].set("deptname", 'XXX'); then it should start to work. Basically, think of the change event as being fired in response to an MVVM property change fired from the data observable object.
As for changing the data array grid.dataSource.data = aDifferentArray; I'm actually not sure if that will or should trigger a change. I've never tried that.