In my controller I'm using this to open my Kendo UI Core window:
$scope.winQuestion.setOptions($scope.DlgOptions);
$scope.winQuestion.open();
This is the code in my html:
div kendo-window="winQuestion" k-title="'Question 1'" k-position="{ top: 60, left: 100 }"
k-width="730" k-height="300" k-visible="false"
k-content="{ url: 'questions.html' }"
k-on-open="winQuestion = true" k-on-close="winQuestion = false" style="background-color:#ffffff;"></div>
Now inside that questions.html I have a button that I try to trigger this in the same controller thats inside of another function where I process a cancel click:
$scope.winQuestion.close();
This call which in my search for answers on StackOverflow is supposed to work just returns:
TypeError: $scope.winQuestion.close is not a function
I suspect that its a scope issue but not sure why because I get into the
$scope.closeWindow = function(){
$scope.winQuestion.close();
};
Sorry I don't have a plunker for this but couldn't get kendo core ui to work there, only locally.
I have not tested it but from what it looks like you are overriding the variable of the window, with true/false in the k-on-open and k-on-close events.
When you open the window with $scope.winQuestion.open(); the on-open event will set $scope.winQuestion = true;.
So all subsequent method calls on $scope.winQuestion are no longer made on the reference of that window, but instead on a boolean value (which does not implement an open() function)
Related
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
I am working on my first bigger Polymer application and currently have around 30 components. Most of the components need to be able to display (modal) message boxes. For this I implemented a message box component wrapping paper-dialog (similar to other message box components available).
What I don't like is that in every component which wants to display message boxes I need to define an element
<my-message-box id="message-box"></my-message-box>
and then call it like this
this.$["message-box"].information("Something happened...");
This works but my gut feeling is that a message box should be more like a global service, a singleton maybe. In C# f.e. there exists a static method on the MessageBox class.
Is the above mechanism really the recommended way to do it or are there better solutions to it?
My current approach is to create error-dialog and add it as a sibling to my main-app in index.html:
<body>
<main-app></main-app>
<error-dialog></error-dialog>
<noscript>
Please enable JavaScript to view this website.
</noscript>
</body>
error-dialog's ready() method adds a custom event:
ready() {
super.ready();
this.addEventListener('o_error', e => this._errorListener(e));
}
_errorListener(e) {
this.o_error = e.detail;
this.$.errorDlog.open();
}
Now I can open error-dialog from anywhere with
let msg = ...
const dlog = document.querySelector('error-dialog');
dlog.dispatchEvent(new CustomEvent('o_error', {detail: msg, bubbles: true, composed: true}));
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.
Using Polymer Starter Kit as an example, I would like to have different <app-toolbar> in <my-app> (using property headerType) based on different <my-view#>, i.e.
<my-view1> => headerType = 'my-view1-header'
<my-view2> => headerType = 'my-view2-header'
In my <my-app>, I have created a property headerType and use <dom-if> to show/hide different <app-toolbar>.
My question is how would I always fire an event to <my-app> and set headerType = my-view#-header whenever <my-view#> is active (i.e. comes into view).
I have tried the polymer lifecycle, such as ready(), attached(), etc, and I understand they are only trigger during dom-related events.
I eventually use the _pageChanged observer to call a function on <my-view#>. Below are the snippet of the code.
_pageChanged: function(page) {
let onLoad = function () {
let selected = this.$.ironpages.children[page];
if (Object.getPrototypeOf(selected).hasOwnProperty('viewSelected')) {
selected.viewSelected();
}
}
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, onLoad, this._showPage404, true);
},
There is some example in Polymer shop template where you can execute something when the visibility of your view change with iron-pages.
you just need to add a property for example visible in each of your view element with Boolean type and observe that property to check whatever the view is visible or not, and then in your iron-pages you need to add selected-attribute property and the value is visible. check Polymer Shop Template.
I need to open multiple ngDialog with same id, when clicking the close button it should close only the currently opened ngDialog.
For closing ngDialog I need to call one event which collects the data then closes the ngDialog.
It depends if you're trying to close it (1) from its own controller, or (2) the controller that instantiates it:
(1) From its own controller:
scope.closeThisDialog(value);
see doc: https://github.com/likeastore/ngDialog
(2) From controller that instantiates it:
var dialog = ngDialog.open();
// for closing the dialog call dialog.close()
As mentioned by Satish Salvador's response.
Cheers!
Assign the ngDialog.open() to a variable like var dialog = ngDialog.open(); for closing the dialog call dialog.close()
In some cases, you can avoid this issue by specifying disableAnimation options when creating the dialog:
ngDialog.open({
template: 'template.html',
appendClassName: 'ngdialog-custom',
disableAnimation: true
});
You could use .getOpenDialogs()
There is a method on ngDialog object called getOpenDialogs. What you could with this function is to get a list of all opened dialogs and close the one you are interested in by calling .close() on the "selected" one.
Beyond closeThisDialog() you can do:
vm.myDialog = ngDialog.open(... omissis ...);
...
vm.myDialog.close();
or
vm.myDialog = ngDialog.open(... omissis ...);
...
ngDialog.close(vm.myDialog.id);