Angular 6 jqxScheduler create custom datafields in edit dialog

[MartinParticipant]

Hello lucoe,

You could disable the jqxScheduler’s edit dialog by setting the editDialog property to ‘false’. And then you could bind to the appointmentDoubleClick for opening your custom dialog, for example jqxWindow.

Please, have a look at the following Example.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[lucoeParticipant]

Hello, Martin.
I’ve decided to use my own dialog according to the example above, but I’m facing the following problem. I can’t capture the button events.

My HTML is

<jqxScheduler #scheduler
(onEditDialogClose)=”editDialogClose($event)”
(onAppointmentAdd)=”appointmentAdd($event)”
(onAppointmentDoubleClick)=’appointmentOpen($event)’
(onAppointmentChange)=”appointmentChange($event)”
(onAppointmentDelete)=”appointmentDelete($event)”
[theme]=”‘energyblue'”
[width]=”getWidth()” [height]=”600″
[date]=”date”
[source]=”dataAdapter”
[editDialogCreate]=”editDialogCreate”
[localization]=”localization”
[resources]=”resources”
[showLegend]=”true”
[view]=”‘weekView'”
[views]=”views”
[appointmentDataFields]=”appointmentDataFields”
[contextMenuCreate]=”contextMenuCreate”
[contextMenuItemClick]=”contextMenuItemClick”
[contextMenuOpen]=”contextMenuOpen”
[renderAppointment]=”renderAppointment”
(onCellClick)=”cellClick($event)”>
</jqxScheduler>
<div>{{titulo}}</div>

<jqxWindow #dialogWindow [height]=”500″ [width]=”500″ [autoOpen]=”false”>
<div>Editar evento</div>
<jqxForm #myForm
[width]=’400’
[height]=”‘auto'”
[template]=’template’
[value]=’sampleValue’
>
</jqxForm>
</jqxWindow>

and my typescript has the two following piece of code

//–form definition – start
columns: Array<jqwidgets.FormTemplateItem> = [
{
name: ‘submitButton’,
type: ‘button’,
text: ‘Sign up123′,
width: ’90px’,
columnWidth: ‘50%’,
align: ‘right’
},
{
type: ‘button’,
text: ‘Cancel’,
width: ’90px’,
columnWidth: ‘50%’
}
];
template: Array<jqwidgets.FormTemplateItem> = [
{
bind: ‘titulo’,
type: ‘text’,
label: ‘Título’,
required: true,
labelWidth: ’85px’,
width: ‘250px’,
info: ‘Título do evento’,
infoPosition: ‘right’
},
{
bind: ‘local’,
type: ‘text’,
label: ‘Local’,
required: true,
labelWidth: ’85px’,
width: ‘250px’,
info: ‘Local do evento’,
infoPosition: ‘right’
},
{
bind: ‘inicio’,
type: ‘datetime’,
label: ‘Início’,
required: true,
labelWidth: ’85px’,
width: ‘250px’
},
{
bind: ‘fim’,
type: ‘datetime’,
label: ‘Fim’,
required: true,
labelWidth: ’85px’,
width: ‘250px’
},
{
bind: ‘diatodo’,
type: ‘checkbox’,
label: ‘Dia todo’,
required: false,
labelWidth: ’85px’,
width: ‘250px’
},
{
bind: ‘city’,
type: ‘text’,
label: ‘City’,
required: true,
labelWidth: ’85px’,
width: ‘250px’
},
{
bind: ‘state’,
type: ‘option’,
label: ‘State’,
required: true,
labelWidth: ’85px’,
width: ‘250px’,
component: ‘jqxDropDownList’,
options: [
{ value: ‘California’ },
{ value: ‘New York’ },
{ value: ‘Oregon’ },
{ value: ‘Illinois’ },
{ value: ‘Texas’ }
]
},
{
bind: ‘zip’,
type: ‘text’,
label: ‘Zip code’,
required: true,
labelWidth: ’85px’,
width: ‘250px’
},
{
type: ‘blank’,
rowHeight: ’10px’
},
{
columns: this.columns
}
];
sampleValue: any = {
firstName: ‘John’,
lastName: ‘Scott’,
address: ‘1st Ave SW’,
city: ‘San Antonio’,
state: ‘Texas’,
zip: ‘78209’
};
//–form definition – end

//– submitButton event click defition – start
ngAfterViewInit() {
this.myScheduler.ensureAppointmentVisible(‘id1’);
this.btn = this.myForm.getComponentByName(‘submitButton’);
this.btn.on(‘click’, () => {
console.log(‘====> THE BUTTOM IS WORKING’);
//this.myForm.submit(‘https://www.jqwidgets.com/form_demo/’, ‘_blank’, ‘POST’);

});
}
//– submitButton event click defition – end

but, when the button is clicked, the process never passes through the console.log command above.

Thank you for your attention.

[lucoeParticipant]

One more question.
How can I use the method jqxForm.hideComponent() to hide a component that is inside the columns component of the jqxForm?

[MartinParticipant]

Hello lucoe,

For binding to the form buttons click you should use the buttonClick event of the jqxFrom.
Here is an Example.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts