Print Page - accordion, change collabsible options

Title: accordion, change collabsible options
Post by: msvabik on December 02, 2014, 06:15:26 AM

Hi,
I saw a demo page "Keep Expandable Panel in Accordion"

Code:

<div class="easyui-accordion" style="width:500px;height:300px;">
 <div title="Top Panel" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding:10px;">
<input class="easyui-searchbox" prompt="Enter something here" style="width:300px;height:25px;">
</div>

and I have a question:
How can I change options collapsible:false to collapsible:true, using javascript, after the page is rendered?

Thx

Title: Re: accordion, change collabsible options
Post by: stworthy on December 02, 2014, 08:46:06 AM

Please try the following code:

Code:

var p = $('#aa').accordion('getPanel',0);
if (p){
  p.panel('options').collapsible = true;
  p.panel('options').collapsed = true;
  p.panel('header').find('a.accordion-collapse').show();
  $('#aa').accordion('select',0).accordion('resize');
}

Title: Re: accordion, change collabsible options
Post by: msvabik on December 03, 2014, 01:27:34 AM

Thank you, it works great.

Title: Re: accordion, change collabsible options
Post by: msvabik on December 03, 2014, 01:37:28 AM

And another question on a similar theme:
This code does not show up correctly the second panel (img C1.PNG):

Code:

 <div class="easyui-accordion" data-options="multiple:true,fit:true" id="zadanka_new">
 	<div title="T1" data-options="collapsed:false,collapsible:false" style="overflow:auto;padding:5px;">
	<p>Up ...</p>
	 </div>
	 <div title="T2" data-options="collapsed:false,collapsible:false" style="overflow:auto;padding:5px;">
	 <table class="easyui-datagrid" striped="true" data-options="singleSelect:true,collapsible:true,fit:true">
	 <thead>
	 	<tr>
	 		<th data-options="field:'itemid'">ID</th>
	 	</tr>
	 </thead>
	 <tbody>
	 	<tr><td>125487</td></tr>
	 </tbody>
 	</table>
 	</div> 
 </div>

and this code is OK (img C2.PNG) However, the second panel is collabsible:

Code:

 <div class="easyui-accordion" data-options="multiple:true,fit:true" id="zadanka_new">
 	<div title="T1" data-options="collapsed:false,collapsible:false" style="overflow:auto;padding:5px;">
	<p>Up ...</p>
	 </div>
	 <div title="T2" data-options="collapsed:false,collapsible:true" style="overflow:auto;padding:5px;">
	 <table class="easyui-datagrid" striped="true" data-options="singleSelect:true,collapsible:true,fit:true">
	 <thead>
	 	<tr>
	 		<th data-options="field:'itemid'">ID</th>
	 	</tr>
	 </thead>
	 <tbody>
	 	<tr><td>125487</td></tr>
	 </tbody>
 	</table>
 	</div> 
 </div>

This is BUG?

Title: Re: accordion, change collabsible options
Post by: msvabik on December 04, 2014, 03:43:16 AM

I need to have two fixed panels and in the second I need to have a table. But the table is not visible.

No idea?

Title: Re: accordion, change collabsible options
Post by: stworthy on December 04, 2014, 08:52:52 AM

Please set the height for the accordion panel.

Code:

<div class="easyui-accordion" data-options="multiple:true,fit:true" id="zadanka_new">
  <div title="T1" data-options="collapsed:false,collapsible:false" style="overflow:auto;padding:5px;">
  <p>Up ...</p>
   </div>
   <div title="T2" data-options="collapsed:false,collapsible:false" style="overflow:auto;height:200px;padding:5px;">
  </div> 
</div>

Title: Re: accordion, change collabsible options
Post by: msvabik on December 05, 2014, 05:56:57 AM

Thank you,
I set the height parameter and table shows. I thought that if I set fit = true then accordion sets the height according to available heigt.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: msvabik on December 02, 2014, 06:15:26 AM