add custom control

[evgen_2411Participant]

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!

[evgen_2411Participant]

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?

[Peter StoevKeymaster]

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/

[evgen_2411Participant]

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 ))

[Peter StoevKeymaster]

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/

[SteveVParticipant]

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

[evgen_2411Participant]

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

[SteveVParticipant]

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.

[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();                
                });            
            });

[alanParticipant]

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.

[eliazParticipant]

+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.

[seundParticipant]

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

[MarkkParticipant]

Hi,

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

Thank

[Author]

Posts