View Full Version : yui-ext grid: a few questions.

2 Jan 2007, 1:38 PM

I am trying the yui-ext grid, using an array as the datasource and am having two problems.

1) No matter how much data is in the array, it all displays without vertical scroll bars. It will take up as much length as the data. First, any idea why? Second, how can I set the height of the grid?

2) The clickable headers do not show the text/label in Firefox 1.0 on Solaris. The only other browser I've tried was IE, where it works fine. Also, the examples on the site work on Firefox-- so it is some problem of mine.

3) If the first column is not a unique value for all rows, and one is highlighted, a resort from fieldheader click will select all other rows with that same value. Is there a way to address this?

I checked the help and couldn't find any documentation about this..


I am including these css files and libraries,

<script language="javascript"

<script language="javascript"

<script language="javascript"

<script language="javascript"

<script language="javascript"

<script language="javascript"

<script language="javascript"

<link type="text/css" rel="stylesheet" href="/tmp/javascript/yui/build/fonts/fonts.css">

<link type="text/css" rel="stylesheet" href="/tmp/javascript/yui/build/reset/reset.css">

<link type="text/css" rel="stylesheet" href="/tmp/javascript/yui/build/container/assets/container.css">

<link rel="stylesheet" type="text/css" href="/tmp/javascript/yui-ext/resources/css/reset-min.css" />

<link rel="stylesheet" type="text/css" href="/tmp/javascript/yui-ext/resources/css/grid.css" />

<link rel="stylesheet" type="text/css" href="/tmp/javascript/yui-ext/examples.css" />


A snippet of some code:

<script language=javascript>
var relationsFrom = {
init : function(){

var myData = [
['1-2', 'Backs up'],
['1-2', 'Backs up'],
['1-1', 'Backs up'],
['1-2', 'Backs up'],
['1-4', 'Backs up'],
['1-3', 'Served'],
['1-3', 'Served'],
['1-3', 'Backs up'],
['1-2', 'Backs up'],
['1-2', 'Backs up'],
['1-2', 'Served'],
['1-1', 'Served'],
['1-1', 'Served'],
['1-76', 'Served'],
['1-1', 'Served'],
['1-1', 'Served']

var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);

var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "ID", width: 75, sortable: true},
{header: "Relationship", width: 75, sortable: true}


// create the Grid
var grid = new YAHOO.ext.grid.Grid('relationsFromGrid', dataModel, colModel);

YAHOO.ext.EventManager.onDocumentReady(relationsFrom.init, relationsFrom, true);

<div id="relationsFromGrid" class="ygrid-mso" style="border: 1px solid #cccccc; overflow: hidden; width: 535px; height: 225px;"></div>

The height/width of the div does not seem to do anything.

Thanks for any help,


3 Jan 2007, 7:09 AM
I'm not sure about the height problem. Your code looks fine to mean. Can you put up a link where I can look at it in a debugger and try to figure out the prob?