I cannot access any value in typescript inside the function triggered by the onAdd event of the dxo-item-dragging element. All come undefined
HTML Code :
<dxo-item-dragging group="'server'" [data]="tasks"
[allowReordering]="true" [onDragStart]="onDragStart" [onAdd]="onAdd" [onRemove]="onRemove">
</dxo-item-dragging>
TS Code:
onAdd(e) {
e.toData.splice(e.toIndex, 0, e.itemData);
let a = this.tasks;
}
When I do let a = this.tasks, this.tasks comes as undefined. Actually I defined it.
When I type [onAdd]="onAdd.bind(this)" instead of [onAdd]="onAdd", I can access all properties, but this time the ui slows down a lot and freezes.
Thanks in advance for your help
I tried binding the event event to a function.
I was expecting to access all properties in that function, but I can't.
in the example in this link https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/DnDBetweenGrids/Angular/Light/ there is a solution to my problem. For those who have the same problem as me, the solution to my problem is to put
this.onAdd = this.onAdd.bind(this);
It was enough for me to write. Have a nice day
Related
I am trying to find out the difference between 2 functions. In my
react native app I use an AppState eventlistener to check if the app
is running in the background or foreground (see code below):
AppState.addEventListener('change', this._handleAppStateChange);
the function looks like this:
_handleAppStateChange = (nextAppState) => {
console.log('nextAppState', nextAppState)
this.setState({
appState: nextAppState
});
};
I did not like the way te function is made because in the listener you call it without a parameter
but it the function itself it has a parameter. So I wanted to change this to make it more clear.
This is what is made:
_handleAppStateChange (nextAppState) {
console.log('nextAppState', nextAppState)
this.setState({
appState: nextAppState
});
};
This works fine the nextAppState is still logged but the setstate does not work anymore
is says that it`s not a function. Can someone explain me why?
And can someone explain me which of both functions is the best to use.
Thx a lot!
Start using arrow functions, one of the reason why arrow functions were created is for the problem you have mentioned i.e losing this in the function context.
So in order for your function to work you need to bind the function to this.
In your constructor add this line
this._handleAppStateChange = this._handleAppStateChange.bind(this)
Or you can replace this function
AppState.addEventListener('change', this._handleAppStateChange);
to
AppState.addEventListener('change', (nextAppState) => this._handleAppStateChange(nextAppState));
Bonus.
If you need to pass extra parameter other than nextAppState or which is in state. This line wont work
AppState.addEventListener('change', (nextAppState, this.state.someRandmValue) => this._handleAppStateChange(nextAppState, this.state.someRandmValue));
As this.state.someRandomValue is undefined since handleAppState wont emit this value instead use this
AppState.addEventListener('change', (nextAppState) => this._handleAppStateChange(nextAppState, this.state.someRandmValue));
I'm wondering, is there a possibility to have databindings "out of" a template? Say I have a <template/>-Tag somewhere which I put into the slot of a different component - that component stamps it to its context. Then I want to bind data from the root element to the <template/>-Tag. Also, event bindings (on-x-changed) don't work, because you can't assign a function which is defined in the hosting component. Any ideas?
Example:
... host
{{boundData}}
<binding-component>
<template>
{{boundData}}
</template>
</binding-component>
I don't see changes when I observe boundData in the hosting component. Is there a way to get around this? Or is firing a custom event my only chance?
If you are looking for binding a property outside of polymer something like from index.html you may bind value with element. an example ; index.html
<dom-bind>
<template>
<binding-component bound-data="{{boundData}}"></binding-component>
</template>
</dom-bind>
<script>
// set a value a string, Number or Object etc.
// Optionally wrap this code into a listener ie;
// window.addEventListener('load', e=> { ...below code ... })
var boundData= document.querySelector('dom-bind');
boundData = {} //
</script>
Now in your binding-component element has a property as boundData
hope its helps or provide more code to understand better.
I've made it work the way dom-if does it, too. Like in dom-if (reference), I'm creating a Templatize-instance which then uses forwardHostProp to handle the "inside"-properties
this.__ctor = Templatize.templatize(template, this, {
mutableData: true,
forwardHostProp(prop, value) {
// handling item updates, item being the only property
// from within the binding component
// everything else is automatically bound by templatize
this.set(prop, value);
this.update(this.item);
},
});
this.__instance = new this.__ctor();
this.root.appendChild(this.__instance.root);
This all happens in connectedCallback.
Because the Templatize-instance is passed this, it's bound to the current context as well.
Good luck!
I stuck with the inline validation in the kendo grid.
I don't want to validate after losing focus. I want to validate immediately after typing. So I start using the HTML validator. It works pretty well but the problem is I cant answer these two questions:
which event set the input from valid to invalid.
which event displays the error message.
My Current work: https://dojo.telerik.com/OSONo/56
which event set the input from valid to invalid.
...
which event displays the error message.
Just run your kendoValidator with validator.validate();
The error messages are also set with validate().
Something like this should work:
$(document).on('input propertychange', function() {
validator.validate();
});
The warning seems to be hidden behind some elements, so you can also add the folowing errorTemplate to your kendoValidator:
errorTemplate: '<div class="k-widget k-tooltip k-tooltip-validation" style="margin: 0.5em; display: block;"><span class="k-icon k-i-warning"></span>#=message#<div class="k-callout k-callout-n"></div></div>'
And the whole solution:
https://dojo.telerik.com/OSONo/66
Solved my Problem on my Own. I will edit the post so you can see what i mean but first i just give the dojo projcet.
https://dojo.telerik.com/OSONo/64
my edit:
I am sorry for my previous anwser, i just want to give him my solution i mention in my comment.
In my solution i created an event listener, how listen to all input elements. When something has changed it, saves the current cursor position (its import for ie support) and after this it trigger my "change" event. The "change" event check if it is valid or invalid. If it is invalid the kendo validator shows imidently the error-message (not as default by a blur event).
var ValidierungCheckClass = (function () {
return {
AllDOMElements: function () {
$('body').on('input', function () {
var myActiveElement = $(':focus');
if ((myActiveElement) && (myActiveElement.context.activeElement.nodeName.toLowerCase() !== "body")) {
var myActiveDOMElement = myActiveElement[0],
start = myActiveDOMElement.selectionStart, //just for IE Support
end = myActiveDOMElement.selectionEnd; //just for IE Support
myActiveElement.trigger("change");
myActiveDOMElement.setSelectionRange(start, end); //just for IE Support
}
})
}
}
});
The change event is allready created from kendo so you dont have to write your own.
At least you have to call the method when creating the website.
<script>
ValidierungCheckClass().AllDOMElements();
</script>
This is my Solution to my problem.
best regards.
I want to change value of a variable when the value of scroll position is greater than 100 from top but it doesn't work, the value doesn't change in $scope.
Here is the code:
<div ng-show="title===true">
<p>{{title}}</p>
<p>{{card.nome}}</p>
<p>{{card.prezzo}}€</p>
</div>
<ion-content style="top:0px" delegate-handle="cardScroll" on-scroll="getPositionScroll()">
$scope.title = true;
$scope.getPositionScroll = function () {
console.log("scrollPosition " + JSON.stringify($ionicScrollDelegate.$getByHandle('cardScroll').getScrollPosition().top));
console.log("valore title " + $scope.title);
console.log($ionicScrollDelegate.$getByHandle('cardScroll').getScrollPosition().top >= 100);
$scope.title = $ionicScrollDelegate.$getByHandle('cardScroll').getScrollPosition().top >= 100;
};
Does anyone know why this is not working?
I think it may have to do with the fact that Angular doesn't track changes that have been made by the getPositionScroll() function. A lot of Angular functions are wrapped in the $scope.$apply() function which notifies Angular about changes that have been made. But I think that the function used to track scrolling is not wrapped in this function, which means that you need to call it yourself.
So after $scope.title add:
$scope.$apply($scope.title);
There are a lot of questions regarding when to use $scope.$apply(), like this one, if overused it can cause serious harm to the performance of your app. There is also information about this in the Angular documentation. You may also find some insight in this question about when to use this function in a scroll event.
If I call MagicZoomPlus.stop(); on active magiczooms I'll frequently get the error:
Uncaught TypeError: Cannot read property 'width' of null
At other times I'll get this error:
Uncaught TypeError: Cannot read property 'r' of undefined
When that happens, mousing over the thumbnails triggers:
Uncaught TypeError: Cannot read property 't16' of null
I've tried ...
calling MagicZoomPlus.stop() within the onload event
calling MagicZoomPlus.stop() within a setTimeout of different lengths
calling MagicZoomPlus.stop() after testing for the presence of MagicZoomPlus
testing an image for width/height before calling MagicZoomPlus.stop()
setting width/height on images via css and attributes before calling MagicZoomPlus.stop()
Here's a link to a jsfiddle that uses markup copied from an example on their docs page:
http://jsfiddle.net/sjjju4x4/6/
If you 'run' the fiddle with the console open you'll sometimes get the error, sometimes not. If you reduce the timeout to 10 ms it'll happen more often
Seems like I can't post without a code sample, so here's the JS from the fiddle:
var output = document.getElementById('status');
setTimeout(function () {
document.getElementById('status').textContent = '...............calling stop';
MagicZoomPlus.stop();
}, 20);
Thanks in advance for any help or suggestions you can provide.
Please make sure that the MagicZoom instance is ready before calling MagicZoomPlus.stop().
It is possible to do this with the “onready” callback described at this URL below:
https://www.magictoolbox.com/magiczoomplus/integration/#api
Here is some sample code:
MagicZoomPlus.options = {
'onready': function(id, isUpdated) {
setTimeout(function () {
document.getElementById('status').textContent = '...............calling stop';
MagicZoomPlus.stop(id);
}, 20);
}
};
Here is a jsfiddle to help you see the code:
http://jsfiddle.net/pg9f98z0/