jQWidgets Forums

Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • in reply to: add custom control add custom control #81407

    jjosotoro
    Participant

    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();                
                    });            
                });
    in reply to: layout panel titlebar hidden layout panel titlebar hidden #79275

    jjosotoro
    Participant

    hi

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

Viewing 2 posts - 1 through 2 (of 2 total)