Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Jay on Jan 05, 2010 04:33
open dhtmlx forum
Bottom item of an accordion disappears

Dear Sir or Madam,

I have the following question relating ti the accordion-component.
I have a window with an layout in a "2U"-pattern configuration.
In the left pattern there's a grid and a toolbar, all working fine.
In the right pattern I have also a toolbar and now I try to add an accordion with 3 items.

The problem that appears, is that the bottom item disappears to the bottom, if I open one of the others. I don't see it anymore. I can only get it back with the openItem-method.
I tested this also with 4 and 5 items, it's always the bottom item that disappears. The next one stays on the bottom and is visible.
First I thought it could have to do with the forms I attached to the items, so I detached them, but it's still not working.

Here the code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="../dhtmlx/dhtmlxWindows/codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="../dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="../dhtmlx/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../dhtmlx/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
<link rel="STYLESHEET" type="text/css" href="../dhtmlx/dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="../dhtmlx/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../dhtmlx/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_skyblue.css">
<link rel="STYLESHEET" type="text/css" href="../dhtmlx/dhtmlxAccordion/codebase/skins/dhtmlxaccordion_dhx_skyblue.css">

<script src="../dhtmlx/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<script src="../dhtmlx/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<script src="../dhtmlx/dhtmlxConnector/codebase/connector.js"></script>
<script src="../dhtmlx/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<script src="../dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<script src="../dhtmlx/dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
<script src="../dhtmlx/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script src="../dhtmlx/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script src="../dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
<script src="../dhtmlx/dhtmlxAccordion/codebase/dhtmlxaccordion.js"></script>

</head>

<body>

<div id="winVP" style="position: relative; height:600; width:100%;"></div>
<div id="mygrid_container" width="100%" height="100%"></div>


<script>

function editieren()
{
if (wert() == 0)
{
mybar.disableItem("edit");
}
else
{
mybar.enableItem("edit");
}
}

function wert(){

var rowid = mygrid.getSelectedRowId()

if (rowid == null) {

return 0;

}
else {
var id = mygrid.cells(rowid,0);
var mid = id.getValue();
return mid;
}
}

var dhxWins,layoutWin,dhxLayout;
dhxWins = new dhtmlXWindows();
dhxWins.enableAutoViewport(false);
dhxWins.attachViewportTo("winVP");
dhxWins.setImagePath("../dhtmlx/dhtmlxWindows/codebase/imgs/");
dhxLayout = new dhtmlXLayoutObject(dhxWins.createWindow("w1", 0, 0, 900, 590), "2U");
dhxWins.window("w1").setText("Mitgliederverwaltung");
dhxWins.window("w1").denyResize();
dhxWins.window("w1").denyMove();
dhxWins.window("w1").denyPark();
dhxWins.window("w1").button("close").hide();
dhxLayout.cells("a").setText("Übersicht - Anzahl der Sänger(innen): ");
dhxLayout.cells("b").setText("Details");
dhxLayout.cells("b").setWidth(300);
dhxLayout.cells("b").collapse();
var mygrid = dhxLayout.cells("a").attachGrid();
var mybar = dhxLayout.cells("a").attachToolbar();
var mybar2 = dhxLayout.cells("b").attachToolbar();
var myaccord = dhxLayout.cells("b").attachAccordion();

mybar.addButton("neu", "1", "Neues Mitglied anlegen", "../dhtmlx/dhtmlxToolbar/samples/common/imgs/new.gif", "../dhtmlx/dhtmlxToolbar/samples/common/imgs/new_dis.gif");

mybar.addButton("edit", "2", "Mitglied bearbeiten", "../dhtmlx/dhtmlxToolbar/samples/common/imgs/open.gif", "../dhtmlx/dhtmlxToolbar/samples/common/imgs/open_dis.gif");

mybar.addButton("cancel", "3", "Abbrechen", "../dhtmlx/dhtmlxToolbar/samples/common/icons/none.gif", "../dhtmlx/dhtmlxToolbar/samples/common/icons/none.gif");

