I'm trying to open select option using javascript in angular 6
const dropDown = document.getElementById(id);
let event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropDown.dispatchEvent(event);
Also tried like
#ViewChild('select') select: ElementRef;
func() {
this.select.nativeElement.open();
}
but it is not working. I have searched and found results for material and for ionic. But how can I open in angular 6?
I was able to achieve this on an angular app using
document.getElementById('shippingRates').click()
If you're doing some model updates in your app just before you expect the drop down to be opened, then consider delaying this call with something like
window.setTimeout(() => document.getElementById('shippingRates').click(), 100);
I dont think it is possible, but you can achieve this by setting the size of the select and having it float using position:absolute.
<div style="position:relative">.<select style="position:absolute;top:-8px;left:-20px" onClick="onAssign(this)">
<option>a</option>
<option>b</option>
<option>c</option>
</select></div>
function openMySelect(){
document.querySelector(‘#mySelect’).size=YOUR_OPTIONS.length;
}
function onAssign(data,select){
select.size=1
// your logic
}
#ViewChild('select') select: ElementRef;
func() {
this.select.nativeElement.focus();
}
Use focus() it will work.
Related
I am opening a modal component from a Nativescript-Vue function which opens fine
this.$showModal(SuccessModal).then(() => { console.log('Modal Closed') });
I can call $modal.close from a button within the modal but getting $modal is undefined if I try to call this from, say, the mounted() hook.
I want the modal to close on its own after a three second timeout rather than the user having to click outside of the modal.
How would I go about this?
When using the traditional syntax for function you loose the current context (this), use arrow functions to avoid that.
setTimeout(() => {
this.$modal.close();
}, 3000);
Or you will have to keep reference to context in a variable
var me = this;
setTimeout(function() {
me.$modal.close();
}, 3000);
Here's a twist on #Manoj's response.
Instead of using an external variable to bind the global this, you could use a .bind() in your native (non-arrow) function if you're inclined to do so, like this:
setTimeout(function() {
this.$modal.close();
}.bind($this), 3000);
I'm working on an iPad app using Kendo and the DropDownList is throwing an ActionSheet. I'd like to force it to use the Web UI list style. How can I do this?
For anyone interested I was able to hack together a solution. Here's a function that accepts a kendoMobileView as the argument and applies the fix.
//Hack to force dropdowns to act like comboboxes in mobile!
utils.fix.dropdownlists = function(view) {
var dropdowns = view.element.find("[data-role='dropdownlist']");
//Iterate through dropdown elements
_.each(dropdowns, function(item){
var comp = $(item).data("kendoDropDownList");
if(comp && comp.popup) {
comp.popup.bind("open", function(event){
event.sender.element.parent().removeClass("km-popup km-widget");
if(event.sender.element.parent().hasClass("km-popup")) {
//Prevent default open animation.
//Then remove classes and open the popup programitcally
//Easy peasy, Lemon squeezy
event.preventDefault();
event.sender.element.parent().removeClass("km-popup km-widget");
setTimeout(function(){
event.sender.open();
},0);
}
});
}
});
}
Anybody figure out syntax to re-render a template on window resize, using Meteor.js? I tried doing a Meteor.flush(), but that doesn't seem to be the right approach.... :(
window.onresize = function(){
Meteor.flush();
};
Change some session value when resizing the window, and then just have the template listen for that change:
<template name="body">
{{touch}}
</template>
Template.body.touch = function() {
return Session.get("touch");
}
Meteor.startup(function() {
$(window).resize(function(evt) {
Session.set("touch", new Date());
});
});
Meteor docs provides a good example for this scenario, by the way of adding window dimensions as a Client-side global Reactive data source, which could be called on
Template->autorun()
https://guide.meteor.com/data-loading.html#stores
The title explains it all...
I need to perform a custom action when I know a user has finished resizing, but from what I can find in the Kendo UI documentation there is no event for this accessible to me other that 'resize' which I cannot use as is.
Perhaps i just missed the event?
if not:
Is there a way to use the 'resize' event to determine that a user has stopped resizing?
So here's my answer thus far:
Mine differs slightly due to architectural needs, but here's a general solution
var isResizing = false;
var wndw = $(element).kendoWindow({
// .....
resize: OnResize,
// .....
}).data('kendoWindow');
function onResize() {
isResizing = true;
}
$('body').on('mouseup', '.k-window', function() {
if(isResizing){
// **Your 'Stopped' code here**
isResizing = false;
}
});
Have you considered using underscore.js debounce? I have used it successfully to only trigger then change after the resize events have stopped coming for a certain period (in the case below 300ms). This does add a small delay to captureing the end, but if like me you just want to store the final size then that works fine. Here is the version of the code above but using underscore debounce:
var wndw = $(element).kendoWindow({
// .....
resize: _.debounce( this.hasResized, 300)
// .....
}).data('kendoWindow');
//This is called at the end of a resize operation (using _.debounce)
function hasResized (args) {
// ** Your code here **
};
Hope that helps.
I am developing a mobile web app using Kendo UI Mobile. Whenever we make any AJAX calls, or our DataSources make them we call app.startLoading() to show the loading icon to the user. This works very well.
However, depending on the context in which the call is made we would like to change the text that is displayed along with the loading icon. I know you can define this when I create the kendo.mobile.Application instance. How can I change it afterwards?
The documentation does not suggest a way to do this, and a browse of the source code did not help me either. Is this really not possible?
EDIT: This is using Kendo UI Mobile v.2012.3.1114
I usually make a "utility" function to do this:
var _kendoApp = new kendo.mobile.Application(document.body, {});
var showLoading = function (message) {
_kendoApp.loading = "<h1>" + (message ? message : "Loading...") + "</h1>";
_kendoApp.showLoading();
};
I am also setting a default message of "Loading..." if one isn't passed in.
Edit:
I could have sworn that worked for me in a past app I did, but judging by thr source, I think you are right, my answer above shouldn't work. My best suggestion is to add a class to the message element so you can target it, and use jQuery to change the text.
var _kendoApp;
var showLoading = function (message) {
$(".loading-message").text(message ? message : "Loading...");
_kendoApp.showLoading();
};
_kendoApp = new kendo.mobile.Application(document.body, {
loading: '<h1 class="loading-message">Loading...</h1>'
});