here is my datefield:
<mx:DateField id="date"
formatString="DD-MM-YYYY" selectableRange="{DTselectableRange}"
change="handleChange()" editable="true" clear="dateCleared(event)"/>
i want to detect clear event, adobe ref say:
clear Event is dispatched when the user
selects 'Clear' (or 'Delete') from the
text context menu.
but dateCleared function in never called...I need it beacause I have to set selectedDate to null when user delete it...
Please help me...
I can confirm that mx.controls.DateField does not dispatch a clear event when selecting "Delete" from the text content menu. I've also had no luck getting a clear event to be dispatched for editable mx.controls.TextInput and spark.components.TextInput. Hmm....
What you can do is handle a change in the value of the control in your handleChange event listener and set your selectedDate value there.
Something like this:
private var selectedDate:Date;
private function handleChange(date:Date):void {
if (date == null) {
selectedDate = null;
}
// your existing handleChange code here
}
Also, I would change this:
<mx:DateField change="handleChange()" />
to this
<mx:DateField change="handleChange(DateField(event.target).selectedDate)" />
Related
I'm using Kendo on Razor pages using MVVM. On a particular page I have a pair of ListBoxes. I want to stop users from deleting items from the boxes with the delete key.
If I trap and prevent the remove event from working, that solves the problem, except you can't then use the toolbox or drag and drop to transfer items from one box to the other (edit: because move is a combination of change & remove events).
This is how I was stopping the remove event...
<select style="min-width: 600px" id="listboxImports" data-role="listbox"
data-text-field="title"
data-value-field="id"
data-selectable="multiple"
data-toolbar='{tools: ["transferTo", "transferFrom"]}'
data-connect-with="listboxSelected"
data-draggable="true"
data-template="template"
data-drop-sources="['listboxSelected']"
data-bind="source: imports, events: {remove: viewmodel.events.remove}"></select>
<script>
var viewmodel = new kendo.observable({
events: {
remove: function(e) {
e.preventDefault();
},
//
}
});
<script/>
I've also tried to trap the delete key's keydown event, but I cannot identify which of the many elements rendered when the ListBox is rendered is actually handling the event.
Can anyone tell me how I can have my cake and eat it please?
Took ma a while, inspired by the same question for kendo's Multiselect: https://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/selection/prevent-removing-selected-items-on-backspace:
$("#listBoxA").parent().get(0).addEventListener('keydown', function(e) {
if (e.keyCode == kendo.keys.DELETE) {
e.stopImmediatePropagation();
e.preventDefault();
}
}, true)
Full dojo: https://dojo.telerik.com/aFaCIkez/3
The _keyDown handler is attached to the <ul> element. My solution attaches a new handler to its parent, using event capturing, so that handler will be executed before Kendo's, and thus stopping the event's propagation if the pressed key was delete.
Alternatively, a possible workaround is to set navigatable to false, but you obviously lose all keyboard functionality. Example: https://dojo.telerik.com/IHICAziR
I am using in one of the lightning components and I am using it to filter a table. But when I'm trying to get its value in JS controller with the keyup function, it's giving one less value than actual.
This question has been already asked for HTML here , But for HTML, we have a solution that we can use onkeyup instead of keyup.
But in salesforce lightning, we don't have any onkeyup function for ui:inputText Source ,
So how to solve this issue?
I have already tried keypress, keyup, keydown.
All are giving one less value than actual one
Component :
<ui:inputText aura:id="search-phrase" class="slds-input" keyup="{!c.filterTable}" placeholder="Search Table" />
JS Controller :
, filterTable :function(component, event, helper) {
var dynamicVal = component.find("search-phrase");
var week = dynamicVal.get("v.value") ;
alert((week+'').toLowerCase());
var searchTerm = (week+'').toLowerCase() ;
$('#userTbl tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
}
I found it's solution.
Just need to add updateOn="keyup" in <ui:inputText>
So new one will become :
<ui:inputText aura:id="search-phrase" class="slds-input" updateOn="keyup" keyup="{!c.filterTable}" placeholder="Search Table" />
Include updateOn attribute to ui:inputtext control. By default, it is mapped to change event so you will get only the exact value when the change event fires. updateOn="eventName"
event details : enter link description here
Hi my template is something like the below
<ListView [items]="modules">
<template let-item="item" >
<StackLayout orientation="vertical">
<Switch (checkedChange)="onSwitchModule(item.id,$event)" [checked]="item.active"></Switch>
</StackLayout>
</template>
</ListView>
My controller is
ngOnInit() {
this._moduleService.getUserModules()
.subscribe(
response=>{
this.modules = response.data;
}
)
}
onSwitchModule(itemId) {
console.log(itemID); //Gets called on initial true binding on switch checked
}
The onSwitchModule get called everytime the page loads with item.active is true on any item, how to handle this ?
NOTE: Beginner in Nativescript
What I did to overcome this is I watch for tap events instead of checkedChange:
<Switch (tap)="switchClicked" [checked]="item.active"></Switch>
and in the callback, you can get the current item from bindingContext:
function switchClicked(args) {
const item = args.object.bindingContext.item;
}
I ran into a similar issue: loading up settings data from an API, and having the checked event fire for the value I'd set from the api -- not desirable in my case. I didn't see a great way to prevent events from firing on the initial binding, so I decided to simply ignore events until I knew they were legit events from the user actually using the switch.
I did that by using a property switchReady to keep track of when you want to start recognizing change events. This pattern also keeps the toggle disabled until you're ready to start accepting changes. This makes use of Switch's isEnabled property, see docs here.
Markup
<Switch [checked]="currentSettings.pushTurnedOn" [isEnabled]="switchReady" (checkedChange)="onPushSettingChange($event)" row="0" col="1"></Switch>
Component
export class SettingsComponent implements OnInit {
currentSettings: Settings = new Settings(false)
switchReady: boolean = false
ngOnInit() {
this.getCurrentSettings()
}
public onPushSettingChange(args) {
let settingSwitch = <Switch>args.object
if (settingSwitch.isEnabled) {
// do something with the event/change
} else {
// we aren't ready to accept changes, do nothing with this change
return
}
}
getCurrentSettings() {
this.settingsService.loadCurrentSettings().subscribe(
() => {
this.currentSettings = this.settingsService.currentSettings
// we've applied our api change via data binding, it's okay to accept switch events now
this.switchReady = true
},
err => alert('There was a problem retrieving your settings.')
)
}
}
I have a couple raddatepicker controls that are not enabled correctly after I've set date1.enabled = true.
The master page contains a client side function that sets disabled controls to readonly:
function ParseDocumentForDisabled() {
//Transform the disabled controls that are not inside a DIV
$("input[type=text][disabled]").each(function (i, v) {
if ($(v).attr('OnClientLoad') != '' && $(v).attr('OnClientLoad') != undefined)
return;
$(v).removeAttr("disabled");
$(v).attr("readonly", "");
});
//Transform the disabled DIVs
$("div[disabled]").each(function (i, v) {
$(v).removeAttr("disabled");
//Take each control type and parse it
$(v).find("input[type=text]").attr("readonly", "");
$(v).find("textarea").attr("readonly", "");
$(v).find("checkbox").attr("disabled", "disabled");
$(v).find("input[type=submit]").attr("disabled", "disabled");
$(v).find("input[type=button]").attr("disabled", "disabled");
});
}
The controls are in a radwindow popup and linked to the event of a radcombobox change, however, after the combobox event sets either raddatepicker's enabled property to true after being disabled, only the calendar icon becomes usable again, the textarea remains readonly.
Thank you for your help.
Iris
[edit]
Managed to fix the issue by setting date1.dateinput.enabled = true. The problem was that the textarea remained readonly instead of being disabled and the jquery didn't activate it properly.
Use the client-side API provided by the control (http://www.telerik.com/help/aspnet-ajax/calendar-client-side-rad-datepicker.html), as it is much more than the collection of HTML, so enabling it has to enable other features and code. Here is what worked for me:
<telerik:RadDatePicker runat="server" ID="rdp1" Enabled="false"></telerik:RadDatePicker>
<asp:Button ID="Button1" Text="enable picker" OnClientClick="enableDatePicker(); return false;" runat="server" />
<script>
function enableDatePicker() {
$find("<%=rdp1.ClientID%>").set_enabled(true);
}
</script>
Here is also an approach that does not depend on knowing the ID of the control - it goes through all disabled HTML elements on the page, check if an IScriptControl is associated with them and whether it has the set_enabled() API and then calls it. Since date pickers are composite controls, the actual date input is disabled, and you also have to enable its parent - the date picker, hence the second nested if.
function enableDatePicker() {
$telerik.$("[disabled]").each(function (index, elem) {
if (elem.control && elem.control.set_enabled) {
elem.control.set_enabled(true);
if (elem.control.get_owner && elem.control.get_owner().set_enabled) {
elem.control.get_owner().set_enabled(true);
}
}
});
}
I've created a Kendo Scheduler that binds to a remote data source. The remote datasource is actually a combination of two separate data sources. This part is working okay.
Question is... is there any way to prevent certain events from being destroyed?
I've stopped other forms of editing by checking a certain field in the event's properties and calling e.preventDefault() on the edit, moveStart and resizeStart events if it should be read-only. This works fine, but I can't prevent deletes.
Any suggestions greatly appreciated.
Just capture the remove event and process it as you have with the edit, moveStart, and reviseStart events. You should see a remove event option off the kendo scheduler. I can see it and capture it in version 2013.3.1119.340.
I think better way is to prevent user from going to remove event in the first place. Handling the remove event still has its validity as you can delete event for example by pressing "Delete" key).
In example below I'm assuming event has custom property called category and events with category equal to "Holiday" can't be deleted.
remove: function(e)
{
var event = e.event;
if (event.category === "Holiday")
{
e.preventDefault();
e.stopPropagation();
}
},
dataBound: function(e)
{
var scheduler = e.sender;
$(".k-event").each(function() {
var uid = $(this).data("uid");
var event = scheduler.occurrenceByUid(uid);
if (event.category === "Holiday")
{
// use .k-event-delete,.k-resize-handle if you want to prevent also resizing
$(this).find(".k-event-delete").hide();
}
});
},
edit: function (e) {
var event = e.event;
if (event.category === "Holiday")
{
e.container.find(".k-scheduler-delete").hide();
}
}
FYI, you can do this...
#(Html.Kendo().Scheduler<ScheduledEventViewModel>()
.Name("scheduler")
.Editable(e => e.Confirmation(false))
)
which will deactivate the default confirmation prompt for the scheduler. Then you can do your own prompt on items you want.
There is also a
.Editable(e => e.Destroy(false))
that you can do to remove the X on the event window. This particular example would remove it for all of the events, but there might be a way to remove it for specific ones.