PDA

View Full Version : Grid Header Tooltips



tryanDLS
27 Nov 2006, 12:15 PM
I was playing around with putting tooltips on the col headers of a grid. Might be worth adding to the code, or at least inspire you to do something cooler ;)



cm = new YAHOO.ext.grid.DefaultColumnModel(
[{header:'Index', hidden:true /*width:50*/},
{header:'Name', width: 90, tooltip:'Click to sort'},
{header:'Code', width: 50},
{header:'Viewable', width:65, editor:new YAHOO.ext.grid.CheckboxEditor(), renderer:renderBool}
]);


In gridview.js
var htemplate = dh.createTemplate({
tag: 'span', cls: 'ygrid-hd ygrid-header-{0}', children: [{
tag: 'span',
cls: 'ygrid-hd-body',
html: '<table>' +
'<tbody><tr><td><span>{1}</span></td>' +
'<td><span></span><span></span></td>' +
'</tr></tbody></table>'
}]
});
htemplate.compile();
for(var i = 0; i < colCount; i++){
var hd = htemplate.append(hrow, [i, colModel.getColumnHeader(i), colModel.getColumnTooltip(i)]);
var spans = hd.getElementsByTagName('span');
hd.textNode = spans[1];
hd.sortDesc = spans[2];


in DefaultColumnModel.js
/**
* Returns the tooltip for the specified column.
* @param {Number} col The column index
* @return {String}
*/
getColumnTooltip : function(col){
return this.config[col].tooltip;
},
/**
* Sets the tooltip for a column.
* @param {Number} col The column index
* @param {String} tooltip The new tooltip
*/
setColumnTooltip : function(col, header){
this.config[col].tooltip = tooltip;
//this.onTooltipChange.fireDirect(this, col, tooltip); // TODO-maybe:
},

jack.slocum
27 Nov 2006, 3:36 PM
Great idea! It stripped your html attributes though. Can your repost it with Disable HTML checked? :)

tryanDLS
27 Nov 2006, 3:51 PM
Let's try this way.


cm = new YAHOO.ext.grid.DefaultColumnModel(
[{header:'Index', hidden:true /*width:50*/},
{header:'Name', width: 90, tooltip:'Click to sort'},
{header:'Code', width: 50},
{header:'Viewable', width:65, editor:new YAHOO.ext.grid.CheckboxEditor(), renderer:renderBool}
]);


In gridview.js
var htemplate = dh.createTemplate({
tag: 'span', cls: 'ygrid-hd ygrid-header-{0}', children: [{
tag: 'span',
cls: 'ygrid-hd-body',
html: '<table border="0" cellpadding="0" cellspacing="0" title="{2}">' +
'<tbody><tr><td><span>{1}</span></td>' +
'<td><span class="sort-desc"></span><span class="sort-asc"></span></td>' +
'</tr></tbody></table>'
}]
});
htemplate.compile();
for(var i = 0; i < colCount; i++){
var hd = htemplate.append(hrow, [i, colModel.getColumnHeader(i), colModel.getColumnTooltip(i) ]);
var spans = hd.getElementsByTagName('span');
hd.textNode = spans[1];
hd.sortDesc = spans[2];


in DefaultColumnModel.js
/**
* Returns the tooltip for the specified column.
* @param {Number} col The column index
* @return {String}
*/
getColumnTooltip : function(col){
return this.config[col].tooltip;
},
/**
* Sets the tooltip for a column.
* @param {Number} col The column index
* @param {String} tooltip The new tooltip
*/
setColumnTooltip : function(col, header){
this.config[col].tooltip = tooltip;
//this.onTooltipChange.fireDirect(this, col, tooltip); // TODO-maybe:
},

jack.slocum
27 Nov 2006, 3:59 PM
I put it in, my only change was:

var hd = htemplate.append(hrow, [i, colModel.getColumnHeader(i), colModel.getColumnTooltip(i) || '']);

This way if it's undefined there won't be any 'undefined' tooltips (DomHelper may correct this already though).

tryanDLS
27 Nov 2006, 4:07 PM
Must be getting handled, cuz my sample only set a tooltip on one of the cols. That brings up another thought. Have you considered doing more complex stuff with the template code? For example in this case being able to do a null check within the append logic to eliminate the creation of the templated item, in this case 'title="""'? That might have to be on a parm-by-parm basis - maybe not worth the complication.

jack.slocum
27 Nov 2006, 5:43 PM
Yes, I want to do more with the templates. The more I use them, the more features I want. I'm sure it will be coming soon. :D

Animal
28 Nov 2006, 12:20 AM
One great thing with templates would be to allow actual HTMLelements/Elements in config objects:

As a trivial example (You'd use .wrap() in this case if you didn't want a footer):

[code]
YAHOO.ext.DomHelper.append(document.body,
{
tag:"div",
cls:"ydlg",
children: [ { tag:"div", cls:"ydlg-hd" }, elementToUseAsBody...]
});

How could you detect whether an property of a config object was an element or a config object? Perhaps if it doesn't have a "tag" property, then it's a String/HTMLElement/Element to be inserted at that point.

jack.slocum
28 Nov 2006, 5:11 AM
The problem is in standard mode it builds a monster string out of parent+children and inserts them all at once. There's no node by node insertion so inserting a particular node at a particular point would be very tricky.