1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
5 <title>Rico Accordion & Grid</title>
7 <script src="LoadRicoClient.js" type="text/javascript"></script>
\r
8 <link href="../demo.css" type="text/css" rel="stylesheet" />
\r
10 <script type='text/javascript'>
\r
12 Rico.onLoad( function() {
\r
14 [1,'Cell 1:2','Cell 1:3','Cell 1:4','Cell 1:5'],
\r
15 [2,'Cell 2:2','Cell 2:3','Cell 2:4','Cell 2:5'],
\r
16 [3,'Cell 3:2','Cell 3:3','Cell 3:4','Cell 3:5'],
\r
17 [4,'Cell 4:2','Cell 4:3','Cell 4:4','Cell 4:5'],
\r
18 [5,'Cell 5:2','Cell 5:3','Cell 5:4','Cell 5:5'],
\r
19 [6,'Cell 6:2','Cell 6:3','Cell 6:4','Cell 6:5']
\r
21 for (var i=1; i<=3; i++) {
23 useUnformattedColWidth: false,
\r
28 menuEvent : 'click',
\r
29 columnSpecs : [{Hdg:'Column 1',type:'number', decPlaces:0, ClassName:'alignright'},
\r
35 var buffer=new Rico.Buffer.Base();
\r
36 for (var j=0; j < myData.length; j++)
\r
37 myData[j][0]=i*100+j+1;
\r
38 buffer.loadRowsFromArray(myData);
\r
39 var grid=new Rico.LiveGrid ('ex'+i, buffer, opts);
\r
40 grid.menu=new Rico.GridMenu();
42 alert('The grids have been sized, so now initialize the accordion');
\r
43 new Rico.Accordion( 'accordionExample', {panelHeight:200});
\r
46 <style type="text/css">
\r
49 height: 200px; /* allow grids to size during initialization */
58 div.ui-accordion-header, .Rico_accTitle {
\r
66 <h1>Rico Accordion & Grid</h1>
68 <p id='libname'>Base Library:
\r
69 <script type='text/javascript'>
\r
70 document.write(Rico.Lib+' '+Rico.LibVersion);
\r
75 <div id="accordionExample">
78 <div class="panelheader">
81 <div class="panelContent" id='panel1'>
82 This example illustrates how to include LiveGrids in an Accordion.
85 One key is the following grid options:
87 windowResize : false, /* don't resize grids if window is resized */
88 visibleRows : -4, /* size grid to parent element */
\r
90 combined with the following css:
93 height: 200px; /* allow grids to size during initialization */
101 <div class="panelheader">
104 <div class="panelContent">
105 <p class="ricoBookmark"><span id="ex1_bookmark"> </span></p>
\r
106 <div id="ex1"></div>
\r
111 <div class="panelheader">
114 <div class="panelContent">
115 <p class="ricoBookmark"><span id="ex2_bookmark"> </span></p>
\r
116 <div id="ex2"></div>
\r
122 <div class="panelheader">
125 <div class="panelContent">
126 <p class="ricoBookmark"><span id="ex3_bookmark"> </span></p>
\r
127 <div id="ex3"></div>
\r