Populate a grid from a javascript array. : Grid « Rico « JavaScript DHTML






Populate a grid from a javascript array.

 
<!--
Apache License, Version 2.0

Revised from Rico 2.0  demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rico LiveGrid-Example 1</title>

<script src="rico21/src/prototype.js" type="text/javascript"></script>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<link href="rico21/examples/client/css/demo.css" type="text/css" rel="stylesheet" />

<script type='text/javascript'>
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']
  ];
  var opts = {  
    useUnformattedColWidth: false,
    defaultWidth : 90,
    visibleRows  : 'data',
    frozenColumns: 1,
    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 ex1=new Rico.LiveGrid ('ex1', buffer, opts);
  ex1.menu=new Rico.GridMenu();
});
</script>


</head>

<body>
<div id='explanation'>
This example demonstrates how to populate a grid from a javascript array.
<pre>
  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']
  ];
  var buffer=new Rico.Buffer.Base();
  buffer.loadRowsFromArray(myData);
</pre>
</div>

<p class="ricoBookmark"><span id="ex1_bookmark">&nbsp;</span></p>
<div id="ex1"></div>

</body>
</html>

   
  








Related examples in the same category

1.Populate a grid from an HTML table