jQWidgets Forums

jQuery UI Widgets Forums Scheduler add custom control

This topic contains 12 replies, has 8 voices, and was last updated by  Markk 7 years, 10 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • add custom control #78620

    evgen_2411
    Participant

    Hello , i want to add my custom field and control on editDialog form, i add “result” field in array

    	var appointments = new Array();
                var appointment1 = {
                    id: "id1",
                    description: "George brings projector for presentations.",
                    location: "",
                    subject: "Quarterly Project Review Meeting",
                    calendar: "Room 1",
                    start: new Date(2015, 10, 23, 9, 0, 0),
                    end: new Date(2015, 10, 23, 16, 0, 0),
                    result : "резульат выполнения1"   <-----!!!
                }
    

    also i add result field in

    
    var source =
                {
                    dataType: "array",
                    dataFields: [
                        { name: 'id', type: 'string' },
                        { name: 'description', type: 'string' },
                        { name: 'location', type: 'string' },
                        { name: 'subject', type: 'string' },
                        { name: 'calendar', type: 'string' },
                        { name: 'start', type: 'date' },
                        { name: 'end', type: 'date' },
                        { name: 'result', type: 'string'}  <-----!!!
                        
                          
                    ],
    

    and here

    
                    appointmentDataFields:
                    {
                        from: "start",
                        to: "end",
                        id: "id",
                        description: "description",
                        location: "place",
                        subject: "subject",
                        resourceId: "resposible",
                        result: "result"  <-----!!!
                    },
    

    i tried add input in form

    
    editDialogCreate: function (dialog, fields, editAppointment) {
     myfield = $("<div><div class='jqx-scheduler-edit-dialog-label'>чото</div>"+
                        "<div class='jqx-scheduler-edit-dialog-field'><input id='ev_dialog_sm' role='textbox' aria-autocomplete='both' aria-disabled='false' "+
                         " aria-readonly='false' aria-multiline='false' class='' placeholder='' style='width: 100%; height: 25px;' aria-expanded='false'>"+
                        "</div></div>");
       $(dialog).find('#dialogcalendar').append(myfield); <---- HOW I MUST ADD FIELD CORRECTLY??????
    }
    

    so, how correct add new field in form? fields.append(…) dont work
    also how to read and write data from my field to my input?

    Thanks!

    add custom control #78621

    evgen_2411
    Participant

    also, i dont understand, field location, when i open any appointment, and write in input location some text, close dialog form, then create new appointment or open any other where field location is null… after opened form, text in location is same as in last appointment – this is bug or not?

    add custom control #78660

    Peter Stoev
    Keymaster

    Hi evgen_2411,

    We have online demo which demonstrates how to add widgets to the edit dialog: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/scheduler-edit-dialog.htm?arctic

    Best Regards,
    Peter Stoev

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

    add custom control #78676

    evgen_2411
    Participant

    Hello Peter
    O saw this demo!

     // add custom print button.
                        printButton = $("<button style='margin-left: 5px; float:right;'>Print</button>");
                        fields.<strong>buttons</strong>.append(printButton);
    

    what is the “buttons”, what’s block name for fields? fields.append() dont work, where i can see reference? in API reference i dont find that

    ps. heh , my surname is almost like your )) Stroev ))

    add custom control #78680

    Peter Stoev
    Keymaster

    Hi evgen_2411,

    They’re documented in the editDialogCreate event in the API Reference documentation.

    fields is an Object so there is no “append” there. “append” is a jQuery method which you can call only for jQuery objects.

    Best Regards,
    Peter Stoev

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

    add custom control #78923

    SteveV
    Participant

    Hi Guys, I’m trying to accomplish the same thing, add a new input to the edit Dialog. Here’s what I came up with so please correct me if I’m completely off base with how to approach this.

    As evgen_2411 started I added a new property to my appointment “newF”

    var appointment1 = {
                    id: "id1",
                    description: "",
                    location: "",
                    subject: "Test Subject",
                    res: "Room 5",
                    newF: "TEST",
                    start: new Date(2015, 10, 23, 8, 0, 0),
                    end: new Date(2015, 10, 23, 8, 30, 0)
                }

    Next I added the new field to the datafields

    dataFields: [
                        { name: 'id', type: 'string' },
                        { name: 'description', type: 'string' },
                        { name: 'location', type: 'string' },
                        { name: 'subject', type: 'string' },
                        { name: 'res', type: 'string' },
                        { name: 'allDay', type: 'boolean' },
                        { name: 'start', type: 'date' },
                        { name: 'end', type: 'date' },
                        { name: 'newF', type: 'string' }
                    ],

    And then mapped it in the appointmentDataFields as “newfield”

    appointmentDataFields:
                    {
                        from: "start",
                        to: "end",
                        id: "id",
                        description: "description",
                        location: "location",
                        subject: "subject",
                        allDay: "allDay",
                        resourceId: "res",
                        newfield: "newF"
                    },

    Now is where it gets messy (IMO)
    In order to add my new field to the dialog I first created the HTML elements in the body after the scheduler div

    <div id="scheduler"></div>
        <div id="test">
            <div class="jqx-scheduler-edit-dialog-label">New Field</div>
            <div class="jqx-scheduler-edit-dialog-field"><input type="text" id="input1" /></div>
        </div>

    Then I used jQuery to position the field immediately above the buttons in the “editDialogCreate” function

    
    editDialogCreate: function (dialog, fields, editAppointment) {                    
                        $("#dialogscheduler").children().last().before($("#test"));                                        
                    },

    Now when opening the dialog I need to populate the input with the field from the appointment object

    editDialogOpen: function (dialog, fields, editAppointment) {                    
                        $("#input1").val(editAppointment.newfield);
                    },

    Finally, I used the appointmentChange event to save the input box data back to the appointment object

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

    I think that’s it. It seems to work so far but it’s only a proof of concept right now however it feels like there should be an easier way to do this. Any suggestions woudl be appreciated.

    Thanks

    add custom control #78995

    evgen_2411
    Participant

    SteveV, thank you very much.. its work.. !!

    add custom control #79222

    SteveV
    Participant

    Happy to see it’s working for you evgen_2411. I would still like someone from jqWidgets to confirm if this is the correct approach or if I’m just reinventing a more complicated wheel for something that can be achieved much easier. I guess more importantly are there holes in this approach where data could be lost or invalid.

    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();                
                    });            
                });
    add custom control #83071

    alan
    Participant

    Peter,
    I’ve followed this thread and viewed the online demo’s and have used suggestions from the contributors and find myself only partial successful using these suggestions. I would like to see the demo http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/scheduler-edit-dialog.htm?arctic that includes a new field added that also displays a label. I understand how to hide and modify the current data labels. You also mentioned creating a new custom dialog but I’m not sure I’ve come across a demo.
    Thanks for your help.

    add custom control #87694

    eliaz
    Participant

    +1 on that Alan. An example on a NEW FIELD would be very helpful. I can see the custom dialogue for the print button and how it is attached to the custom button, but adding a field is not as straightforward I think, atleast not to me.

    add custom control #88593

    seund
    Participant

    +1 on this. An example of creating a new field would be hugely useful

    add custom control #93504

    Markk
    Participant

    Hi,

    How may I move fields of bottom to the top in dialog control?

    Thank

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

You must be logged in to reply to this topic.