YUI Library Examples: DataTable Control: Row Selection

DataTable Control: Row Selection

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

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

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

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

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Library Examples: DataTable Control: Row Selection

Sample Code for this Example

Configuration for This Example

YUI Logger Output:

DataTable Control Examples:

More DataTable Control Resources: