jQuery UI Widgets Forums Angular Angular 6 jqxScheduler create custom datafields in edit dialog

This topic contains 18 replies, has 3 voices, and was last updated by  Martin 4 months ago.

Viewing 4 posts - 16 through 19 (of 19 total)
  • Author

  • Martin
    Participant

    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/


    lucoe
    Participant

    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.

    • This reply was modified 4 months ago by  lucoe.

    lucoe
    Participant

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


    Martin
    Participant

    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/

Viewing 4 posts - 16 through 19 (of 19 total)

You must be logged in to reply to this topic.