mybar2.addButton("save", "1", "Speichern", "../dhtmlx/dhtmlxToolbar/samples/common/imgs/save.gif", "../dhtmlx/dhtmlxToolbar/samples/common/imgs/save_dis.gif");

mybar2.addButton("cancel2", "2", "Abbrechen", "../dhtmlx/dhtmlxToolbar/samples/common/icons/none.gif", "../dhtmlx/dhtmlxToolbar/samples/common/icons/none.gif");

editieren ();

mybar2.disableItem("save");
mybar2.disableItem("cancel2");

myaccord.setSkin("dhx_skyblue");
myaccord.setIconsPath("../dhtmlx/dhtmlxAccordion/codebase/imgs/");
myaccord.addItem("chor", "Chordaten");
myaccord.addItem("adress", "Adressdaten");
myaccord.addItem("sonst", "Sonstiges");
myaccord.addItem("sonst3", "Sonstiges");
myaccord.addItem("sonst2", "Sonstiges");

/*
myaccord.cells("chor").attachObject("chrdat");
myaccord.cells("adress").attachObject("adrdat");
myaccord.cells("sonst").attachObject("sondat");
myaccord._enableOpenEffect = false;
myaccord.openItem("chor");
*/

mygrid.setImagePath("../dhtmlx/dhtmlxGrid/codebase/imgs/");

mygrid.setHeader("Id,Name,Vorname,Geburtsdatum,Stimme");

mygrid.attachHeader("#rspan,#text_filter,#text_filter,#text_filter,#select_filter");

mygrid.setInitWidthsP("0,30,30,25,15");

mygrid.setColAlign("center,left,left,center,center");

mygrid.setSkin("dhx_skyblue");

mygrid.setColTypes("ro,ro,ro,ro,ro");

mygrid.setColSorting("int,str,str,str,str");

mygrid.enableStableSorting(true);

mygrid.init();

mygrid.load("../development/mitglieder_con.php",function(){
mygrid.sortRows(2,"str","asc");
mygrid.sortRows(1,"str","asc");

mygrid.hdr.rows[2].onmousedown = mygrid.hdr.rows[2].onclick = function(e) { (e || event).cancelBubble = true;}

var countrow=mygrid.getRowsNum();

dhxLayout.cells("a").setText("Übersicht - Anzahl der Sänger(innen): " + countrow);

});


mygrid.attachEvent("onRowSelect", function(id,ind)
{
editieren();
dhxLayout.cells("b").expand();
myaccord.openItem("sonst2");
});


</script>
</body>
</html>


Thank you for your help.

Faithfully, Jay




Answer posted by Alex (support) on Jan 05, 2010 06:10

Hello,

do you use the latest version of the components ?

the issue wasn't reproduced locally. Please check attached sample 

Attachments (1)
sample.zip127.02 Kb
Answer posted by Jay on Jan 06, 2010 04:25
Hello,

I tried the attached sample, same result. There are 3 "Sonstiges"-Items. If I open one of the first 4 items, the bottom "Sonstiges"-item disappears to the bottom.


Answer posted by Alex (support) on Jan 06, 2010 04:39

Hello,

the issue is confirmed. To solve it please try to call dhxLayout.cells("b").collapse();  method after all accordion items are added:

...

myaccord.addItem("sonst2", "Sonstiges"); 
dhxLayout.cells("b").collapse(); 



Answer posted by Jay on Jan 06, 2010 05:20
Hi,

I'm sorry to disappoint you, but the collapse()-method doesn't have an effect on the accordion's behavior. I tried it in my application and in you attached sample too.
Answer posted by Alex (support) on Jan 06, 2010 05:24

We meants to replace the collapse method call to the end of accordon initialization. In your code it's called before.

The sample is attached

Attachments (1)
sample.zip127.02 Kb
Answer posted by Jay on Jan 06, 2010 05:32
Ok, this way it works. :-)

Thank you very much.