I am using RadCalendar with Nativescript-Vue and trying to allow a user to manually (through a form) add an event but once the event gets pushed into the eventSource the calendar does not react to it (it is not shown in the view). If I re-render the Calendar, it does show the newly added event. Any idea why the Calendar is not reacting to this change and adding the new event?
The eventSource has a variable named calendarEvents bind to it.
<RadCalendar height="100%" width="100%" ref="calendarComponent"
id="calendar"
:eventSource="calendarEvents"
eventsViewMode="Inline"
selectionMode="Single"
viewMode="Month"
transitionMode="Slide"
#dateSelected="onDateSelected"
#dateDeselected="onDateDeselected"
#navigatedToDate="onNavigatedToDate"
#navigatingToDateStarted="onNavigatingToDateStarted"
#viewModeChanged="onViewModeChanged"
#inlineEventSelected="onInlineEventSelected" />
And this is the method that should add the event to the calendar:
onAddBookingExternal () {
this.$showModal(BookingExternal).then((data) => {
if(data) {
...
let event = new calendarModule.CalendarEvent('Name', startDate, endDate, false, color)
this.calendarEvents.push(event)
}
})
},
Thanks for your help!
It's a known issue with RadCalendar, you will have to give a new reference of array to update the UI. Just pushing data to same array doesn't trigger the update.
onAddBookingExternal () {
this.$showModal(BookingExternal).then((data) => {
if(data) {
...
let event = new calendarModule.CalendarEvent('Name', startDate, endDate, false, color)
this.calendarEvents = [...this.calendarEvents, event];
}
})
}
Playground Sample
Related
I am working on a task where I have implemented RangeSelector in Highcharts(in React using functional components). I have implemented a click event for month category. In the event handler I need to access UserMin and UserMax values which are inside the event object present as argument. But, I am unable to access only those two properties in the event object which has the form
PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
You can check this fiddle https://jsfiddle.net/pravindvarma/k65eq92v/
When you click on the month button, the console shows this object. When I click on YTD, it shows undefined for e.xAxis.
Thank you
You can use afterSetExtremes event, check if it is triggered by range selector button and get the userMin and userMax values.
xAxis: {
events: {
afterSetExtremes: function(e){
if (e.trigger === 'rangeSelectorButton') {
const { userMin, userMax } = e;
console.log(userMin, userMax);
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/362gv98u/
API Reference: https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes
I have a standard Ionic 4 page (Home) that creates a popover that uses a component (BusinessDetails) with a button that redirects to a new page (RequestTurn). However, when I click on that button, the popover is not dismissed and is renders on top of my RequestTurn page. I guess I need to manually dismiss it from the component (BusinessDetails), but I don't know how to access the instance of the popover from there, because it was created in the Home page. Is there a way to do this?
home.page.ts
presentModal(business:Business, event: Event) {
this.popoverController.create(({
component: BusinessDetailsComponent,
cssClass: "business-popover",
showBackdrop: true,
componentProps: {
business: business
}
}) as any).then(popover => popover.present()); }
business-detail.component.ts
goToRequestTurn(id: string) {
//Need to dismiss popver here (?)
this.router.navigateByUrl(`/request-turn/${id}`); }
Thanks for your help.
add private popoverController: PopoverController to the component constructor
then write a function like this and call it when you want to dismiss the modal
async DismissClick() {
await this.popoverController.dismiss();
}
I solved this problem as follows:
In parent component I have passed callback as prop to child component:
const popover = await this.popoverController.create({
component: PopoverComponent,
event: ev,
componentProps: {
onClick: () => {
popover.dismiss();
},
},
});
await popover.present();
And in PopoverComponent I have added #Input() onClick; which called when the user clicks:
...
#Input()
public onClick = () => {}
...
afterClick() {
this.onClick();
}
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 simple application that binds to a view model using Knockout JS. It uses a foreach loop that fires the Knockout afterAdd event when a new item is added to the view model. The result is supposed to be a Kendo draggable that can be dropped on a target. For some reason I can't get the drop event on the target to fire.
JSFiddle
<button data-bind="click: $root.add">Add</button>
Drop target
var ViewModel = function () {
this.operations = ko.observableArray([]);
this.add = function () {
this.operations.push("drag");
}.bind(this);
this.bind = function () {
$(".draggable").kendoDraggable({
hint: function (e) {
$("#console").append("<li>firing hint</li>");
return e.clone();
},
});
$(".droptarget").kendoDropTarget({
drop: function (e) {
$("#console").append("<li>firing drop</li>");
}
});
};
};
ko.applyBindings(new ViewModel());
The problem is that you're instantiating the KendoDropTarget widget multiple times. If I click the Add button in your example kendoDropTarget() is invoked three times. If I add a guard against this (see http://jsfiddle.net/tj_vantoll/rk6qwsy4/1/) the drop event works as expected.
I'm having some trouble understanding how event dispatching and binding to events between children parents work in the awesomeness that is Marionette.
Is it correct that I can trigger a custom event from an itemView like this:
var Item = Marionette.ItemView.extend({
events: {
"click .foo": "do:something"
}
});
var itemCollection = Marionette.CollectionView.extend({
itemView: item,
initialize: function () {
this.on("itemview:do:something", this.onSomething, this);
}
}};
Is there some shortcut to binding to the itemView events like I would DOM events:
var itemCollection = Marionette.CollectionView.extend({
itemView: item,
itemviewevents: {
"itemview:do:something": "onSomething"
}
}};
Thanks :).
You're confusing triggers and events. Your code should be
var Item = Marionette.ItemView.extend({
triggers: {
"click .foo": "do:something"
}
});
Use the events hash to have a function called when an event takes place, use the triggers hash to have a trigger executed.