Rico Accordion & Grid
Rico.loadModule('Accordion');
Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');
Rico.onLoad( function() {
var myData = [
[1,'Cell 1:2','Cell 1:3','Cell 1:4','Cell 1:5'],
[2,'Cell 2:2','Cell 2:3','Cell 2:4','Cell 2:5'],
[3,'Cell 3:2','Cell 3:3','Cell 3:4','Cell 3:5'],
[4,'Cell 4:2','Cell 4:3','Cell 4:4','Cell 4:5'],
[5,'Cell 5:2','Cell 5:3','Cell 5:4','Cell 5:5'],
[6,'Cell 6:2','Cell 6:3','Cell 6:4','Cell 6:5']
];
for (var i=1; i<=3; i++) {
var opts = {
useUnformattedColWidth: false,
defaultWidth : 90,
frozenColumns: 1,
windowResize : false,
visibleRows : -4,
columnSpecs : [{Hdg:'Column 1',type:'number', decPlaces:0, ClassName:'alignright'},
{Hdg:'Column 2'},
{Hdg:'Column 3'},
{Hdg:'Column 4'},
{Hdg:'Column 5'}]
};
var buffer=new Rico.Buffer.Base();
buffer.loadRowsFromArray(myData);
var grid=new Rico.LiveGrid ('ex'+i, buffer, opts);
grid.menu=new Rico.GridMenu();
}
alert('The grids have been sized, so now initialize the accordion');
new Rico.Accordion( $$('div.panelheader'), $$('div.panelContent'),
{panelHeight:200, hoverClass: 'mdHover', selectedClass: 'mdSelected'});
});
body, p {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
.panelheader {
background-color : #6b79a5;
height: 26px;
color : #ced7ef;
font-weight : normal;
border-bottom:1px solid #182052;
border-top:1px solid #BDC7E7;
font-weight : normal;
padding-left: 5px;
}
.mdHover {
background-color : #63699c;
color : #ffffff;
}
.mdSelected {
background-color : #63699c;
color : #ffffff;
font-weight : bold;
}
.panelContent {
border : 1px solid #1f669b;
border-top-width : 0px;
border-bottom-width : 0px;
font-size: smaller;
overflow: auto;
height: 200px; /* allow grids to size during initialization */
}
#accordionExample {
margin-top : 6px;
border : 1px solid #4f4f4f;
width: 500px;
}
Rico Accordion & Grid
Overview
This example illustrates how to include LiveGrids in an Accordion.
One key is the following grid options:
windowResize : false, /* don't resize grids if window is resized */
visibleRows : -4, /* size grid to parent element */
combined with the following css:
.panelContent {
height: 200px; /* allow grids to size during initialization */
}