I have a Toolbar setup based on one of the samples (see below for code).
I attach a Popup to a toolbar button. Next I attach a Layout with a Grid to the Popup.
The grid with data appear fine in the popup, but when I select a row in the grid the popup hides. This is confirmed by the callbacks that fire.
However, when I attach just the grid to the popup, I can select a row and the popup remains visible.
The latter behavior is correct, the first is incorrect.
Please advice how to work around this.
Thanks.
The code:
<!DOCTYPE html>
<html>
<head>
<title>Attach layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css"/>
<script src="../codebase/dhtmlx.js"></script>
<style>
#myToolbar {
margin: 10px;
}
</style>
<script>
var myToolbar;
var myPop;
var myLayout, myGrid;
function doOnLoad() {
myToolbar = new dhtmlXToolbarObject({
parent: "myToolbar",
icons_path: "common/imgs/",
xml: "common/toolbar.xml",
onload: function() {
myToolbar.setItemText("workbut", "Layout");
myPop = new dhtmlXPopup({ toolbar: myToolbar, id: "workbut" });
myPop.attachEvent("onShow", function(){
if (!myLayout) {
myLayout = myPop.attachLayout(500, 300, "1C");
myGrid = myLayout.cells("a").attachGrid();
myGrid.setHeader("Book title,Author,Price");//the headers of columns
myGrid.setInitWidths("250,150,100"); //the widths of columns
myGrid.setColAlign("left,left,left"); //the alignment of columns
myGrid.setColTypes("ed,ed,ed"); //the types of columns
myGrid.setColSorting("str,str,int"); //the sorting types
myGrid.init();
myGrid.attachEvent("onRowSelect",function(rId,cId){
alert("Row with id="+rId+" " + cId +" was selected");
});
}
var data={
rows:[
{ id:1, data: ["A Time to Kill", "John Grisham", "100"]},
{ id:2, data: ["Blood and Smoke", "Stephen King", "1000"]},
{ id:3, data: ["The Rainmaker", "John Grisham", "-200"]}
]};
myGrid.clearAll();
myGrid.parse(data,"json");
});
myPop.attachEvent("onHide", function(){ alert("The popup window is hidden"); });
}
});
}
</script>
</head>
<body onload="doOnLoad()">
<div id="myToolbar"></div>
</body>
</html>