[jjosotoroParticipant]

Hello

SteveV and evgen_2411, I checked the solution you posted and used it as a base for something that I needed; to be more precise, I needed to place my fields in specific positions in the dialogscheduler container, also i used events instead of properties and added some validation to prevent a “not defined” error when a new appointment is to be created. also the input fields where created as plain input’s in your code and I wanted to be jqxInput so I made it that way. It’s only some minor details I think should be considered and I thank you for your solution since it leaded me in the direction I needed.

It may bring new ideas on how to do this.

first the dialog creation:

           $("#scheduler").on('editDialogCreate', function(event){

                var NameField = ''
                var LastNameField = ""
                NameField += "<div>"
                NameField += "<div class='jqx-scheduler-edit-dialog-label'>Nombre</div>"
                NameField += "<div class='jqx-scheduler-edit-dialog-field'><input type='text' id='Name1' /></div>"
                NameField += "</div>"
                LastNameField += "<div>"
                LastNameField += "<div class='jqx-scheduler-edit-dialog-label'>Apellido</div>"
                LastNameField += "<div class='jqx-scheduler-edit-dialog-field'><input type='text' id='LastName1' /></div>"
                LastNameField += "</div>"

                var i = 0;

                $('#dialogscheduler').children('div').each(function () { // loop trough the div's (only first level childs) elements in dialogscheduler
                    i += 1;
                    if (i == 2) { // places the field in the third position.
                    $(this).after(NameField);
                    };
                    if (i == 5) { // places the field in the sixth position.
                    $(this).after(LastNameField);
                    return false; // exits the loop
                    };
                });                

                $('#Name1').jqxInput({ width: '99%', height: 25, placeHolder: 'Nombre' });
                $('#LastName1').jqxInput({ width: '99%', height: 25, placeHolder: 'Apellido' });
            });

next the open dialog:

            $("#scheduler").on('editDialogOpen', function(event){
                var args = event.args;
                var appointment = args.appointment;
                
                if (appointment) {
                    $('#Name1').val(appointment.Name);
                    $('#LastName1').val(appointment.LastName);
                } else{
                    $('#Name1').val('');
                    $('#LastName1').val('');
                };
            });

and finally the appointment change (this is very much the same you posted):

            $("#scheduler").on('appointmentChange', function (event) {
                    var args = event.args;
                    var appointment = args.appointment;

                    appointment.Name = $("#Name1").val();                
                    appointment.LastName = $("#LastName1").val();                
                });            
            });

[jjosotoroParticipant]

hi

thank you very much I´ll check it out and see how to make work.

[Author]

Posts