jQWidgets Forums
Forum Replies Created
-
Author
-
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(); }); });
December 14, 2015 at 12:56 pm in reply to: layout panel titlebar hidden layout panel titlebar hidden #79275hi
thank you very much I´ll check it out and see how to make work.
-
AuthorPosts