Unfortunately, freeze column is not supporting in YUI Datatable(2.8.1). Therefore, a very rough and simple solution came out for the current project i worked on. Simply, 2 datatables are combined into one; a paginator and a datasource are shared by those 2 datatables. Common events( row click, cell click, header cell click) are taken care too.

This solution is not clever and buggy but solved my problem. If you know any trick to solve this issue, please leave comment or contact me at jebberwocky@gmail.com. I will be glad to refer the solution 🙂

html:

<table cellpadding=0 cellspacing=0 border=0 >
<tr><td valign=top><div id="datatablef"></div></td>
<td valign=top><div id="datatable"></div></td>
</tr>
</table>

css:


td .yui-dt-liner{height:16px; text-overflow:clip; white-space:nowrap} /* for row line-up */
.yui-skin-sam .yui-dt-paginator {text-align:left;}

javascript:

YAHOO.example.Data ={ YOUR JSON DATA }

YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.Basic = function() {
	var myColumnDefs = [
		{ table def}
	];

	var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.Testing);
	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
	myDataSource.responseSchema = {
		fields: 'isValid','prjid','ntkno','project','oem_no'... //more columns
		],
		selectionMode: "single"
	};

	var myDataSourceFront = new YAHOO.util.DataSource(YAHOO.example.Data.Testing);
	myDataSourceFront.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
	myDataSourceFront.responseSchema = {
		fields: [
                      {key:'ntkno', sortable:true, label:'Neotek No.', hidden:false},
                      {key:'oem_no', sortable:true, label:"OEM No.", hidden:false}
 ],
 selectionMode: "single"
 };

 var myRowFormatter = function(elTr, oRecord) {
 if (oRecord.getData('isValid') == 'false') {
 YAHOO.util.Dom.addClass(elTr, 'mark');
 }
 return true;
 };

// shared paginar
 var __paginar = new YAHOO.widget.Paginator({
 rowsPerPage: 20
 });

//scrolling Datatable
 var myDataTable = new YAHOO.widget.ScrollingDataTable("datatable",
 myColumnDefs, myDataSource,{width:"700px",formatRow: myRowFormatter, paginator: __paginar});

// the "freeze columns"
 var myDataTableFront = new YAHOO.widget.DataTable("datatablef",
 [
 {key:'ntkno', sortable:true, label:'Neotek No.', hidden:false},
 {key:'oem_no', sortable:true, label:"OEM No.", hidden:false}
 ], myDataSourceFront, {formatRow: myRowFormatter, paginator: __paginar});

// events
 myDataTableFront.subscribe("theadCellClickEvent", function(agr)
 {
 sortState = myDataTableFront.getState().sortedBy
 var sort = sortState ? sortState.key : "id";
 var dir = sortState ? sortState.dir : "yui-dt-desc";
 myDataTable.sortColumn(myDataTable.getColumn(sort),dir);
 });

 myDataTable.subscribe("theadCellClickEvent", function(agr)
 {
 sortState = myDataTable.getState().sortedBy
 var sort = sortState ? sortState.key : "id";
 var dir = sortState ? sortState.dir : "yui-dt-desc";
 myDataTableFront.sortColumn(myDataTable.getColumn(sort),dir);
 });

 myDataTableFront.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
 myDataTableFront.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
 myDataTableFront.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);
 myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
 myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
 myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);

 return {
 oDS: myDataSource,
 oDT: myDataTable
 };
}();

Uncategorized

, , ,

2010/09/15

1 Comment