Start Building Professional
Web Apps Today

(dhtmlxFolder) item automatically resizes back after changing the size of internal element

Hello.

I am currently working on a webpage that uses dhtmlxFolder to display the records from server in terms of table style. (with custom paging enabled) In this I am trying to make each of the item in the table expandable when a button in each item is clicked. (so that the page looks like accordion, in a way)

so here's what I am trying to create

|___item___| when button is clicked, the item will expand

|___item___|
| |
| content | where the content is different for each item
|--------------|

for each of the item, I am creating a division (unique id) at the end of the xsl definition for dhtmlxFolder and making the display of this division 'none' so it doesn't display at the beginning, but attaching a function to each of the onclick event for button, so when it is clicked, the division will show.

the code for division is set to
<div style="display:none;width:480px;height:50px;">
<xsl:attribute name="id">modify_id_<xsl:value-of select="./id"/></xsl:attribute>
<xsl:value-of select="./title"/>
</div> where the "./id" is unique id

and i am using the following code to make the section display
<xsl:attribute name="onclick"> attach onto a button
document.getElementById('modify_id_<xsl:value-of select="./id"/>').style.display = '';
</xsl:attribute>

but here's the problem
whenever the button is clicked there's nothing happening in the page
and I tried adding in
<xsl:attribute name="onclick">
document.getElementById('modify_id_<xsl:value-of select="./id"/>').style.display = '';
alert(document.getElementById('modify_id_<xsl:value-of select="./id"/>').style.width);
</xsl:attribute>
to the code to see if it's actually being called. and it seems to work as I see the corresponding division actually opens up but as soon as the code gets to the alert and the button in alert window is clicked, the size of the item resize back to the original size making it impossible to see the change without the alert function and loss the point of having the division in the first place.

is the size of the display in each item always resized after something happens?
if so is there a way to work around it to achieve what I am trying to make?, or what can I do to make the change in style.display permenant until another button is clicked and the other section opens and the first one closes
if not, what might be the problem here? could it be that I am just doing something wrong?


Thanks in advance.

>>is the size of the display in each item always resized after something happens? 
There is no any kind of size restriction, but each time when item selected or deselected - it fully re-rendered, so if have the button inside element the next will occur

a) click on button
b) element expanded
c) event reach component
d) item marked as selected
e) selected item re-rendered ( in closed state )

You can try to stop event on your button as

<xsl:attribute name="onclick"> 
document.getElementById('modify_id_<xsl:value-of select="./id"/>').style.display = ''; 
(arguments[0]||event).cancelBubble=true;
</xsl:attribute>