Ag-grid trigger events from outside - javascript

I am working with ag-grid. I have event handlers defined in my gridOptions:
gridOptions =
{
...
onCellEditingStarted: function (event) { /* magic happens!*/ },
onCellEditingStopped: function (event) { /* magic happens!*/ }
...
}
When cell editing starts/stops - everything works great. But at some point I need to trigger these events from other .js file, where I don't even have ag-grid instance.
I'm trying something like this:
$(window).trigger('cellEditingStopped');
But unfortunately it doesn't work. What am I doing wrong? Is it possible to trigger events for ag-grid in this way or I need some more code to write?

This is solution i've found to achieve my goal:
gridOptions =
{
...
onCellEditingStarted: function (event) { /* magic happens!*/ },
onCellEditingStopped: function (event) { /* magic happens!*/ }
onGridReady: function() {
$('#gridContainer').off("cell-editing-stop");
$('#gridContainer').on("cell-editing-stop", function () {
gridOptions.api.stopEditing();
});
},
...
}
So in my other file i can do something like this:
that.OnCellEditingStop = new Event('cell-editing-stop');
$('#gridContainer').trigger('cell-editing-stop');
This solution looks clean for me and i don't have to move my grid instance to another file somehow. Hope it will help others somehow

Related

Adding onselectionchange to vue

i'm trying to implement a text selection listener to display a toolbar for some custom options
<script>
export default {
name: "home",
created() {
document.onselectionchange = function() {
this.showMenu();
};
},
data() {
return {
...
};
},
methods: {
showMenu() {
console.log("show menu");
}
}
</script>
<style scoped>
</style>
but it still display that can't call showMenu of undefined, so i tried in this way:
created() {
vm = this;
document.onselectionchange = function() {
vm.showMenu();
};
},
so, nothing changed =(
i need to use this selectionchange because its the only listener that i can add that will handle desktop and mobile together, other method i should implement a touchup, touchdown and its not working for devices
Functions declared the classic way do have their own this. You can fix that by either explicitly binding this using Function.prototype.bind() or by using an ES6 arrow function (which does not have an own this, preserving the outer one).
The second problem is that if you have more than one of those components you've shown, each will re-assign (and thus, overwrite) the listener if you attach it using the assignment document.onselectionchange =. This would result in only the last select element working as you expect because it's the last one assigned.
To fix that, I suggest you use addEventListener() instead:
document.addEventListener('selectionchange', function() {
this.showMenu();
}.bind(this));
or
document.addEventListener('selectionchange', () => {
this.showMenu();
});
A third solution stores a reference to this and uses that in a closure:
const self = this;
document.addEventListener('selectionchange', function() {
self.showMenu();
});

CKEDITOR : How do set `contentdom` after every SetData

I am creating a CKEditor plugin and I face some issues on this.
Model of My Plugin:
CKEDITOR.plugins.add("myplugin", {
//for lang,require,icon
init:function(a){
editor.on('contentDom', function () {
editor.document.on('key', function (evt) {
console.log("Key Pressed");
});
});
}
});
This is Working Fine.But,my problem is setData.
I am setting data when the user is clicking a file.
After setData the key event is not Working.
Is there any way to attach the listener to document after every setData() within plugin file?
And what are the other type of methods which are used in CKEditor like init ?
(OR)
Is there any way to setData() without affecting contentdom,key events?
Please add the listener to the editor and not to the document. That way it wil not get removed when document is removed:
editor.on( 'instanceReady', function( e ) {
editor.on( 'key', function( e ) {
console.log('test');
});
});
Please see: https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_editor.html#event-key
Finally, I found the Answer.
Refer the below Question
CKEDITOR.setData prevents attaching of events with .on function
And goes to the Document in CKEditor Docs Page.
#contentDomUnload
Finally My Code Like this,
editor.on('contentDom', function () {
var editable = editor.editable();
editable.attachListener(editable, 'keyup', function (evt) {
console.log('for key events');
});
editable.attachListener(editable, 'mousedown', function (evt) {
console.log('for click events');
});
});
And It worked very well.

un listen to event while modify-interaction and reactivate on listen after

I'm struggling again with the unByKey/ol.Observable stuff...
I got a event listener for creating popups.
var unByKeyPopup;
unByKeyPopup = map.on('click', function (evt) {
...
});
Then I have an modify interaction which is activated when a checkbox is set on true.
function xyz() {
....
$('#checkbox').on('click', function () {
if(this.checked) {
modifyVectorInteraction();
$('#checkbox').un('click', unByKeyPopup); //????? dont activate the Popup thing while the user is in modify interaction
} if(!this.checked) {
map.removeInteraction(modifyinteraction);
$('#checkbox').on('click', unByKeyPopup); //????? ok, modify done, lets re-activate the Popup
}
...
});
...
}
Well... this doenst work. What am I doing wrong?
Thank you
You're trying with the wrong method, use unByKey instead:
map.unByKey(unByKeyPopup);
UPDATE:
Instead of:
unByKeyPopup = map.on('click', function (evt) {
...
});
Create a function that makes the job:
var popupFunction = function(evt){
//...
};
And active/reactive it with:
unByKeyPopup = map.on('click', popupFunction);

Trigger view event with jQuery

I have a Backbone View with simple events:
Backbone.View.extend({
events: {
"change #id": "idChanged"
},
idChanged: function () {}
initialize: function () {
/* construct HTML */
$("#id").trigger("change");
}
});
However this does not fire the idChanged event. When I change #id with the browser it does fire. How can I trigger the Backbone View event?
a couple of things in your code.
1 I don't think you defined your events correctly.
It should be a hash, or a function that returns a hash, like so:
events: {
"change #id": "idChanged"
}
2 a few typos like "function" and missing comma
then, to make the events work, the defined #id element must be inside the view's el. If the element is outside of the view, it's not gonna work.
also, you cannot trigger that in initialize, because before that function is executed, the view is not fully initialized yet. :)
here's a working example:
http://jsfiddle.net/3KmzQ/
That's because the events hash will be bound to the view when it gets rendered, which happens after the initialize code gets run. Try calling the desired callback directly:
Backbone.View.extend({
events: function () {
"change #id": "idChanged"
},
idChanged: function () {}
initialize: function () {
/* construct HTML */
this.idChanged();
}
});
You used "extend".
Same code should apply to Backbone.view.Object( {....} )
Specify the object that you would like to fire events at.
Backbone.View.Ojbect(
{
events: function () {
"change #id": "idChanged"
},
idChanged: funciton () {}
initialize: function () {
/* construct HTML */
$("#id").trigger("change");
}
}
);
That is, try not to extend.

I can't create a class based on actual HTML element

I'm trying to create a simple gallery with prototype.js and script.aculo.us. To handle left and right arrow I made this code, but it doesn't work
Gallery.Arrow = Class.create(document.createElement('a'), {
initialize: function(listener) {
this.on('click', listener);
this.addClassName('xjsl-arrow');
}
});
this.on is undefined. I tryed Class.create($(document.createElement('a')), ..., or even Element.extend(this) in the initialize function, but nothing works.
If I tryed Event.Handler(this, 'click', listener) to, but the error come from element.attachEvent inside prototype.js library.
Is it possible to create a class based on HTML element ?
Try building the Class based on the Element.Methods namespace like this
Gallery.Arrow = Class.create(Element.Methods, {
initialize: function(element,listener) {
this.on(element,'click', listener);
this.addClassName(element,'xjsl-arrow');
}
});
jsfiddle example http://jsfiddle.net/rPLa8/

Categories