View Full Version : grid sort marks all rows by the first column

21 Nov 2006, 11:18 AM
I have a really wierd issue. You can see the code below. Essentially I have two different possible values (actually images) in the first column. When I have no row selected I can sort and nothing gets automatically selected. But if I now select a row and now click on any of the sort buttons, it automatically selects all rows that have the same value/image in the first column.


border:1px solid #c3daf9;
border-top:1px solid #DCEAFB;
border-left:1px solid #DCEAFB;


<script type="text/javascript" language="javascript">
// <![CDATA[

var message_list = {
init : function(){
var myData = [
['read.jpg','Aril29','Lorem ...','12.11.2006','MMS','100kb'],
['unread.jpg','Aril29','Lorem ...','12.11.2006','MMS','300kb'],
['read.jpg','Sandy-from-the-sun','Lorem ...','12.11.2006','MMS','300kb'],
['unread.jpg','Aril29','Lorem ...','12.11.2006','MMS','220kb'],
['unread.jpg','Aril29','Lorem ...','12.11.2006','MMS','230kb'],
['read.jpg','ZONE','Lorem ...','12.11.2006','SMS',''],
['read.jpg','Aril29','Lorem ...','12.11.2006','MMS','300kb'],
['read.jpg','Sandy-from-the-sun','Lorem ...','12.11.2006','MMS','300kb'],
['unread.jpg','Sandy-from-the-sun','Lorem ...','12.11.2006','SMS',''],
['read.jpg','Aril29','Lorem ...','12.11.2006','SMS',''],
['unread.jpg','ZONE','Lorem ...','12.11.2006','MMS','80kb'],
['unread.jpg','Aril29','Lorem ...','12.11.2006','SMS',''],
['read.jpg','Aril29','Lorem ...','12.11.2006','MMS','150kb'],
['read.jpg','Aril29','Lorem ...','12.11.2006','MMS','120kb'],
var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "", width: 40, sortable: true},
{header: "Absender", width: 130, sortable: true},
{header: "Text", width: 330, sortable: true},
{header: "Datum", width: 75, sortable: true},
{header: "Art", width: 50, sortable: true},
{header: "Anh&auml;nge", width: 85, sortable: true}

// create the Grid
var grid = new YAHOO.ext.grid.Grid('message_list', dataModel, colModel);
var start = new Date().getTime();

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

// ]]>

<div id="message_list" style="border: 1px solid #cccccc; overflow: hidden; width: 710px; height: 360px;"></div>

21 Nov 2006, 11:25 AM
Selections are maintained by the row's id. In a DefaultDataModel, the default row id is the value in the first column. You will need to provide a function to return a true row id.

dataModel.getRowId = function(rowIndex){
return (your id for this row);

The default is:

getRowId : function(rowIndex){
return this.data[index][0];

21 Nov 2006, 1:48 PM
ah cool thx ..
can i have a "hidden" column which i can use as the first column (or as the source of the unique row id)?
seems like the easiest solution ..

21 Nov 2006, 2:04 PM
Yes. You can do something like:

var dm, cm, sm, grid, rowIndex=0;
cm = new YAHOO.ext.grid.DefaultColumnModel(
[{header:'Index', hidden:true /*width:50*/},
{header:'type', hidden:true},
{header:'Name', width: 90},
{header:'Code', width: 50},
{header:'Viewable', width:65, editor:new YAHOO.ext.grid.CheckboxEditor(), renderer:renderBool}
cm.defaultSortable = true;

// data schema.
// rowIndex is a dummy column that will hold an auto-generated row number
// __type will be hidden by the cm
var schema = {
fields: ['rowIndex', '__type', 'Name', 'Code', 'IsContentViewable']

dm = new YAHOO.ext.grid.JSONDataModel(schema);

dm.onLoad.subscribe(onLoad.createDelegate(this)); // handle data load event
dm.onLoadException.subscribe(showError.createDelegate(this)); // handle load error event

dm.addPreprocessor(0, function() {return ++rowIndex;}); // incr the rowIndex as each row is added
dm.on('beforeload', function() {rowIndex = 0;}); // init the rowIndex before load

21 Nov 2006, 2:25 PM
BTW, I couldn't help but notice you have the dreaded extra comma bug as well.

['unread.jpg','Aril29','Lorem ...','12.11.2006','SMS',''],
['read.jpg','Aril29','Lorem ...','12.11.2006','MMS','150kb'],
['read.jpg','Aril29','Lorem ...','12.11.2006','MMS','120kb'], <-- extra comma

21 Nov 2006, 11:29 PM
thx you so much!

22 Nov 2006, 3:58 AM
one more question .. is there anywhere a description of the style sheet classes? specifically I have a few icons I need to display which have a greater height than the default. similarily i would like to vertical align things in the middle. so i guess the general question is what classes are useful when styling column cells?

22 Nov 2006, 8:13 AM
You could

a) read the source and see how the HTML elements are built, or
b) if you use FF and an extention like WebDeveloper you can mouseover html elements and see the css classes and html ids of any element.

At some point the CSS files may get documented, but IMO, I would think that's a lower priority than getting all the code documented.

22 Nov 2006, 9:13 AM
Using Firefox, install the Firebug (http://www.getfirebug.com/) extension and use the Inspect option to mouse over your page and examine css classnames, element ids, etc. on the fly. It will change the way you debug your pages, especially when trying to figure out foreign stylesheets and/or see how your style tags are getting rendered.