Pop not displayed properly when attached to a toolbar

Suite and Optimus Suite 5
#1

Hi,

I’m facing some problem in displaying a popup which is attached to a toolbar button, below is the code sample.

document.getElementById(“layout”).style.height = document.body.offsetHeight - 20;
mainLayout = new dhtmlXLayoutObject({
parent : “layout”,
pattern : “2E”
});
//////toolbar attached to a cell layout “a”
headToolbar = mainLayout.cells(“a”).attachToolbar();
headToolbar.setIconsPath(‘public/styles/images/toolbar/’);
headToolbar.addButton(“new”, 0, “New”, “new.gif”, “new_dis.gif”);
headToolbar.addSeparator(“sep1”, 1);
headToolbar.addButton(“delete”, 2, “Delete”, “iconDelete.gif”, “iconDelete_dis.gif”);
headToolbar.addSeparator(“sep3”, 3);
headToolbar.addButton(“dataDetails”, 4, “Data”, “message-info.png”, “message-info.png”);
headToolbar.addSeparator(“sep5”, 5);
headToolbar.addButton(“save”, 6, “Save”, “iconSave.gif”, “iconSave_dis.gif”);
headToolbar.addSeparator(“sep5”, 7);

//////////////////grid attached to a cell layout “b”
MainGrid = mainLayout.cells(‘b’).attachGrid();
MainGrid.setImagePath(“dhtmlx4.5/codebase/imgs/”); MainGrid.setHeader(“FieldCode,#cspan,Purpose,Repeating,Category,Options,Field_Id,EOS_SEQ,EOS_SEQ_ID”);
MainGrid.setInitWidths(“80,,,,,*,0,0,0”);
…
////////////popup with form displayed when clicked on any button of toolbar(Toolbar which is attached to layout cells “a”
DataPopup = new dhtmlXPopup({ toolbar: headToolbar, id: “dataDetails” });
DataPopup.setSkin(“dhx_skyblue”);
var htmlStringPopup = “

”;
DataPopup.attachHTML(htmlStringPopup);
var DataformData;
DataformData = [
{type: “settings”, position: “label-left”, labelWidth: 110, inputWidth: 130},
{type: “input”, label: “Template Code”, name: “code”},
{type: “input”, label: “Template Description”, name: “desc”},
{type: “button”, value: “Proceed”, offsetLeft: 25}
];

Check the below screenshot in which pop is displayed.
From the screenshot you can see that the portion where pop is displayed(the area occupied in the toolbar is completely vanished displayed in white colour)

snapshot (1).jpg1077×583 45.3 KB

#2

Hi

please specify your browser

#3

I’m using IE 8.

#4

Well, works fine localy in IE8. Please check my screenshot, see data in red, what values do you have here?

screenshot.png1676×897 84.2 KB

#5

Hi,

Whenever I click on the button for populating popup below code will get called and popup is displayed.

//////////////////////////////
function getDataDetails(){

var htmlString = “

”;

var ruleGridPopup = new dhtmlXPopup({
	toolbar : headToolbar,
	id : "dataDetails"
});
ruleGridPopup.attachHTML(htmlString);

var popupForm = ruleGridPopup.attachForm([ {
	type : "settings",
	position : "label-left",
	labelWidth : 110,
	inputWidth : 130
}, {
	type : "input",
	label : "Rule Name",
	name : "rn"
}, {
	type : "input",
	label : "Rule Exp",
	name : "re"
}, {
	type : "button",
	value : "Proceed",
	label : "Rule Exp",
	offsetLeft : 25
} ]);
popupForm.setSkin("dhx_skyblue");
ruleGridPopup.setSkin("dhx_skyblue");
ruleGridPopup.show();

popupForm.attachEvent("onButtonClick", function() {

});
}

popup partially loaded.png2418×1114 126 KB


popup fully loaded.png2418×1114 126 KB

#6

Hi

try to update to latest version

#7

Hi,

I’m using latest version(4.5) only…

Same thing wen I tried in chrome(Screenshot attached),Pop is perfectly visible. Problem is with IE8 only…I can’t change my code for working with >IE8 due to some restrictions…Kindly help me out or give me any other solution/idea.

My Screen looks like this first a window is loaded and again in that window attached a layout and again in that layout I attached toolbar and grid.

Untitled.png2418×1114 119 KB