grid sort marks all rows by the first column

[lsmith]

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.

<style>

.message_list{
  float:right;
  width:600px;
  border:1px solid #c3daf9;
  border-top:1px solid #DCEAFB;
  border-left:1px solid #DCEAFB;
  font-size:10px;
  padding:8px;
}

</style>

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

var message_list = {
    init : function(){
      var myData = [
        ['[img]read.jpg[/img]','Aril29','Lorem ...','12.11.2006','MMS','100kb'],
        ['[img]unread.jpg[/img]','Aril29','Lorem ...','12.11.2006','MMS','300kb'],
        ['[img]read.jpg[/img]','Sandy-from-the-sun','Lorem ...','12.11.2006','MMS','300kb'],
        ['[img]unread.jpg[/img]','Aril29','Lorem ...','12.11.2006','MMS','220kb'],
        ['[img]unread.jpg[/img]','Aril29','Lorem ...','12.11.2006','MMS','230kb'],
        ['[img]read.jpg[/img]','ZONE','Lorem ...','12.11.2006','SMS',''],
        ['[img]read.jpg[/img]','Aril29','Lorem ...','12.11.2006','MMS','300kb'],
        ['[img]read.jpg[/img]','Sandy-from-the-sun','Lorem ...','12.11.2006','MMS','300kb'],
        ['[img]unread.jpg[/img]','Sandy-from-the-sun','Lorem ...','12.11.2006','SMS',''],
        ['[img]read.jpg[/img]','Aril29','Lorem ...','12.11.2006','SMS',''],
        ['[img]unread.jpg[/img]','ZONE','Lorem ...','12.11.2006','MMS','80kb'],
        ['[img]unread.jpg[/img]','Aril29','Lorem ...','12.11.2006','SMS',''],
        ['[img]read.jpg[/img]','Aril29','Lorem ...','12.11.2006','MMS','150kb'],
        ['[img]read.jpg[/img]','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();
      grid.render();
    }
  }

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

// ]]>
</script>

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

[jack.slocum]

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];
}

[lsmith]

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 ..

[tryanDLS]

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 = {
		root:'States',
		id:'use-index',
		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
	dm.loadData(data);

[jack.slocum]

BTW, I couldn't help but notice you have the dreaded extra comma bug as well.

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

[lsmith]

thx you so much!

[lsmith]

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?

[tryanDLS]

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.

[brian.moeskau]

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.