displaying html links in datatable thead

Board index » YUI 2.x: » DataTable and DataSource

Page 1 of 1

[ 4 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

ravikiran

Username: ravikiran1288
Joined: Mon Nov 07, 2011 9:17 pm
Posts: 94

displaying html links in datatable thead

Posted: Fri Nov 11, 2011 4:41 am

+0-

Can any one give me an simple example of displaying anchar tags in column headers in datatable

say we have a table

Student
Name RollNo Age
ram 1 20
sham 2 25

only Name,RollNo,Age should have anchor tags in blue color(i.e First Row thead).If i click on name it show go to
http://www.yahoo.com. If i click on age it should go to http://www.yuilibrary.com. Is this possible.

ravikiran

Username: ravikiran1288
Joined: Mon Nov 07, 2011 9:17 pm
Posts: 94

Re: displaying html links in datatable thead

Posted: Fri Nov 11, 2011 4:57 am

+0-

sample code here title column header is not clickable see the below code

YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.Basic = function() {
var myColumnDefs = [
{key:"id", sortable:true, resizeable:true},
{key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
{key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
{key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
{key:"title",formatter:"myCustom", resizeable:true}
];

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: ["id","date","quantity","amount","title"]
};
YAHOO.widget.DataTable.Formatter.myCustom = function(el, oRecord, oColumn, oData) {

if(YAHOO.lang.isString(oData)) {

el.innerHTML = "<a href=\"" + oData + "\">" + oData + "</a>";

} else {

el.innerHTML = YAHOO.lang.isValue(oData) ? OData : "";

}

};

Satyam

YUI Contributor

Username: Satyam
Joined: Tue Dec 09, 2008 12:34 am
Posts: 2016
Location: Sitges, Spain
GitHub: Satyam
Gists: Satyam
IRC: DevaSatyam

Re: displaying html links in datatable thead

Posted: Fri Nov 11, 2011 8:51 am

+0-

You can use the label property in the column definition. The value for that property is usually a simple string, and it defaults to the value of the key if undefined, however, it can also be plain HTML code such as an anchor. Cell formatters are for formating the data cells under the header, not the header itself.

ravikiran

Username: ravikiran1288
Joined: Mon Nov 07, 2011 9:17 pm
Posts: 94

Re: displaying html links in datatable thead

Posted: Fri Nov 11, 2011 8:59 am

+0-

Thanks satyam.Is it possible to use resize feature of data table without affecting existing functionaly of my existing table.I dont want any css of datatable i want only resize feature of datatable

Page 1 of 1

[ 4 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum