Using dhtmlxForm object in Lightbox

Scheduler Javascript
#1

Is it possible to use dhtmlxForm as a custom Lightbox? I tried to do this by ovewriting showLightbox method and it seems to work partially… However though the form I created this way is displayed under the modal so the page stops working at all. The code I use is following:

[code]
Layout.content_pane.attachHTMLString(
‘#custom_form {’+
’ position: absolute;’+
’ top: 100px;’+
’ left: 200px;’+
’ z-index: 10001;’+
’ display: none;’+
’ background-color: white;’+
’ border: 2px outset gray;’+
’ padding: 20px;’+
’ font-family: Tahoma;’+
’ font-size: 10pt;’+
’ width: 400px;’+
‘}’+
‘

’ +
‘
’ +
‘
’ +
’
 
’ +
’
 
’ +
‘
’ +
‘
’ +
‘
’ +
‘
’ +
‘
’ +
‘
’ +
‘
’ +
‘
’ +
‘
’ +
‘
’ +
‘
’);
scheduler.init(‘scheduler_here’, new Date(), “week”); 
        scheduler.load("/get-events", 'json');

scheduler.showLightbox = function(id){
var ev = scheduler.getEvent(id);
var formConfig = Config.form_1;
exampleForm = new dhtmlXForm(“custom_form”, formConfig);//Layout.content_pane.attachForm(formConfig);
exampleForm.enableLiveValidation(true);
exampleForm.attachEvent(“onButtonClick”, function(name) {
switch(name) {
case “add”:
scheduler.endLightbox(false, exampleForm);
break;
case “save”:
var ev = scheduler.getEvent(scheduler.getState().lightbox_id);
console.log(ev);
//ev.text = document.getElementById(“some_input”).value;
scheduler.endLightbox(true, exampleForm);
break;
}
});
scheduler.startLightbox(id, document.getElementById(‘custom_form’) );
}[/code]

#2

Any suggestions?

#3

Hi,
this is a correct approach to use dhtmlxForm. You create a DIV element where you initialize the form, right. You need to use “startLightbox” method for the custom lightbox instead of “showLightbox”, for example:

[code]scheduler.myForm = new dhtmlXForm(“form_container”, [
{type:“input”, name:“text”, label:“Text:”, width:220},
{type:“newcolumn”},
{type:“button”, name:“save”, width:70, offsetTop:10, value:“Save”},
{type:“newcolumn”},
{type:“button”, name:“cancel”,width:70, offsetTop:10, value:“Cancel”},
{type:“newcolumn”},
{type:“button”, name:“delete”,width:70, offsetTop:10, value:“Delete”}
]);

scheduler.myForm.attachEvent(“onButtonClick”, function(id){
var ev = scheduler.getEvent(scheduler.getState().lightbox_id);
switch (id) {
case “save”:
ev.text = scheduler.myForm.getItemValue(“text”);
scheduler.updateEvent(ev.id);
scheduler.endLightbox(true, scheduler.myForm.cont);
break;
case “cancel”:
scheduler.endLightbox(false, scheduler.myForm.cont);
break;
case “delete”:
scheduler.endLightbox(false, scheduler.myForm.cont);
scheduler.deleteEvent(ev.id);
break;
}
});

scheduler.showLightbox = function(id){
var ev = scheduler.getEvent(id);
scheduler.startLightbox(id, scheduler.myForm.cont );
scheduler.myForm.setItemValue(“text”, ev.text);
}[/code]

#4

Thanks for the answer. I tried your code but I still have the same problem: the form is displayed “behind” a modal so it’s unclickable…

#5

Please be sure your form really has

z-index: 10001;

Or try to add “!important;” flag.

#6

That’s the most weird part: I do check z-index but even if I manually edit those values using firebug it doesn’t work… :open_mouth: