YUI Library Examples: DataTable Control (beta): Row Selection

DataTable Control (beta): Row Selection

These examples demonstrate "standard" row selection mode and "single" row selection mode.

Date	To	From	Subject

Standard Row Selection with Support for Modifier Keys
Date	To	From	Subject
3/24/1981	Joe	Jenny	Check out my new pictures
2/11/1980	Jane	Jenny	Let's have lunch
12/12/1978	Ann	Jenny	Here's the info you requested
2/11/1974	Bob	Jenny	RE: Let's have lunch
2/10/1974	Charlie	Jenny	Birthday party Saturday
Loading data...

Date	To	From	Subject

Single-Row Selection with Modifier Keys Disabled
Date	To	From	Subject
3/24/1981	Joe	Jenny	Check out my new pictures
2/11/1980	Jane	Jenny	Let's have lunch
12/12/1978	Ann	Jenny	Here's the info you requested
2/11/1974	Bob	Jenny	RE: Let's have lunch
2/10/1974	Charlie	Jenny	Birthday party Saturday
Loading data...

Sample Code for this Example

Data:


1	YAHOO.example.Data = {
2	emails: {
3	account:"jenny@yahoo.com",
4	currStorage: 10,
5	maxStorage: 200,
6	messages: [
7	{XID: "9897",Date:new Date(1981, 2, 24),To:"Joe",From:"Jenny",Unread:false,Subject:"Check out my new pictures"},
8	{XID: "7899",Date:new Date(1980, 1, 11),To:"Jane",From:"Jenny",Unread:false,Subject:"Let's have lunch"},
9	{XID: "6789",Date:new Date(1978, 11, 12),To:"Ann",From:"Jenny",Unread:false,Subject:"Here's the info you requested"},
10	{XID: "4996",Date:new Date(1974, 1, 11),To:"Bob",From:"Jenny",Unread:true,Subject:"RE: Let's have lunch"},
11	{XID: "4544",Date:new Date(1974, 1, 10),To:"Charlie",From:"Jenny",Unread:false,Subject:"Birthday party Saturday"}
12	]
13	}
14	}
	view plain \| print \| ?

CSS:


1	/* custom styles for this example */
2	.yui-skin-sam .yui-dt-body { cursor:pointer; } /* when rows are selectable */
3	#single { margin-top:2em; }
	view plain \| print \| ?

Markup:


1	<div id="standard"></div>
2	<div id="single"></div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.RowSelection = new function() {
3	var myColumnDefs = [
4	{key:"Date",formatter:YAHOO.widget.DataTable.formatDate, sortable:true},
5	{key:"To", sortable:true},
6	{key:"From", sortable:true},
7	{key:"Subject", sortable:true}
8	];
9
10	this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.emails);
11	this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
12	this.myDataSource.responseSchema = {
13	resultsList: "messages",
14	fields: ["Date","To","From","Subject","XID","Date","Attachment"]
15	};
16
17	this.standardSelectDataTable = new YAHOO.widget.DataTable("standard",
18	myColumnDefs, this.myDataSource, {
19	caption:"Standard Row Selection with Support for Modifier Keys"
20	});
21
22	// Subscribe to events for row selection
23	this.standardSelectDataTable.subscribe("rowMouseoverEvent", this.standardSelectDataTable.onEventHighlightRow);
24	this.standardSelectDataTable.subscribe("rowMouseoutEvent", this.standardSelectDataTable.onEventUnhighlightRow);
25	this.standardSelectDataTable.subscribe("rowClickEvent", this.standardSelectDataTable.onEventSelectRow);
26
27	// Programmatically select the first row
28	this.standardSelectDataTable.selectRow(this.standardSelectDataTable.getTrEl(0));
29	// Programmatically bring focus to the instance so arrow selection works immediately
30	this.standardSelectDataTable.focus();
31
32	this.singleSelectDataTable = new YAHOO.widget.DataTable("single",
33	myColumnDefs, this.myDataSource, {
34	caption:"Single-Row Selection with Modifier Keys Disabled",
35	selectionMode:"single"
36	});
37
38	// Subscribe to events for row selection
39	this.singleSelectDataTable.subscribe("rowMouseoverEvent", this.singleSelectDataTable.onEventHighlightRow);
40	this.singleSelectDataTable.subscribe("rowMouseoutEvent", this.singleSelectDataTable.onEventUnhighlightRow);
41	this.singleSelectDataTable.subscribe("rowClickEvent", this.singleSelectDataTable.onEventSelectRow);
42
43	// Programmatically select the first row
44	this.singleSelectDataTable.selectRow(this.singleSelectDataTable.getTrEl(0));
45	};
46	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.RowSelection = new function() {
        var myColumnDefs = [
            {key:"Date",formatter:YAHOO.widget.DataTable.formatDate, sortable:true},
            {key:"To", sortable:true},
            {key:"From", sortable:true},
            {key:"Subject", sortable:true}
        ];

this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.emails);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        this.myDataSource.responseSchema = {
            resultsList: "messages",
            fields: ["Date","To","From","Subject","XID","Date","Attachment"]
        };

this.standardSelectDataTable = new YAHOO.widget.DataTable("standard",
                myColumnDefs, this.myDataSource, {
                    caption:"Standard Row Selection with Support for Modifier Keys"
                });
                
        // Subscribe to events for row selection
        this.standardSelectDataTable.subscribe("rowMouseoverEvent", this.standardSelectDataTable.onEventHighlightRow);
        this.standardSelectDataTable.subscribe("rowMouseoutEvent", this.standardSelectDataTable.onEventUnhighlightRow);
        this.standardSelectDataTable.subscribe("rowClickEvent", this.standardSelectDataTable.onEventSelectRow);

// Programmatically select the first row
        this.standardSelectDataTable.selectRow(this.standardSelectDataTable.getTrEl(0));
        // Programmatically bring focus to the instance so arrow selection works immediately
        this.standardSelectDataTable.focus();
        
        this.singleSelectDataTable = new YAHOO.widget.DataTable("single",
                myColumnDefs, this.myDataSource, {
                    caption:"Single-Row Selection with Modifier Keys Disabled",
                    selectionMode:"single"
                });
                
        // Subscribe to events for row selection
        this.singleSelectDataTable.subscribe("rowMouseoverEvent", this.singleSelectDataTable.onEventHighlightRow);
        this.singleSelectDataTable.subscribe("rowMouseoutEvent", this.singleSelectDataTable.onEventUnhighlightRow);
        this.singleSelectDataTable.subscribe("rowClickEvent", this.singleSelectDataTable.onEventSelectRow);
        
        // Programmatically select the first row
        this.singleSelectDataTable.selectRow(this.singleSelectDataTable.getTrEl(0));
    };
});

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: DataTable Control (beta): Row Selection

Sample Code for this Example

YUI Logger Output:

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: